Update src/app/page.tsx

Merge version_1 into main

src/app/account/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 AccountPage() {
+  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="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="medium" background="circleGradient" 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/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,45 @@
-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" }
+  ];
+
+  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 React from "react";
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import FeatureBento from '@/components/sections/feature/FeatureBento';
+import HeroPersonalLinks from "@/components/sections/hero/HeroPersonalLinks";
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import ProductCardThree from "@/components/sections/product/ProductCardThree";
-import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { ShoppingCart } from "lucide-react"; // Example icon for the product button or checkout
-import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
-import { Layers, Shapes, Scan } from 'lucide-react';
 
 export default function ProductDetailsPage() {
-  const navItems = [
+  const defaultThemeProps = {
-    { name: "Home", id: "/" },
+    defaultButtonVariant: "hover-magnetic" as const,
-    { name: "Shop", id: "/shop" },
+    defaultTextAnimation: "entrance-slide" as const,
-    { name: "About Us", id: "/about" },
+    borderRadius: "rounded" as const,
-    { name: "Blog", id: "/blog" },
+    contentWidth: "medium" as const,
-    { name: "Contact", id: "/contact" },
+    sizing: "medium" as const,
-    { name: "Cart", id: "/cart" },
+    background: "none" as const,
-  ];
+    cardStyle: "solid" as const,
+    primaryButtonStyle: "gradient" as const,
+    secondaryButtonStyle: "glass" as const,
+    headingFontWeight: "bold" as const,
+  };
 
-  const footerColumns = [
+  const navItems = [
-    {
+    { name: "Products", id: "/product-details" },
-      title: "Company",      items: [
+    { name: "Checkout", id: "/checkout" },
-        { 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: "#" }
-      ]
-    }
   ];
 
   return (
-    <ThemeProvider
+    <ThemeProvider {...defaultThemeProps}>
-      defaultButtonVariant="directional-hover"
+      <NavbarLayoutFloatingInline
-      defaultTextAnimation="reveal-blur"
+        navItems={navItems}
-      borderRadius="soft"
+        brandName="SoleCrafters"
-      contentWidth="mediumSmall"
+        button={{ text: "Buy Now", href: "/checkout" }}
-      sizing="mediumSizeLargeTitles"
+      />
-      background="circleGradient"
+      <main>
-      cardStyle="glass-elevated"
+        <div id="hero" data-section="hero">
-      primaryButtonStyle="diagonal-gradient"
+          <HeroPersonalLinks
-      secondaryButtonStyle="layered"
+            background={{ variant: 'radial-gradient' }}
-      headingFontWeight="extrabold"
+            title="Your Custom Sneaker Awaits"
-    >
+            linkCards={[
-      <div id="nav" data-section="nav">
+              {
-        <NavbarStyleCentered
+                title: "Design Your Own",                description: "Craft unique streetwear with our AI design tools.",                button: { text: "Start Designing", href: "#" },
-          brandName="SoleCrafters"
+                imageSrc: "https://r2.streamable.com/P4i3O/webild-preview.jpg?d=1000",                imageAlt: "Custom Sneaker Design"
-          navItems={navItems}
+              },
-          button={{ text: "Shop Now", href: "/shop" }}
+            ]}
-          logoSrc="http://img.b2bpic.net/free-psd/boutique-template-design_23-2151490782.jpg"
+            ariaLabel="Hero section for product details"
-          logoAlt="SoleCrafters Logo"
+          />
-        />
+        </div>
-      </div>
+        <div id="products" data-section="products">
-
+          <ProductCardThree
-      <div id="product-details" data-section="product-details">
+            animationType="slide-up"
-        <TextSplitAbout
+            gridVariant="uniform-all-items-equal"
-          title="Ignite Boost High: The Ultimate Statement Piece"
+            title="Featured Sneakers"
-          description={[
+            description="Explore our latest custom designs."
-            "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."
+            textboxLayout="default"
-          ]}
+            useInvertedBackground={false}
-          useInvertedBackground={false}
+            products={[
-          buttons={[
+              {
-            { text: "Add to Cart", href: "/cart" },
+                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,
-            { text: "Customize", href: "/contact" }
+                reviewCount: "250",                priceButtonProps: { text: "Add to Cart" }
-          ]}
+              },
-        />
+              {
-      </div>
+                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" }
-      <div id="product-gallery" data-section="product-gallery">
+              },
-        <FeatureBento
+              {
-          title="Ignite Boost High: AI-Generated Views"
+                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,
-          description="Explore the intricate details and dynamic textures of the Ignite Boost High from every angle, rendered with stunning clarity."
+                reviewCount: "120",                priceButtonProps: { text: "Add to Cart" }
-          animationType="slide-up"
+              },
-          textboxLayout="default"
+            ]}
-          useInvertedBackground={true}
+          />
-          features={[
+        </div>
-            {
+      </main>
-              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>
   );
-}
+}