Merge version_20 into main

Merge version_20 into main

src/app/page.tsx

@@ -2,193 +2,154 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplit from '@/components/sections/contact/ContactSplit';
+import { Sparkles, BarChart3, ShieldCheck, Zap } from "lucide-react";
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FooterBase from '@/components/sections/footer/FooterBase';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
-import HeroCentered from '@/components/sections/hero/HeroCentered';
+import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
-import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
+import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
-import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
-import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
+import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="hover-bubble"
+        defaultButtonVariant="hover-magnetic"
         defaultTextAnimation="reveal-blur"
-        borderRadius="rounded"
+        borderRadius="pill"
-        contentWidth="medium"
+        contentWidth="mediumLarge"
-        sizing="medium"
+        sizing="largeSizeMediumTitles"
-        background="circleGradient"
+        background="noise"
         cardStyle="glass-elevated"
-        primaryButtonStyle="gradient"
+        primaryButtonStyle="primary-glow"
         secondaryButtonStyle="glass"
-        headingFontWeight="normal"
+        headingFontWeight="bold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarStyleCentered
+          <NavbarLayoutFloatingInline
-      navItems={[
+            brandName="CardTrader"
-        { name: "Home", id: "hero" },
+            navItems={[
-        { name: "Products", id: "catalog" },
+              { name: "Marketplace", id: "catalog" },
-        { name: "Pricing", id: "pricing" },
+              { name: "Ownership", id: "pricing" },
-        { name: "Support", id: "faq" },
+              { name: "FAQ", id: "faq" },
-      ]}
+            ]}
-      brandName="CardTrader"
+            button={{ text: "Sign Up" }}
-    />
+          />
-  </div>
+        </div>
 
