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

2026-05-09 12:18:20 +00:00
parent 92f571937c
commit 020ae1600a
1 changed files with 89 additions and 0 deletions
--- a/src/app/product-details/page.tsx
+++ b/src/app/product-details/page.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
+import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
+import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
+import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { Star } from "lucide-react";
+
+export default function ProductDetailsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="metallic"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <NavbarLayoutFloatingOverlay
+          brandName="Webild"
+          navItems={[
+            { name: "Back to Home", id: "/" },
+          ]}
+          button={{ text: "Cart (0)", href: "#" }}
+        />
+        
+        <div className="pt-32 pb-16">
+          <ProductCardTwo
+            title="Premium Digital Product"
+            description="Experience the pinnacle of design and performance with our latest digital asset. Crafted for precision and scalability."
+            gridVariant="asymmetric-60-wide-40-narrow"
+            animationType="slide-up"
+            textboxLayout="split"
+            buttons={[{ text: "Add to Cart", onClick: () => console.log("Added") }]}
+          />
+        </div>
+
+        <FeatureCardSixteen
+          title="Technical Specifications"
+          description="Everything you need to know about what's under the hood."
+          animationType="slide-up"
+          useInvertedBackground={true}
+          positiveCard={{
+            items: ["High-resolution assets included", "Lifetime updates", "Full documentation", "Dedicated support", "Scalable architecture"]
+          }}
+          negativeCard={{
+            items: ["Requires basic technical knowledge", "Not compatible with legacy systems", "License restricted to personal use"]
+          }}
+        />
+
+        <TestimonialCardSix
+          title="Customer Reviews"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          testimonials={[
+            { id: "1", name: "Alex P.", handle: "@alexp", testimonial: "Absolutely amazing quality and support!", icon: Star },
+            { id: "2", name: "Jordan S.", handle: "@jordan", testimonial: "The best purchase I've made this year. So impressed.", icon: Star }
+          ]}
+        />
+
+        <ContactCTA
+          title="Have Questions?"
+          description="Our team is here to help you get the most out of your purchase."
+          background={{ variant: "rotated-rays-animated" }}
+          buttonText="Contact Support"
+        />
+
+        <FooterBase
+          logoText="Webild"
+          columns={[
+            { title: "Shop", items: [{ label: "Catalog", href: "#" }, { label: "Account", href: "#" }] },
+            { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
+          ]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}