Switch to version 1: modified src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -9,13 +9,8 @@ import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
 import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
-import { useState, useEffect, useRef } from "react";
 
 export default function LandingPage() {
-  const [gameState, setGameState] = useState<'idle' | 'playing' | 'over'>('idle');
-  const [score, setScore] = useState(0);
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-
   return (
     <ThemeProvider
         defaultButtonVariant="icon-arrow"
@@ -30,105 +25,243 @@ export default function LandingPage() {
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
-        <div id="nav" data-section="nav">
+  <div id="nav" data-section="nav">
-            <NavbarStyleApple
+      <NavbarStyleApple
-            navItems={[
+      navItems={[
-              { name: "Home", id: "hero" },
+        {
-              { name: "Games", id: "features" },
+          name: "Home",
-              { name: "Metrics", id: "metrics" },
+          id: "hero",
-              { name: "Reviews", id: "testimonials" },
+        },
-            ]}
+        {
-            brandName="Stars"
+          name: "Games",
-          />
+          id: "features",
-        </div>
+        },
+        {
+          name: "Metrics",
+          id: "metrics",
+        },
+        {
+          name: "Reviews",
+          id: "testimonials",
+        },
+      ]}
+      brandName="Stars"
+    />
+  </div>
 
-        <div id="hero" data-section="hero">
+  <div id="hero" data-section="hero">
-            <HeroLogoBillboard
+      <HeroLogoBillboard
-            background={{ variant: "radial-gradient" }}
+      background={{
-            logoText="Stars Gaming"
+        variant: "radial-gradient",
-            description="Experience the thrill of high-stakes play. Crash rockets and find mines in the ultimate gaming environment."
+      }}
-            buttons={[
+      logoText="Stars Gaming"
-              { text: "Play Rocket", onClick: () => setGameState('playing') },
+      description="Experience the thrill of high-stakes play. Crash rockets and find mines in the ultimate gaming environment."
-              { text: "Explore Mines", href: "#features" },
+      buttons={[
-            ]}
+        {
-            imageSrc="http://img.b2bpic.net/free-photo/view-futuristic-space-rocket_23-2151152096.jpg"
+          text: "Play Rocket",
-            imageAlt="Stars gaming hero"
+          href: "#games",
-            mediaAnimation="slide-up"
+        },
-          />
+        {
-        </div>
+          text: "Explore Mines",
+          href: "#games",
+        },
+      ]}
+      imageSrc="http://img.b2bpic.net/free-photo/view-futuristic-space-rocket_23-2151152096.jpg"
+      imageAlt="Stars gaming hero"
+      mediaAnimation="slide-up"
+    />
+  </div>
 
-        {gameState === 'playing' && (
+  <div id="features" data-section="features">
-          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-10">
+      <FeatureCardSixteen
-            <div className="w-full max-w-2xl bg-white p-8 rounded-lg shadow-xl text-center">
+      animationType="depth-3d"
-              <h2 className="text-3xl font-bold mb-4">Rocket Game</h2>
+      textboxLayout="default"
-              <canvas ref={canvasRef} width={600} height={400} className="border border-gray-300 bg-gray-900 mx-auto" />
+      useInvertedBackground={false}
-              <div className="mt-4">
+      negativeCard={{
-                <button onClick={() => setGameState('idle')} className="px-6 py-2 bg-red-500 text-white rounded">End Game</button>
+        items: [
-              </div>
+          "Rocket crash risk",
-            </div>
+          "Rapid fire gameplay",
-          </div>
+          "High speed betting",
-        )}
+          "Volatility spikes",
+          "Constant tension",
+        ],
+      }}
+      positiveCard={{
+        items: [
+          "Minefield strategy",
+          "Dynamic multiplier",
+          "Instant withdrawals",
+          "Fair play guaranteed",
+          "Interactive interface",
+        ],
+      }}
+      title="Top Game Modes"
+      description="Master the games that everyone is talking about."
+    />
+  </div>
 
-        <div id="features" data-section="features">
+  <div id="metrics" data-section="metrics">
-            <FeatureCardSixteen
+      <MetricCardEleven
-            animationType="depth-3d"
+      animationType="scale-rotate"
-            textboxLayout="default"
+      textboxLayout="split"
-            useInvertedBackground={false}
+      useInvertedBackground={true}
-            negativeCard={{ items: ["Rocket crash risk", "Rapid fire gameplay", "High speed betting", "Volatility spikes", "Constant tension"] }}
+      metrics={[
-            positiveCard={{ items: ["Minefield strategy", "Dynamic multiplier", "Instant withdrawals", "Fair play guaranteed", "Interactive interface"] }}
+        {
-            title="Top Game Modes"
+          id: "m1",
-            description="Master the games that everyone is talking about."
+          value: "1.2M+",
-          />
+          title: "Active Players",
-        </div>
+          description: "Global community reach",
+          imageSrc: "http://img.b2bpic.net/free-photo/dynamic-data-visualization-3d_23-2151904328.jpg",
+        },
+        {
+          id: "m2",
+          value: "$50M",
+          title: "Payouts Issued",
+          description: "Total user winnings",
+          imageSrc: "http://img.b2bpic.net/free-photo/arrow-with-bright-neon-colors_23-2151204927.jpg",
+        },
+        {
+          id: "m3",
+          value: "24/7",
+          title: "Live Support",
+          description: "Always there for you",
+          imageSrc: "http://img.b2bpic.net/free-photo/diverse-friends-are-going-journey-they-are-planning-using-globe-bright-living-room_1157-47898.jpg",
+        },
+      ]}
+      title="Platform Growth"
+      description="Our community is growing rapidly across the globe."
+    />
+  </div>
 
-        <div id="metrics" data-section="metrics">
+  <div id="testimonials" data-section="testimonials">
-            <MetricCardEleven
+      <TestimonialCardTen
-            animationType="scale-rotate"
+      textboxLayout="split"
-            textboxLayout="split"
+      useInvertedBackground={false}
-            useInvertedBackground={true}
+      testimonials={[
-            metrics={[
+        {
-              { id: "m1", value: "1.2M+", title: "Active Players", description: "Global community reach", imageSrc: "http://img.b2bpic.net/free-photo/dynamic-data-visualization-3d_23-2151904328.jpg" },
+          id: "1",
-              { id: "m2", value: "$50M", title: "Payouts Issued", description: "Total user winnings", imageSrc: "http://img.b2bpic.net/free-photo/arrow-with-bright-neon-colors_23-2151204927.jpg" },
+          title: "Incredible Platform",
-              { id: "m3", value: "24/7", title: "Live Support", description: "Always there for you", imageSrc: "http://img.b2bpic.net/free-photo/diverse-friends-are-going-journey-they-are-planning-using-globe-bright-living-room_1157-47898.jpg" },
+          quote: "The rocket mode is super fast and addictive. Highly recommended!",
-            ]}
+          name: "Alex P.",
-            title="Platform Growth"
+          role: "Pro Gamer",
-            description="Our community is growing rapidly across the globe."
+          imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-delighted-player-bragging-after-being-victorious-gaming-computer-videogame_482257-87272.jpg",
-          />
+        },
-        </div>
+        {
+          id: "2",
+          title: "Love the Mines",
+          quote: "Finding the mines is so satisfying. The design is top-notch.",
+          name: "Sarah J.",
+          role: "Casual Gamer",
+          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-posing-wiht-checkered-red-black-shirt-using-headphones_140725-13077.jpg",
+        },
+        {
+          id: "3",
+          title: "Fast Payouts",
+          quote: "I love how quickly I can withdraw my winnings. Solid platform.",
+          name: "Marcus L.",
+          role: "Strategic Player",
+          imageSrc: "http://img.b2bpic.net/free-photo/handsome-athletic-male-rugby-player-holding-ball_23-2148793296.jpg",
+        },
+        {
+          id: "4",
+          title: "Amazing UI",
+          quote: "The dark aesthetic is perfect for late night gaming sessions.",
+          name: "David W.",
+          role: "Tech Enthusiast",
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-blond-bearded-male-dressed-suit-grey-background_613910-11907.jpg",
+        },
+        {
+          id: "5",
+          title: "Solid Service",
+          quote: "Always stable and fun. My favorite place to spend time.",
+          name: "Elena K.",
+          role: "Daily User",
+          imageSrc: "http://img.b2bpic.net/free-photo/bored-gamer-playing-tv-console-using-gamepad-eating-popcorn_482257-120747.jpg",
+        },
+      ]}
+      title="Winner Stories"
+      description="What our users are saying about the Stars platform."
+    />
+  </div>
 
-        <div id="testimonials" data-section="testimonials">
+  <div id="ecommerce" data-section="ecommerce">
-            <TestimonialCardTen
+      <ProductCatalog
-            textboxLayout="split"
+      layout="section"
-            useInvertedBackground={false}
+      products={[
-            testimonials={[
+        {
-              { id: "1", title: "Incredible Platform", quote: "The rocket mode is super fast and addictive. Highly recommended!", name: "Alex P.", role: "Pro Gamer", imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-delighted-player-bragging-after-being-victorious-gaming-computer-videogame_482257-87272.jpg" },
+          id: "prod-1",
-              { id: "2", title: "Love the Mines", quote: "Finding the mines is so satisfying. The design is top-notch.", name: "Sarah J.", role: "Casual Gamer", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-posing-wiht-checkered-red-black-shirt-using-headphones_140725-13077.jpg" },
+          name: "Rocket Starter Kit",
-            ]}
+          price: "0.05 BTC",
-            title="Winner Stories"
+          rating: 5,
-            description="What our users are saying about the Stars platform."
+          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-spaceship-travels-through-galaxy-dusk-generated-by-ai_188544-24581.jpg",
-          />
+        },
-        </div>
+        {
+          id: "prod-2",
+          name: "Mine Strategy Guide",
+          price: "0.02 BTC",
+          rating: 4,
+          imageSrc: "http://img.b2bpic.net/free-photo/virtual-projection-lights-forming-square-pattern-dark-background_181624-32736.jpg",
+        },
+      ]}
+    />
+  </div>
 
-        <div id="ecommerce" data-section="ecommerce">
+  <div id="footer" data-section="footer">
-            <ProductCatalog
+      <FooterLogoEmphasis
-            layout="section"
+      columns={[
-            products={[
+        {
-              { id: "prod-1", name: "Rocket Starter Kit", price: "0.05 BTC", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/futuristic-spaceship-travels-through-galaxy-dusk-generated-by-ai_188544-24581.jpg" },
+          items: [
-              { id: "prod-2", name: "Mine Strategy Guide", price: "0.02 BTC", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/virtual-projection-lights-forming-square-pattern-dark-background_181624-32736.jpg" },
+            {
-            ]}
+              label: "Play Rocket",
-          />
+              href: "#",
-        </div>
+            },
-
+            {
-        <div id="footer" data-section="footer">
+              label: "Play Mines",
-            <FooterLogoEmphasis
+              href: "#",
-            columns={[
+            },
-              { items: [{ label: "Play Rocket", href: "#" }, { label: "Play Mines", href: "#" }] },
+            {
-              { items: [{ label: "Terms of Service", href: "#" }, { label: "Privacy Policy", href: "#" }] }
+              label: "Community",
-            ]}
+              href: "#",
-            logoText="Stars"
+            },
-          />
+          ],
-        </div>
+        },
+        {
+          items: [
+            {
+              label: "Terms of Service",
+              href: "#",
+            },
+            {
+              label: "Privacy Policy",
+              href: "#",
+            },
+            {
+              label: "Fair Play",
+              href: "#",
+            },
+          ],
+        },
+        {
+          items: [
+            {
+              label: "Discord",
+              href: "#",
+            },
+            {
+              label: "Twitter",
+              href: "#",
+            },
+            {
+              label: "Support",
+              href: "#",
+            },
+          ],
+        },
+      ]}
+      logoText="Stars"
+    />
+  </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}