Add src/app/product/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -16,37 +16,25 @@ import { Award, Shield, Zap } from "lucide-react";
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="shift-hover"
+        defaultButtonVariant="hover-magnetic"
         defaultTextAnimation="reveal-blur"
         borderRadius="pill"
         contentWidth="compact"
         sizing="largeSizeMediumTitles"
         background="noiseDiagonalGradient"
         cardStyle="glass-depth"
-        primaryButtonStyle="gradient"
-        secondaryButtonStyle="solid"
-        headingFontWeight="medium"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="extrabold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Helmets",
-          id: "products",
-        },
-        {
-          name: "Safety",
-          id: "features",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "Products", id: "products" },
+        { name: "Features", id: "features" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="RJ Helmets"
     />
@@ -54,228 +42,77 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroOverlayTestimonial
-      title="Ride Safe • Ride Bold"
-      description="Experience the pinnacle of motorcycle safety and aggressive design. RJ Helmets are engineered for the fearless."
-      testimonials={[
-        {
-          name: "Alex R.",
-          handle: "@alexrider",
-          testimonial: "The best fit I've ever had on the track.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-cyclist-woman-outdors_23-2149647406.jpg?_wi=1",
-          imageAlt: "motorcycle helmet studio shot",
-        },
-        {
-          name: "Sarah J.",
-          handle: "@sarahbikes",
-          testimonial: "Unmatched safety and a stunning design.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/male-electrician-protective-helmet-with-glasses-black-background_169016-18018.jpg",
-          imageAlt: "motorcycle helmet studio shot",
-        },
-        {
-          name: "Marcus L.",
-          handle: "@marcusrides",
-          testimonial: "The aero performance is simply incredible.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-builder-engineer-overalls-helmet-light-background-space-text_169016-66831.jpg",
-          imageAlt: "motorcycle helmet studio shot",
-        },
-        {
-          name: "Vince T.",
-          handle: "@vincet",
-          testimonial: "Lightweight, aerodynamic, and looks great.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-girl-with-skateboard_23-2148499552.jpg",
-          imageAlt: "motorcycle helmet studio shot",
-        },
-        {
-          name: "Elena M.",
-          handle: "@elena_m",
-          testimonial: "I trust RJ with my life on the highway.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/model-wearing-motorcycle-helmet-portrait_23-2151585560.jpg?_wi=1",
-          imageAlt: "motorcycle helmet studio shot",
-        },
-      ]}
+      title="Engineered for the Fearless"
+      description="Experience the pinnacle of motorcycle safety and aggressive neon-infused design."
+      imageSrc="http://img.b2bpic.net/free-photo/model-wearing-motorcycle-helmet-portrait_23-2151585560.jpg?_wi=2"
       buttons={[
-        {
-          text: "Shop Now",
-          href: "#products",
-        },
-        {
-          text: "Explore Helmets",
-          href: "#products",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/close-up-cyclist-woman-outdors_23-2149647406.jpg?_wi=2"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/outdoor-portrait-handsome-professional-rider-cycling-clothing-holding-handlebar-black-motor-powered-bike-drinking-water-out-plastic-tube-small-break-while-riding-woods_273609-263.jpg",
-          alt: "Rider 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/urban-cyclist-sitting-his-bicycle-low-view_23-2148828230.jpg",
-          alt: "Rider 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/disabled-fencer-special-equipment-wheelchair_23-2149229551.jpg",
-          alt: "Rider 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/unrecognizable-cyclist-demonstrating-modern-protective-helmet-camera_7502-10112.jpg",
-          alt: "Rider 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/woman-white-pullover-with-motorcycle-helmet_140725-9041.jpg",
-          alt: "Rider 5",
-        },
+        { text: "Shop Now", href: "#products" }
       ]}
+      showBlur={true}
+      showDimOverlay={true}
     />
   </div>
 
   <div id="features" data-section="features">
       <FeatureCardTwentyEight
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
         {
-          id: "f1",
-          title: "Carbon Armor",
-          subtitle: "Ultra-light impact shell",
-          category: "Safety",
-          value: "99%",
-        },
+          id: "f1",          title: "Carbon Armor",          subtitle: "Ultra-light impact shell",          category: "Safety",          value: "99%"},
         {
-          id: "f2",
-          title: "Aero Flow",
-          subtitle: "Drag-reducing geometry",
-          category: "Performance",
-          value: "30%",
-        },
+          id: "f2",          title: "Aero Flow",          subtitle: "Drag-reducing geometry",          category: "Performance",          value: "30%"},
         {
-          id: "f3",
-          title: "Visor Clarity",
-          subtitle: "Anti-fog & scratch-proof",
-          category: "Tech",
-          value: "HD",
-        },
+          id: "f3",          title: "Neon Vision",          subtitle: "High-vis reflective tech",          category: "Style",          value: "Max"},
       ]}
