Update src/app/styles/variables.css

Merge version_4 into main

src/app/blog/page.tsx

@@ -5,13 +5,13 @@ import { useBlogPosts } from "@/hooks/useBlogPosts";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import BlogCardThree from '@/components/sections/blog/BlogCardThree';
 
-const navItemsForSubPages = [
+const standardNavItems = [
     { name: "Home", id: "/" },
     { name: "Products", id: "/products" },
     { name: "About", id: "/#about" },
     { name: "Testimonials", id: "/#testimonials" },
     { name: "FAQs", id: "/#faqs" },
-    { name: "Contact", id: "/#contact" },
+    { name: "Contact", id: "/#contact" }
 ];
 
 export default function BlogPage() {
@@ -33,7 +33,7 @@ export default function BlogPage() {
             <div id="nav" data-section="nav">
                 <NavbarLayoutFloatingInline
                     brandName="Nano Mango"
-                    navItems={navItemsForSubPages}
+                    navItems={standardNavItems}
                     button={{ text: "Shop Now", href: "/shop" }}
                     buttonClassName="shadow-lg"
                     navItemClassName="text-foreground/80 hover:text-foreground"

src/app/page.tsx

@@ -10,12 +10,13 @@ import FaqDouble from '@/components/sections/faq/FaqDouble';
 import ContactFaq from '@/components/sections/contact/ContactFaq';
 import { Handshake, HeartHandshake, MessageSquareText, Sparkles } from "lucide-react";
 
-const navItemsForHomePage = [
+const standardNavItems = [
+    { name: "Home", id: "/" },
     { name: "Products", id: "/products" },
-    { name: "About", id: "about" },
+    { name: "About", id: "/#about" },
-    { name: "Testimonials", id: "testimonials" },
+    { name: "Testimonials", id: "/#testimonials" },
-    { name: "FAQs", id: "faqs" },
+    { name: "FAQs", id: "/#faqs" },
-    { name: "Contact", id: "contact" },
+    { name: "Contact", id: "/#contact" }
 ];
 
 export default function SitePage() {
@@ -35,7 +36,7 @@ export default function SitePage() {
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingInline
           brandName="Nano Mango"
-          navItems={navItemsForHomePage}
+          navItems={standardNavItems}
           button={{ text: "Shop Now", href: "/shop" }}
           buttonClassName="shadow-lg"
           navItemClassName="text-foreground/80 hover:text-foreground"
@@ -55,7 +56,7 @@ export default function SitePage() {
           enableKpiAnimation={true}
           buttons={[
             { text: "Explore Collection", href: "/products" },
-            { text: "Our Story", href: "#about" },
+            { text: "Our Story", href: "/#about" },
           ]}
           videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/uploaded-1770649506170-pxkn8ubj.mp4"
           imageAlt="Assortment of stylish cups and mugs from Nano Mango"

src/app/products/page.tsx

@@ -6,13 +6,13 @@ import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloating
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import { useProductCatalog } from "@/hooks/useProductCatalog";
 
-const navItemsForSubPages = [
+const standardNavItems = [
     { name: "Home", id: "/" },
     { name: "Products", id: "/products" },
     { name: "About", id: "/#about" },
     { name: "Testimonials", id: "/#testimonials" },
     { name: "FAQs", id: "/#faqs" },
-    { name: "Contact", id: "/#contact" },
+    { name: "Contact", id: "/#contact" }
 ];
 
 function ProductsPageContent() {
@@ -43,7 +43,7 @@ function ProductsPageContent() {
             <div id="nav" data-section="nav">
                 <NavbarLayoutFloatingInline
                     brandName="Nano Mango"
-                    navItems={navItemsForSubPages}
+                    navItems={standardNavItems}
                     button={{ text: "Go to Shop", href: "/shop" }}
                     buttonClassName="shadow-lg"
                     navItemClassName="text-foreground/80 hover:text-foreground"

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

@@ -8,13 +8,12 @@ import SplitAbout from '@/components/sections/about/SplitAbout';
 import { useProductDetail } from "@/hooks/useProductDetail";
 import { DollarSign, Package, CheckCircle } from 'lucide-react';
 
-const navItemsForSubPages = [
+const standardNavItems = [
     { name: "Home", id: "/" },
-    { name: "Products", id: "/products" },
+    { name: "Products", id: "/products" },    { name: "About", id: "/#about" },
-    { name: "About", id: "/#about" },
     { name: "Testimonials", id: "/#testimonials" },
     { name: "FAQs", id: "/#faqs" },
-    { name: "Contact", id: "/#contact" },
+    { name: "Contact", id: "/#contact" }
 ];
 
 interface ProductPageProps {
@@ -44,7 +43,7 @@ function ProductPageContent({ params }: ProductPageProps) {
                 <div id="nav" data-section="nav">
                     <NavbarLayoutFloatingInline
                         brandName="Nano Mango"
-                        navItems={navItemsForSubPages}
+                        navItems={standardNavItems}
                         button={{ text: "Back to Shop", href: "/shop" }}
                         buttonClassName="shadow-lg"
                         navItemClassName="text-foreground/80 hover:text-foreground"
@@ -75,7 +74,7 @@ function ProductPageContent({ params }: ProductPageProps) {
                 <div id="nav" data-section="nav">
                     <NavbarLayoutFloatingInline
                         brandName="Nano Mango"
-                        navItems={navItemsForSubPages}
+                        navItems={standardNavItems}
                         button={{ text: "Back to Shop", href: "/shop" }}
                         buttonClassName="shadow-lg"
                         navItemClassName="text-foreground/80 hover:text-foreground"
@@ -113,7 +112,7 @@ function ProductPageContent({ params }: ProductPageProps) {
             <div id="nav" data-section="nav">
                 <NavbarLayoutFloatingInline
                     brandName="Nano Mango"
-                    navItems={navItemsForSubPages}
+                    navItems={standardNavItems}
                     button={{ text: "Back to Shop", href: "/shop" }}
                     buttonClassName="shadow-lg"
                     navItemClassName="text-foreground/80 hover:text-foreground"
@@ -134,7 +133,8 @@ function ProductPageContent({ params }: ProductPageProps) {
                         { title: "SKU", description: meta.sku || 'N/A', icon: Package },
                         { title: "Status", description: meta.inventoryStatus || 'Available', icon: CheckCircle },
                     ]}
-                    buttons={[{ text: "Explore More Products", href: "/shop" }]}
+                    buttons={[{ text: "Explore More Products", href: "/shop" }]
+                    }
                 />
             </div>
         </ThemeProvider>

src/app/shop/page.tsx

@@ -6,13 +6,13 @@ import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloating
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import { useProductCatalog } from "@/hooks/useProductCatalog";
 
-const navItemsForSubPages = [
+const standardNavItems = [
     { name: "Home", id: "/" },
     { name: "Products", id: "/products" },
     { name: "About", id: "/#about" },
     { name: "Testimonials", id: "/#testimonials" },
     { name: "FAQs", id: "/#faqs" },
-    { name: "Contact", id: "/#contact" },
+    { name: "Contact", id: "/#contact" }
 ];
 
 function ShopPageContent() {
@@ -43,8 +43,8 @@ function ShopPageContent() {
             <div id="nav" data-section="nav">
                 <NavbarLayoutFloatingInline
                     brandName="Nano Mango"
-                    navItems={navItemsForSubPages}
+                    navItems={standardNavItems}
-                    button={{ text: "View Products", href: "/shop" }}
+                    button={{ text: "Contact Us", href: "/#contact" }}
                     buttonClassName="shadow-lg"
                     navItemClassName="text-foreground/80 hover:text-foreground"
                     className="backdrop-blur-sm bg-card/70"

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #fdfbf2;;
+  /* --background: #f7f6f7;;
-  --card: #fefce8;;
+  --card: #ffffff;;
-  --foreground: #2b2d21;;
+  --foreground: #1c1c1c;;
-  --primary-cta: #4CAF50;;
+  --primary-cta: #e63946;;
-  --secondary-cta: #FFF176;;
+  --secondary-cta: #8b5cf6;;
-  --accent: #FFC107;;
+  --accent: #c4a8f9;;
-  --background-accent: #E8F5E9;; */
+  --background-accent: #f5c4c7;; */
 
-  --background: #fdfbf2;;
+  --background: #f7f6f7;;
-  --card: #fefce8;;
+  --card: #ffffff;;
-  --foreground: #2b2d21;;
+  --foreground: #1c1c1c;;
-  --primary-cta: #4CAF50;;
+  --primary-cta: #e63946;;
-  --primary-cta-text: #FFFFFF;;
+  --primary-cta-text: #ffffff;;
-  --secondary-cta: #FFF176;;
+  --secondary-cta: #8b5cf6;;
-  --secondary-cta-text: #2b2d21;;
+  --secondary-cta-text: #ffffff;;
-  --accent: #FFC107;;
+  --accent: #c4a8f9;;
-  --background-accent: #E8F5E9;;
+  --background-accent: #f5c4c7;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);