From fcd5bcef9872d4d44163507df4bc15b13b297d43 Mon Sep 17 00:00:00 2001 From: selvi Date: Wed, 30 Jul 2025 13:34:50 +0530 Subject: [PATCH] lightbox added --- app/(homes)/home-1/page.jsx | 3 +- app/layout.jsx | 1 + components/footers/Footer1.jsx | 6 +- components/homes/home-1/Team.jsx | 64 +++++++------- components/homes/home-1/Team2.jsx | 66 +++++++++++++++ components/project/Projects2.jsx | 75 ++++++++++++----- components/turnkey-solutions/page.jsx | 2 +- data/menu.js | 10 ++- data/services.js | 116 +++++++++++++++++--------- package-lock.json | 26 +++++- package.json | 3 +- public/assets/css/main.css | 14 ++++ public/assets/scss/_project.scss | 30 +++---- public/assets/scss/_section.scss | 14 ++++ 14 files changed, 315 insertions(+), 115 deletions(-) create mode 100644 components/homes/home-1/Team2.jsx diff --git a/app/(homes)/home-1/page.jsx b/app/(homes)/home-1/page.jsx index eb12632..4420c4e 100644 --- a/app/(homes)/home-1/page.jsx +++ b/app/(homes)/home-1/page.jsx @@ -29,7 +29,8 @@ export default function Home1() { - + + {/* */}
diff --git a/app/layout.jsx b/app/layout.jsx index a89e974..b6c2674 100644 --- a/app/layout.jsx +++ b/app/layout.jsx @@ -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"; diff --git a/components/footers/Footer1.jsx b/components/footers/Footer1.jsx index 74532d4..c16d7aa 100644 --- a/components/footers/Footer1.jsx +++ b/components/footers/Footer1.jsx @@ -113,12 +113,12 @@ export default function Footer1() { >
-
Our Services
+
Our Products
    {services2.map((elm, i) => (
  • - + {elm.title} @@ -133,7 +133,7 @@ export default function Footer1() { >
    -
    Instagram
    +
    Our Projects
    diff --git a/components/homes/home-1/Team.jsx b/components/homes/home-1/Team.jsx index a3da599..d97c19e 100644 --- a/components/homes/home-1/Team.jsx +++ b/components/homes/home-1/Team.jsx @@ -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 ( -
    +
    +
    + img +
    +
    + img +
    - our team + OUR CORE OPERATIONS

    - +
    - +

    - {teamMembers.map((member) => ( + {teamMembers2.map((member) => (
    -
    +
    img -
    - {member.socials.map((link, index) => ( - - - - ))} -
    - {member.role} -

    - +

    + {member.name} -
    + + {/*

    {member.role}

    */} + + +
    diff --git a/components/homes/home-1/Team2.jsx b/components/homes/home-1/Team2.jsx new file mode 100644 index 0000000..a3da599 --- /dev/null +++ b/components/homes/home-1/Team2.jsx @@ -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 ( +
    +
    +
    +
    + + our team + +
    +

    + +
    + +

    +
    +
    + {teamMembers.map((member) => ( +
    +
    +
    + img +
    + {member.socials.map((link, index) => ( + + + + ))} +
    +
    +
    + {member.role} +

    + + {member.name} + +

    +
    +
    +
    + ))} +
    +
    +
    + ); +} diff --git a/components/project/Projects2.jsx b/components/project/Projects2.jsx index c4dc6f9..2989fe5 100644 --- a/components/project/Projects2.jsx +++ b/components/project/Projects2.jsx @@ -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 (
    -
    +
    Our Global Footprint
    -

    -
    +

    + +

    @@ -41,8 +63,7 @@ export default function ProjectsData() {

    ); } diff --git a/components/turnkey-solutions/page.jsx b/components/turnkey-solutions/page.jsx index 49950b9..8d5dcd8 100644 --- a/components/turnkey-solutions/page.jsx +++ b/components/turnkey-solutions/page.jsx @@ -9,7 +9,7 @@ export default function About() { <>
    =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 + } + } } } } diff --git a/package.json b/package.json index 9743d1a..d24b651 100644 --- a/package.json +++ b/package.json @@ -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" } } diff --git a/public/assets/css/main.css b/public/assets/css/main.css index b1c7c34..8273b74 100644 --- a/public/assets/css/main.css +++ b/public/assets/css/main.css @@ -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; diff --git a/public/assets/scss/_project.scss b/public/assets/scss/_project.scss index 9ac83ce..39d27fd 100644 --- a/public/assets/scss/_project.scss +++ b/public/assets/scss/_project.scss @@ -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 { diff --git a/public/assets/scss/_section.scss b/public/assets/scss/_section.scss index 76ecdf1..f3464ae 100644 --- a/public/assets/scss/_section.scss +++ b/public/assets/scss/_section.scss @@ -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 <<<<