From dc946e4f379644fb516304784605da25946f3853 Mon Sep 17 00:00:00 2001
From: Krish Agarwal <agarwalkrish526@gmail.com>
Date: Sun, 26 Jul 2026 18:14:30 +0530
Subject: [PATCH] Add:gallery images

---
 src/config/gallary.js         |  27 +--
 src/config/teammate.js        |   4 +-
 src/pages/gallery/Gallery.jsx | 378 +++++++++++++++++++++++-----------
 3 files changed, 273 insertions(+), 136 deletions(-)

diff --git a/src/config/gallary.js b/src/config/gallary.js
index 94da7b3..a44bb63 100644
--- a/src/config/gallary.js
+++ b/src/config/gallary.js
@@ -1,4 +1,19 @@
+import img2026_1 from "../assets/2026.jpg";
+import img2026_2 from "../assets/2026 (2).jpg";
+
 const images = [
+  {
+    id: 101,
+    src: img2026_1,
+    alt: "Gallery Image 2026 1",
+    year: 2026,
+  },
+  {
+    id: 102,
+    src: img2026_2,
+    alt: "Gallery Image 2026 2",
+    year: 2026,
+  },
   {
     id: 0,
     src: "https://res.cloudinary.com/dbnfkkfov/image/upload/v1759606221/WhatsApp_Image_2025-10-04_at_20.38.01_n5yqjt.jpg",
@@ -161,12 +176,6 @@ const images = [
     alt: "Gallery Image 26",
     year: 2025,
   },
-  {
-    id: 27,
-    src: "https://res.cloudinary.com/dsjxx976j/image/upload/v1756627317/asme126_eqyzzs.jpg",
-    alt: "ASME Image 1",
-    year: "others",
-  },
   {
     id: 28,
     src: "https://res.cloudinary.com/dsjxx976j/image/upload/v1756627315/asme132_vzqgiw.jpg",
@@ -353,12 +362,6 @@ const images = [
     alt: "ASME Image 32",
     year: "others",
   },
-  {
-    id: 59,
-    src: "https://res.cloudinary.com/dsjxx976j/image/upload/v1756627213/asme1_ksyaia.jpg",
-    alt: "ASME Image 33",
-    year: "others",
-  },
 ];
 
 export default images;
diff --git a/src/config/teammate.js b/src/config/teammate.js
index 7311c12..8f6d10f 100644
--- a/src/config/teammate.js
+++ b/src/config/teammate.js
@@ -11,7 +11,7 @@ const teamMembers = [
   {
     name: "Aayush Barik",
     title: "Vice President",
-    img: "https://res.cloudinary.com/ddoeahbpv/image/upload/Aayush_Barik_Vice_President_klgnid.jpg",
+    img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1785069742/Aayush_Barik_Vice_President_2_wbg5bq.jpg",
     description: "2",
     team: "Executive Body",
     linkedin: "https://www.linkedin.com/in/aayush-barik-668843339/",
@@ -139,7 +139,7 @@ const teamMembers = [
   {
     name: "Yegnesh Sagar",
     title: "Captain",
-    img: "https://res.cloudinary.com/ddoeahbpv/image/upload/images_1_ujpf6e.jpg",
+    img: "https://res.cloudinary.com/dm406z4pf/image/upload/v1785069027/1784538371641_vmsozp.png",
     description: "18",
     team: "Team Bluebird",
     linkedin: "https://www.linkedin.com/in/yegnesh-sagar-89778b348/",
diff --git a/src/pages/gallery/Gallery.jsx b/src/pages/gallery/Gallery.jsx
index 9639f59..9863d42 100644
--- a/src/pages/gallery/Gallery.jsx
+++ b/src/pages/gallery/Gallery.jsx
@@ -1,174 +1,308 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback, useMemo } from "react";
 import images from "../../config/gallary";
+import { ChevronLeft, ChevronRight, Maximize2, X } from "lucide-react";
 
-const NavButton = ({ direction, onClick }) => {
-  const isNext = direction === "next";
-  return (
-    <button
-      className="absolute top-1/2 -translate-y-1/2 z-30 bg-black/30 hover:bg-black/50 text-white w-10 h-10 rounded-full flex items-center justify-center"
-      style={{ [isNext ? "right" : "left"]: "1rem" }}
-      onClick={onClick}
-      aria-label={`${isNext ? "Next" : "Previous"} slide`}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        strokeWidth={2}
-        stroke="currentColor"
-        className="w-6 h-6"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d={
-            isNext ? "M8.25 4.5l7.5 7.5-7.5 7.5" : "M15.75 19.5L8.25 12l7.5-7.5"
-          }
-        />
-      </svg>
-    </button>
-  );
-};
-
-const YearButton = ({ year, isSelected, onClick }) => {
-  const label = year === "all" ? "All" : String(year);
-  return (
-    <button
-      onClick={onClick}
-      className={`px-4 py-1 rounded-full text-sm md:text-base transition-all ${
-        isSelected
-          ? "bg-[#061946] dark:bg-[#0F2A5F] dark:text-white text-white font-medium"
-          : "bg-gray-100 dark:bg-[#24364F] dark:text-slate-200 text-gray-700 hover:bg-gray-200"
-      }`}
-    >
-      {label === "others" ? "others" : label}
-    </button>
-  );
-};
-
-const GalleryItem = ({ image }) => (
-  <div className="group cursor-pointer overflow-hidden rounded-lg shadow-md hover:shadow-xl transition-all duration-300 break-inside-avoid mb-6">
-    <img
-      src={image.src}
-      alt={image.alt}
-      className="w-full object-cover group-hover:scale-105 transition-transform duration-300"
-      loading="lazy"
-    />
-  </div>
-);
-
-export default function GallaryPage() {
+export default function GalleryPage() {
   const [selectedYear, setSelectedYear] = useState("all");
   const [currentSlide, setCurrentSlide] = useState(0);
+  const [lightboxIndex, setLightboxIndex] = useState(null);
+  const [failedImages, setFailedImages] = useState({});
+
+  // Slide Images for top hero (uses first 6 images from dataset)
+  const heroSlides = useMemo(
+    () => images.slice(0, Math.min(images.length, 6)),
+    [],
+  );
 
+  // Auto Hero Slider (5s interval)
   useEffect(() => {
+    if (heroSlides.length === 0) return;
     const interval = setInterval(() => {
-      setCurrentSlide((prev) => (prev + 1) % images.length);
+      setCurrentSlide((prev) => (prev + 1) % heroSlides.length);
     }, 5000);
     return () => clearInterval(interval);
+  }, [heroSlides.length]);
+
+  // Build sorted years list (numeric years sorted, then string years)
+  const years = useMemo(() => {
+    const allYears = Array.from(new Set(images.map((img) => img.year)));
+    const numericYears = allYears
+      .filter((y) => typeof y === "number")
+      .sort((a, b) => b - a);
+    const stringYears = allYears
+      .filter((y) => typeof y === "string" && y !== "all")
+      .sort();
+    return ["all", ...numericYears, ...stringYears];
   }, []);
 
-  // Build years list keeping numeric years sorted, then string years
-  const allYears = Array.from(new Set(images.map((image) => image.year)));
-  const numericYears = allYears
-    .filter((y) => typeof y === "number")
-    .sort((a, b) => a - b);
-  const stringYears = allYears
-    .filter((y) => typeof y === "string" && y !== "all")
-    .sort();
-  const years = ["all", ...numericYears, ...stringYears];
-
-  const galleryImages = (() => {
+  // Filtered gallery images for grid
+  const galleryImages = useMemo(() => {
     if (selectedYear === "all") return images;
-    // if selectedYear is a string that is not numeric, filter by exact match
     if (typeof selectedYear === "string" && isNaN(Number(selectedYear))) {
-      return images.filter((image) => image.year === selectedYear);
+      return images.filter((img) => img.year === selectedYear);
     }
-    // otherwise treat as numeric year
-    return images.filter((image) => image.year === Number(selectedYear));
-  })();
+    return images.filter((img) => img.year === Number(selectedYear));
+  }, [selectedYear]);
+
+  // Fallback image helper
+  const getImageSrc = useCallback(
+    (image) => {
+      if (failedImages[image.id]) {
+        return "https://res.cloudinary.com/dbnfkkfov/image/upload/v1759606221/WhatsApp_Image_2025-10-04_at_20.38.01_n5yqjt.jpg";
+      }
+      return image.src;
+    },
+    [failedImages],
+  );
+
+  const handleImageError = (id) => {
+    setFailedImages((prev) => ({ ...prev, [id]: true }));
+  };
+
+  // Lightbox Controls
+  const openLightbox = (index) => {
+    setLightboxIndex(index);
+    document.body.style.overflow = "hidden";
+  };
+
+  const closeLightbox = () => {
+    setLightboxIndex(null);
+    document.body.style.overflow = "auto";
+  };
+
+  const nextLightbox = useCallback(() => {
+    if (lightboxIndex === null || galleryImages.length === 0) return;
+    setLightboxIndex((prev) => (prev + 1) % galleryImages.length);
+  }, [lightboxIndex, galleryImages.length]);
+
+  const prevLightbox = useCallback(() => {
+    if (lightboxIndex === null || galleryImages.length === 0) return;
+    setLightboxIndex((prev) =>
+      prev === 0 ? galleryImages.length - 1 : prev - 1,
+    );
+  }, [lightboxIndex, galleryImages.length]);
+
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (lightboxIndex === null) return;
+      if (e.key === "Escape") closeLightbox();
+      if (e.key === "ArrowRight") nextLightbox();
+      if (e.key === "ArrowLeft") prevLightbox();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [lightboxIndex, nextLightbox, prevLightbox]);
 
   return (
-    <div className="w-full dark:bg-slate-900">
-      {/* Hero Banner Carousel */}
-      <div className="relative h-[280px] sm:h-[320px] md:h-[400px] lg:h-[480px] w-full overflow-hidden">
-        {/* Carousel Slides */}
+    <div className="w-full dark:bg-slate-900 bg-white min-h-screen transition-colors duration-300">
+      {/* Clean Large Hero Photo (Textless, clearly visible like Achievement section) */}
+      <div className="relative h-[300px] sm:h-[380px] md:h-[460px] w-full overflow-hidden bg-slate-900">
         <div className="relative h-full w-full">
-          {images.map((image, index) => (
+          {heroSlides.map((slide, index) => (
             <div
-              key={image.id}
+              key={slide.id || index}
               className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${
                 index === currentSlide ? "opacity-100 z-10" : "opacity-0 z-0"
               }`}
             >
               <img
-                src={image.src}
-                alt={image.alt}
-                className="w-full h-full object-cover brightness-75"
+                src={getImageSrc(slide)}
+                alt={slide.alt || `Hero Slide ${index + 1}`}
+                onError={() => handleImageError(slide.id)}
+                className="w-full h-full object-cover transition-transform duration-[8000ms] ease-out scale-105"
               />
             </div>
           ))}
 
-          {/* Carousel Controls */}
-          <div className="absolute bottom-4 left-0 right-0 z-30 flex justify-center gap-2">
-            {images.map((_, index) => (
-              <button
-                key={index}
-                onClick={() => setCurrentSlide(index)}
-                className={`w-2 h-2 rounded-full transition-all ${index === currentSlide ? "bg-white w-4" : "bg-white/50"}`}
-                aria-label={`Go to slide ${index + 1}`}
-              />
-            ))}
+          {/* Minimal Bottom Slide Indicators */}
+          <div className="absolute bottom-4 left-0 right-0 z-30 flex items-center justify-center gap-3 px-4">
+            <button
+              onClick={() =>
+                setCurrentSlide(
+                  (prev) => (prev - 1 + heroSlides.length) % heroSlides.length,
+                )
+              }
+              className="p-1.5 rounded-full bg-black/40 hover:bg-black/70 text-white transition-all backdrop-blur-sm"
+              aria-label="Previous Slide"
+            >
+              <ChevronLeft className="w-4 h-4" />
+            </button>
+
+            <div className="flex items-center gap-2">
+              {heroSlides.map((_, index) => (
+                <button
+                  key={index}
+                  onClick={() => setCurrentSlide(index)}
+                  className={`h-2 rounded-full transition-all duration-300 ${
+                    index === currentSlide
+                      ? "bg-white w-6"
+                      : "bg-white/50 hover:bg-white/80 w-2"
+                  }`}
+                  aria-label={`Go to slide ${index + 1}`}
+                />
+              ))}
+            </div>
+
+            <button
+              onClick={() =>
+                setCurrentSlide((prev) => (prev + 1) % heroSlides.length)
+              }
+              className="p-1.5 rounded-full bg-black/40 hover:bg-black/70 text-white transition-all backdrop-blur-sm"
+              aria-label="Next Slide"
+            >
+              <ChevronRight className="w-4 h-4" />
+            </button>
           </div>
         </div>
       </div>
 
-      {/* Gallery Content */}
+      {/* Main Gallery Container */}
       <div className="container mx-auto px-4 py-8 md:py-12">
-        {/* Year Filters and Description Section */}
-        <div className="mb-12">
-          <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-6">
+        {/* Header & Controls Section */}
+        <div className="mb-10 space-y-6">
+          {/* Title & Description Header */}
+          <div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
             <div>
-              <h2 className="text-black dark:text-white text-4xl md:text-5xl font-bold leading-tight mb-2">
+              <h2 className="text-[#021640] dark:text-white text-4xl md:text-5xl font-bold leading-tight">
                 Gallery
               </h2>
-              <div className="flex flex-wrap gap-3 mt-4">
-                {years.map((year) => (
-                  <YearButton
-                    key={year}
-                    year={year}
-                    isSelected={selectedYear === year}
-                    onClick={() => setSelectedYear(year)}
-                  />
-                ))}
-              </div>
             </div>
-            <p className="text-black-600 dark:text-gray-300 md:max-w-2xl text-lg md:text-lg">
+            <p className="text-gray-600 dark:text-gray-300 md:max-w-2xl text-base md:text-lg leading-relaxed">
               Step into our visual storybook — where every image captures a
               moment, every frame holds a memory, and every detail speaks of the
-              journey we’ve lived and the beauty we’ve created. Welcome to our
-              gallery, a celebration of experiences brought to life through the
-              lens.
+              journey we’ve lived and the beauty we’ve created.
             </p>
           </div>
-        </div>
 
-        {/* Gallery Grid */}
-        <div className="columns-1 sm:columns-2 lg:columns-3 gap-6 space-y-6">
-          {galleryImages.map((image) => (
-            <GalleryItem key={image.id} image={image} />
-          ))}
+          {/* Clean Controls Bar (Filter Pills) */}
+          <div className="flex items-center justify-between gap-4 pt-4 border-t border-gray-100 dark:border-slate-800">
+            {/* Year Filters */}
+            <div className="flex flex-wrap items-center gap-2">
+              {years.map((year) => {
+                const isSelected = selectedYear === year;
+                const label =
+                  year === "all"
+                    ? "All"
+                    : typeof year === "string"
+                      ? year.charAt(0).toUpperCase() + year.slice(1)
+                      : String(year);
+                return (
+                  <button
+                    key={year}
+                    onClick={() => setSelectedYear(year)}
+                    className={`px-4 py-1.5 rounded-full text-sm font-medium transition-all duration-200 cursor-pointer ${
+                      isSelected
+                        ? "bg-[#061946] dark:bg-[#0F2A5F] dark:text-white text-white shadow-md scale-[1.02]"
+                        : "bg-gray-100 dark:bg-slate-800 dark:text-slate-200 text-gray-700 hover:bg-gray-200 dark:hover:bg-slate-700"
+                    }`}
+                  >
+                    {label}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
         </div>
 
-        {/* No Images Message */}
-        {galleryImages.length === 0 && (
+        {/* Gallery Grid - Fixed to 3 per row on desktop */}
+        {galleryImages.length > 0 ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
+            {galleryImages.map((image, index) => {
+              const imgSrc = getImageSrc(image);
+
+              return (
+                <div
+                  key={image.id || index}
+                  onClick={() => openLightbox(index)}
+                  className="group relative cursor-pointer overflow-hidden rounded-2xl bg-gray-100 dark:bg-slate-800 shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1.5 aspect-[4/3] w-full border border-gray-200/80 dark:border-slate-700/60"
+                >
+                  <img
+                    src={imgSrc}
+                    alt={image.alt || `Gallery Image ${index + 1}`}
+                    onError={() => handleImageError(image.id)}
+                    loading="lazy"
+                    className="w-full h-full object-cover transition-transform duration-500 ease-out group-hover:scale-105"
+                  />
+
+                  {/* Subtle Hover Overlay */}
+                  <div className="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
+                    <div className="p-3.5 rounded-full bg-white/20 dark:bg-black/40 text-white backdrop-blur-md border border-white/30 transform scale-90 group-hover:scale-100 transition-transform duration-300">
+                      <Maximize2 className="w-5 h-5" />
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
           <div className="text-center py-16">
-            <p className="text-gray-500 text-lg">
+            <p className="text-gray-500 dark:text-slate-400 text-lg">
               No images found for selected year.
             </p>
           </div>
         )}
       </div>
+
+      {/* Clean Interactive Lightbox Modal */}
+      {lightboxIndex !== null && galleryImages[lightboxIndex] && (
+        <div
+          className="fixed inset-0 z-50 bg-black/90 backdrop-blur-sm flex flex-col justify-between"
+          onClick={closeLightbox}
+        >
+          {/* Header */}
+          <div
+            className="w-full px-6 py-4 flex items-center justify-between z-30 text-white"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="text-sm font-semibold text-gray-300">
+              {lightboxIndex + 1} of {galleryImages.length}
+            </div>
+
+            <button
+              onClick={closeLightbox}
+              className="p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors"
+              aria-label="Close Lightbox"
+            >
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+
+          {/* Lightbox Main Photo */}
+          <div
+            className="relative flex-1 flex items-center justify-center p-4 sm:p-8"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <button
+              onClick={prevLightbox}
+              className="absolute left-3 sm:left-6 top-1/2 -translate-y-1/2 p-3 rounded-full bg-black/50 hover:bg-black/80 text-white transition-all backdrop-blur-sm z-20"
+              aria-label="Previous Image"
+            >
+              <ChevronLeft className="w-6 h-6" />
+            </button>
+
+            <div className="relative max-w-5xl max-h-[82vh] flex items-center justify-center">
+              <img
+                src={getImageSrc(galleryImages[lightboxIndex])}
+                alt={`Gallery Image ${lightboxIndex + 1}`}
+                className="max-w-full max-h-[82vh] object-contain rounded-lg shadow-2xl"
+              />
+            </div>
+
+            <button
+              onClick={nextLightbox}
+              className="absolute right-3 sm:right-6 top-1/2 -translate-y-1/2 p-3 rounded-full bg-black/50 hover:bg-black/80 text-white transition-all backdrop-blur-sm z-20"
+              aria-label="Next Image"
+            >
+              <ChevronRight className="w-6 h-6" />
+            </button>
+          </div>
+
+          {/* Footer */}
+          <div className="w-full py-4 text-center text-xs text-gray-400 z-30">
+            Press Esc to exit
+          </div>
+        </div>
+      )}
     </div>
   );
 }