-      title="Engineering Excellence"
-      description="Advanced protection meets precision craftsmanship in every helmet we build."
+      title="Precision Craftsmanship"
+      description="Advanced protective engineering for the modern biker."
     />
   </div>
 
   <div id="products" data-section="products">
       <ProductCardThree
-      animationType="slide-up"
+      animationType="scale-rotate"
       textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
       products={[
         {
-          id: "p1",
-          name: "Red Venom Full-Face",
-          price: "$499",
-          imageSrc: "http://img.b2bpic.net/free-photo/model-wearing-motorcycle-helmet-portrait_23-2151585560.jpg?_wi=2",
-        },
+          id: "p1",          name: "RJ Racing Helmet",          price: "$10",          imageSrc: "http://img.b2bpic.net/free-photo/motorcycle-safety-helmet_23-2151531237.jpg"},
         {
-          id: "p2",
-          name: "Stealth Carbon Modular",
-          price: "$649",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-boxing-beginner-gym-lady-black-sportwear-woman-with-coach_1157-44429.jpg",
-        },
+          id: "p2",          name: "Red Venom Full-Face",          price: "$499",          imageSrc: "http://img.b2bpic.net/free-photo/model-wearing-motorcycle-helmet-portrait_23-2151585560.jpg?_wi=2"},
         {
-          id: "p3",
-          name: "Neon Off-Road MX",
-          price: "$389",
-          imageSrc: "http://img.b2bpic.net/free-photo/motorcycle-safety-helmet_23-2151531237.jpg",
-        },
-        {
-          id: "p4",
-          name: "Retro Leather Open",
-          price: "$299",
-          imageSrc: "http://img.b2bpic.net/free-photo/isolated-studio-shot-self-determined-serious-young-caucasian-male-biker-taking-stylish-black-motorcycle-helmet_343059-3502.jpg",
-        },
-        {
-          id: "p5",
-          name: "Track Master Silver",
-          price: "$599",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-motorcycle-helmet_23-2151574364.jpg",
-        },
-        {
-          id: "p6",
-          name: "Hyper Wings Carbon",
-          price: "$749",
-          imageSrc: "http://img.b2bpic.net/free-photo/model-with-motorcycle-helmet_23-2151585659.jpg",
-        },
+          id: "p3",          name: "Stealth Carbon Modular",          price: "$649",          imageSrc: "http://img.b2bpic.net/free-photo/woman-boxing-beginner-gym-lady-black-sportwear-woman-with-coach_1157-44429.jpg"},
       ]}
-      title="Best Sellers"
-      description="The elite gear chosen by world-class riders."
+      title="Featured Collection"
+      description="Premium performance gear for the road ahead."
     />
   </div>
 
   <div id="metrics" data-section="metrics">
       <MetricCardThree
-      animationType="slide-up"
+      animationType="depth-3d"
       textboxLayout="split"
       useInvertedBackground={false}
       metrics={[
-        {
-          id: "m1",
-          title: "Riders Protected",
-          value: "50,000+",
-          icon: Shield,
-        },
-        {
-          id: "m2",
-          title: "Certifications",
-          value: "15+",
-          icon: Award,
-        },
-        {
-          id: "m3",
-          title: "Track Records",
-          value: "120+",
-          icon: Zap,
-        },
+        { id: "m1", title: "Riders Protected", value: "50,000+", icon: Shield },
+        { id: "m2", title: "Certifications", value: "15+", icon: Award },
+        { id: "m3", title: "Speed Records", value: "120+", icon: Zap },
       ]}
-      title="Global Impact"
-      description="Trusted by riders across the globe for their safety journey."
+      title="Reliability Defined"
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
       <TestimonialCardFifteen
       useInvertedBackground={false}
-      testimonial="RJ Helmets saved me on the track. The build quality is unmatched and the style is aggressive. Best purchase of the season!"
+      testimonial="The most aggressive and safest helmet I've ever owned. The neon accents look incredible on the road!"
       rating={5}
       author="Johnny V."
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/portrait-handsome-stylish-redhead-biker-black-leather-jacket-holds-motorcycle-helmet-posing-studio-isolated-dark-background_613910-19256.jpg",
-          alt: "User 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/handsome-man-biker-travelling-mototrcycle_1303-22136.jpg",
-          alt: "User 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/sea-view-with-bicycle-space-text_185193-111352.jpg",
-          alt: "User 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/man-mountain-biking-equipment_23-2148777261.jpg",
-          alt: "User 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/mechanic-examining-bicycle-wheel_1170-2506.jpg",
-          alt: "User 5",
-        },
-      ]}
-      ratingAnimation="slide-up"
-      avatarsAnimation="slide-up"
+      ratingAnimation="blur-reveal"
+      avatarsAnimation="blur-reveal"
+      avatars={[]}
     />
   </div>
 
