src/app/page.tsx

@@ -11,6 +11,7 @@ import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import { Heart, HelpCircle, Leaf, Mail, Shield, Sparkles } from 'lucide-react';
+import Link from 'next/link';
 
 export default function LandingPage() {
   return (
@@ -30,13 +31,13 @@ export default function LandingPage() {
         <NavbarStyleCentered
           brandName="Skincare Luxe"
           navItems={[
-            { name: "Home", id: "home" },
-            { name: "Products", id: "products" },
-            { name: "About", id: "about" },
-            { name: "Testimonials", id: "testimonials" },
-            { name: "Contact", id: "contact" }
+            { name: "Home", id: "/" },
+            { name: "Products", id: "#products" },
+            { name: "About", id: "#about" },
+            { name: "Testimonials", id: "#testimonials" },
+            { name: "Contact", id: "#contact" }
           ]}
-          button={{ text: "Shop Now", href: "products" }}
+          button={{ text: "Shop Now", href: "#products" }}
         />
       </div>
 
@@ -45,8 +46,8 @@ export default function LandingPage() {
           logoText="Skincare Luxe"
           description="Discover premium skincare crafted from nature's finest ingredients. Transform your complexion with our curated collection of luxury serums, creams, and treatments designed for radiant, healthy skin."
           buttons={[
-            { text: "Explore Collection", href: "products" },
-            { text: "Learn Our Story", href: "about" }
+            { text: "Explore Collection", href: "#products" },
+            { text: "Learn Our Story", href: "#about" }
           ]}
           buttonAnimation="slide-up"
           background={{ variant: "sparkles-gradient" }}
@@ -66,7 +67,7 @@ export default function LandingPage() {
             { type: "text", content: "pure nature" }
           ]}
           buttons={[
-            { text: "Discover Ingredients", href: "products" }
+            { text: "Discover Ingredients", href: "#products" }
           ]}
           useInvertedBackground={true}
           ariaLabel="About section"
@@ -176,7 +177,7 @@ export default function LandingPage() {
           faqsAnimation="slide-up"
           textboxLayout="default"
           useInvertedBackground={true}
-          buttons={[{ text: "Contact Support", href: "contact" }]}
+          buttons={[{ text: "Contact Support", href: "#contact" }]}
           buttonAnimation="slide-up"
           ariaLabel="FAQ section"
         />