From 27e4aa5a653b4cd6a555e345c06a753e808ab9b6 Mon Sep 17 00:00:00 2001
From: Krishnakant Sahu <krishnakantsahu916@gmail.com>
Date: Sun, 13 Jul 2025 22:33:01 +0530
Subject: [PATCH 1/5] feat: created the gallery section

---
 src/components/playground/GalarySection.jsx | 46 +++++++++++++++++++++
 src/components/shared/TertiaryButton.jsx    |  9 ++++
 src/config/galary.js                        | 34 +++++++++++++++
 src/main.jsx                                |  2 +
 4 files changed, 91 insertions(+)
 create mode 100644 src/components/playground/GalarySection.jsx
 create mode 100644 src/components/shared/TertiaryButton.jsx
 create mode 100644 src/config/galary.js

diff --git a/src/components/playground/GalarySection.jsx b/src/components/playground/GalarySection.jsx
new file mode 100644
index 0000000..5aaa6bf
--- /dev/null
+++ b/src/components/playground/GalarySection.jsx
@@ -0,0 +1,46 @@
+import TButton from "../shared/TertiaryButton";
+import images from "../../config/galary";
+
+export default function GalarySection() {
+  const getRandomImages = () => {
+    const shuffled = [...images].sort(() => 0.5 - Math.random());
+    return shuffled;
+  };
+
+  const randomImages = getRandomImages();
+
+  return (
+    <div className="w-full max-w-7xl mx-auto px-4 py-8">
+      {/* Header Section */}
+      <div className="text-center mb-8">
+        <h2 className="text-4xl font-bold text-gray-800 mb-4">Image Gallery</h2>
+        <p className="text-black-600 mb-6">
+          Explore our vibrant moments captured in stunning visuals.
+        </p>
+        <TButton>Go to Gallery &gt;</TButton>
+      </div>
+
+      {/* Gallery Grid */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-auto">
+        {randomImages.map((image) => (
+          <div
+            key={image.id}
+            className="group cursor-pointer overflow-hidden rounded-lg shadow-md hover:shadow-xl transition-all duration-300 h-fit"
+          >
+            <div className="relative w-full h-auto">
+              <img
+                src={image.src}
+                alt={image.alt}
+                className="w-full h-full object-contain group-hover:scale-105 transition-transform duration-300 block"
+                loading="lazy"
+                onLoad={(e) => {
+                  e.target.style.display = "block";
+                }}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/shared/TertiaryButton.jsx b/src/components/shared/TertiaryButton.jsx
new file mode 100644
index 0000000..645b9aa
--- /dev/null
+++ b/src/components/shared/TertiaryButton.jsx
@@ -0,0 +1,9 @@
+const TButton = ({ children }) => {
+  return (
+    <div className="bg-[#3773EC] px-3 py-2 inline-block text-white text-base rounded-lg cursor-pointer hover:scale-110 transition-all duration-100 ease-out delay-50">
+      {children}
+    </div>
+  );
+};
+
+export default TButton;
diff --git a/src/config/galary.js b/src/config/galary.js
new file mode 100644
index 0000000..58f006e
--- /dev/null
+++ b/src/config/galary.js
@@ -0,0 +1,34 @@
+const images = [
+  {
+    id: 1,
+    src: "https://res.cloudinary.com/dsjxx976j/image/upload/v1752424604/image-2_yjyxwo.png",
+    alt: "Gallery Image 1",
+  },
+  {
+    id: 2,
+    src: "https://res.cloudinary.com/dsjxx976j/image/upload/v1752424605/image_r6mlez.png",
+    alt: "Gallery Image 2",
+  },
+  {
+    id: 3,
+    src: "https://res.cloudinary.com/dsjxx976j/image/upload/v1752424604/image-3_yezplq.png",
+    alt: "Gallery Image 3",
+  },
+  {
+    id: 4,
+    src: "https://res.cloudinary.com/dsjxx976j/image/upload/v1752424604/image-4_lwzmbl.png",
+    alt: "Gallery Image 4",
+  },
+  {
+    id: 5,
+    src: "https://res.cloudinary.com/dsjxx976j/image/upload/v1752424604/image-1_ruw6yy.png",
+    alt: "Gallery Image 5",
+  },
+  {
+    id: 6,
+    src: "https://res.cloudinary.com/dsjxx976j/image/upload/v1752425766/e8d1afdb4d097b5c14935394e296d28109b650e4_fominv.png",
+    alt: "Gallery Image 6",
+  },
+];
+
+export default images;
diff --git a/src/main.jsx b/src/main.jsx
index 2a0bd58..7e2ea6f 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -6,6 +6,7 @@ import App from "./App.jsx";
 import Playground from "./Playground.jsx";
 import Test from "./components/playground/Test.jsx";
 import Home from "./pages/playground/landing-page/Home.jsx";
+import GalarySection from "./components/playground/GalarySection.jsx";
 
 createRoot(document.getElementById("root")).render(
   <StrictMode>
@@ -15,6 +16,7 @@ createRoot(document.getElementById("root")).render(
         <Route path="playground" element={<Playground />}>
           <Route index element={<Home />} />
           <Route path="test" element={<Test />} />
+          <Route path="galary" element={<GalarySection />} />
         </Route>
       </Routes>
     </BrowserRouter>

From f6ef8f13c8f6e1014116a9b07574a2efaf48a04d Mon Sep 17 00:00:00 2001
From: Krishnakant Sahu <krishnakantsahu916@gmail.com>
Date: Sun, 13 Jul 2025 22:46:05 +0530
Subject: [PATCH 2/5] feat: implemented masonary layout

---
 src/components/playground/GalarySection.jsx | 23 ++++++++-------------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/components/playground/GalarySection.jsx b/src/components/playground/GalarySection.jsx
index 5aaa6bf..5cc1fac 100644
--- a/src/components/playground/GalarySection.jsx
+++ b/src/components/playground/GalarySection.jsx
@@ -4,7 +4,7 @@ import images from "../../config/galary";
 export default function GalarySection() {
   const getRandomImages = () => {
     const shuffled = [...images].sort(() => 0.5 - Math.random());
-    return shuffled;
+    return shuffled.slice(0, 5);
   };
 
   const randomImages = getRandomImages();
@@ -21,23 +21,18 @@ export default function GalarySection() {
       </div>
 
       {/* Gallery Grid */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-auto">
+      <div className="columns-1 sm:columns-2 lg:columns-3 gap-6 space-y-6">
         {randomImages.map((image) => (
           <div
             key={image.id}
-            className="group cursor-pointer overflow-hidden rounded-lg shadow-md hover:shadow-xl transition-all duration-300 h-fit"
+            className="group cursor-pointer overflow-hidden rounded-lg shadow-md hover:shadow-xl transition-all duration-300 break-inside-avoid"
           >
-            <div className="relative w-full h-auto">
-              <img
-                src={image.src}
-                alt={image.alt}
-                className="w-full h-full object-contain group-hover:scale-105 transition-transform duration-300 block"
-                loading="lazy"
-                onLoad={(e) => {
-                  e.target.style.display = "block";
-                }}
-              />
-            </div>
+            <img
+              src={image.src}
+              alt={image.alt}
+              className="w-full object-cover group-hover:scale-105 transition-transform duration-300"
+              loading="lazy"
+            />
           </div>
         ))}
       </div>

From 182eedd62a391c60ff1230b20b4dcecec30d8c33 Mon Sep 17 00:00:00 2001
From: Krishnakant Sahu <krishnakantsahu916@gmail.com>
Date: Mon, 14 Jul 2025 00:00:39 +0530
Subject: [PATCH 3/5] feat: partially done Gallary page

---
 src/config/galary.js          |  6 +++
 src/config/galaryPage.js      | 16 ++++++
 src/main.jsx                  |  2 +
 src/pages/gallary/Gallary.jsx | 92 +++++++++++++++++++++++++++++++++++
 4 files changed, 116 insertions(+)
 create mode 100644 src/config/galaryPage.js
 create mode 100644 src/pages/gallary/Gallary.jsx

diff --git a/src/config/galary.js b/src/config/galary.js
index 58f006e..11e7e98 100644
--- a/src/config/galary.js
+++ b/src/config/galary.js
@@ -3,31 +3,37 @@ const images = [
     id: 1,
     src: "https://res.cloudinary.com/dsjxx976j/image/upload/v1752424604/image-2_yjyxwo.png",
     alt: "Gallery Image 1",
+    year: 2025,
   },
   {
     id: 2,
     src: "https://res.cloudinary.com/dsjxx976j/image/upload/v1752424605/image_r6mlez.png",
     alt: "Gallery Image 2",
+    year: 2025,
   },
   {
     id: 3,
     src: "https://res.cloudinary.com/dsjxx976j/image/upload/v1752424604/image-3_yezplq.png",
     alt: "Gallery Image 3",
+    year: 2025,
   },
   {
     id: 4,
     src: "https://res.cloudinary.com/dsjxx976j/image/upload/v1752424604/image-4_lwzmbl.png",
     alt: "Gallery Image 4",
+    year: 2024,
   },
   {
     id: 5,
     src: "https://res.cloudinary.com/dsjxx976j/image/upload/v1752424604/image-1_ruw6yy.png",
     alt: "Gallery Image 5",
+    year: 2024,
   },
   {
     id: 6,
     src: "https://res.cloudinary.com/dsjxx976j/image/upload/v1752425766/e8d1afdb4d097b5c14935394e296d28109b650e4_fominv.png",
     alt: "Gallery Image 6",
+    year: 2024,
   },
 ];
 
diff --git a/src/config/galaryPage.js b/src/config/galaryPage.js
new file mode 100644
index 0000000..d436111
--- /dev/null
+++ b/src/config/galaryPage.js
@@ -0,0 +1,16 @@
+const heroImages = [
+  {
+    id: 1,
+    src: "https://res.cloudinary.com/dsjxx976j/image/upload/v1752424604/image-2_yjyxwo.png",
+    alt: "Gallery Image 1",
+    year: 2025,
+  },
+  {
+    id: 2,
+    src: "https://res.cloudinary.com/dsjxx976j/image/upload/v1752425766/e8d1afdb4d097b5c14935394e296d28109b650e4_fominv.png",
+    alt: "Gallery Image 1",
+    year: 2025,
+  },
+];
+
+export default heroImages;
diff --git a/src/main.jsx b/src/main.jsx
index 7e2ea6f..3814921 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -7,6 +7,7 @@ import Playground from "./Playground.jsx";
 import Test from "./components/playground/Test.jsx";
 import Home from "./pages/playground/landing-page/Home.jsx";
 import GalarySection from "./components/playground/GalarySection.jsx";
+import GallaryPage from "./pages/gallary/Gallary.jsx";
 
 createRoot(document.getElementById("root")).render(
   <StrictMode>
@@ -17,6 +18,7 @@ createRoot(document.getElementById("root")).render(
           <Route index element={<Home />} />
           <Route path="test" element={<Test />} />
           <Route path="galary" element={<GalarySection />} />
+          <Route path="galaryPage" element={<GallaryPage />} />
         </Route>
       </Routes>
     </BrowserRouter>
diff --git a/src/pages/gallary/Gallary.jsx b/src/pages/gallary/Gallary.jsx
new file mode 100644
index 0000000..705ed15
--- /dev/null
+++ b/src/pages/gallary/Gallary.jsx
@@ -0,0 +1,92 @@
+import { useState } from "react";
+import images from "../../config/galary";
+
+export default function GallaryPage() {
+  const [selectedYear, setSelectedYear] = useState("all");
+
+  const years = ["all", ...new Set(images.map((image) => image.year))].sort();
+
+  const getFilteredImages = () => {
+    if (selectedYear === "all") {
+      return [...images];
+    }
+    return [...images].filter((image) => image.year === Number(selectedYear));
+  };
+
+  const galleryImages = getFilteredImages();
+
+  return (
+    <div className="w-full">
+      {/* Hero Banner */}
+      <div className="relative h-[280px] sm:h-[320px] md:h-[400px] lg:h-[480px] w-full overflow-hidden">
+        <img
+          src="https://res.cloudinary.com/dsjxx976j/image/upload/v1752425766/e8d1afdb4d097b5c14935394e296d28109b650e4_fominv.png"
+          alt="Gallery Hero Banner"
+          className="w-full h-full object-cover brightness-75"
+        />
+      </div>
+
+      {/* Gallery Content */}
+      <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">
+            <div>
+              <h2 className="text-black text-2xl md:text-[48px] font-bold leading-tight mb-2">
+                Gallery
+              </h2>
+              <div className="flex flex-wrap gap-3 mt-4">
+                {years.map((year) => (
+                  <button
+                    key={year}
+                    onClick={() => setSelectedYear(year)}
+                    className={`px-4 py-1 rounded-full text-sm md:text-base transition-all 
+                      ${
+                        selectedYear === year
+                          ? "bg-blue-600 text-white font-medium"
+                          : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                      }`}
+                  >
+                    {year === "all" ? "All Years" : year}
+                  </button>
+                ))}
+              </div>
+            </div>
+            <p className="text-black-600 md:max-w-xl text-sm md:text-base">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Suspendisse varius enim in eros elementum tristique. Duis cursus,
+              mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam
+              libero vitae erat.
+            </p>
+          </div>
+        </div>
+
+        {/* Gallery Grid */}
+        <div className="columns-1 sm:columns-2 lg:columns-3 gap-6 space-y-6">
+          {galleryImages.map((image) => (
+            <div
+              key={image.id}
+              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>
+          ))}
+        </div>
+
+        {/* No Images Message */}
+        {galleryImages.length === 0 && (
+          <div className="text-center py-16">
+            <p className="text-gray-500 text-lg">
+              No images found for selected year.
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

From d10fd3e6fd75f90d84cdd63c162efde993d75988 Mon Sep 17 00:00:00 2001
From: Krishnakant Sahu <krishnakantsahu916@gmail.com>
Date: Mon, 14 Jul 2025 00:06:11 +0530
Subject: [PATCH 4/5] feat: added carousel to the Hero banner

---
 src/pages/gallary/Gallary.jsx | 102 +++++++++++++++++++++++++++++++---
 1 file changed, 95 insertions(+), 7 deletions(-)

diff --git a/src/pages/gallary/Gallary.jsx b/src/pages/gallary/Gallary.jsx
index 705ed15..4693767 100644
--- a/src/pages/gallary/Gallary.jsx
+++ b/src/pages/gallary/Gallary.jsx
@@ -1,8 +1,18 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import images from "../../config/galary";
+import heroImages from "../../config/galaryPage";
 
 export default function GallaryPage() {
   const [selectedYear, setSelectedYear] = useState("all");
+  const [currentSlide, setCurrentSlide] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentSlide((prev) => (prev + 1) % heroImages.length);
+    }, 5000);
+
+    return () => clearInterval(interval);
+  }, []);
 
   const years = ["all", ...new Set(images.map((image) => image.year))].sort();
 
@@ -17,13 +27,91 @@ export default function GallaryPage() {
 
   return (
     <div className="w-full">
-      {/* Hero Banner */}
+      {/* Hero Banner Carousel */}
       <div className="relative h-[280px] sm:h-[320px] md:h-[400px] lg:h-[480px] w-full overflow-hidden">
-        <img
-          src="https://res.cloudinary.com/dsjxx976j/image/upload/v1752425766/e8d1afdb4d097b5c14935394e296d28109b650e4_fominv.png"
-          alt="Gallery Hero Banner"
-          className="w-full h-full object-cover brightness-75"
-        />
+        {/* Carousel Slides */}
+        <div className="relative h-full w-full">
+          {heroImages.map((image, index) => (
+            <div
+              key={image.id}
+              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"
+              />
+            </div>
+          ))}
+
+          {/* Carousel Controls */}
+          <div className="absolute bottom-4 left-0 right-0 z-30 flex justify-center gap-2">
+            {heroImages.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}`}
+              />
+            ))}
+          </div>
+
+          {/* Next/Prev Buttons (optional) */}
+          {heroImages.length > 1 && (
+            <>
+              <button
+                className="absolute left-4 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"
+                onClick={() =>
+                  setCurrentSlide((prev) =>
+                    prev === 0 ? heroImages.length - 1 : prev - 1,
+                  )
+                }
+                aria-label="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="M15.75 19.5L8.25 12l7.5-7.5"
+                  />
+                </svg>
+              </button>
+              <button
+                className="absolute right-4 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"
+                onClick={() =>
+                  setCurrentSlide((prev) => (prev + 1) % heroImages.length)
+                }
+                aria-label="Next 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="M8.25 4.5l7.5 7.5-7.5 7.5"
+                  />
+                </svg>
+              </button>
+            </>
+          )}
+        </div>
       </div>
 
       {/* Gallery Content */}

From f98a57e5480ee2b36c6633ff88497c424755c17f Mon Sep 17 00:00:00 2001
From: Krishnakant Sahu <krishnakantsahu916@gmail.com>
Date: Mon, 14 Jul 2025 00:12:13 +0530
Subject: [PATCH 5/5] fix: optimized the code

---
 src/pages/gallary/Gallary.jsx | 142 +++++++++++++++++-----------------
 1 file changed, 70 insertions(+), 72 deletions(-)

diff --git a/src/pages/gallary/Gallary.jsx b/src/pages/gallary/Gallary.jsx
index 4693767..370e1cf 100644
--- a/src/pages/gallary/Gallary.jsx
+++ b/src/pages/gallary/Gallary.jsx
@@ -2,6 +2,59 @@ import { useState, useEffect } from "react";
 import images from "../../config/galary";
 import heroImages from "../../config/galaryPage";
 
+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 }) => (
+  <button
+    onClick={onClick}
+    className={`px-4 py-1 rounded-full text-sm md:text-base transition-all ${
+      isSelected
+        ? "bg-blue-600 text-white font-medium"
+        : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+    }`}
+  >
+    {year === "all" ? "All Years" : year}
+  </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() {
   const [selectedYear, setSelectedYear] = useState("all");
   const [currentSlide, setCurrentSlide] = useState(0);
@@ -10,20 +63,15 @@ export default function GallaryPage() {
     const interval = setInterval(() => {
       setCurrentSlide((prev) => (prev + 1) % heroImages.length);
     }, 5000);
-
     return () => clearInterval(interval);
   }, []);
 
   const years = ["all", ...new Set(images.map((image) => image.year))].sort();
 
-  const getFilteredImages = () => {
-    if (selectedYear === "all") {
-      return [...images];
-    }
-    return [...images].filter((image) => image.year === Number(selectedYear));
-  };
-
-  const galleryImages = getFilteredImages();
+  const galleryImages =
+    selectedYear === "all"
+      ? images
+      : images.filter((image) => image.year === Number(selectedYear));
 
   return (
     <div className="w-full">
@@ -52,63 +100,29 @@ export default function GallaryPage() {
               <button
                 key={index}
                 onClick={() => setCurrentSlide(index)}
-                className={`w-2 h-2 rounded-full transition-all ${
-                  index === currentSlide ? "bg-white w-4" : "bg-white/50"
-                }`}
+                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}`}
               />
             ))}
           </div>
 
-          {/* Next/Prev Buttons (optional) */}
+          {/* Next/Prev Buttons */}
           {heroImages.length > 1 && (
             <>
-              <button
-                className="absolute left-4 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"
+              <NavButton
+                direction="prev"
                 onClick={() =>
                   setCurrentSlide((prev) =>
                     prev === 0 ? heroImages.length - 1 : prev - 1,
                   )
                 }
-                aria-label="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="M15.75 19.5L8.25 12l7.5-7.5"
-                  />
-                </svg>
-              </button>
-              <button
-                className="absolute right-4 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"
+              />
+              <NavButton
+                direction="next"
                 onClick={() =>
                   setCurrentSlide((prev) => (prev + 1) % heroImages.length)
                 }
-                aria-label="Next 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="M8.25 4.5l7.5 7.5-7.5 7.5"
-                  />
-                </svg>
-              </button>
+              />
             </>
           )}
         </div>
@@ -125,18 +139,12 @@ export default function GallaryPage() {
               </h2>
               <div className="flex flex-wrap gap-3 mt-4">
                 {years.map((year) => (
-                  <button
+                  <YearButton
                     key={year}
+                    year={year}
+                    isSelected={selectedYear === year}
                     onClick={() => setSelectedYear(year)}
-                    className={`px-4 py-1 rounded-full text-sm md:text-base transition-all 
-                      ${
-                        selectedYear === year
-                          ? "bg-blue-600 text-white font-medium"
-                          : "bg-gray-100 text-gray-700 hover:bg-gray-200"
-                      }`}
-                  >
-                    {year === "all" ? "All Years" : year}
-                  </button>
+                  />
                 ))}
               </div>
             </div>
@@ -152,17 +160,7 @@ export default function GallaryPage() {
         {/* Gallery Grid */}
         <div className="columns-1 sm:columns-2 lg:columns-3 gap-6 space-y-6">
           {galleryImages.map((image) => (
-            <div
-              key={image.id}
-              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>
+            <GalleryItem key={image.id} image={image} />
           ))}
         </div>