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

src/app/product-details/page.tsx

@@ -1,38 +1,44 @@
 "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 FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 import { Star } from "lucide-react";
 
 export default function ProductDetailsPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="text-stagger"
+      defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
-      borderRadius="pill"
+      borderRadius="rounded"
       contentWidth="medium"
       sizing="medium"
-      background="none"
+      background="circleGradient"
       cardStyle="glass-elevated"
-      primaryButtonStyle="metallic"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="medium"
+      headingFontWeight="normal"
     >
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-          brandName="Webild"
-          navItems={[
-            { name: "Back to Home", id: "/" },
-          ]}
-          button={{ text: "Cart (0)", href: "#" }}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Catalog", id: "/catalog" },
+              { name: "Cart", id: "/cart" },
+              { name: "Checkout", id: "/checkout" },
+              { name: "Payment", id: "/payment" },
+              { name: "Contact", id: "/contact" },
+              { name: "Account", id: "/account" },
+              { name: "Orders", id: "/account/orders" },
+            ]}
+          />
+        </div>
         
         <div className="pt-32 pb-16">
           <ProductCardTwo
@@ -41,6 +47,7 @@ export default function ProductDetailsPage() {
             gridVariant="asymmetric-60-wide-40-narrow"
             animationType="slide-up"
             textboxLayout="split"
+            useInvertedBackground={false}
             buttons={[{ text: "Add to Cart", onClick: () => console.log("Added") }]}
           />
         </div>
@@ -49,6 +56,7 @@ export default function ProductDetailsPage() {
           title="Technical Specifications"
           description="Everything you need to know about what's under the hood."
           animationType="slide-up"
+          textboxLayout="default"
           useInvertedBackground={true}
           positiveCard={{
             items: ["High-resolution assets included", "Lifetime updates", "Full documentation", "Dedicated support", "Scalable architecture"]
@@ -60,6 +68,7 @@ export default function ProductDetailsPage() {
 
         <TestimonialCardSix
           title="Customer Reviews"
+          description="See what our customers are saying about us."
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
@@ -73,10 +82,9 @@ export default function ProductDetailsPage() {
           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
+        <FooterBaseReveal
           logoText="Webild"
           columns={[
             { title: "Shop", items: [{ label: "Catalog", href: "#" }, { label: "Account", href: "#" }] },