Add src/app/product-detail/page.tsx

2026-03-12 06:04:14 +00:00
parent 0c0de562eb
commit d2333073d7
1 changed files with 136 additions and 0 deletions
--- a/src/app/product-detail/page.tsx
+++ b/src/app/product-detail/page.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ProductDetailCard from '@/components/ecommerce/productDetail/ProductDetailCard';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Mail, ArrowLeft } from "lucide-react";
+import Link from "next/link";
+
+export default function ProductDetailPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-bubble"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="small"
+      sizing="largeSmallSizeLargeTitles"
+      background="aurora"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Home", id: "home" },
+            { name: "Products", id: "product" },
+            { name: "About", id: "about" },
+            { name: "Benefits", id: "feature" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{ text: "Shop Now", href: "#" }}
+          brandName="Pure Glow"
+        />
+      </div>
+
+      <div id="product-detail" data-section="product-detail" className="pt-20">
+        <div className="mb-8 px-4">
+          <Link href="/" className="inline-flex items-center gap-2 text-foreground hover:opacity-70 transition-opacity">
+            <ArrowLeft className="w-4 h-4" />
+            <span>Back to Products</span>
+          </Link>
+        </div>
+        <ProductDetailCard
+          layout="page"
+          name="Radiant Hydration Moisturizer"
+          price="$58.00"
+          rating={4.5}
+          description="Discover luxurious hydration with our Radiant Hydration Moisturizer. Formulated with organic botanicals and advanced moisture-locking technology, this lightweight yet nourishing cream provides 24-hour hydration while promoting a visibly brighter, more luminous complexion. Perfect for all skin types, especially those seeking radiant, glowing skin."
+          images={[
+            { src: "http://img.b2bpic.net/free-vector/cosmetics-products-realistic-composition-poster_1284-18210.jpg", alt: "Radiant Hydration Moisturizer - Front" },
+            { src: "http://img.b2bpic.net/free-photo/top-view-gua-sha-face-products_23-2149401501.jpg", alt: "Radiant Hydration Moisturizer - Application" },
+            { src: "http://img.b2bpic.net/free-photo/front-view-argan-product-composition_23-2148955787.jpg", alt: "Radiant Hydration Moisturizer - Ingredients" }
+          ]}
+          variants={[
+            {
+              label: "Size",              options: ["50ml", "100ml", "200ml"],
+              selected: "50ml",              onChange: (value) => console.log("Size selected:", value)
+            },
+            {
+              label: "Formula Type",              options: ["Lightweight Gel", "Rich Cream", "Night Intensive"],
+              selected: "Lightweight Gel",              onChange: (value) => console.log("Formula selected:", value)
+            }
+          ]}
+          quantity={{
+            label: "Quantity",            options: ["1", "2", "3", "4", "5"],
+            selected: "1",            onChange: (value) => console.log("Quantity selected:", value)
+          }}
+          buttons={[
+            { text: "Add To Cart", onClick: () => alert("Product added to cart!") },
+            { text: "Buy Now", href: "#" }
+          ]}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Stay Glowing"
+          tagIcon={Mail}
+          title="Join Our Beauty Community"
+          description="Subscribe to receive exclusive skincare tips, new product launches, and special discounts delivered straight to your inbox."
+          background={{ variant: "sparkles-gradient" }}
+          useInvertedBackground={false}
+          inputPlaceholder="Enter your email"
+          buttonText="Subscribe"
+          termsText="We respect your privacy. Unsubscribe anytime. By subscribing, you agree to our newsletter terms."
+          tagAnimation="slide-up"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="Pure Glow"
+          columns={[
+            {
+              title: "Products",              items: [
+                { label: "Moisturizers", href: "#" },
+                { label: "Serums", href: "#" },
+                { label: "Masks", href: "#" },
+                { label: "Cleansers", href: "#" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "#about" },
+                { label: "Our Story", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "Blog", href: "#" }
+              ]
+            },
+            {
+              title: "Support",              items: [
+                { label: "Contact", href: "#contact" },
+                { label: "FAQ", href: "#faq" },
+                { label: "Shipping", href: "#" },
+                { label: "Returns", href: "#" },
+                { label: "Track Order", href: "#" }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Sustainability", href: "#" },
+                { label: "Accessibility", href: "#" }
+              ]
+            }
+          ]}
+          copyrightText="© 2025 Pure Glow. All rights reserved. Crafted with love for your skin."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}