@@ -284,37 +121,20 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       faqs={[
-        {
-          id: "q1",
-          title: "Are your helmets track-ready?",
-          content: "Yes, all RJ helmets meet and exceed major international safety certifications.",
-        },
-        {
-          id: "q2",
-          title: "How do I determine my size?",
-          content: "Check our size guide by measuring your head circumference above the eyebrows.",
-        },
-        {
-          id: "q3",
-          title: "What is the return policy?",
-          content: "We offer a 30-day return policy on all unused gear in original packaging.",
-        },
+        { id: "q1", title: "Track Ready?", content: "Yes, all models meet international standards." },
+        { id: "q2", title: "Shipping?", content: "Fast tracked shipping globally." },
       ]}
-      title="Need Answers?"
-      description="Common questions about our gear, shipping, and safety standards."
-      faqsAnimation="slide-up"
+      title="Common Inquiries"
+      faqsAnimation="blur-reveal"
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactCenter
       useInvertedBackground={false}
-      background={{
-        variant: "gradient-bars",
-      }}
-      tag="Get in touch"
-      title="Ride with Confidence"
-      description="Have questions about a helmet? Contact our team of experts."
+      background={{ variant: "sparkles-gradient" }}
+      title="Ride Bold"
+      description="Join the RJ Helmets community today."
     />
   </div>
 
@@ -322,50 +142,10 @@ export default function LandingPage() {
       <FooterMedia
       imageSrc="http://img.b2bpic.net/free-photo/female-motorcycle-helmet-leather-clothes-isolated-grey-background-studio_613910-838.jpg"
       logoText="RJ Helmets"
-      columns={[
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About",
-              href: "#",
-            },
-            {
-              label: "Careers",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Shop",
-          items: [
-            {
-              label: "Helmets",
-              href: "#products",
-            },
-            {
-              label: "Accessories",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-            {
-              label: "FAQs",
-              href: "#faq",
-            },
-          ],
-        },
-      ]}
+      columns={[]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/product/page.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ProductDetailCard from '@/components/ecommerce/productDetail/ProductDetailCard';
+import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
+import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+
+export default function ProductDetailPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="shift-hover"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="compact"
+        sizing="largeSizeMediumTitles"
+        background="noiseDiagonalGradient"
+        cardStyle="glass-depth"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="solid"
+        headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "hero" },
+            { name: "Helmets", id: "products" },
+            { name: "Contact", id: "contact" }
+          ]}
+          brandName="RJ Helmets"
+        />
+
+        <div className="pt-32 pb-16">
+          <ProductDetailCard 
+            layout="page"
+            name="RJ Racing Helmet"
+            price="$10"
+            description="Engineered for the ultimate speed enthusiast, this helmet combines lightweight carbon fiber construction with advanced aerodynamic stability. Features a multi-layered visor for crystal clear visibility in all conditions."
+            images={[
+              { src: "http://img.b2bpic.net/free-photo/model-wearing-motorcycle-helmet-portrait_23-2151585560.jpg?_wi=2", alt: "RJ Racing Helmet Front" },
+              { src: "http://img.b2bpic.net/free-photo/close-up-motorcycle-helmet_23-2151574364.jpg", alt: "RJ Racing Helmet Side" }
+            ]}
+            buttons={[
+              { text: "Add to Cart", onClick: () => console.log("Added") },
+              { text: "Buy Now", onClick: () => console.log("Buy Now") }
+            ]}
+          />
+        </div>
+
+        <FeatureCardTwentyEight
+          animationType="slide-up"
+          textboxLayout="default"
+          title="Specifications"
+          description="Precision-engineered details for maximum rider safety and comfort."
+          features={[
+            { id: "s1", title: "Shell", subtitle: "Carbon Fiber Composite", category: "Material", value: "850g" },
+            { id: "s2", title: "Visor", subtitle: "Anti-Fog/Scratch", category: "Vision", value: "HD" },
+            { id: "s3", title: "Interior", subtitle: "Moisture-Wicking", category: "Comfort", value: "Dry" }
+          ]}
+        />
+
+        <TestimonialCardTwo
+          animationType="slide-up"
+          textboxLayout="split"
+          title="What Riders Say"
+          testimonials={[
+            { id: "t1", name: "Alex R.", role: "Pro Racer", testimonial: "The best fit I've ever had on the track. Incredible visibility." },
+            { id: "t2", name: "Sarah J.", role: "Touring Expert", testimonial: "Lightweight and comfortable even after 6 hours on the road." }
+          ]}
+        />
+
+        <FooterMedia
+          imageSrc="http://img.b2bpic.net/free-photo/female-motorcycle-helmet-leather-clothes-isolated-grey-background-studio_613910-838.jpg"
+          logoText="RJ Helmets"
+          columns={[]}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}