Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 2aff054dc6 |
329
src/app/page.tsx
329
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user