Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -2,16 +2,14 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import AboutMetric from '@/components/sections/about/AboutMetric';
+import MediaAbout from '@/components/sections/about/MediaAbout';
-import ContactCTA from '@/components/sections/contact/ContactCTA';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
+import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
-import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
-import { Award, Diamond, Shield, Zap, Package, Globe, Lock, PenTool } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -42,89 +40,89 @@ export default function LandingPage() {
         </div>
 
         <div id="home" data-section="home">
-            <HeroOverlay
+            <HeroOverlayTestimonial
               tag="Luxury That Speaks Without Words"
               title="Royaltick Jewelry - Where Luxury Meets Precision"
               description="Discover premium watches, pendants & exclusive jewelry crafted for those who value elegance and status."
+              testimonials={[
+                { name: "Alex P.", handle: "@alex_watches", testimonial: "The craftsmanship is simply unparalleled. Truly elite.", rating: 5 },
+                { name: "Sarah J.", handle: "@luxury_lifestyler", testimonial: "My custom ring is exactly what I envisioned. Masterpiece!", rating: 5 }
+              ]}
               buttons={[{ text: "Shop Now", href: "#products" }, { text: "Explore Collection", href: "#products" }]}
               imageSrc="http://img.b2bpic.net/free-photo/closeup-watch_53876-32028.jpg"
             />
         </div>
 
         <div id="about" data-section="about">
-            <AboutMetric
+            <MediaAbout
+              title="Our Heritage of Excellence"
+              description="With decades of artisan experience, Royaltick combines traditional jewelry techniques with modern aesthetic precision. Every piece tells a story of status, legacy, and unparalleled quality."
+              imageSrc="http://img.b2bpic.net/free-photo/jeweler-working-shop-with-equipment_23-2150914293.jpg"
               useInvertedBackground={true}
-              title="Luxury That Speaks"
-              metrics={[
-                { icon: Award, label: "Premium Quality", value: "Hand-Crafted" },
-                { icon: Shield, label: "Certified Status", value: "Exclusive" },
-                { icon: Diamond, label: "Timeless Design", value: "Luxury" },
-              ]}
-              metricsAnimation="slide-up"
             />
         </div>
 
         <div id="products" data-section="products">
-            <ProductCardOne
+            <ProductCardTwo
               animationType="slide-up"
-              textboxLayout="default"
+              textboxLayout="split-description"
-              gridVariant="uniform-all-items-equal"
+              gridVariant="bento-grid"
-              useInvertedBackground={false}
               products={[
-                { id: "p1", name: "Diamond Watch", price: "Contact for Price", imageSrc: "http://img.b2bpic.net/free-photo/bright-engagement-gold-shiny-love-macro_1400-32.jpg" },
+                { id: "p1", brand: "Royaltick", name: "Diamond Watch", price: "$5,499", rating: 5, reviewCount: "42", imageSrc: "http://img.b2bpic.net/free-photo/bright-engagement-gold-shiny-love-macro_1400-32.jpg" },
-                { id: "p2", name: "Custom Pendant", price: "Contact for Price", imageSrc: "http://img.b2bpic.net/free-photo/outdoor-portrait-woman-pink-romantic-dress-wearing-necklace_343596-1994.jpg" },
+                { id: "p2", brand: "Royaltick", name: "Custom Pendant", price: "$2,299", rating: 5, reviewCount: "28", imageSrc: "http://img.b2bpic.net/free-photo/outdoor-portrait-woman-pink-romantic-dress-wearing-necklace_343596-1994.jpg" },
-                { id: "p3", name: "Cuban Chain", price: "Contact for Price", imageSrc: "http://img.b2bpic.net/free-photo/jeweler-working-shop-with-equipment_23-2150914293.jpg" },
+                { id: "p3", brand: "Royaltick", name: "Signature Cuban", price: "$3,800", rating: 5, reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-golden-lion-ring_246466-29.jpg?_wi=1" },
-                { id: "p4", name: "Tennis Chain", price: "Contact for Price", imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-golden-lion-ring_246466-29.jpg?_wi=1" },
-                { id: "p5", name: "Custom Ring", price: "Contact for Price", imageSrc: "http://img.b2bpic.net/free-photo/negative-female-sad-tired-pain_1150-1590.jpg" },
-                { id: "p6", name: "Custom Bracelet", price: "Contact for Price", imageSrc: "http://img.b2bpic.net/free-photo/still-life-object_1122-1944.jpg?_wi=1" },
               ]}
               title="Signature Collection"
-              description="Premium jewelry designed for those who value individuality."
+              description="Curated items for the discerning individual."
+              useInvertedBackground={false}
             />
         </div>
 
         <div id="features" data-section="features">
-            <FeatureCardEight
+            <FeatureCardSixteen
+              title="Why Choose Royaltick"
+              description="The difference is in the details, materials, and our commitment to you."
               textboxLayout="default"
+              animationType="slide-up"
               useInvertedBackground={true}
-              features={[
+              positiveCard={{ items: ["Certified 18k Gold", "Authentic Diamond Grading", "Lifetime Polish Warranty"] }}
-                { title: "Premium Quality", description: "Crafted with the finest materials for lasting elegance.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-gold-chains-still-life_23-2149560668.jpg" },
+              negativeCard={{ items: ["No Mass Production", "No Low-Grade Materials", "No Compromised Finishing"] }}
-                { title: "Luxury Finishing", description: "Flawless attention to detail in every polish.", imageSrc: "http://img.b2bpic.net/free-photo/view-luxurious-golden-ring-with-marble_23-2150329646.jpg" },
-                { title: "Worldwide Shipping", description: "Secure, insured delivery to your doorstep.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-tools-cutting-wire_23-2148643276.jpg" },
-                { title: "Secure Packaging", description: "Presentation that matches the beauty of the piece.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-object_1122-1944.jpg?_wi=2" },
-                { title: "Custom Orders", description: "Tailored bespoke designs unique to you.", imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-golden-lion-ring_246466-29.jpg?_wi=2" },
-              ]}
-              title="Excellence in Craft"
-              description="Our commitments to quality, shipping, and customization."
-              buttons={[{ text: "Shop Now", href: "#products" }, { text: "Explore Collection", href: "#products" }]}
             />
         </div>
 
         <div id="contact" data-section="contact">
-            <ContactCTA
+            <ContactSplit
-              useInvertedBackground={false}
-              background={{ variant: "sparkles-gradient" }}
               tag="Get in touch"
               title="Create Your Legacy"
-              description="Discuss your vision with our master jewelers today."
+              description="Schedule a consultation with our master designers to craft your unique bespoke piece."
-              buttons={[
+              background={{ variant: "sparkles-gradient" }}
-                { text: "Contact Support", href: "mailto:support@royaltick.com" }
+              imageSrc="http://img.b2bpic.net/free-photo/view-luxurious-golden-ring-with-marble_23-2150329646.jpg"
-              ]}
+              mediaPosition="right"
+              useInvertedBackground={false}
             />
         </div>
 
+        <div id="faq" data-section="faq">
+          <FaqSplitMedia
+             title="Frequently Asked Questions"
+             description="Common queries about our bespoke jewelry process and services."
+             faqs={[
+               { id: "1", title: "How do I request a custom piece?", content: "Simply contact our support team through our form and we will guide you through the initial design and stone selection phase." },
+               { id: "2", title: "Is shipping insured?", content: "Yes, every single order is fully insured and shipped via high-security logistics to ensure your piece arrives safely." }
+             ]}
+             faqsAnimation="slide-up"
+             textboxLayout="default"
+             useInvertedBackground={false}
+          />
+        </div>
+
         <div id="footer" data-section="footer">
-            <FooterLogoEmphasis
+            <FooterBaseReveal
-              columns={[
-                {
-                  items: [
-                    { label: "Shop Collections", href: "#products" },
-                    { label: "Custom Orders", href: "#contact" },
-                    { label: "About Us", href: "#about" },
-                  ],
-                },
-              ]}
               logoText="Royaltick Jewelry"
+              columns={[
+                { title: "Collections", items: [{ label: "Watches", href: "#products" }, { label: "Pendants", href: "#products" }] },
+                { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Contact", href: "#contact" }] }
+              ]}
             />
         </div>
       </ReactLenis>