-  <div id="hero" data-section="hero">
+        <div id="hero" data-section="hero">
-      <HeroCentered
+          <HeroBillboardRotatedCarousel
-      background={{ variant: "gradient-bars" }}
+            title="The Future of TCG Ownership"
-      title="Fully Autonomous TCG Ecosystem"
+            description="Build a sustainable revenue-generating collection with our automated trading platform. Own, trade, and earn perpetual royalties."
-      description="Our AI-driven engine handles pack openings, rare pulls, and profitable trades autonomously. Your earnings are settled directly through your linked financial account."
+            background={{ variant: "plain" }}
-      avatars={[
+            carouselItems={[
-        { src: "http://img.b2bpic.net/free-photo/portrait-smiley-woman_23-2149022647.jpg", alt: "User 1" },
+              { id: "1", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-woman_23-2149022647.jpg" },
-        { src: "http://img.b2bpic.net/free-photo/portrait-beautiful-redhead-lady_23-2148339146.jpg", alt: "User 2" },
+              { id: "2", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-redhead-lady_23-2148339146.jpg" },
-        { src: "http://img.b2bpic.net/free-photo/joyful-young-brunette-caucasian-girl-isolated-olive-green-wall-with-copy-space_141793-118993.jpg", alt: "User 3" },
+              { id: "3", imageSrc: "http://img.b2bpic.net/joyful-young-brunette-caucasian-girl-isolated-olive-green-wall-with-copy-space_141793-118993.jpg" },
-        { src: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg", alt: "User 4" },
+              { id: "4", imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg" },
-        { src: "http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit-looking-happy_1298-197.jpg", alt: "User 5" }
+              { id: "5", imageSrc: "http://img.b2bpic.net/young-man-wearing-blue-outfit-looking-happy_1298-197.jpg" },
-      ]}
+              { id: "6", imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-businessman-looking-camera_23-2147839978.jpg" }
-      avatarText="Trusted by 10,000+ traders"
+            ]}
-      buttons={[
+            buttons={[{ text: "Explore Market" }, { text: "Learn How" }]}
-        { text: "Start Autonomous Trading", href: "#catalog" },
+          />
-        { text: "View System Docs", href: "#features" }
+        </div>
-      ]}
-      buttonAnimation="slide-up"
-      marqueeItems={[
-        { type: "text", text: "Autonomous Rare Pulls" },
-        { type: "text", text: "Automated Profit Settlement" },
-        { type: "text", text: "Secure Credit Integration" },
-        { type: "text", text: "Fully Managed Operations" },
-        { type: "text", text: "Global Fulfillment Engine" }
-      ]}
-    />
-  </div>
 
-  <div id="features" data-section="features">
+        <div id="features" data-section="features">
-      <FeatureCardTwentyEight
+          <FeatureCardTwentySeven
-      animationType="slide-up"
+            title="Marketplace Mechanics"
-      textboxLayout="split"
+            description="Engineered for transparency and sustained liquidity."
-      useInvertedBackground={false}
+            animationType="slide-up"
-      features={[
+            textboxLayout="split"
-        { id: "f1", title: "Super Rare Pull Engine", subtitle: "Advanced AI algorithms optimized for high-value pull rates", category: "Pulls", value: "Auto" },
+            useInvertedBackground={false}
-        { id: "f2", title: "Direct Profit Withdrawal", subtitle: "Seamlessly credit your earnings directly back to your accounts", category: "Finance", value: "Instant" },
+            features={[
-        { id: "f3", title: "Autonomous Logistics", subtitle: "Self-managing fulfillment for every transaction", category: "Operations", value: "Complete" }
+              { id: "1", title: "Fair Distribution", descriptions: ["On-chain verification for every pack."], imageSrc: "http://img.b2bpic.net/free-photo/anime-casino-illustration_23-2151726801.jpg?_wi=1" },
-      ]}
+              { id: "2", title: "Perpetual Yield", descriptions: ["5% royalties on all secondary sales."], imageSrc: "http://img.b2bpic.net/free-photo/lord-thorns-fire-illustration_23-2152031271.jpg" }
-      title="The Autonomous Advantage"
+            ]}
-      description="Experience a fully self-correcting trading environment designed to maximize your pull quality and financial returns."
+          />
-    />
+        </div>
-  </div>
 
-  <div id="catalog" data-section="catalog">
+        <div id="catalog" data-section="catalog">
-      <ProductCatalog
+            <ProductCardTwo
-      layout="section"
+              title="Live Catalog"
-      products={[
+              description="Explore current pack offerings from top tiers."
-        { id: "p1", name: "Charizard Holo", price: "Managed", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/five-clubs-pink-background_23-2148952307.jpg" },
+              animationType="slide-up"
-        { id: "p2", name: "Dark Magician", price: "Managed", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/anime-casino-illustration_23-2151726817.jpg" },
+              textboxLayout="default"
-        { id: "p3", name: "Blue-Eyes White Dragon", price: "Managed", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/mexican-traditional-cards-game_23-2150558636.jpg" },
+              gridVariant="bento-grid"
-        { id: "p4", name: "Pikachu Rare", price: "Managed", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/anime-casino-illustration_23-2151726801.jpg" },
+              useInvertedBackground={false}
-        { id: "p5", name: "Red-Eyes B. Dragon", price: "Managed", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/lord-thorns-fire-illustration_23-2152031271.jpg" },
+              products={[
-        { id: "p6", name: "Magician of Black Chaos", price: "Managed", rating: 4, imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-playing-card-back-design-illustration_23-2151080553.jpg" }
+                { id: "p1", brand: "Pokemon", name: "Booster Pack", price: "$49", rating: 5, reviewCount: "200", imageSrc: "https://upload.wikimedia.org/wikipedia/commons/9/98/International_Pok%C3%A9mon_logo.svg?_wi=2" },
-      ]}
+                { id: "p2", brand: "Yu-Gi-Oh", name: "Legendary Deck", price: "$39", rating: 4, reviewCount: "150", imageSrc: "https://upload.wikimedia.org/wikipedia/commons/1/11/Yu-Gi-Oh%21_Logo.svg?_wi=2" }
-    />
+              ]}
-  </div>
+            />
+        </div>
 
-  <div id="pricing" data-section="pricing">
+        <div id="pricing" data-section="pricing">
-      <PricingCardEight
+            <PricingCardFive
-      animationType="slide-up"
+              title="Ownership Tiers"
-      textboxLayout="split"
+              description="Unlock the true potential of your collection."
-      useInvertedBackground={false}
+              textboxLayout="split"
-      plans={[
+              animationType="slide-up"
-        { id: "starter", badge: "Essential", price: "Automated", subtitle: "Passive AI market entry", buttons: [{ text: "Activate Free Plan" }], features: ["Auto-Pulls Enabled", "Basic Withdrawal"] },
+              useInvertedBackground={false}
-        { id: "pro", badge: "Yield Pro", price: "Managed", subtitle: "High-probability rare pull engine", buttons: [{ text: "Start Autonomous Yield" }], features: ["Super Rare Pull Algorithm", "Instant Credit Settlement", "Global Yield Optimization"] }
+              plans={[
-      ]}
+                { id: "tier1", tag: "Standard", price: "Free", period: "/ mo", description: "Casual collectors.", button: { text: "Join" }, featuresTitle: "Core Features", features: ["Access Marketplace", "Standard Trading"] },
-      title="Membership Ecosystem"
+                { id: "tier2", tag: "Pro", price: "$99", period: "/ yr", description: "Professional traders.", button: { text: "Upgrade" }, featuresTitle: "Pro Features", features: ["5% Royalties", "Priority Unpacking"] }
-      description="Select your level of autonomous management."
+              ]}
-    />
+            />
-  </div>
+        </div>
 
-  <div id="metrics" data-section="metrics">
+        <div id="metrics" data-section="metrics">
-      <MetricCardSeven
+          <MetricCardThree
-      animationType="slide-up"
+            title="Market Health"
-      textboxLayout="split"
+            description="Real-time data on protocol performance."
-      useInvertedBackground={false}
+            animationType="slide-up"
-      metrics={[
+            textboxLayout="split"
-        { id: "m1", value: "99.9%", title: "Autonomous Success", items: ["AI-led fulfillment", "Perfect consistency"] },
+            useInvertedBackground={false}
-        { id: "m2", value: "Enhanced", title: "Rare Pull Rates", items: ["Probabilistic modeling", "Optimized rewards"] },
+            metrics={[
-        { id: "m3", value: "Instant", title: "Earnings Payouts", items: ["Direct credit settlement", "Real-time"] }
+              { id: "m1", icon: ShieldCheck, title: "Verified", value: "100%" },
-      ]}
+              { id: "m2", icon: BarChart3, title: "Yields", value: "5%" },
-      title="Infrastructure Performance"
+              { id: "m3", icon: Zap, title: "Speed", value: "Instant" }
-      description="Transparency on our autonomous infrastructure reliability."
+            ]}
-    />
+          />
-  </div>
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
+        <div id="faq" data-section="faq">
-      <TestimonialCardTen
+          <FaqSplitText
-      textboxLayout="split"
+            sideTitle="Frequently Asked Questions"
-      useInvertedBackground={false}
+            sideDescription="Get quick answers about our protocol."
-      testimonials={[
+            faqs={[
-        { id: "t1", title: "Truly Passive Yields", quote: "The rare pull engine is incredible. I've never pulled this consistently.", name: "Alex R.", role: "Yield Investor", imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-businessman-looking-camera_23-2147839978.jpg" },
+              { id: "q1", title: "How do royalties work?", content: "Royalties are triggered automatically by smart contracts on every trade." },
-        { id: "t2", title: "Seamless Settlement", quote: "Earnings automatically hit my account. It is fully compliant and automated.", name: "Sarah J.", role: "Compliance Officer", imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-girl-sitting-cafe_1262-3083.jpg" },
+              { id: "q2", title: "Is it safe?", content: "Yes, all trades are settled on-chain with full transparency." }
-        { id: "t3", title: "Optimized Performance", quote: "The AI pricing and fulfillment ecosystem is industry-leading.", name: "Mike B.", role: "Trader", imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-woman-taking-selfie-photo-winking_1262-18343.jpg" }
+            ]}
-      ]}
+            faqsAnimation="slide-up"
-      title="Ecosystem Stories"
+            useInvertedBackground={false}
-      description="Investors achieving autonomous success."
+          />
-    />
+        </div>
-  </div>
 
-  <div id="faq" data-section="faq">
+        <div id="contact" data-section="contact">
-      <FaqSplitMedia
+          <ContactCTA
-      textboxLayout="split"
+            tag="Join Us"
-      useInvertedBackground={false}
+            title="Ready to Start Trading?"
-      faqs={[
+            description="Sign up today to join our elite network of collectors and earn while you collect."
-        { id: "q1", title: "How is rare pull probability optimized?", content: "Our AI utilizes predictive modeling to identify high-value packets within inventory streams, guaranteeing competitive pull performance." },
+            buttons={[{ text: "Get Started" }]}
-        { id: "q2", title: "Is profit withdrawal legal?", content: "Yes, all settlements are compliant and processed through audited, secure credit/financial gateways." },
+            background={{ variant: "plain" }}
-        { id: "q3", title: "How autonomous is the fulfillment?", content: "It is entirely end-to-end; you monitor the growth while our robotic infrastructure handles the physical lifecycle." }
+            useInvertedBackground={false}
-      ]}
+          />
-      imageSrc="http://img.b2bpic.net/free-photo/pleased-young-bald-call-center-man-wearing-headset-sitting-desk-with-work-tools-showing-empty-hand-pointing-it-isolated-white-background_141793-84116.jpg"
+        </div>
-      mediaAnimation="slide-up"
-      title="Frequently Asked Questions"
-      description="Transparency on our autonomous operation."
-      faqsAnimation="slide-up"
-    />
-  </div>
 
-  <div id="contact" data-section="contact">
+        <div id="footer" data-section="footer">
-      <ContactSplit
+          <FooterMedia
-      useInvertedBackground={false}
+            logoText="CardTrader"
-      background={{ variant: "plain" }}
+            imageSrc="http://img.b2bpic.net/free-photo/anime-casino-illustration_23-2151726801.jpg?_wi=2"
-      tag="Contact Us"
+            columns={[
-      title="Join The Autonomous Ecosystem"
+                { title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
-      description="Secure your spot for the next cycle of fully managed TCG trading."
+                { title: "Support", items: [{ label: "Help", href: "#" }, { label: "Terms", href: "#" }] }
-      imageSrc="http://img.b2bpic.net/free-photo/corporate-data-management_53876-89018.jpg"
+            ]}
-      mediaAnimation="slide-up"
+          />
-    />
+        </div>
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterBase
-      columns={[
-        {
-          title: "Platform",          items: [
-            { label: "Autonomous Ops", href: "#features" },
-            { label: "Pricing", href: "#pricing" }
-          ]
-        },
-        {
-          title: "Company",          items: [
-            { label: "Compliance", href: "#" },
-            { label: "Support", href: "#faq" }
-          ]
-        }
-      ]}
-      logoText="CardTrader"
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}