Add src/app/product/[id]/page.tsx

2026-03-21 10:06:41 +00:00
parent 266049a7b2
commit 5527a6f5c1
1 changed files with 107 additions and 0 deletions
--- a/src/app/product/[id]/page.tsx
+++ b/src/app/product/[id]/page.tsx
@@ -0,0 +1,107 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { ShoppingCart, ChevronLeft } from 'lucide-react';
+import { useParams } from 'next/navigation';
+
+const productData: { [key: string]: any } = {
+  "1": {
+    id: "1",    name: "Power Hoodie",    price: "$49.99",    description: "Premium cotton blend hoodie with embroidered OAC logo. Perfect for representing your power level in style.",    imageSrc: "http://img.b2bpic.net/free-photo/young-girl-with-pink-hairs-street-style-outfits_114579-17694.jpg",    imageAlt: "Power Hoodie Premium Cotton Blend",    variant: "Premium Cotton Blend",    details: "100% comfort, 80% cotton, 20% polyester. Available in XS to 3XL."
+  },
+  "2": {
+    id: "2",    name: "Elite T-Shirt",    price: "$24.99",    description: "Limited edition graphic tee featuring exclusive OAC tournament artwork.",    imageSrc: "http://img.b2bpic.net/free-photo/blondish-girl-holding-chalkboard_23-2147925908.jpg",    imageAlt: "Elite T-Shirt Limited Edition",    variant: "Limited Edition Print",    details: "100% certified organic cotton. Sustainable production. Unisex sizing."
+  },
+  "3": {
+    id: "3",    name: "Champion Cap",    price: "$19.99",    description: "Adjustable baseball cap with embroidered champion badge. Show off your elite status.",    imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-blue-light_23-2149478939.jpg",    imageAlt: "Champion Cap Adjustable Fit",    variant: "Adjustable Fit",    details: "Breathable mesh back. Curved bill. Adjustable snapback closure."
+  }
+};
+
+export default function ProductPage() {
+  const params = useParams();
+  const productId = params?.id as string;
+  const product = productData[productId] || productData["1"];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumSizeLargeTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="OAC"
+          navItems={[
+            { name: "Shop", id: "shop" },
+            { name: "Tournament", id: "tournament" },
+            { name: "Gallery", id: "gallery" },
+            { name: "Community", id: "community" },
+            { name: "Power Stats", id: "power-stats" }
+          ]}
+          button={{ text: "Cart", href: "/cart" }}
+        />
+      </div>
+
+      <div id="product" data-section="product">
+        <HeroOverlay
+          title={product.name}
+          description={product.description}
+          tag={product.variant}
+          tagIcon={ShoppingCart}
+          tagAnimation="blur-reveal"
+          buttons={[
+            { text: "Add to Cart", href: "/cart" },
+            { text: "Back to Shop", href: "/shop" }
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc={product.imageSrc}
+          imageAlt={product.imageAlt}
+          showDimOverlay={false}
+          showBlur={true}
+          ariaLabel={`${product.name} Product Details`}
+        />
+      </div>
+
+      <div id="details" data-section="details">
+        <div className="bg-card border border-foreground/10 rounded-lg p-8 mx-auto max-w-2xl">
+          <div className="space-y-6">
+            <div>
+              <h2 className="text-2xl font-bold mb-2">{product.name}</h2>
+              <p className="text-xl font-semibold text-primary-cta mb-4">{product.price}</p>
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold mb-2">Product Details</h3>
+              <p className="text-foreground/80">{product.details}</p>
+            </div>
+            <div className="flex gap-4">
+              <button className="flex-1 bg-primary-cta text-white py-3 rounded-lg font-semibold hover:opacity-90">
+                Add to Cart
+              </button>
+              <button className="flex-1 border border-foreground/20 py-3 rounded-lg font-semibold hover:bg-card">
+                Continue Shopping
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="OAC Command Center"
+          leftLink={{ text: "Shop", href: "/shop" }}
+          rightLink={{ text: "Cart", href: "/cart" }}
+          ariaLabel="Footer Navigation"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}