From 47fd6465f60809ee006627e86a85649413f4c19b Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 13 Mar 2026 16:50:39 +0000
Subject: [PATCH] Update src/app/gallery/page.tsx

---
 src/app/gallery/page.tsx | 169 ++++++++++++++++++++++++---------------
 1 file changed, 104 insertions(+), 65 deletions(-)

diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx
index 8ad5831..69b81c4 100644
--- a/src/app/gallery/page.tsx
+++ b/src/app/gallery/page.tsx
@@ -1,13 +1,16 @@
 "use client";
 
-import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import HeroLogo from "@/components/sections/hero/HeroLogo";
+import HeroSplit from "@/components/sections/hero/HeroSplit";
 import ProductCardOne from "@/components/sections/product/ProductCardOne";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import { useState } from "react";
 
 export default function GalleryPage() {
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+
   const navItems = [
     { name: "Shtëpia", id: "home" },
     { name: "Menu", id: "menu" },
@@ -18,8 +21,7 @@ export default function GalleryPage() {
 
   const footerColumns = [
     {
-      title: "Lidhje të Shpejta",
-      items: [
+      title: "Lidhje të Shpejta",      items: [
         { label: "Shtëpia", href: "/" },
         { label: "Menu", href: "/menu" },
         { label: "Rreth Nesh", href: "/about" },
@@ -27,8 +29,7 @@ export default function GalleryPage() {
       ],
     },
     {
-      title: "Kontakt",
-      items: [
+      title: "Kontakt",      items: [
         { label: "+355 69 351 4999", href: "tel:+355693514999" },
         { label: "Rruga Besim Mema, Tiranë", href: "#" },
         { label: "info@watamitirana.al", href: "mailto:info@watamitirana.al" },
@@ -36,8 +37,7 @@ export default function GalleryPage() {
       ],
     },
     {
-      title: "Në Rrjet",
-      items: [
+      title: "Në Rrjet",      items: [
         { label: "Facebook", href: "#" },
         { label: "Instagram", href: "#" },
         { label: "WhatsApp", href: "#" },
@@ -46,49 +46,31 @@ export default function GalleryPage() {
     },
   ];
 
-  const galleryProducts = [
+  const galleryItems = [
     {
-      id: "gallery-1",
-      name: "Sushi Premium",
-      price: "Koleksion",
-      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rmwkle&_wi=11",
-      imageAlt: "Sushi Premium",
-    },
+      id: "rolls-1",      name: "Philadelphia Roll",      price: "850 Lek",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rmwkle&_wi=1",      category: "Rolls"},
     {
-      id: "gallery-2",
-      name: "Interiori Elegan",
-      price: "Atmosferë",
-      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ewzroy&_wi=4",
-      imageAlt: "Interiori Elegan",
-    },
+      id: "rolls-2",      name: "California Roll",      price: "750 Lek",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rmwkle&_wi=2",      category: "Rolls"},
     {
-      id: "gallery-3",
-      name: "Pjata Nënshënjuese",
-      price: "Pjatë",
-      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rmwkle&_wi=12",
-      imageAlt: "Pjata Nënshënjuese",
-    },
+      id: "rolls-3",      name: "Dragon Roll",      price: "950 Lek",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rmwkle&_wi=3",      category: "Rolls"},
     {
-      id: "gallery-4",
-      name: "Përgatitja e Chefir",
-      price: "Përgatitje",
-      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rmwkle&_wi=13",
-      imageAlt: "Përgatitja e Chefir",
-    },
+      id: "nigiri-1",      name: "Salmon Nigiri Set",      price: "950 Lek",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rmwkle&_wi=4",      category: "Nigiri"},
     {
-      id: "gallery-5",
-      name: "Përvojë Ngrënie",
-      price: "Mysafir",
-      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2o2pt3",
-      imageAlt: "Përvojë Ngrënie",
-    },
+      id: "nigiri-2",      name: "Tuna Nigiri Set",      price: "900 Lek",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rmwkle&_wi=5",      category: "Nigiri"},
     {
-      id: "gallery-6",
-      name: "Dorëzim i Shpejtë",
-      price: "Shërbim",
-      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=f2nlaz",
-      imageAlt: "Dorëzim i Shpejtë",
-    },
+      id: "nigiri-3",      name: "Mixed Nigiri",      price: "1100 Lek",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rmwkle&_wi=6",      category: "Nigiri"},
+    {
+      id: "sashimi-1",      name: "Salmon Sashimi",      price: "1050 Lek",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rmwkle&_wi=7",      category: "Sashimi"},
+    {
+      id: "sashimi-2",      name: "Tuna Sashimi",      price: "1100 Lek",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rmwkle&_wi=8",      category: "Sashimi"},
+    {
+      id: "sashimi-3",      name: "Sashimi Assortment",      price: "1200 Lek",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rmwkle&_wi=9",      category: "Sashimi"},
+    {
+      id: "special-1",      name: "Chef's Special Roll",      price: "1400 Lek",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rmwkle&_wi=10",      category: "Special"},
+    {
+      id: "special-2",      name: "Premium Omakase",      price: "1800 Lek",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rmwkle&_wi=11",      category: "Special"},
+    {
+      id: "special-3",      name: "Spicy Tuna Dragon",      price: "1350 Lek",      imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rmwkle&_wi=12",      category: "Special"},
   ];
 
   return (
@@ -104,47 +86,104 @@ export default function GalleryPage() {
       secondaryButtonStyle="glass"
       headingFontWeight="extrabold"
     >
-      <div id="nav" data-section="nav">
+      <div id="nav" data-section="nav" className="mx-auto px-4 md:px-6">
         <NavbarLayoutFloatingInline
           brandName="Watami Tirana"
-          navItems={navItems}
+          navItems={[
+            { name: "Shtëpia", id: "home" },
+            { name: "Menu", id: "menu" },
+            { name: "Rreth Nesh", id: "about" },
+            { name: "Galeri", id: "gallery" },
+            { name: "Kontakt", id: "contact" },
+          ]}
           button={{
-            text: "Rezervo Tavolë",
-            href: "/contact",
-          }}
+            text: "Rezervo Tavolë",            href: "/contact"}}
           animateOnLoad={true}
         />
       </div>
 
-      <div id="hero-gallery" data-section="hero-gallery">
-        <HeroLogo
-          logoText="Galeria"
-          description="Zbuloni bukurinë e pjatave tona, atmosferën e restorantit dhe përvojën e ngrënies"
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1gbcom&_wi=3"
-          imageAlt="Galeria e Watami"
+      <div id="hero-gallery" data-section="hero-gallery" className="mx-auto px-4 md:px-6">
+        <HeroSplit
+          title="Galeria e Sushit Watami"
+          description="Zbuloni koleksionin tonë premium të fotografive të sushit të gatuar me kujdes. Çdo pjatë është një vepër arti përpunuar nga shefi ynë përvojak."
+          background={{ variant: "radial-gradient" }}
+          imagePosition="right"
+          mediaAnimation="blur-reveal"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1gbcom&_wi=1"
+          imageAlt="Galeria e Watami Tirana"
           buttons={[
-            {
-              text: "Shfletim",
-              href: "#",
-            },
+            { text: "Eksploroj Galerin", href: "#gallery-items" },
+            { text: "Rezervo Tavolë", href: "/contact" },
           ]}
           buttonAnimation="blur-reveal"
         />
       </div>
 
-      <div id="product-gallery" data-section="product-gallery">
+      <div id="gallery-items" data-section="gallery-items" className="mx-auto px-4 md:px-6">
         <ProductCardOne
-          title="Galeria e Fotos"
-          description="Përvojat ose artin kulinar të Watami Tirana përmes fotografisë të arta"
+          title="Koleksioni i Fotografive Premium"
+          description="Eksploroni gallerin tonë të plotë me fotografi cilësore të sushit të gatuar në restorantin Watami Tirana, të organizuara sipas kategorisë."
           textboxLayout="default"
           useInvertedBackground={false}
           gridVariant="bento-grid"
           animationType="blur-reveal"
-          products={galleryProducts}
+          products={galleryItems.map((item) => ({
+            id: item.id,
+            name: item.name,
+            price: item.price,
+            imageSrc: item.imageSrc,
+            imageAlt: item.name,
+            onProductClick: () => setSelectedImage(item.imageSrc),
+          }))}
         />
       </div>
 
-      <div id="footer-gallery" data-section="footer-gallery">
+      {selectedImage && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75 p-4"
+          onClick={() => setSelectedImage(null)}
+        >
+          <div className="relative max-w-4xl w-full max-h-[90vh]" onClick={(e) => e.stopPropagation()}>
+            <img
+              src={selectedImage}
+              alt="Gallery lightbox"
+              className="w-full h-full object-contain rounded-lg"
+            />
+            <button
+              onClick={() => setSelectedImage(null)}
+              className="absolute top-4 right-4 bg-white text-black rounded-full w-10 h-10 flex items-center justify-center hover:bg-gray-200 transition"
+            >
+              ✕
+            </button>
+          </div>
+        </div>
+      )}
+
+      <div id="cta-gallery" data-section="cta-gallery" className="mx-auto px-4 md:px-6">
+        <ContactSplitForm
+          title="Gati të Shijoni Këto Pjata?"
+          description="Rezervo tavolën tënde tani në Watami Tirana dhe eksperimenta vetë cilësinë dhe kujdesin e përgatitjeve të sushit tonë premium."
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1gbcom&_wi=2"
+          imageAlt="Premium sushi reservation"
+          mediaAnimation="blur-reveal"
+          mediaPosition="right"
+          useInvertedBackground={false}
+          inputs={[
+            {
+              name: "name",              type: "text",              placeholder: "Emri yt"},
+            {
+              name: "phone",              type: "tel",              placeholder: "+355 69 xxx xxxx"},
+            {
+              name: "date",              type: "date",              placeholder: "Data e kërkuar"},
+          ]}
+          textarea={{
+            name: "message",            placeholder: "Mesazhi juaj (përjashtim i opsionalit)",            rows: 4,
+          }}
+          buttonText="Rezervo Tani"
+        />
+      </div>
+
+      <div id="footer-gallery" data-section="footer-gallery" className="mx-auto px-4 md:px-6">
         <FooterBaseCard
           logoText="Watami Tirana"
           copyrightText="© 2025 Watami Tirana. Të gjitha të drejtat e rezervuara."