Update src/app/shop/page.tsx

Merge version_3 into main

src/app/blog/page.tsx

@@ -6,6 +6,7 @@ import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatin
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
 import { useBlogPosts } from "@/hooks/useBlogPosts";
+import Link from 'next/link';
 
 export default function BlogPage() {
     const { posts, isLoading } = useBlogPosts();
@@ -33,6 +34,7 @@ export default function BlogPage() {
                             { name: "Меню", id: "/#menu" },
                             { name: "Банкети", id: "/#banquets" },
                             { name: "Доставка", id: "/#delivery" },
+                            { name: "Відгуки", id: "/#testimonials" },
                             { name: "Контакти", id: "/#contacts" }
                         ]}
                         button={{ text: "Забронювати Столик", href: "/#contacts" }}
@@ -50,7 +52,7 @@ export default function BlogPage() {
                 ) : (
                     <div id="blog" data-section="blog">
                         <BlogCardTwo
-                            blogs={posts}
+                            blogs={posts.map(post => ({...post, onBlogClick: () => window.location.href = `/blog/${post.id}`}))}
                             title="Останні Статті"
                             description="Огляди та новини від нашої команди"
                             textboxLayout="default"
@@ -72,6 +74,9 @@ export default function BlogPage() {
                             ]},
                             { items: [
                                 { label: "Доставка", href: "/#delivery" },
+                                { label: "Відгуки", href: "/#testimonials" },
+                                { label: "Блог", href: "/blog" },
+                                { label: "Магазин", href: "/shop" },
                                 { label: "Контакти", href: "/#contacts" },
                                 { label: "Забронювати Столик", href: "/#contacts" }
                             ]}

src/app/page.tsx

