Merge version_5 into main

Merge version_5 into main

src/app/about/page.tsx

@@ -11,11 +11,11 @@ import { Handshake } from 'lucide-react';
 export default function AboutPage() {
   const navItems = [
     { name: "Home", id: "/" },
-    { name: "Shop", id: "/shop" },
     { name: "About Us", id: "/about" },
     { name: "Blog", id: "/blog" },
     { name: "Contact", id: "/contact" },
     { name: "Cart", id: "/cart" },
+    { name: "Terms of Service", id: "/terms-of-service" }
   ];
 
   const footerColumns = [
@@ -43,7 +43,7 @@ export default function AboutPage() {
     {
       title: "Legal",      items: [
         { label: "Privacy Policy", href: "#" },
-        { label: "Terms of Service", href: "#" }
+        { label: "Terms of Service", href: "/terms-of-service" }
       ]
     }
   ];
@@ -54,8 +54,8 @@ export default function AboutPage() {
       defaultTextAnimation="reveal-blur"
       borderRadius="soft"
       contentWidth="mediumSmall"
-      sizing="mediumSizeLargeTitles"
-      background="circleGradient"
+      sizing="largeSizeMediumTitles"
+      background="aurora"
       cardStyle="glass-elevated"
       primaryButtonStyle="diagonal-gradient"
       secondaryButtonStyle="layered"

src/app/account/page.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import TextBox from '@/components/Textbox';
+
+export default function AccountPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Product Details", id: "/product-details" },
+    { name: "Auth", id: "/auth" },
+    { name: "Account", id: "/account" },
+    { name: "Orders", id: "/orders" },
+    { name: "Terms of Service", id: "/terms-of-service" }
+  ];
+
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="large" background="aurora" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <NavbarStyleApple navItems={navItems} brandName="SoleCrafters" />
+      <main>
+        <div id="account-management" data-section="account-management">
+          <TextBox
+            title="Account Management"
+            description="Manage your profile information, payment methods, and notification settings."
+            textboxLayout="default"
+            center={true}
+            tag="My Account"
+            buttons={[
+              { text: "Edit Profile", href: "#" }, 
+              { text: "Payment Methods", href: "#" } 
+            ]}
+          />
+        </div>
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/auth/page.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+
+export default function AuthPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Product Details", id: "/product-details" },
+    { name: "Auth", id: "/auth" },
+    { name: "Account", id: "/account" },
+    { name: "Orders", id: "/orders" }
+  ];
+
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="large" background="aurora" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <NavbarStyleApple navItems={navItems} brandName="SoleCrafters" />
+      <main>
+        <div id="authentication" data-section="authentication">
+          <ContactCenter
+            tag="Authentication"
+            title="Sign In or Sign Up"
+            description="Access your SoleCrafters account to manage your designs, orders, and preferences."
+            background={{ variant: "plain" }}
+            useInvertedBackground={false}
+            inputPlaceholder="Enter your email"
+            buttonText="Continue with Email"
+            termsText="By continuing, you agree to our Terms and Privacy Policy."
+            onSubmit={(email) => console.log("Auth attempt with:", email)}
+          />
+        </div>
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/blog/page.tsx

@@ -8,8 +8,11 @@ import FooterMedia from "@/components/sections/footer/FooterMedia";
 import Link from "next/link";
 
 const navItems = [
+  { name: "Home", id: "/" },
+  { name: "About Us", id: "/about" },
   { name: "Blog", id: "/blog" },
-  { name: "Contact", id: "/contact" }
+  { name: "Contact", id: "/contact" },
+  { name: "Cart", id: "/cart" }
 ];
 
 const footerNavColumns = [
@@ -40,8 +43,8 @@ export default function BlogPage() {
       defaultTextAnimation="reveal-blur"
       borderRadius="soft"
       contentWidth="mediumSmall"
-      sizing="mediumSizeLargeTitles"
-      background="circleGradient"
+      sizing="largeSizeMediumTitles"
+      background="aurora"
       cardStyle="glass-elevated"
       primaryButtonStyle="diagonal-gradient"
       secondaryButtonStyle="layered"

src/app/cart/page.tsx

@@ -10,7 +10,6 @@ import Link from "next/link";
 export default function CartPage() {
   const navItems = [
     { name: "Home", id: "/" },
-    { name: "Shop", id: "/shop" },
     { name: "About Us", id: "/about" },
     { name: "Blog", id: "/blog" },
     { name: "Contact", id: "/contact" },
@@ -53,8 +52,8 @@ export default function CartPage() {
       defaultTextAnimation="reveal-blur"
       borderRadius="soft"
       contentWidth="mediumSmall"
-      sizing="mediumSizeLargeTitles"
-      background="circleGradient"
+      sizing="largeSizeMediumTitles"
+      background="aurora"
       cardStyle="glass-elevated"
       primaryButtonStyle="diagonal-gradient"
       secondaryButtonStyle="layered"
@@ -128,4 +127,4 @@ export default function CartPage() {
       />
     </ThemeProvider>
   );
-}
+}

src/app/checkout/page.tsx

@@ -0,0 +1,119 @@
+"use client";
+import React from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import { CheckCircle, CreditCard, Receipt } from "lucide-react"; // Icons for checkout
+
+export default function CheckoutPage() {
+  const defaultThemeProps = {
+    defaultButtonVariant: "hover-magnetic" as const,
+    defaultTextAnimation: "entrance-slide" as const,
+    borderRadius: "rounded" as const,
+    contentWidth: "medium" as const,
+    sizing: "medium" as const,
+    background: "none" as const,
+    cardStyle: "solid" as const,
+    primaryButtonStyle: "gradient" as const,
+    secondaryButtonStyle: "glass" as const,
+    headingFontWeight: "bold" as const,
+  };
+
+  const navItems = [
+    { name: "Products", id: "/product-details" },
+    { name: "Checkout", id: "/checkout" },
+  ];
+
+  return (
+    <ThemeProvider {...defaultThemeProps}>
+      <NavbarLayoutFloatingInline
+        navItems={navItems}
+        brandName="SoleCrafters"
+        button={{ text: "Buy Now", href: "/checkout" }}
+      />
+      <main className="container mx-auto px-4 py-16">
+        <div className="max-w-3xl mx-auto bg-card p-8 rounded-lg shadow-lg">
+          <h1 className="text-4xl font-bold text-foreground mb-8 text-center">Checkout</h1>
+
+          <div className="space-y-8">
+            {/* Payment Processing Section */}
+            <div className="bg-background-accent p-6 rounded-md shadow-sm flex items-center space-x-4">
+              <CreditCard className="text-primary-cta h-8 w-8" />
+              <div>
+                <h2 className="text-2xl font-semibold text-foreground mb-2">Payment Information</h2>
+                <p className="text-foreground/80">
+                  Securely enter your payment details to complete your purchase.
+                </p>
+                <div className="mt-4">
+                  {/* Placeholder for a payment form */}
+                  <form className="space-y-4">
+                    <div>
+                      <label htmlFor="cardNumber" className="block text-foreground text-sm font-medium mb-1">Card Number</label>
+                      <input type="text" id="cardNumber" placeholder="**** **** **** ****" className="w-full p-2 border border-accent rounded-md bg-background-accent text-foreground" />
+                    </div>
+                    <div className="grid grid-cols-2 gap-4">
+                      <div>
+                        <label htmlFor="expiryDate" className="block text-foreground text-sm font-medium mb-1">Expiry Date</label>
+                        <input type="text" id="expiryDate" placeholder="MM/YY" className="w-full p-2 border border-accent rounded-md bg-background-accent text-foreground" />
+                      </div>
+                      <div>
+                        <label htmlFor="cvv" className="block text-foreground text-sm font-medium mb-1">CVV</label>
+                        <input type="text" id="cvv" placeholder="123" className="w-full p-2 border border-accent rounded-md bg-background-accent text-foreground" />
+                      </div>
+                    </div>
+                    <button type="submit" className="w-full bg-primary-cta text-white py-3 rounded-md font-semibold hover:opacity-90 transition-opacity">
+                      Process Payment
+                    </button>
+                  </form>
+                </div>
+              </div>
+            </div>
+
+            {/* Order Confirmation Section */}
+            <div className="bg-background-accent p-6 rounded-md shadow-sm flex items-center space-x-4">
+              <Receipt className="text-primary-cta h-8 w-8" />
+              <div>
+                <h2 className="text-2xl font-semibold text-foreground mb-2">Order Summary</h2>
+                <p className="text-foreground/80">
+                  Review your items and total before confirming your order.
+                </p>
+                <ul className="mt-4 space-y-2 text-foreground/80">
+                  <li className="flex justify-between">
+                    <span>The Urban Glide x 1</span>
+                    <span>$180.00</span>
+                  </li>
+                  <li className="flex justify-between">
+                    <span>Shipping</span>
+                    <span>$15.00</span>
+                  </li>
+                  <li className="flex justify-between font-bold text-foreground pt-2 border-t border-accent mt-2">
+                    <span>Total</span>
+                    <span>$195.00</span>
+                  </li>
+                </ul>
+                <button className="w-full bg-secondary-cta text-white py-3 rounded-md font-semibold hover:opacity-90 transition-opacity mt-4">
+                  Confirm Order
+                </button>
+              </div>
+            </div>
+
+            {/* Transaction Handling (Confirmation Message) Section */}
+            <div className="bg-background-accent p-6 rounded-md shadow-sm flex items-center space-x-4">
+              <CheckCircle className="text-green-500 h-8 w-8" />
+              <div>
+                <h2 className="text-2xl font-semibold text-foreground mb-2">Transaction Successful!</h2>
+                <p className="text-foreground/80">
+                  Thank you for your purchase! Your order #12345 has been confirmed and will be processed shortly. A confirmation email has been sent to your inbox.
+                </p>
+                <div className="mt-4 flex justify-center">
+                  <a href="/product-details" className="bg-primary-cta text-white py-2 px-6 rounded-md font-semibold hover:opacity-90 transition-opacity">
+                    Continue Shopping
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/orders/page.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import TextBox from '@/components/Textbox';
+
+export default function OrdersPage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Product Details", id: "/product-details" },
+    { name: "Auth", id: "/auth" },
+    { name: "Account", id: "/account" },
+    { name: "Orders", id: "/orders" }
+  ];
+
+  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">
+      <NavbarStyleApple navItems={navItems} brandName="SoleCrafters" />
+      <main>
+        <div id="order-history" data-section="order-history">
+          <TextBox
+            title="Order History"
+            description="View details of your past and current orders. Track your custom sneakers from design to delivery."
+            textboxLayout="default"
+            center={true}
+            tag="My Orders"
+            buttons={[
+              { text: "View Current Orders", href: "#" }, 
+              { text: "View Past Orders", href: "#" } 
+            ]}
+          />
+        </div>
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -1,5 +1,46 @@
-import { redirect } from 'next/navigation';
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import HeroPersonalLinks from '@/components/sections/hero/HeroPersonalLinks';
+import { ShoppingBag, User, History } from "lucide-react";
 
 export default function HomePage() {
-  redirect('/product-details');
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Product Details", id: "/product-details" },
+    { name: "Auth", id: "/auth" },
+    { name: "Account", id: "/account" },
+    { name: "Orders", id: "/orders" },
+    { name: "Terms of Service", id: "/terms-of-service" }
+  ];
+
+  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">
+      <NavbarStyleApple navItems={navItems} brandName="SoleCrafters" />
+      <main>
+        <div id="hero" data-section="hero">
+          <HeroPersonalLinks
+            background={{ variant: "radial-gradient" }}
+            title="Welcome to SoleCrafters"
+            socialLinks={[]} 
+            linkCards={[
+              {
+                title: "Explore Products",                description: "Discover our unique custom sneakers.",                button: { text: "Shop Now", href: "/product-details" },
+                icon: ShoppingBag
+              },
+              {
+                title: "Manage Account",                description: "Update your profile and settings.",                button: { text: "Go to Account", href: "/account" },
+                icon: User
+              },
+              {
+                title: "View Orders",                description: "Track your past and current orders.",                button: { text: "My Orders", href: "/orders" },
+                icon: History
+              }
+            ]}
+          />
+        </div>
+      </main>
+    </ThemeProvider>
+  );
 }

src/app/product-details/page.tsx

@@ -1,147 +1,76 @@
 "use client";
-
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
-import FeatureBento from '@/components/sections/feature/FeatureBento';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
-import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
-import { Layers, Shapes, Scan } from 'lucide-react';
+import React from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import HeroPersonalLinks from "@/components/sections/hero/HeroPersonalLinks";
+import ProductCardThree from "@/components/sections/product/ProductCardThree";
+import { ShoppingCart } from "lucide-react"; // Example icon for the product button or checkout
 
 export default function ProductDetailsPage() {
-  const navItems = [
-    { name: "Home", id: "/" },
-    { name: "Shop", id: "/shop" },
-    { name: "About Us", id: "/about" },
-    { name: "Blog", id: "/blog" },
-    { name: "Contact", id: "/contact" },
-    { name: "Cart", id: "/cart" },
-  ];
+  const defaultThemeProps = {
+    defaultButtonVariant: "hover-magnetic" as const,
+    defaultTextAnimation: "entrance-slide" as const,
+    borderRadius: "rounded" as const,
+    contentWidth: "medium" as const,
+    sizing: "medium" as const,
+    background: "none" as const,
+    cardStyle: "solid" as const,
+    primaryButtonStyle: "gradient" as const,
+    secondaryButtonStyle: "glass" as const,
+    headingFontWeight: "bold" as const,
+  };
 
-  const footerColumns = [
-    {
-      title: "Company",      items: [
-        { label: "About Us", href: "/about" },
-        { label: "Blog", href: "/blog" },
-        { label: "Careers", href: "#" }
-      ]
-    },
-    {
-      title: "Shop",      items: [
-        { label: "Collections", href: "/shop" },
-        { label: "Custom Orders", href: "/contact" },
-        { label: "Sale", href: "#" }
-      ]
-    },
-    {
-      title: "Support",      items: [
-        { label: "Contact Us", href: "/contact" },
-        { label: "FAQs", href: "/contact#faq-section" },
-        { label: "Shipping", href: "#" }
-      ]
-    },
-    {
-      title: "Legal",      items: [
-        { label: "Privacy Policy", href: "#" },
-        { label: "Terms of Service", href: "#" }
-      ]
-    }
+  const navItems = [
+    { name: "Products", id: "/product-details" },
+    { name: "Checkout", id: "/checkout" },
   ];
 
   return (
-    <ThemeProvider
-      defaultButtonVariant="directional-hover"
-      defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
-      contentWidth="mediumSmall"
-      sizing="mediumSizeLargeTitles"
-      background="circleGradient"
-      cardStyle="glass-elevated"
-      primaryButtonStyle="diagonal-gradient"
-      secondaryButtonStyle="layered"
-      headingFontWeight="extrabold"
-    >
-      <div id="nav" data-section="nav">
-        <NavbarStyleCentered
-          brandName="SoleCrafters"
-          navItems={navItems}
-          button={{ text: "Shop Now", href: "/shop" }}
-          logoSrc="http://img.b2bpic.net/free-psd/boutique-template-design_23-2151490782.jpg"
-          logoAlt="SoleCrafters Logo"
-        />
-      </div>
-
-      <div id="product-details" data-section="product-details">
-        <TextSplitAbout
-          title="Ignite Boost High: The Ultimate Statement Piece"
-          description={[
-            "Step into the future with the Ignite Boost High, a marvel of custom streetwear engineering. This high-top sneaker fuses responsive cushioning with a bold, architectural silhouette. Its multi-layered upper features breathable mesh, premium vegan leather accents, and integrated dynamic texture panels that shift with light, creating a living canvas for your feet.",            "Designed for supreme comfort and unparalleled street presence, the Ignite Boost High includes an adaptive lacing system for a secure fit and a high-traction outsole for urban exploration. Available in limited drops, each pair is a testament to cutting-edge design and individual expression. Add to your collection and ignite your stride."
-          ]}
-          useInvertedBackground={false}
-          buttons={[
-            { text: "Add to Cart", href: "/cart" },
-            { text: "Customize", href: "/contact" }
-          ]}
-        />
-      </div>
-
-      <div id="product-gallery" data-section="product-gallery">
-        <FeatureBento
-          title="Ignite Boost High: AI-Generated Views"
-          description="Explore the intricate details and dynamic textures of the Ignite Boost High from every angle, rendered with stunning clarity."
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={true}
-          features={[
-            {
-              title: "Dynamic Side Profile",              description: "Capturing the flowing lines and structured overlays.",              bentoComponent: "media-stack",              items: [
-                { imageSrc: "http://img.b2bpic.net/free-photo/close-up-futuristic-sneakers_23-2151005668.jpg", imageAlt: "Side view of Ignite Boost High" },
-                { imageSrc: "http://img.b2bpic.net/free-photo/shoemaker-workshop-making-shoes_171337-12250.jpg", imageAlt: "Top view of Ignite Boost High" },
-                { imageSrc: "http://img.b2bpic.net/free-photo/women-tied-shoe-laces-walkways-train-holidays-travel-ideas_1150-14784.jpg", imageAlt: "Sole view of Ignite Boost High" }
-              ]
-            }
-          ]}
-        />
-      </div>
-
-      <div id="related-products-details-page" data-section="related-products-details-page">
-        <ProductCardTwo
-          title="Customers Also Viewed"
-          description="Discover other highly-rated custom sneakers."
-          gridVariant="four-items-2x2-equal-grid"
-          animationType="slide-up"
-          useInvertedBackground={false}
-          textboxLayout="default"
-          products={[
-            {
-              id: "related-1",              brand: "SoleCrafters",              name: "Street Vibe Low",              price: "$220",              rating: 4,
-              reviewCount: "68 reviews",              imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-boy-illustration_23-2151728182.jpg?_wi=1",              imageAlt: "Street Vibe Low"
-            },
-            {
-              id: "related-2",              brand: "SoleCrafters",              name: "Aero Glide Pro",              price: "$290",              rating: 5,
-              reviewCount: "110 reviews",              imageSrc: "http://img.b2bpic.net/free-photo/blue-metal-grid-texture-background_23-2147960315.jpg?_wi=1",              imageAlt: "Aero Glide Pro"
-            },
-            {
-              id: "related-3",              brand: "SoleCrafters",              name: "Elite Crimson",              price: "$340",              rating: 5,
-              reviewCount: "145 reviews",              imageSrc: "http://img.b2bpic.net/free-photo/side-view-image-young-concentrated-shoemaker_171337-12286.jpg?_wi=1",              imageAlt: "Elite Crimson"
-            },
-            {
-              id: "related-4",              brand: "SoleCrafters",              name: "Vivid Canvas",              price: "$255",              rating: 4,
-              reviewCount: "80 reviews",              imageSrc: "http://img.b2bpic.net/free-photo/abstract-floral-illustration_23-2152012468.jpg?_wi=1",              imageAlt: "Vivid Canvas"
-            }
-          ]}
-        />
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterMedia
-          logoText="SoleCrafters"
-          columns={footerColumns}
-          copyrightText="© 2024 SoleCrafters. All rights reserved."
-          videoSrc="http://img.b2bpic.net/free-photo/young-man-running-up-stairs-night-city_23-2149285660.jpg?_wi=1"
-          videoAriaLabel="Streetwear sneaker brand video"
-        />
-      </div>
+    <ThemeProvider {...defaultThemeProps}>
+      <NavbarLayoutFloatingInline
+        navItems={navItems}
+        brandName="SoleCrafters"
+        button={{ text: "Buy Now", href: "/checkout" }}
+      />
+      <main>
+        <div id="hero" data-section="hero">
+          <HeroPersonalLinks
+            background={{ variant: 'radial-gradient' }}
+            title="Your Custom Sneaker Awaits"
+            linkCards={[
+              {
+                title: "Design Your Own",                description: "Craft unique streetwear with our AI design tools.",                button: { text: "Start Designing", href: "#" },
+                imageSrc: "https://r2.streamable.com/P4i3O/webild-preview.jpg?d=1000",                imageAlt: "Custom Sneaker Design"
+              },
+            ]}
+            ariaLabel="Hero section for product details"
+          />
+        </div>
+        <div id="products" data-section="products">
+          <ProductCardThree
+            animationType="slide-up"
+            gridVariant="uniform-all-items-equal"
+            title="Featured Sneakers"
+            description="Explore our latest custom designs."
+            textboxLayout="default"
+            useInvertedBackground={false}
+            products={[
+              {
+                id: "1",                name: "The Urban Glide",                price: "$180",                imageSrc: "https://img.b2bpic.net/free-photo/close-up-futuristic-sneakers_23-2151005661.jpg",                imageAlt: "The Urban Glide Sneaker",                rating: 5,
+                reviewCount: "250",                priceButtonProps: { text: "Add to Cart" }
+              },
+              {
+                id: "2",                name: "Neon Horizon High",                price: "$220",                imageSrc: "https://img.b2bpic.net/free-photo/side-view-futuristic-sneakers_23-2151005679.jpg",                imageAlt: "Neon Horizon High Sneaker",                rating: 4,
+                reviewCount: "180",                priceButtonProps: { text: "Add to Cart" }
+              },
+              {
+                id: "3",                name: "Stealth Runner 2.0",                price: "$195",                imageSrc: "https://img.b2bpic.net/free-photo/pair-bright-sports-sneakers_23-2150993079.jpg",                imageAlt: "Stealth Runner Sneaker",                rating: 4,
+                reviewCount: "120",                priceButtonProps: { text: "Add to Cart" }
+              },
+            ]}
+          />
+        </div>
+      </main>
     </ThemeProvider>
   );
-}
+}

src/app/terms-of-service/page.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple'; // Using Apple style for consistency with home, account etc.
+import LegalSection from '@/components/legal/LegalSection';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+
+export default function TermsOfServicePage() {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Product Details", id: "/product-details" },
+    { name: "Auth", id: "/auth" },
+    { name: "Account", id: "/account" },
+    { name: "Orders", id: "/orders" },
+    { name: "Terms of Service", id: "/terms-of-service" }
+  ];
+
+  const footerColumns = [
+    {
+      title: "Company",      items: [
+        { label: "About Us", href: "/about" },
+        { label: "Blog", href: "/blog" },
+        { label: "Careers", href: "#" }
+      ]
+    },
+    {
+      title: "Shop",      items: [
+        { label: "Collections", href: "/shop" },
+        { label: "Custom Orders", href: "/contact" },
+        { label: "Sale", href: "#" }
+      ]
+    },
+    {
+      title: "Support",      items: [
+        { label: "Contact Us", href: "/contact" },
+        { label: "FAQs", href: "/contact#faq-section" },
+        { label: "Shipping", href: "#" }
+      ]
+    },
+    {
+      title: "Legal",      items: [
+        { label: "Privacy Policy", href: "#" },
+        { label: "Terms of Service", href: "/terms-of-service" }
+      ]
+    }
+  ];
+
+  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">
+        <NavbarStyleApple navItems={navItems} brandName="SoleCrafters" />
+      </div>
+
+      <main>
+        <div id="terms-of-service-content" data-section="terms-of-service-content">
+          <LegalSection
+            layout="page"
+            title="Terms of Service"
+            subtitle="Last Updated: July 24, 2024"
+            sections={[
+              {
+                heading: "1. Acceptance of Terms",                content: [{
+                  type: "paragraph",                  text: "By accessing and using the SoleCrafters website and services, you agree to be bound by these Terms of Service ('Terms'). If you do not agree with any part of these Terms, you must not use our services."
+                }]
+              },
+              {
+                heading: "2. Services Description",                content: [{
+                  type: "paragraph",                  text: "SoleCrafters provides a platform for designing and purchasing custom streetwear sneakers. Our services include AI-assisted design tools, material selection, order processing, and shipping. All designs are subject to our approval process to ensure quality and compliance."
+                }]
+              },
+              {
+                heading: "3. User Accounts",                content: [
+                  {
+                    type: "paragraph",                    text: "To access certain features, you may need to create an account. You are responsible for maintaining the confidentiality of your account information and for all activities that occur under your account."
+                  },
+                  {
+                    type: "list",                    items: [
+                      "You must be at least 18 years old to create an account.",                      "You agree to provide accurate, current, and complete information during registration.",                      "You must notify us immediately of any unauthorized use of your account."
+                    ]
+                  }
+                ]
+              },
+              {
+                heading: "4. Custom Design Guidelines",                content: [
+                  {
+                    type: "paragraph",                    text: "When submitting custom designs, you agree to the following:"
+                  },
+                  {
+                    type: "list",                    items: [
+                      "Your designs must not infringe on any third-party intellectual property rights.",                      "Designs must not contain offensive, derogatory, or illegal content.",                      "SoleCrafters reserves the right to refuse any design that violates these guidelines without refund."
+                    ]
+                  }
+                ]
+              },
+              {
+                heading: "5. Intellectual Property",                content: [{
+                  type: "paragraph",                  text: "All content on the SoleCrafters website, including text, graphics, logos, images, and software, is the property of SoleCrafters or its content suppliers and is protected by intellectual property laws. You may not use, reproduce, or distribute any content without our express written permission."
+                }]
+              },
+              {
+                heading: "6. Pricing and Payment",                content: [
+                  {
+                    type: "paragraph",                    text: "Prices for custom sneakers and other products are displayed on our website and are subject to change without notice. All payments are processed securely through third-party payment gateways. You agree to pay all applicable taxes and shipping fees."
+                  },
+                  {
+                    type: "numbered-list",                    items: [
+                      "Payment is required in full before production of custom items begins.",                      "Orders are non-refundable once production has started due to the personalized nature of our products, unless a defect is found.",                      "We accept major credit cards and other payment methods as indicated on our checkout page."
+                    ]
+                  }
+                ]
+              },
+              {
+                heading: "7. Shipping and Delivery",                content: [{
+                  type: "paragraph",                  text: "Shipping times and costs vary depending on your location and the selected shipping method. SoleCrafters is not responsible for delays caused by customs, natural disasters, or other unforeseen circumstances. Risk of loss and title for items purchased pass to you upon our delivery to the carrier."
+                }]
+              },
+              {
+                heading: "8. Returns and Refunds",                content: [{
+                  type: "paragraph",                  text: "Due to the custom nature of our products, all sales are final. We only accept returns or offer refunds for items that are defective or damaged upon arrival, provided you notify us within 7 days of receipt with photographic evidence. Please contact our support team for assistance."
+                }]
+              },
+              {
+                heading: "9. Disclaimer of Warranties",                content: [{
+                  type: "paragraph",                  text: "Our services are provided on an 'as is' and 'as available' basis, without any warranties of any kind, either express or implied, including, but not limited to, implied warranties of merchantability, fitness for a particular purpose, or non-infringement. SoleCrafters does not warrant that the service will be uninterrupted, secure, or error-free."
+                }]
+              },
+              {
+                heading: "10. Limitation of Liability",                content: [{
+                  type: "paragraph",                  text: "In no event shall SoleCrafters, its directors, employees, or affiliates be liable for any indirect, incidental, special, consequential, or punitive damages, including without limitation, loss of profits, data, use, goodwill, or other intangible losses, resulting from (i) your access to or use of or inability to access or use the service; (ii) any conduct or content of any third party on the service; (iii) any content obtained from the service; and (iv) unauthorized access, use or alteration of your transmissions or content, whether based on warranty, contract, tort (including negligence) or any other legal theory, whether or not we have been informed of the possibility of such damage."
+                }]
+              },
+              {
+                heading: "11. Governing Law",                content: [{
+                  type: "paragraph",                  text: "These Terms shall be governed and construed in accordance with the laws of [Your Jurisdiction], without regard to its conflict of law provisions."
+                }]
+              },
+              {
+                heading: "12. Changes to Terms",                content: [{
+                  type: "paragraph",                  text: "We reserve the right, at our sole discretion, to modify or replace these Terms at any time. If a revision is material, we will try to provide at least 30 days' notice prior to any new terms taking effect. By continuing to access or use our Service after those revisions become effective, you agree to be bound by the revised terms."
+                }]
+              },
+              {
+                heading: "13. Contact Us",                content: [{
+                  type: "paragraph",                  text: "If you have any questions about these Terms, please contact us at support@solecrafters.com."
+                }]
+              }
+            ]}
+          />
+        </div>
+      </main>
+
+      <div id="footer" data-section="footer">
+        <FooterMedia
+          logoText="SoleCrafters"
+          columns={footerColumns}
+          copyrightText="© 2024 SoleCrafters. All rights reserved."
+          videoSrc="http://img.b2bpic.net/free-photo/young-man-running-up-stairs-night-city_23-2149285660.jpg?_wi=99" // Use a unique _wi for the new page
+          videoAriaLabel="Streetwear sneaker brand video"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}