MetatroncubeSoftwareSolutions/cibus-industries
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lightbox added

Browse Source
This commit is contained in:
Selvi 2025-07-30 13:34:50 +05:30
parent 46f8463ffa
commit fcd5bcef98
14 changed files with 315 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/(homes)/home-1/page.jsx
View File

@ -29,7 +29,8 @@ export default function Home1() {
<Skills />
<Cta />
<Testimonials />
<Projects />
<Team />
{/* <Projects /> */}
<Faq />
<div className="brand-section fix section-padding">
<Brands />

1
app/layout.jsx
View File

@ -2,6 +2,7 @@
import { useEffect } from "react";
import "../public/assets/scss/styles.scss";
import "yet-another-react-lightbox/styles.css";
import BackToTop from "@/components/common/BackToTop";
import Mouse from "@/components/common/Mouse";
import { usePathname } from "next/navigation";

6
components/footers/Footer1.jsx
View File

@ -113,12 +113,12 @@ export default function Footer1() {
>
<div className="single-footer-widget">
<div className="widget-head">
<h5>Our Services</h5>
<h5>Our Products</h5>
</div>
<ul className="list-area">
{services2.map((elm, i) => (
<li key={i}>
<Link href={`/service-details/${elm.id}`}>
<Link href={`/product`}>
<i className="fa-solid fa-chevrons-right" />
{elm.title}
</Link>
@ -133,7 +133,7 @@ export default function Footer1() {
>
<div className="single-footer-widget">
<div className="widget-head">
<h5>Instagram</h5>
<h5>Our Projects</h5>
</div>
<Gallery>
<div className="footer-gallery">

64
components/homes/home-1/Team.jsx
View File

@ -1,60 +1,66 @@
import { teamMembers } from "@/data/team";
import React from "react";
import { teamMembers2 } from "@/data/team";
import Link from "next/link";
import Image from "next/image";
import AnimatedText from "@/components/common/AnimatedText";
export default function Team() {
return (
<section
id="team"
className="team-section fix section-padding bg-cover scrollSpySection"
style={{ backgroundImage: 'url("/assets/img/team/bg-shape.png")' }}
>
<section className="team-section section-padding">
<div className="shape-1 float-bob-y">
<Image
src="/assets/img/about-page/left-top-element.webp"
width={161}
height={250}
alt="img"
/>
</div>
<div className="shape-2">
<Image
src="/assets/img/about-page/right-bottom3.webp"
width={352}
height={428}
alt="img"
/>
</div>
<div className="container">
<div className="section-title text-center">
<h6 className="wow fadeInUp">
<i className="fa-regular fa-arrow-left-long" />
our team
OUR CORE OPERATIONS
<i className="fa-regular fa-arrow-right-long" />
</h6>
<h2 className="splt-txt wow">
<AnimatedText text="Our Expert Team" />
<AnimatedText text="Experience our efficient" />
<br />
<AnimatedText text="Members" />
<AnimatedText text="workflows and expert handling" />
</h2>
</div>
<div className="row">
{teamMembers.map((member) => (
{teamMembers2.map((member) => (
<div
key={member.id}
className="col-xl-3 col-lg-4 col-md-6 wow fadeInUp"
className={`col-xl-3 col-lg-4 col-md-6 col-sm-6 wow fadeInUp${member.active ? " active" : ""
}`}
data-wow-delay={member.delay}
>
<div
className={`team-card-items ${member.active ? "active" : ""}`}
>
<div className="team-box-items">
<div className="team-image">
<Image
src={member.image}
width={238}
height={294}
alt="img"
width={305}
height={358}
alt="Team"
/>
<div className="social-icon d-flex align-items-center">
{member.socials.map((link, index) => (
<a key={index} href={link.href}>
<i className={link.iconClass} />
</a>
))}
</div>
</div>
<div className="team-content">
<span>{member.role}</span>
<h3>
<Link href={`/team-details/${member.id}`}>
<h5>
<Link href={member.link}>
{member.name}
</Link>
</h3>
</h5>
{/* <p>{member.role}</p> */}
<Link href={member.link} className="icon">
<i className="fa-solid fa-link" />
</Link>
</div>
</div>
</div>

66
components/homes/home-1/Team2.jsx Normal file
View File

@ -0,0 +1,66 @@
import { teamMembers } from "@/data/team";
import React from "react";
import Link from "next/link";
import Image from "next/image";
import AnimatedText from "@/components/common/AnimatedText";
export default function Team() {
return (
<section
id="team"
className="team-section fix section-padding bg-cover scrollSpySection"
style={{ backgroundImage: 'url("/assets/img/team/bg-shape.png")' }}
>
<div className="container">
<div className="section-title text-center">
<h6 className="wow fadeInUp">
<i className="fa-regular fa-arrow-left-long" />
our team
<i className="fa-regular fa-arrow-right-long" />
</h6>
<h2 className="splt-txt wow">
<AnimatedText text="Our Expert Team" />
<br />
<AnimatedText text="Members" />
</h2>
</div>
<div className="row">
{teamMembers.map((member) => (
<div
key={member.id}
className="col-xl-3 col-lg-4 col-md-6 wow fadeInUp"
data-wow-delay={member.delay}
>
<div
className={`team-card-items ${member.active ? "active" : ""}`}
>
<div className="team-image">
<Image
src={member.image}
width={238}
height={294}
alt="img"
/>
<div className="social-icon d-flex align-items-center">
{member.socials.map((link, index) => (
<a key={index} href={link.href}>
<i className={link.iconClass} />
</a>
))}
</div>
</div>
<div className="team-content">
<span>{member.role}</span>
<h3>
<Link href={`/team-details/${member.id}`}>
{member.name}
</Link>
</h3>
</div>
</div>
</div>
))}
</div>
</div>
</section>
);
}

75
components/project/Projects2.jsx
View File

@ -4,6 +4,8 @@ import { projectsData } from "@/data/projects";
import React from "react";
import Image from "next/image";
import AnimatedText from "../common/AnimatedText";
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";
const tabOptions = [
{ key: "desiccated", label: "Coconut Milk Extraction" },
@ -13,25 +15,45 @@ const tabOptions = [
export default function ProjectsData() {
const [activeTab, setActiveTab] = useState("desiccated");
const [lightboxOpen, setLightboxOpen] = useState(false);
const [lightboxImages, setLightboxImages] = useState([]);
const [currentImageIndex, setCurrentImageIndex] = useState(0);
// Filtered projects based on active tab
const filteredProjects = projectsData.filter(
(project) =>
project.category &&
project.category.toLowerCase().includes(activeTab)
);
// Collect unique images from filtered projects
const displayedImages = Array.from(
new Set(
filteredProjects.map((project) => project.images[0]) // Only first image
)
);
// Open lightbox
const handleImageClick = (imageSrc) => {
const index = displayedImages.findIndex((img) => img === imageSrc);
const slides = displayedImages.map((img) => ({ src: img }));
setLightboxImages(slides);
setCurrentImageIndex(index >= 0 ? index : 0);
setLightboxOpen(true);
};
return (
<section className="project-section section-padding fix">
<div className="container">
<div className="section-title text-center">
<h6 className="wow fadeInUp">
<h6>
<i className="fa-regular fa-arrow-left-long" />
Our Global Footprint
<i className="fa-regular fa-arrow-right-long" />
</h6>
<h2 className="splt-txt wow">
<AnimatedText text=" Featured Turnkey Coconut" /><br />
<h2 className="splt-txt">
<AnimatedText text=" Featured Turnkey Coconut" />
<br />
<AnimatedText text=" Processing Projects" />
</h2>
@ -41,8 +63,7 @@ export default function ProjectsData() {
<button
key={tab.key}
onClick={() => setActiveTab(tab.key)}
className={`nav-link ${activeTab === tab.key ? "active fw-bold text-dark" : ""
}`}
className={`nav-link ${activeTab === tab.key ? "active fw-bold text-dark" : ""}`}
style={{
border: "none",
background: "transparent",
@ -71,28 +92,42 @@ export default function ProjectsData() {
<div className="row g-4 mt-5">
{filteredProjects.map((project) => (
<div
key={project.id}
className="col-xl-4 col-lg-6 col-md-6 wow fadeInUp"
data-wow-delay={project.delay}
>
<div key={project.id} className="col-xl-4 col-lg-6 col-md-6">
<div className="project-card-items">
<div className="project-image">
{project.images.map((image, index) => (
<Image
key={index}
width={370}
height={331}
src={image}
alt="img"
/>
))}
<div
className="project-image"
style={{ cursor: "pointer" }}
onClick={() => handleImageClick(project.images[0])}
>
<Image
width={370}
height={331}
src={project.images[0]}
alt={project.title}
style={{
width: "100%",
height: "auto",
display: "block",
background: "transparent",
transition: "none",
}}
/>
</div>
</div>
</div>
))}
</div>
</div>
{/* Lightbox */}
{lightboxOpen && (
<Lightbox
open={lightboxOpen}
close={() => setLightboxOpen(false)}
slides={lightboxImages}
index={currentImageIndex}
/>
)}
</section>
);
}

2
components/turnkey-solutions/page.jsx
View File

@ -9,7 +9,7 @@ export default function About() {
<>
<section
id="about"
className="about-section fix section-padding scrollSpySection"
className="about-section fix section-padding2 scrollSpySection"
>
<div className="about-shape-1 float-bob-x">
<Image

10
data/menu.js
View File

@ -110,9 +110,11 @@ export const onepageLinks = [
];
export const footerLinks = [
{ name: "Home", href: "/" },
{ name: "About Us", href: "/about" },
{ name: "Contact Us", href: "/contact" },
{ name: "Blog & News", href: "/news" },
{ name: "FAQ’S", href: "/faq" },
{ name: "Login / Register", href: "/contact" },
{ name: "Turnkey Solutions", href: "/turnkey-solutions" },
{ name: "Blog", href: "/blog" },
{ name: "Contact", href: "/contact" },
// { name: "FAQ’S", href: "/faq" },
// { name: "Login / Register", href: "/contact" },
];

116
data/services.js
View File

@ -1,67 +1,99 @@
export const serviceItems = [
{
id: 1,
imgSrc: "/assets/img/home/explore/coconut-shell-removal.webp",
iconSrc: "/assets/img/home/explore/icon-1.webp",
imgSrc: "/assets/img/products/coconut-deshelling.webp",
iconSrc: "/assets/img/products/icon-1.webp",
number: "01",
title: "Coconut Shell Removal System",
description: "Remove shells effortlessly with coconut deshelling machines. Built for durability and speed.",
title: "Coconut Deshelling Machine",
description: "Effortlessly remove coconut shells with high-speed, durable, low-maintenance, energy-efficient deshellers built for continuous production.",
},
{
id: 2,
imgSrc: "/assets/img/home/explore/energy-efficient-coconut-dryer.webp",
iconSrc: "/assets/img/home/explore/icon-2.webp",
imgSrc: "/assets/img/products/coconut-dryer.webp",
iconSrc: "/assets/img/products/icon-2.webp",
number: "02",
title: "Energy-Efficient Coconut Dryer",
description: "Accelerate your drying process with coconut dryers designed for uniform moisture removal.",
title: "Coconut Dryer (Hot Air / Tray Type)",
description: "Achieve uniform drying with our energy-efficient, high-capacity dryers designed to preserve quality and extend shelf life.",
},
{
id: 3,
imgSrc: "/assets/img/home/explore/coconut-processing-machinery.webp",
iconSrc: "/assets/img/home/explore/icon-3.webp",
imgSrc: "/assets/img/products/coconut-grinder.webp",
iconSrc: "/assets/img/products/icon-3.webp",
number: "03",
title: "Coconut Processing Machinery",
description: "Custom-engineered coconut processing machinery tailored to your production line.",
title: "Coconut Pulverizer & Grinder",
description: "Grind dried coconut into fine powder with consistent output, low power consumption, minimal maintenance, high efficiency, and smooth operation.",
},
{
id: 4,
imgSrc: "/assets/img/home/explore/coconut-processing-equipment.webp",
iconSrc: "/assets/img/home/explore/icon-4.webp",
imgSrc: "/assets/img/products/coconut-milk-extractor.webp",
iconSrc: "/assets/img/products/icon-4.webp",
number: "04",
title: "Coconut Processing Equipment",
description: "Reliable and compact coconut processing equipment suitable for small to large-scale industries.",
title: "Coconut Milk Extractor",
description: "Extract rich, pure coconut milk with hygienic, food-grade, corrosion-resistant machinery suitable for small and industrial-scale operations.",
},
{
id: 5,
imgSrc: "/assets/img/home/explore/coconut-shell-removal.webp",
iconSrc: "/assets/img/home/explore/icon-1.webp",
number: "01",
title: "Coconut Shell Removal System",
description: "Remove shells effortlessly with coconut deshelling machines. Built for durability and speed.",
imgSrc: "/assets/img/products/coconut-oil.webp",
iconSrc: "/assets/img/products/icon-5.webp",
number: "05",
title: "Virgin Coconut Oil (VCO) Processing Equipment",
description: "From cold press systems to filtration and bottling, complete VCO machinery for value-added production.",
},
{
id: 6,
imgSrc: "/assets/img/home/explore/energy-efficient-coconut-dryer.webp",
iconSrc: "/assets/img/home/explore/icon-2.webp",
imgSrc: "/assets/img/products/coconut-water.webp",
iconSrc: "/assets/img/products/icon-6.webp",
number: "06",
title: "Coconut Water Processing Unit",
description: "Sterilize, filter, and bottle coconut water with our modular, maintainable setups. Designed for scalability, these systems ensure purity and shelf stability.",
},
{
id: 1,
imgSrc: "/assets/img/products/coconut-deshelling.webp",
iconSrc: "/assets/img/products/icon-1.webp",
number: "01",
title: "Coconut Deshelling Machine",
description: "Effortlessly remove coconut shells with high-speed, durable, low-maintenance, energy-efficient deshellers built for continuous production.",
},
{
id: 2,
imgSrc: "/assets/img/products/coconut-dryer.webp",
iconSrc: "/assets/img/products/icon-2.webp",
number: "02",
title: "Energy-Efficient Coconut Dryer",
description: "Accelerate your drying process with coconut dryers designed for uniform moisture removal.",
title: "Coconut Dryer (Hot Air / Tray Type)",
description: "Achieve uniform drying with our energy-efficient, high-capacity dryers designed to preserve quality and extend shelf life.",
},
{
id: 7,
imgSrc: "/assets/img/home/explore/coconut-processing-machinery.webp",
iconSrc: "/assets/img/home/explore/icon-3.webp",
id: 3,
imgSrc: "/assets/img/products/coconut-grinder.webp",
iconSrc: "/assets/img/products/icon-3.webp",
number: "03",
title: "Coconut Processing Machinery",
description: "Custom-engineered coconut processing machinery tailored to your production line.",
title: "Coconut Pulverizer & Grinder",
description: "Grind dried coconut into fine powder with consistent output, low power consumption, minimal maintenance, high efficiency, and smooth operation.",
},
{
id: 8,
imgSrc: "/assets/img/home/explore/coconut-processing-equipment.webp",
iconSrc: "/assets/img/home/explore/icon-4.webp",
id: 4,
imgSrc: "/assets/img/products/coconut-milk-extractor.webp",
iconSrc: "/assets/img/products/icon-4.webp",
number: "04",
title: "Coconut Processing Equipment",
description: "Reliable and compact coconut processing equipment suitable for small to large-scale industries.",
title: "Coconut Milk Extractor",
description: "Extract rich, pure coconut milk with hygienic, food-grade, corrosion-resistant machinery suitable for small and industrial-scale operations.",
},
{
id: 5,
imgSrc: "/assets/img/products/coconut-oil.webp",
iconSrc: "/assets/img/products/icon-5.webp",
number: "05",
title: "Virgin Coconut Oil (VCO) Processing Equipment",
description: "From cold press systems to filtration and bottling, complete VCO machinery for value-added production.",
},
{
id: 6,
imgSrc: "/assets/img/products/coconut-water.webp",
iconSrc: "/assets/img/products/icon-6.webp",
number: "06",
title: "Coconut Water Processing Unit",
description: "Sterilize, filter, and bottle coconut water with our modular, maintainable setups. Designed for scalability, these systems ensure purity and shelf stability.",
},
];
@ -208,23 +240,27 @@ export const services = [
export const services2 = [
{
id: 23,
title: "Construction",
title: "Coconut Deshelling Machine",
},
{
id: 24,
title: "House Renovation",
title: "Coconut Dryer (Hot Air / Tray Type)",
},
{
id: 25,
title: "Material Supply",
title: "Coconut Pulverizer & Grinder",
},
{
id: 26,
title: "Project Management",
title: "Coconut Milk Extractor",
},
{
id: 27,
title: "Heating and Water",
title: "Virgin Coconut Oil (VCO) Processing Equipment",
},
{
id: 28,
title: "Coconut Water Processing Unit",
},
];

26
package-lock.json generated
View File

@ -19,7 +19,8 @@
"react-toastify": "^10.0.5",
"sass": "^1.77.8",
"swiper": "^11.1.9",
"wowjs": "^1.1.3"
"wowjs": "^1.1.3",
"yet-another-react-lightbox": "^3.25.0"
}
},
"node_modules/@babel/runtime": {
@ -827,6 +828,29 @@
"dependencies": {
"animate.css": "latest"
}
},
"node_modules/yet-another-react-lightbox": {
"version": "3.25.0",
"resolved": "https://registry.npmjs.org/yet-another-react-lightbox/-/yet-another-react-lightbox-3.25.0.tgz",
"integrity": "sha512-NaCeEXCpdwoTvoOpxNK9gdW8+oHs79yVH+D2YeVQWRjH5i32e5CoXndAAFP2p8awzVYfSonherrE9JMTpfD3EA==",
"license": "MIT",
"engines": {
"node": ">=14"
},
"peerDependencies": {
"@types/react": "^16 || ^17 || ^18 || ^19",
"@types/react-dom": "^16 || ^17 || ^18 || ^19",
"react": "^16.8.0 || ^17 || ^18 || ^19",
"react-dom": "^16.8.0 || ^17 || ^18 || ^19"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
}
}
}

3
package.json
View File

@ -20,6 +20,7 @@
"react-toastify": "^10.0.5",
"sass": "^1.77.8",
"swiper": "^11.1.9",
"wowjs": "^1.1.3"
"wowjs": "^1.1.3",
"yet-another-react-lightbox": "^3.25.0"
}
}

14
public/assets/css/main.css
View File

@ -5843,6 +5843,20 @@ background-color: #0b2273;
}
}
.section-padding2 {
padding: 120px 0 0;
}
@media (max-width: 1199px) {
.section-padding2 {
padding: 100px 0 0;
}
}
@media (max-width: 991px) {
.section-padding2 {
padding: 80px 0 0;
}
}
.service-section {
position: relative;
z-index: 9;

30
public/assets/scss/_project.scss
View File

@ -308,22 +308,22 @@
right: 0;
}
&:hover {
.project-image {
img {
&:nth-child(1) {
transform-origin: bottom center;
transform: translateX(-100%) translateX(150px) scaleX(0)
rotateY(90deg);
}
// &:hover {
// .project-image {
// img {
// &:nth-child(1) {
// transform-origin: bottom center;
// transform: translateX(-100%) translateX(150px) scaleX(0)
// rotateY(90deg);
// }
&:nth-child(2) {
transition: transform 500ms ease, top 500ms ease;
transform: translateX(0%) translateX(0px) scaleX(1) rotateY(0deg);
}
}
}
}
// &:nth-child(2) {
// transition: transform 500ms ease, top 500ms ease;
// transform: translateX(0%) translateX(0px) scaleX(1) rotateY(0deg);
// }
// }
// }
// }
}
.project-details-wrapper {

14
public/assets/scss/_section.scss
View File

@ -88,5 +88,19 @@
padding: 80px 0;
}
}
.section-padding2 {
padding: 120px 0 0;
}
@media (max-width: 1199px) {
.section-padding2 {
padding: 100px 0 0;
}
}
@media (max-width: 991px) {
.section-padding2 {
padding: 80px 0 0;
}
}
//>>>>> Basic Css End <<<<<//