diff --git a/src/app/page.tsx b/src/app/page.tsx
index 32302b6..6f6691c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,8 +9,13 @@ 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"
@@ -25,243 +30,105 @@ export default function LandingPage() {
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleApple
-      navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Games",
-          id: "features",
-        },
-        {
-          name: "Metrics",
-          id: "metrics",
-        },
-        {
-          name: "Reviews",
-          id: "testimonials",
-        },
-      ]}
-      brandName="Stars"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+            <NavbarStyleApple
+            navItems={[
+              { name: "Home", id: "hero" },
+              { name: "Games", id: "features" },
+              { name: "Metrics", id: "metrics" },
+              { name: "Reviews", id: "testimonials" },
+            ]}
+            brandName="Stars"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroLogoBillboard
-      background={{
-        variant: "radial-gradient",
-      }}
-      logoText="Stars Gaming"
-      description="Experience the thrill of high-stakes play. Crash rockets and find mines in the ultimate gaming environment."
-      buttons={[
-        {
-          text: "Play Rocket",
-          href: "#games",
-        },
-        {
-          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>
+        <div id="hero" data-section="hero">
+            <HeroLogoBillboard
+            background={{ variant: "radial-gradient" }}
+            logoText="Stars Gaming"
+            description="Experience the thrill of high-stakes play. Crash rockets and find mines in the ultimate gaming environment."
+            buttons={[
+              { text: "Play Rocket", onClick: () => setGameState('playing') },
+              { text: "Explore Mines", href: "#features" },
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/view-futuristic-space-rocket_23-2151152096.jpg"
+            imageAlt="Stars gaming hero"
+            mediaAnimation="slide-up"
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardSixteen
-      animationType="depth-3d"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      negativeCard={{
-        items: [
-          "Rocket crash risk",
-          "Rapid fire gameplay",
-          "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>
+        {gameState === 'playing' && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-10">
+            <div className="w-full max-w-2xl bg-white p-8 rounded-lg shadow-xl text-center">
+              <h2 className="text-3xl font-bold mb-4">Rocket Game</h2>
+              <canvas ref={canvasRef} width={600} height={400} className="border border-gray-300 bg-gray-900 mx-auto" />
+              <div className="mt-4">
+                <button onClick={() => setGameState('idle')} className="px-6 py-2 bg-red-500 text-white rounded">End Game</button>
+              </div>
+            </div>
+          </div>
+        )}
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardEleven
-      animationType="scale-rotate"
-      textboxLayout="split"
-      useInvertedBackground={true}
-      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: "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="features" data-section="features">
+            <FeatureCardSixteen
+            animationType="depth-3d"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            negativeCard={{ items: ["Rocket crash risk", "Rapid fire gameplay", "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="testimonials" data-section="testimonials">
-      <TestimonialCardTen
-      textboxLayout="split"
-      useInvertedBackground={false}
-      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: "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="metrics" data-section="metrics">
+            <MetricCardEleven
+            animationType="scale-rotate"
+            textboxLayout="split"
+            useInvertedBackground={true}
+            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: "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="ecommerce" data-section="ecommerce">
-      <ProductCatalog
-      layout="section"
-      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",
-        },
-        {
-          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="testimonials" data-section="testimonials">
+            <TestimonialCardTen
+            textboxLayout="split"
+            useInvertedBackground={false}
+            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: "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" },
+            ]}
+            title="Winner Stories"
+            description="What our users are saying about the Stars platform."
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        {
-          items: [
-            {
-              label: "Play Rocket",
-              href: "#",
-            },
-            {
-              label: "Play Mines",
-              href: "#",
-            },
-            {
-              label: "Community",
-              href: "#",
-            },
-          ],
-        },
-        {
-          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>
+        <div id="ecommerce" data-section="ecommerce">
+            <ProductCatalog
+            layout="section"
+            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" },
+              { 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="footer" data-section="footer">
+            <FooterLogoEmphasis
+            columns={[
+              { items: [{ label: "Play Rocket", href: "#" }, { label: "Play Mines", href: "#" }] },
+              { items: [{ label: "Terms of Service", href: "#" }, { label: "Privacy Policy", href: "#" }] }
+            ]}
+            logoText="Stars"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file