Update src/app/shop/page.tsx

Merge version_2 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();
@@ -50,7 +51,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 +73,8 @@ export default function BlogPage() {
                             ]},
                             { items: [
                                 { label: "Доставка", href: "/#delivery" },
+                                { label: "Блог", href: "/blog" },
+                                { label: "Магазин", href: "/shop" },
                                 { label: "Контакти", href: "/#contacts" },
                                 { label: "Забронювати Столик", href: "/#contacts" }
                             ]}

src/app/page.tsx

@@ -9,6 +9,7 @@ import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 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 +29,14 @@ 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: "/#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 +49,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"
@@ -170,14 +172,16 @@ 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: "/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,30 @@ 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: "/#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: "/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 +109,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 +140,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 +178,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 +209,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,30 @@ 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: "/#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: "/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 +59,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 +89,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);