bender/e72ecdb4-0cb6-4888-b2dd-c9017355dea7
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/gallery/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-13 16:50:39 +00:00
parent 00b7dd6d4c
commit 47fd6465f6
1 changed files with 104 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
src/app/gallery/page.tsx
View File

@@ -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."