Merge version_2 into main

Merge version_2 into main

src/app/about-us/page.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import MediaAbout from '@/components/sections/about/MediaAbout';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import Link from 'next/link';
+
+export default function AboutUsPage() {
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About Us', id: '/about-us' },
+    { name: 'Cart', id: '/cart' },
+    { name: 'Contact', id: '/contact' },
+    { name: 'Reviews', id: '/reviews' },
+    { name: 'Dashboard', id: '/dashboard' },
+    { name: 'Product Detail', id: '/product-detail' }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          navItems={navItems}
+          brandName="My Website"
+          logoSrc="/placeholder-logo.svg"
+          logoAlt="Company Logo"
+          button={{ text: "Learn More", href: "#" }}
+        />
+      </div>
+      <div id="about-us-section" data-section="about-us">
+        <MediaAbout
+          title="About Our Company"
+          description="We are a company dedicated to providing excellent services and products."
+          useInvertedBackground={false}
+          imageSrc="https://images.unsplash.com/photo-1549692520-acc66692997b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYwNXwwfDF8YWxsfDV8fHx8fHwyfHwxNzA4NjA4NzU4fA&ixlib=rb-4.0.3&q=80&w=400&_wi=1"
+          imageAlt="About Us Image"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/cart/page.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import Link from 'next/link';
+
+export default function CartPage() {
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About Us', id: '/about-us' },
+    { name: 'Cart', id: '/cart' },
+    { name: 'Contact', id: '/contact' },
+    { name: 'Reviews', id: '/reviews' },
+    { name: 'Dashboard', id: '/dashboard' },
+    { name: 'Product Detail', id: '/product-detail' }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          navItems={navItems}
+          brandName="My Website"
+          logoSrc="/placeholder-logo.svg"
+          logoAlt="Company Logo"
+          button={{ text: "Learn More", href: "#" }}
+        />
+      </div>
+      <div className="container mx-auto py-12 px-4">
+        <h1 className="text-3xl font-bold mb-6">Your Shopping Cart</h1>
+        <p>Your cart is currently empty.</p>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ContactForm from '@/components/form/ContactForm';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import Link from 'next/link';
+
+export default function ContactPage() {
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About Us', id: '/about-us' },
+    { name: 'Cart', id: '/cart' },
+    { name: 'Contact', id: '/contact' },
+    { name: 'Reviews', id: '/reviews' },
+    { name: 'Dashboard', id: '/dashboard' },
+    { name: 'Product Detail', id: '/product-detail' }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          navItems={navItems}
+          brandName="My Website"
+          logoSrc="/placeholder-logo.svg"
+          logoAlt="Company Logo"
+          button={{ text: "Learn More", href: "#" }}
+        />
+      </div>
+      <div id="contact-form" data-section="contact-form">
+        <ContactForm
+          title="Get in touch"
+          description="Fill out the form below to contact us."
+          onSubmit={(data) => console.log(data)}
+          tag="Contact"
+          useInvertedBackground={false}
+        />
+      </div>
+      <div id="faq-section" data-section="faq-section">
+        <FaqSplitMedia
+          title="Frequently Asked Questions"
+          description="Find answers to common questions."
+          faqs={[
+            { id: 'q1', title: 'Question 1', content: 'Answer 1' },
+            { id: 'q2', title: 'Question 2', content: 'Answer 2' }
+          ]}
+          faqsAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          imageSrc="https://images.unsplash.com/photo-1549692520-acc66692997b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYwNXwwfDF8YWxsfDV8fHx8fHwyfHwxNzA4NjA4NzU4fA&ixlib=rb-4.0.3&q=80&w=400&_wi=2"
+          imageAlt="FAQ Image"
+        />
+      </div>
+      <div id="contact-text-section" data-section="contact-text-section">
+        <ContactCenter
+          tag="Contact Info"
+          title="Our Location"
+          description="Visit us at our office or call us."
+          background={{ variant: 'plain' }}
+          useInvertedBackground={false}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/dashboard/page.tsx

@@ -1,59 +1,114 @@
-"use client";
+'use client';
 
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import Link from 'next/link';
+import CardStack from '@/components/cardStack/CardStack';
+
+import { Package, Heart, Home, Settings, CreditCard, Bell, LifeBuoy } from 'lucide-react';
 
 export default function DashboardPage() {
   const navItems = [
-    { name: "Home", id: "/" },
+    { name: 'Home', id: '/' },
-    { name: "Shop", id: "/shop" },
+    { name: 'Dashboard', id: '/dashboard' },
-    { name: "Blog", id: "/blog" },
+    { name: 'About Us', id: '/about-us' },
-    { name: "About Us", id: "/about-us" },
+    { name: 'Cart', id: '/cart' },
-    { name: "Contact", id: "/contact" },
+    { name: 'Contact', id: '/contact' },
-    { name: "Checkout", id: "/checkout" },
+    { name: 'Reviews', id: '/reviews' },
-    { name: "My Account", id: "/dashboard" }
+    { name: 'Product Detail', id: '/product-detail' }
   ];
 
   return (
     <ThemeProvider
-      defaultButtonVariant="directional-hover"
+      defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="reveal-blur"
+      defaultTextAnimation="entrance-slide"
-      borderRadius="pill"
+      borderRadius="rounded"
       contentWidth="medium"
-      sizing="mediumSizeLargeTitles"
+      sizing="medium"
-      background="noiseDiagonalGradient"
+      background="none"
-      cardStyle="inset"
+      cardStyle="solid"
-      primaryButtonStyle="diagonal-gradient"
+      primaryButtonStyle="gradient"
-      secondaryButtonStyle="layered"
+      secondaryButtonStyle="glass"
-      headingFontWeight="normal"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen
+        <NavbarStyleApple navItems={navItems} brandName="User Dashboard" />
-          brandName="Hara Minimalist Living"
+      </div>
-          navItems={navItems.map(item => ({...item, href: item.id}))}
+
-          logoSrc="http://img.b2bpic.net/free-photo/young-woman-showing-nature-poster_53876-95887.jpg"
+      <div className="container mx-auto py-12 px-4 sm:px-6 lg:px-8">
-          logoAlt="Hara Minimalist Living Logo"
+        <h1 className="text-4xl font-bold mb-8 text-center">User Dashboard</h1>
-          bottomLeftText="Thoughtfully Designed."
+
-          bottomRightText="Naturally Inspired."
+        <CardStack
-        />
+          title="Manage Your Account"
+          description="Access and update your personal information, orders, and preferences."
+          animationType="slide-up"
+          gridVariant="two-columns-alternating-heights"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        >
+          {/* My Orders */}
+          <div className="p-6 bg-card rounded-lg shadow-md border border-border">
+            <h2 className="text-2xl font-semibold mb-4 flex items-center gap-2">
+              <Package className="h-6 w-6 text-primary-cta" /> My Orders
+            </h2>
+            <p className="text-foreground/80">View your order history, track shipments, and manage returns.</p>
+            <a href="/dashboard/orders" className="text-primary-cta hover:underline mt-4 block">View Orders</a>
+          </div>
+
+          {/* Wishlist */}
+          <div className="p-6 bg-card rounded-lg shadow-md border border-border">
+            <h2 className="text-2xl font-semibold mb-4 flex items-center gap-2">
+              <Heart className="h-6 w-6 text-primary-cta" /> Wishlist
+            </h2>
+            <p className="text-foreground/80">Browse your saved items and add them to your cart.</p>
+            <a href="/dashboard/wishlist" className="text-primary-cta hover:underline mt-4 block">View Wishlist</a>
+          </div>
+
+          {/* Saved Addresses */}
+          <div className="p-6 bg-card rounded-lg shadow-md border border-border">
+            <h2 className="text-2xl font-semibold mb-4 flex items-center gap-2">
+              <Home className="h-6 w-6 text-primary-cta" /> Saved Addresses
+            </h2>
+            <p className="text-foreground/80">Update your shipping and billing addresses for faster checkout.</p>
+            <a href="/dashboard/addresses" className="text-primary-cta hover:underline mt-4 block">Manage Addresses</a>
+          </div>
+
+          {/* Account Settings */}
+          <div className="p-6 bg-card rounded-lg shadow-md border border-border">
+            <h2 className="text-2xl font-semibold mb-4 flex items-center gap-2">
+              <Settings className="h-6 w-6 text-primary-cta" /> Account Settings
+            </h2>
+            <p className="text-foreground/80">Manage your profile, password, and personal preferences.</p>
+            <a href="/dashboard/settings" className="text-primary-cta hover:underline mt-4 block">Edit Settings</a>
+          </div>
+
+          {/* Payment Methods */}
+          <div className="p-6 bg-card rounded-lg shadow-md border border-border">
+            <h2 className="text-2xl font-semibold mb-4 flex items-center gap-2">
+              <CreditCard className="h-6 w-6 text-primary-cta" /> Payment Methods
+            </h2>
+            <p className="text-foreground/80">Add, update, or remove your payment information.</p>
+            <a href="/dashboard/payment" className="text-primary-cta hover:underline mt-4 block">Manage Payments</a>
+          </div>
+
+          {/* Notifications */}
+          <div className="p-6 bg-card rounded-lg shadow-md border border-border">
+            <h2 className="text-2xl font-semibold mb-4 flex items-center gap-2">
+              <Bell className="h-6 w-6 text-primary-cta" /> Notifications
+            </h2>
+            <p className="text-foreground/80">Configure your notification preferences for orders and updates.</p>
+            <a href="/dashboard/notifications" className="text-primary-cta hover:underline mt-4 block">Adjust Preferences</a>
+          </div>
+
+          {/* Support Tickets */}
+          <div className="p-6 bg-card rounded-lg shadow-md border border-border">
+            <h2 className="text-2xl font-semibold mb-4 flex items-center gap-2">
+              <LifeBuoy className="h-6 w-6 text-primary-cta" /> Support Tickets
+            </h2>
+            <p className="text-foreground/80">View your support requests and get assistance.</p>
+            <a href="/dashboard/support" className="text-primary-cta hover:underline mt-4 block">View Tickets</a>
+          </div>
+        </CardStack>
       </div>
-      {/* 
-        No sections from the plan.sections array are assigned to the /dashboard page.
-        The filtered sectionRegistry only contains HeroSplit and ProductCardFour, which are not suitable for a dashboard page.
-        Therefore, no content sections are rendered on this page based on the strict selection rules.
-      */}
-      <main className="min-h-[calc(100vh-100px)] flex flex-col items-center justify-center p-8 text-center">
-        <h1 className="text-4xl font-bold mb-4">My Account Dashboard</h1>
-        <p className="text-lg text-foreground/70">Welcome back! Manage your orders, account settings, and more.</p>
-        <Link href="/shop" className="mt-8 px-6 py-3 rounded-full bg-primary-cta text-primary-cta-text hover:bg-primary-cta/90 transition-colors">
-          Start Shopping
-        </Link>
-      </main>
-      {/* 
-        No Footer component was provided in the registry or plan.nav.registry.
-        Therefore, no footer is rendered on this page based on the strict selection rules.
-      */}
     </ThemeProvider>
   );
-}
+}

src/app/page.tsx

@@ -1,5 +1,213 @@
-import { redirect } from 'next/navigation';
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
+import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
+import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { Sparkles, CheckCircle } from 'lucide-react'; // Example icons
 
 export default function Home() {
-  redirect('/components');
+  const navItems = [
-}
+    { name: "Home", id: "hero" },
+    { name: "Features", id: "features" },
+    { name: "Pricing", id: "pricing" },
+    { name: "Testimonials", id: "testimonials" },
+    { name: "FAQ", id: "faq" },
+    { name: "Contact", id: "contact" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="aurora"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <NavbarLayoutFloatingInline
+        navItems={navItems}
+        logoSrc="/placeholder-logo.svg"
+        logoAlt="Company Logo"
+        brandName="Webild"
+        button={{ text: "Get Started", href: "#contact" }}
+        animateOnLoad={true}
+      />
+
+      <main className="relative z-0">
+        <div id="hero" data-section="hero">
+          <HeroLogo
+            logoText="Webild"
+            description="Build your dream website with cutting-edge technology and stunning design. Experience the future of web development today."
+            buttons={[
+              { text: "Learn More", href: "#features" },
+              { text: "Get Started", href: "#contact" }
+            ]}
+            imageSrc="https://images.unsplash.com/photo-1510511459019-5dda77245918?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYwNXwwfDF8YWxsfDJ8fHx8fHwyfHwxNzA4NjA4NzU4fA&ixlib=rb-4.0.3&q=80&w=1080"
+            imageAlt="Hero Image"
+            buttonAnimation="slide-up"
+            ariaLabel="Hero section with company logo and call to action"
+          />
+        </div>
+
+        <div id="features" data-section="features">
+          <FeatureCardSix
+            title="Unlock Powerful Features"
+            description="Our platform is packed with innovative tools to streamline your workflow and enhance your online presence."
+            tag="Key Features"
+            tagIcon={Sparkles}
+            features={[
+              {
+                title: "Intuitive Design Tools",                description: "Craft beautiful and responsive layouts with our easy-to-use drag-and-drop interface.",                imageSrc: "https://images.unsplash.com/photo-1549692520-acc66692997b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYwNXwwfDF8YWxsfDV8fHx8fHwyfHwxNzA4NjA4NzU4fA&ixlib=rb-4.0.3&q=80&w=400",                imageAlt: "Design Tools"
+              },
+              {
+                title: "Seamless Integrations",                description: "Connect with your favorite third-party apps and services effortlessly.",                imageSrc: "https://images.unsplash.com/photo-1620281682337-ee4795325081?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYwNXwwfDF8YWxsfDJ8fHx8fHwyfHwxNzA4NjA4NzU4fA&ixlib=rb-4.0.3&q=80&w=400",                imageAlt: "Integrations"
+              },
+              {
+                title: "Optimized Performance",                description: "Enjoy lightning-fast load times and a smooth user experience across all devices.",                imageSrc: "https://images.unsplash.com/photo-1550009139-4453303c2710?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYwNXwwfDF8YWxsfDR8fHx8fHwyfHwxNzA4NjA4NzU4fA&ixlib=rb-4.0.3&q=80&w=400",                imageAlt: "Performance"
+              }
+            ]}
+            textboxLayout="default"
+            useInvertedBackground={false}
+            ariaLabel="Features section highlighting key capabilities"
+          />
+        </div>
+
+        <div id="pricing" data-section="pricing">
+          <PricingCardFive
+            title="Simple & Transparent Pricing"
+            description="Choose a plan that fits your needs. No hidden fees, no surprises."
+            tag="Our Plans"
+            plans={[
+              {
+                id: "starter",                tag: "Starter",                tagIcon: Sparkles,
+                price: "$19",                period: "per month",                description: "Ideal for individuals and small projects.",                button: { text: "Choose Starter", href: "#contact" },
+                featuresTitle: "Includes:",                features: ["5 GB Storage", "2 User Accounts", "Basic Support"]
+              },
+              {
+                id: "pro",                tag: "Pro",                tagIcon: CheckCircle,
+                price: "$49",                period: "per month",                description: "Perfect for growing teams and businesses.",                button: { text: "Choose Pro", href: "#contact" },
+                featuresTitle: "Includes:",                features: ["50 GB Storage", "10 User Accounts", "Priority Support", "Advanced Analytics"]
+              },
+              {
+                id: "enterprise",                tag: "Enterprise",                tagIcon: Sparkles,
+                price: "$99",                period: "per month",                description: "Custom solutions for large organizations.",                button: { text: "Contact Sales", href: "#contact" },
+                featuresTitle: "Includes:",                features: ["Unlimited Storage", "Unlimited Users", "24/7 Dedicated Support", "Custom Integrations"]
+              }
+            ]}
+            animationType="blur-reveal"
+            textboxLayout="default"
+            useInvertedBackground={true}
+            ariaLabel="Pricing section with different plans and features"
+          />
+        </div>
+
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardSix
+            title="What Our Clients Say"
+            description="Hear from satisfied customers who have transformed their online presence with Webild."
+            tag="Testimonials"
+            testimonials={[
+              {
+                id: "1",                name: "Jane Doe",                handle: "@janedoe",                testimonial: "Webild has revolutionized how we manage our website. The design tools are intuitive and the performance is unmatched!",                imageSrc: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYwNXwwfDF8YWxsfDEzfHx8fHx8Mnx8MTcwODYwODc1OHw&ixlib=rb-4.0.3&q=80&w=400",                imageAlt: "Jane Doe"
+              },
+              {
+                id: "2",                name: "John Smith",                handle: "@johnsmith",                testimonial: "The support team is incredible, always responsive and helpful. Highly recommend Webild for any serious web project.",                imageSrc: "https://images.unsplash.com/photo-1527980965255-d3b416303d12?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYwNXwwfDF8YWxsfDEyfHx8fHx8Mnx8MTcwODYwODc1OHw&ixlib=rb-4.0.3&q=80&w=400",                imageAlt: "John Smith"
+              },
+              {
+                id: "3",                name: "Emily White",                handle: "@emilywhite",                testimonial: "Finally, a platform that combines powerful features with an elegant user experience. Webild is a game-changer!",                imageSrc: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYwNXwwfDF8YWxsfDEwfHx8fHx8Mnx8MTcwODYwODc1OHw&ixlib=rb-4.0.3&q=80&w=400",                imageAlt: "Emily White"
+              }
+            ]}
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            ariaLabel="Testimonials section showcasing client feedback"
+          />
+        </div>
+
+        <div id="faq" data-section="faq">
+          <FaqSplitMedia
+            title="Frequently Asked Questions"
+            description="Find quick answers to common questions about our services and platform."
+            tag="FAQ"
+            faqs={[
+              {
+                id: "q1",                title: "What is Webild?",                content: "Webild is a comprehensive web development platform designed to help individuals and businesses create stunning, high-performance websites with ease."
+              },
+              {
+                id: "q2",                title: "Do I need coding knowledge?",                content: "No! Our intuitive drag-and-drop interface allows you to build professional websites without writing a single line of code."
+              },
+              {
+                id: "q3",                title: "Is customer support available?",                content: "Yes, we offer dedicated customer support through various channels, including email, live chat, and a comprehensive knowledge base."
+              }
+            ]}
+            imageSrc="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYwNXwwfDF8YWxsfDE1fHx8fHx8Mnx8MTcwODYwODc1OHw&ixlib=rb-4.0.3&q=80&w=1080"
+            imageAlt="FAQ Image"
+            mediaAnimation="blur-reveal"
+            faqsAnimation="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={true}
+            ariaLabel="Frequently asked questions section with answers"
+          />
+        </div>
+
+        <div id="contact" data-section="contact">
+          <ContactCenter
+            tag="Contact Us"
+            title="Ready to Start Your Project?"
+            description="Enter your email to get started or reach out to us directly."
+            tagIcon={Sparkles}
+            background={{ variant: 'radial-gradient' }}
+            useInvertedBackground={false}
+            inputPlaceholder="Your email address"
+            buttonText="Join the waitlist"
+            termsText="By clicking Join the waitlist you're confirming that you agree with our Terms and Conditions."
+            onSubmit={(email) => console.log("Submitted email:", email)}
+            ariaLabel="Contact section with email sign-up form"
+          />
+        </div>
+      </main>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis
+          logoText="Webild"
+          logoSrc="/placeholder-logo.svg"
+          logoAlt="Company Logo"
+          columns={[
+            {
+              items: [
+                { label: "Home", href: "#hero" },
+                { label: "Features", href: "#features" },
+                { label: "Pricing", href: "#pricing" }
+              ]
+            },
+            {
+              items: [
+                { label: "About Us", href: "#hero" }, // Using hero for about, as no dedicated about page.
+                { label: "Careers", href: "#hero" }, // Using hero for careers, as no dedicated careers page.
+                { label: "Blog", href: "#hero" } // Using hero for blog, as no dedicated blog page.
+              ]
+            },
+            {
+              items: [
+                { label: "Support", href: "#contact" },
+                { label: "Privacy Policy", href: "#hero" }, // Placeholder
+                { label: "Terms of Service", href: "#hero" } // Placeholder
+              ]
+            }
+          ]}
+          ariaLabel="Site footer with navigation and company info"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/product-detail/page.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { Sparkles, ShoppingCart, Heart, Share2, Scale } from "lucide-react"; // Example icons
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+
+export default function ProductDetailPage() {
+  const product = {
+    name: "Minimalist Wooden Desk",    price: "$299.00",    discount: "33% off",    originalPrice: "$450.00",    stockStatus: "In Stock",    deliveryEstimate: "2-3 business days",    images: [
+      { src: "https://r2.webild.com/ecommerce/ecommerce-product-mockup-1.webp", alt: "Product image 1" },
+      { src: "https://r2.webild.com/ecommerce/ecommerce-product-mockup-2.webp", alt: "Product image 2" },
+      { src: "https://r2.webild.com/ecommerce/ecommerce-product-mockup-3.webp", alt: "Product image 3" },
+      { src: "https://r2.webild.com/ecommerce/ecommerce-product-mockup-4.webp", alt: "Product image 4" }
+    ],
+    description: "Experience the perfect blend of functionality and Scandinavian elegance with our Minimalist Wooden Desk. Crafted from sustainably sourced oak, this desk offers a spacious work surface and a clean, uncluttered design that enhances any modern interior. Its robust construction ensures durability, while the natural wood grain adds a touch of organic warmth to your workspace.",    specifications: [
+      { label: "Dimensions", value: "L 120cm x W 60cm x H 75cm" },
+      { label: "Material", value: "Solid Oak, Veneer" },
+      { label: "Weight", value: "25 kg" },
+      { label: "Color", value: "Natural Oak" }
+    ],
+    materials: "100% FSC-certified solid oak and oak veneer. Finished with a non-toxic, water-based lacquer.",    sustainability: "Our desk is crafted from wood sourced from responsibly managed forests, ensuring environmental protection and social benefits. We prioritize minimal waste production and use eco-friendly packaging materials.",    shippingReturns: {
+      shipping: "Free standard shipping on all orders over $100. Expedited shipping options available at checkout. Estimated delivery: 2-3 business days.",      returns: "30-day hassle-free returns. Product must be in original condition and packaging. See full policy for details."
+    }
+  };
+
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'Product', id: '/product-detail' }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <NavbarStyleApple navItems={navItems} brandName="Hara Minimalist Living" />
+      <main className="min-h-screen bg-background text-foreground">
+        <div className="container mx-auto px-4 py-8">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            {/* Product Gallery & Image Zoom */}
+            <div className="flex flex-col gap-4">
+              <div className="relative overflow-hidden rounded-lg shadow-lg aspect-w-16 aspect-h-9 sm:aspect-h-10 md:aspect-h-11 lg:aspect-h-12 xl:aspect-h-13 2xl:aspect-h-14">
+                <img
+                  src={product.images[0].src}
+                  alt={product.images[0].alt}
+                  className="w-full h-full object-cover transition-transform duration-500 hover:scale-110 cursor-zoom-in"
+                />
+              </div>
+              <div className="grid grid-cols-4 gap-2">
+                {product.images.map((image, index) => (
+                  <img
+                    key={index}
+                    src={image.src}
+                    alt={image.alt}
+                    className="w-full h-24 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-primary-cta"
+                  />
+                ))}
+              </div>
+            </div>
+
+            {/* Product Info & Actions */}
+            <div className="flex flex-col gap-6">
+              <h1 className="text-4xl font-extrabold text-foreground">{product.name}</h1>
+              <div className="flex items-baseline gap-2">
+                <span className="text-3xl font-bold text-primary-cta">{product.price}</span>
+                <span className="text-lg text-muted-foreground line-through">{product.originalPrice}</span>
+                <span className="text-lg font-semibold text-accent">{product.discount}</span>
+              </div>
+              <div className="text-md text-foreground flex items-center gap-2">
+                <Sparkles className="h-5 w-5 text-accent" /> {product.stockStatus}
+              </div>
+              <p className="text-sm text-muted-foreground">Delivery: {product.deliveryEstimate}</p>
+
+              {/* Action Buttons */}
+              <div className="flex flex-col sm:flex-row gap-4">
+                <button className="flex-1 px-6 py-3 bg-primary-cta text-primary-cta-foreground rounded-lg font-semibold shadow-md hover:bg-primary-cta/90 transition-colors flex items-center justify-center gap-2">
+                  <ShoppingCart className="h-5 w-5" /> Add to Cart
+                </button>
+                <button className="flex-1 px-6 py-3 bg-foreground text-background rounded-lg font-semibold shadow-md hover:bg-foreground/90 transition-colors">
+                  Buy Now
+                </button>
+                <button className="p-3 bg-card text-foreground rounded-lg shadow-md hover:bg-card/90 transition-colors flex items-center justify-center">
+                  <Heart className="h-5 w-5" />
+                </button>
+                <button className="p-3 bg-card text-foreground rounded-lg shadow-md hover:bg-card/90 transition-colors flex items-center justify-center">
+                  <Scale className="h-5 w-5" />
+                </button>
+                <button className="p-3 bg-card text-foreground rounded-lg shadow-md hover:bg-card/90 transition-colors flex items-center justify-center">
+                  <Share2 className="h-5 w-5" />
+                </button>
+              </div>
+
+              {/* Product Details Sections */}
+              <div className="mt-8 space-y-6">
+                <div>
+                  <h2 className="text-2xl font-bold text-foreground mb-2">Description</h2>
+                  <p className="text-muted-foreground">{product.description}</p>
+                </div>
+                <div>
+                  <h2 className="text-2xl font-bold text-foreground mb-2">Specifications</h2>
+                  <ul className="list-disc list-inside text-muted-foreground space-y-1">
+                    {product.specifications.map((spec, index) => (
+                      <li key={index}>
+                        <strong>{spec.label}:</strong> {spec.value}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+                <div>
+                  <h2 className="text-2xl font-bold text-foreground mb-2">Materials</h2>
+                  <p className="text-muted-foreground">{product.materials}</p>
+                </div>
+                <div>
+                  <h2 className="text-2xl font-bold text-foreground mb-2">Sustainability</h2>
+                  <p className="text-muted-foreground">{product.sustainability}</p>
+                </div>
+                <div>
+                  <h2 className="text-2xl font-bold text-foreground mb-2">Shipping & Returns</h2>
+                  <p className="text-muted-foreground mb-2"><strong>Shipping:</strong> {product.shippingReturns.shipping}</p>
+                  <p className="text-muted-foreground"><strong>Returns:</strong> {product.shippingReturns.returns}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/reviews/page.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import Link from 'next/link';
+
+export default function ReviewsPage() {
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About Us', id: '/about-us' },
+    { name: 'Cart', id: '/cart' },
+    { name: 'Contact', id: '/contact' },
+    { name: 'Reviews', id: '/reviews' },
+    { name: 'Dashboard', id: '/dashboard' },
+    { name: 'Product Detail', id: '/product-detail' }
+  ];
+
+  const testimonialsData = [
+    {
+      id: "1",      name: "Alice Johnson",      handle: "@alicej",      testimonial: "This product changed my life! Absolutely fantastic.",      rating: 5,
+      imageSrc: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYwNXwwfDF8YWxsfDEzfHx8fHx8Mnx8MTcwODYwODc1OHw&ixlib=rb-4.0.3&q=80&w=400",      imageAlt: "Alice Johnson"},
+    {
+      id: "2",      name: "Bob Williams",      handle: "@bobw",      testimonial: "Great service and quality. Highly recommend!",      rating: 4,
+      imageSrc: "https://images.unsplash.com/photo-1527980965255-d3b416303d12?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYwNXwwfDF8YWxsfDEyfHx8fHx8Mnx8MTcwODYwODc1OHw&ixlib=rb-4.0.3&q=80&w=400",      imageAlt: "Bob Williams"},
+    {
+      id: "3",      name: "Charlie Brown",      handle: "@charlieb",      testimonial: "The customer support is excellent and the product exceeds expectations.",      rating: 5,
+      imageSrc: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYwNXwwfDF8YWxsfDEwfHx8fHx8Mnx8MTcwODYwODc1OHw&ixlib=rb-4.0.3&q=80&w=400",      imageAlt: "Charlie Brown"}
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          navItems={navItems}
+          brandName="My Website"
+          logoSrc="/placeholder-logo.svg"
+          logoAlt="Company Logo"
+          button={{ text: "Learn More", href: "#" }}
+        />
+      </div>
+      <div id="reviews-section" data-section="reviews">
+        <TestimonialCardThirteen
+          testimonials={testimonialsData.map(t => ({
+            id: t.id,
+            name: t.name,
+            handle: t.handle,
+            testimonial: t.testimonial,
+            rating: t.rating,
+            imageSrc: t.imageSrc,
+            imageAlt: t.imageAlt
+          }))}
+          title="What Our Customers Say"
+          description="Read genuine feedback from our happy clients."
+          showRating={true}
+          carouselMode="buttons"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          ariaLabel="Customer reviews and testimonials"
+          gridClassName="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/shop/page.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { useState } from 'react';
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
+
+const categories = ["Living Room", "Bedroom", "Kitchen", "Workspace", "Decor"];
+
+const productBases = {
+  "Living Room": ["Sofa", "Coffee Table", "Armchair", "TV Stand", "Rug", "Floor Lamp", "Bookshelf", "Console Table", "Ottoman", "Side Table", "Media Console", "Accent Chair"],
+  "Bedroom": ["Bed Frame", "Mattress", "Nightstand", "Dresser", "Wardrobe", "Vanity Table", "Bench", "Storage Ottoman", "Wall Mirror", "Headboard", "Chest of Drawers", "Bedside Lamp"],
+  "Kitchen": ["Dining Table", "Dining Chair", "Bar Stool", "Kitchen Island", "Pantry Cabinet", "Buffet Cabinet", "Baker's Rack", "Wine Cabinet", "Serving Cart", "Dishwasher", "Microwave Oven", "Cooktop"],
+  "Workspace": ["Office Desk", "Ergonomic Chair", "Monitor Stand", "File Cabinet", "Bookshelf", "Desk Lamp", "Whiteboard", "Printer", "Shredder", "Keyboard", "Mousepad", "Storage Bins"],
+  "Decor": ["Wall Art", "Vase", "Candle Holder", "Decorative Bowl", "Throw Blanket", "Accent Pillow", "Sculpture", "Planter", "Photo Frame", "Artificial Plant", "Area Rug", "Table Runner"]
+};
+
+let productIdCounter = 1;
+const generatedProductsData = [];
+
+for (let i = 0; i < 12; i++) { // 12 products per category for 60 total
+  for (const category of categories) {
+    const nameBase = productBases[category][i % productBases[category].length];
+    const name = `${nameBase} ${i + 1}`;
+    const price = (Math.random() * (1000 - 50) + 50).toFixed(2);
+    const rating = (Math.floor(Math.random() * (5 - 3.5 + 1) / 0.5) * 0.5 + 3.5).toFixed(1);
+    const reviewCount = `${Math.floor(Math.random() * 500) + 10} reviews`;
+    const imageSrc = `https://picsum.photos/seed/${productIdCounter * 123}/400/300`;
+    const imageAlt = `${name} in ${category}`;
+
+    generatedProductsData.push({
+      id: `prod-${productIdCounter++}`,
+      category: category,
+      name: name,
+      price: `$${price}`,
+      rating: parseFloat(rating),
+      reviewCount: reviewCount,
+      imageSrc: imageSrc,
+      imageAlt: imageAlt,
+    });
+  }
+}
+
+export default function ShopPage() {
+  const [searchValue, setSearchValue] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState('All');
+
+  const filteredProducts = generatedProductsData.filter(product => {
+    const matchesSearch = product.name.toLowerCase().includes(searchValue.toLowerCase());
+    const matchesCategory = selectedCategory === 'All' || product.category === selectedCategory;
+    return matchesSearch && matchesCategory;
+  });
+
+  const filters = [
+    {
+      label: 'Category',
+      options: ['All', ...categories],
+      selected: selectedCategory,
+      onChange: (value: string) => setSelectedCategory(value),
+    },
+  ];
+
+  return (
+    <ProductCatalog
+      layout="page"
+      products={filteredProducts}
+      searchValue={searchValue}
+      onSearchChange={setSearchValue}
+      searchPlaceholder="Search products..."
+      filters={filters}
+      emptyMessage="No products match your criteria."
+      className="py-12"
+    />
+  );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #F8F8F8;
+  --background: #1a1a2e;
-  --card: #FFFFFF;
+  --card: #20203a;
-  --foreground: #111111;
+  --foreground: #e0e0e0;
-  --primary-cta: #D4AF37;
+  --primary-cta: #8a2be2;
   --primary-cta-text: #FFFFFF;
-  --secondary-cta: #111111;
+  --secondary-cta: #4a4a6b;
   --secondary-cta-text: #FFFFFF;
-  --accent: #D4AF37;
+  --accent: #a07eff;
-  --background-accent: #EEDD90;
+  --background-accent: #2c2c4a;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);