@@ -6,9 +6,11 @@ import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import { Mail } from 'lucide-react';
+import Link from 'next/link';
 
 export default function LandingPage() {
   return (
@@ -28,13 +30,15 @@ export default function LandingPage() {
         <NavbarLayoutFloatingOverlay 
           brandName="Бандура: Серце і Зала"
           navItems={[
-            { name: "Філософія", id: "#philosophy" },
-            { name: "Меню", id: "#menu" },
-            { name: "Банкети", id: "#banquets" },
-            { name: "Доставка", id: "#delivery" },
-            { name: "Контакти", id: "#contacts" }
+            { name: "Головна", id: "/" },
+            { name: "Філософія", id: "/#philosophy" },
+            { name: "Меню", id: "/#menu" },
+            { name: "Банкети", id: "/#banquets" },
+            { name: "Доставка", id: "/#delivery" },
+            { name: "Відгуки", id: "/#testimonials" },
+            { name: "Контакти", id: "/#contacts" }
           ]}
-          button={{ text: "Забронювати Столик", href: "#contacts" }}
+          button={{ text: "Забронювати Столик", href: "/#contacts" }}
           className="py-4 px-6 md:px-8"
           buttonClassName="bg-primary-cta text-primary-cta-foreground hover:bg-primary-cta/90 transition-colors duration-300"
           buttonTextClassName="font-semibold text-lg"
@@ -47,8 +51,8 @@ export default function LandingPage() {
           logoText="Бандура: Серце і Зала"
           description="Де українська душа зустрічається з кулінарним мистецтвом – відчуйте справжні банкети та смаки."
           buttons={[
-            { text: "Забронювати Столик", href: "#contacts" },
-            { text: "Переглянути Меню", href: "#menu" }
+            { text: "Забронювати Столик", href: "/#contacts" },
+            { text: "Переглянути Меню", href: "/#menu" }
           ]}
           background={{ variant: "plain" }}
           imageSrc="https://img.b2bpic.net/free-photo/cafe-with-burning-candles-tables_140725-7784.jpg"
@@ -81,12 +85,12 @@ export default function LandingPage() {
       <div id="menu" data-section="menu">
         <FeatureCardSix 
           title="Наше Меню: Кулінарна Подорож"
-          description="Насолоджуйтеся смаками України та світу, приготованими з пристрастю та поданими з теплотою. Дослідіть наші різноманітні пропозиції, від ситних традиційних страв до вишуканих барних добірок. Не забудьте про нашу затишну лаунж-зону та терасу, де доступні кальяни."
+          description="Насолоджуйтеся смаками України та світу, приготованими з пристрастю та поданими з теплотою. Дослідьте наші різноманітні пропозиції, від ситних традиційних страв до вишуканих барних добірок. Не забудьте про нашу затишну лаунж-зону та терасу, де доступні кальяни."
           textboxLayout="default"
           useInvertedBackground={true}
           features={[
             { id: 1, title: "Кухонні Делікатеси", description: "Відчуйте справжню українську кухню з нашими стравами ручної роботи. Від наваристого борщу до смачних вареників, кожна страва — це свято традицій та смаку. Наше меню також містить сезонні страви та сучасні інтерпретації.", imageSrc: "https://img.b2bpic.net/free-photo/dumplings-served-with-sour-cream-eggplant-rolls-pickles_141793-599.jpg", imageAlt: "Традиційний український стіл з їжею" },
-            { id: 2, title: "Бар та Коктейлі", description: "Наш бар пропонує вишуканий вибір напоїв, від класичних коктейлів з етно-нотками до освіжаючих безалкогольних варіантів. Доповніть свій обід або насолодіться напоєм у нашій затишній лаунж-зоні або на сезонній терасі.", imageSrc: "https://img.b2bpic.net/free-photo/restaurant-with-leather-sofa-paintings-wall_140725-9715.jpg", imageAlt: "Витончено приготований коктейль у рустикальному барі" },
+            { id: 2, title: "Бар та Коктейлі", description: "Наш бар пропонує вишуканий вибір напоїв, від класичних коктейлів з етно-нотками до освіжаючих безалкогольних варіантів. Доповніть свій обід або насолоджуйтеся напоєм у нашій затишній лаунж-зоні або на сезонній терасі.", imageSrc: "https://img.b2bpic.net/free-photo/restaurant-with-leather-sofa-paintings-wall_140725-9715.jpg", imageAlt: "Витончено приготований коктейль у рустикальному барі" },
             { id: 3, title: "Вишукана Винна Карта", description: "Відкрийте для себе нашу велику винну карту, ретельно підібрану для ідеального поєднання з нашим меню. Представляючи місцеві українські вина та міжнародні фаворити, у нас є ідеальна пляшка для кожного смаку та випадку.", imageSrc: "https://img.b2bpic.net/free-photo/glasses-flowers-arrangement_23-2149617131.jpg", imageAlt: "Винні пляшки в етно-стилізованому льоху" },
             { id: 4, title: "Навинос та Доставка", description: "Насолоджуйтесь смаком Бандура: Серце і Зала в затишку вашого дому. Наше меню навинос пропонує вибір популярних страв, свіжо приготованих для вашої зручності. Ідеально для сімейних зустрічей або затишного вечора.", imageSrc: "https://img.b2bpic.net/free-photo/smoked-vegetable-slices-aubergine-tomato-bell-pepper-onion_140725-5933.jpg", imageAlt: "Елегантно упакована їжа навинос" }
           ]}
@@ -117,7 +121,7 @@ export default function LandingPage() {
             { id: "cottage-2", brand: "Котеджі", name: "Банкетний Котедж 2", price: "Місткість: 10-12 гостей", rating: 5, reviewCount: "Затишні Зустрічі", imageSrc: "https://img.b2bpic.net/free-photo/close-view-baked-bread-embroidery-towel-placed-wooden-table-near-glass-box-which-prepared-wedding-ceremony-outdoor_8353-12389.jpg", imageAlt: "Приватний банкетний котедж" },
             { id: "cottage-3", brand: "Котеджі", name: "Банкетний Котедж 3", price: "Місткість: 10-12 гостей", rating: 5, reviewCount: "Затишні Зустрічі", imageSrc: "https://img.b2bpic.net/free-photo/white-vases-with-greenery-stand-wooden-boxes_1304-5606.jpg", imageAlt: "Приватний банкетний котедж" },
             { id: "cottage-4", brand: "Котеджі", name: "Банкетний Котедж 4", price: "Місткість: 10-12 гостей", rating: 5, reviewCount: "Затишні Зустрічі", imageSrc: "https://img.b2bpic.net/free-photo/home-celebration-friends-family-festive-table-with-pear-cake-top-view-celebration-concept_169016-4836.jpg", imageAlt: "Приватний банкетний котедж" }
-          ]}
+          ]
         />
       </div>
 
@@ -144,6 +148,22 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardTwelve
+          testimonials={[
+            { id: '1', name: 'Олена Коваль', imageSrc: 'https://images.unsplash.com/photo-1573496359142-b8d87734032c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NDcxMzR8MHwxfHNlYXJjaHwxfHxwb3J0cmFpdCUyMGZhY2V8ZW58MHx8fHwxNzEyODIzMzQ5fDA&ixlib=rb-4.0.3&q=80&w=1080', imageAlt: 'Олена Коваль' },
+            { id: '2', name: 'Максим Петренко', imageSrc: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NDcxMzR8MHwxfHxtYWxlJTIwcG9ydHJhaXR8ZW58MHx8fHwxNzEyODIzNDgyfDA&ixlib=rb-4.0.3&q=80&w=1080', imageAlt: 'Максим Петренко' },
+            { id: '3', name: 'Софія Мельник', imageSrc: 'https://images.unsplash.com/photo-1494790108377-be9c29b29329?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NDcxMzR8MHwxfHxwZXJzb24lMjBjbG9zZXVwfGVufHwwfHx8fDE3MTI4MjM0MzJ8MA&ixlib=rb-4.0.3&q=80&w=1080', imageAlt: 'Софія Мельник' },
+            { id: '4', name: 'Андрій Сидоренко', imageSrc: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NDcxMzR8MHwxfHxwZXJzb24lMjBoZWFkc2hvdHxlbnwwfHx8fDE3MTI4MjMzOTJ8MA&ixlib=rb-4.0.3&q=80&w=1080', imageAlt: 'Андрій Сидоренко' }
+          ]}
+          cardTitle="Подивіться, що кажуть наші гості"
+          cardTag="Відгуки"
+          cardAnimation="slide-up"
+          useInvertedBackground={false}
+          className="py-20 md:py-32"
+        />
+      </div>
+
       <div id="contacts" data-section="contacts">
         <ContactCTA 
           tag="Зв'яжіться з Нами"
@@ -170,14 +190,17 @@ export default function LandingPage() {
           logoText="Бандура: Серце і Зала"
           columns={[
             { items: [
-              { label: "Філософія", href: "#philosophy" },
-              { label: "Меню", href: "#menu" },
-              { label: "Банкети", href: "#banquets" }
+              { label: "Філософія", href: "/#philosophy" },
+              { label: "Меню", href: "/#menu" },
+              { label: "Банкети", href: "/#banquets" }
             ]},
             { items: [
-              { label: "Доставка", href: "#delivery" },
-              { label: "Контакти", href: "#contacts" },
-              { label: "Забронювати Столик", href: "#contacts" }
+              { label: "Доставка", href: "/#delivery" },
+              { label: "Відгуки", href: "/#testimonials" },
+              { label: "Блог", href: "/blog" },
+              { label: "Магазин", href: "/shop" },
+              { label: "Контакти", href: "/#contacts" },
+              { label: "Забронювати Столик", href: "/#contacts" }
             ]}
           ]}
           ariaLabel="Нижній колонтитул сайту"

src/app/shop/[id]/page.tsx

@@ -11,6 +11,7 @@ import ProductCart from "@/components/ecommerce/cart/ProductCart";
 import { useProductDetail } from "@/hooks/useProductDetail";
 import { useCart } from "@/hooks/useCart";
 import { useCheckout } from "@/hooks/useCheckout";
+import Link from 'next/link';
 
 interface ProductPageProps {
     params: Promise<{ id: string }>;
@@ -67,17 +68,31 @@ export default function ProductPage({ params }: ProductPageProps) {
     }, [cartItems, checkout, getCheckoutItems]);
 
     const navbarProps = {
-        brandName: "Бандура: Серце і Зала",        navItems: [{ name: "Головна", id: "/" }],
+        brandName: "Бандура: Серце і Зала",        
+        navItems: [
+            { name: "Головна", id: "/" },
+            { name: "Філософія", id: "/#philosophy" },
+            { name: "Меню", id: "/#menu" },
+            { name: "Банкети", id: "/#banquets" },
+            { name: "Доставка", id: "/#delivery" },
+            { name: "Відгуки", id: "/#testimonials" },
+            { name: "Контакти", id: "/#contacts" }
+        ],
         button: { text: "Кошик", onClick: () => setCartOpen(true) },
-        className: "py-4 px-6 md:px-8",        buttonClassName: "bg-primary-cta text-primary-cta-foreground hover:bg-primary-cta/90 transition-colors duration-300",        buttonTextClassName: "font-semibold text-lg",        logoOnClick: () => console.log('Logo clicked')
+        className: "py-4 px-6 md:px-8",        
+        buttonClassName: "bg-primary-cta text-primary-cta-foreground hover:bg-primary-cta/90 transition-colors duration-300",        
+        buttonTextClassName: "font-semibold text-lg",        
+        logoOnClick: () => console.log('Logo clicked')
     };
 
     const footerProps = {
-        logoText: "Бандура: Серце і Зала",        columns: [
+        logoText: "Бандура: Серце і Зала",        
+        columns: [
             { items: [{ label: "Філософія", href: "/#philosophy" }, { label: "Меню", href: "/#menu" }, { label: "Банкети", href: "/#banquets" }] },
-            { items: [{ label: "Доставка", href: "/#delivery" }, { label: "Контакти", href: "/#contacts" }, { label: "Забронювати Столик", href: "/#contacts" }] }
+            { items: [{ label: "Доставка", href: "/#delivery" }, { label: "Відгуки", href: "/#testimonials" }, { label: "Блог", href: "/blog" }, { label: "Магазин", href: "/shop" }, { label: "Контакти", href: "/#contacts" }, { label: "Забронювати Столик", href: "/#contacts" }] }
         ],
-        ariaLabel: "Нижній колонтитул сайту",        containerClassName: "py-16 md:py-24"
+        ariaLabel: "Нижній колонтитул сайту",        
+        containerClassName: "py-16 md:py-24"
     };
 
     if (isLoading) {
@@ -95,7 +110,7 @@ export default function ProductPage({ params }: ProductPageProps) {
                 headingFontWeight="bold"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarLayoutFloatingOverlay {...navbarProps} />
                     </div>
                     <div id="loading-indicator" data-section="loading-indicator">
@@ -126,7 +141,7 @@ export default function ProductPage({ params }: ProductPageProps) {
                 headingFontWeight="bold"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarLayoutFloatingOverlay {...navbarProps} />
                     </div>
                     <div id="not-found" data-section="not-found">
@@ -164,7 +179,7 @@ export default function ProductPage({ params }: ProductPageProps) {
             headingFontWeight="bold"
         >
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarLayoutFloatingOverlay {...navbarProps} />
                 </div>
                 <div id="product-detail-card" data-section="product-detail-card">
@@ -195,10 +210,11 @@ export default function ProductPage({ params }: ProductPageProps) {
                         items={cartItems}
                         onQuantityChange={updateQuantity}
                         onRemove={removeItem}
-                        total={`$${cartTotal}`}
+                        total={`${cartTotal}`}
                         buttons={[
                             {
-                                text: isCheckoutLoading ? "Обробка..." : "Оформити Замовлення",                                onClick: handleCheckout,
+                                text: isCheckoutLoading ? "Обробка..." : "Оформити Замовлення",                                
+                                onClick: handleCheckout,
                             },
                         ]}
                     />

src/app/shop/page.tsx

@@ -6,6 +6,7 @@ import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatin
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
 import { useProductCatalog } from "@/hooks/useProductCatalog";
+import Link from 'next/link';
 
 export default function ShopPage() {
     const {
@@ -17,17 +18,31 @@ export default function ShopPage() {
     } = useProductCatalog({ basePath: "/shop" });
 
     const navbarProps = {
-        brandName: "Бандура: Серце і Зала",        navItems: [{ name: "Головна", id: "/" }],
+        brandName: "Бандура: Серце і Зала",        
+        navItems: [
+            { name: "Головна", id: "/" },
+            { name: "Філософія", id: "/#philosophy" },
+            { name: "Меню", id: "/#menu" },
+            { name: "Банкети", id: "/#banquets" },
+            { name: "Доставка", id: "/#delivery" },
+            { name: "Відгуки", id: "/#testimonials" },
+            { name: "Контакти", id: "/#contacts" }
+        ],
         button: { text: "Кошик", onClick: () => console.log('Cart button clicked on catalog page') },
-        className: "py-4 px-6 md:px-8",        buttonClassName: "bg-primary-cta text-primary-cta-foreground hover:bg-primary-cta/90 transition-colors duration-300",        buttonTextClassName: "font-semibold text-lg",        logoOnClick: () => console.log('Logo clicked')
+        className: "py-4 px-6 md:px-8",        
+        buttonClassName: "bg-primary-cta text-primary-cta-foreground hover:bg-primary-cta/90 transition-colors duration-300",        
+        buttonTextClassName: "font-semibold text-lg",        
+        logoOnClick: () => console.log('Logo clicked')
     };
 
     const footerProps = {
-        logoText: "Бандура: Серце і Зала",        columns: [
+        logoText: "Бандура: Серце і Зала",        
+        columns: [
             { items: [{ label: "Філософія", href: "/#philosophy" }, { label: "Меню", href: "/#menu" }, { label: "Банкети", href: "/#banquets" }] },
-            { items: [{ label: "Доставка", href: "/#delivery" }, { label: "Контакти", href: "/#contacts" }, { label: "Забронювати Столик", href: "/#contacts" }] }
+            { items: [{ label: "Доставка", href: "/#delivery" }, { label: "Відгуки", href: "/#testimonials" }, { label: "Блог", href: "/blog" }, { label: "Магазин", href: "/shop" }, { label: "Контакти", href: "/#contacts" }, { label: "Забронювати Столик", href: "/#contacts" }] }
         ],
-        ariaLabel: "Нижній колонтитул сайту",        containerClassName: "py-16 md:py-24"
+        ariaLabel: "Нижній колонтитул сайту",        
+        containerClassName: "py-16 md:py-24"
     };
 
     if (isLoading) {
@@ -45,7 +60,7 @@ export default function ShopPage() {
                 headingFontWeight="bold"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarLayoutFloatingOverlay {...navbarProps} />
                     </div>
                     <div id="loading-indicator" data-section="loading-indicator">
@@ -75,13 +90,13 @@ export default function ShopPage() {
             headingFontWeight="bold"
         >
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarLayoutFloatingOverlay {...navbarProps} />
                 </div>
                 <div id="product-catalog" data-section="product-catalog">
                     <ProductCatalog
                         layout="page"
-                        products={products}
+                        products={products.map(p => ({...p, onProductClick: () => window.location.href = `/shop/${p.id}`}))}
                         searchValue={search}
                         onSearchChange={setSearch}
                         searchPlaceholder="Пошук товарів..."

src/app/styles/variables.css

@@ -2,21 +2,21 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #080200;;
-  --card: #1a0d0b;;
-  --foreground: #ffe6d5;;
-  --primary-cta: #ffaa70;;
-  --secondary-cta: #170b07;;
-  --accent: #7b5e4a;;
-  --background-accent: #b8541e;; */
+  /* --background: #050012;;
+  --card: #040121;;
+  --foreground: #f0e6ff;;
+  --primary-cta: #c89bff;;
+  --secondary-cta: #1d123b;;
+  --accent: #684f7b;;
+  --background-accent: #65417c;; */
 
-  --background: #080200;;
-  --card: #1a0d0b;;
-  --foreground: #ffe6d5;;
-  --primary-cta: #ffaa70;;
-  --secondary-cta: #170b07;;
-  --accent: #7b5e4a;;
-  --background-accent: #b8541e;;
+  --background: #050012;;
+  --card: #040121;;
+  --foreground: #f0e6ff;;
+  --primary-cta: #c89bff;;
+  --secondary-cta: #1d123b;;
+  --accent: #684f7b;;
+  --background-accent: #65417c;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);