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 NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||||
import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
|
import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
|
||||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||||
|
import { useState, useEffect, useRef } from "react";
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
|
const [gameState, setGameState] = useState<'idle' | 'playing' | 'over'>('idle');
|
||||||
|
const [score, setScore] = useState(0);
|
||||||
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="icon-arrow"
|
defaultButtonVariant="icon-arrow"
|
||||||
@@ -25,243 +30,105 @@ export default function LandingPage() {
|
|||||||
headingFontWeight="extrabold"
|
headingFontWeight="extrabold"
|
||||||
>
|
>
|
||||||
<ReactLenis root>
|
<ReactLenis root>
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarStyleApple
|
<NavbarStyleApple
|
||||||
navItems={[
|
navItems={[
|
||||||
{
|
{ name: "Home", id: "hero" },
|
||||||
name: "Home",
|
{ name: "Games", id: "features" },
|
||||||
id: "hero",
|
{ name: "Metrics", id: "metrics" },
|
||||||
},
|
{ name: "Reviews", id: "testimonials" },
|
||||||
{
|
]}
|
||||||
name: "Games",
|
brandName="Stars"
|
||||||
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={{
|
background={{ variant: "radial-gradient" }}
|
||||||
variant: "radial-gradient",
|
logoText="Stars Gaming"
|
||||||
}}
|
description="Experience the thrill of high-stakes play. Crash rockets and find mines in the ultimate gaming environment."
|
||||||
logoText="Stars Gaming"
|
buttons={[
|
||||||
description="Experience the thrill of high-stakes play. Crash rockets and find mines in the ultimate gaming environment."
|
{ text: "Play Rocket", onClick: () => setGameState('playing') },
|
||||||
buttons={[
|
{ text: "Explore Mines", href: "#features" },
|
||||||
{
|
]}
|
||||||
text: "Play Rocket",
|
imageSrc="http://img.b2bpic.net/free-photo/view-futuristic-space-rocket_23-2151152096.jpg"
|
||||||
href: "#games",
|
imageAlt="Stars gaming hero"
|
||||||
},
|
mediaAnimation="slide-up"
|
||||||
{
|
/>
|
||||||
text: "Explore Mines",
|
</div>
|
||||||
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="features" data-section="features">
|
{gameState === 'playing' && (
|
||||||
<FeatureCardSixteen
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-10">
|
||||||
animationType="depth-3d"
|
<div className="w-full max-w-2xl bg-white p-8 rounded-lg shadow-xl text-center">
|
||||||
textboxLayout="default"
|
<h2 className="text-3xl font-bold mb-4">Rocket Game</h2>
|
||||||
useInvertedBackground={false}
|
<canvas ref={canvasRef} width={600} height={400} className="border border-gray-300 bg-gray-900 mx-auto" />
|
||||||
negativeCard={{
|
<div className="mt-4">
|
||||||
items: [
|
<button onClick={() => setGameState('idle')} className="px-6 py-2 bg-red-500 text-white rounded">End Game</button>
|
||||||
"Rocket crash risk",
|
</div>
|
||||||
"Rapid fire gameplay",
|
</div>
|
||||||
"High speed betting",
|
</div>
|
||||||
"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="metrics" data-section="metrics">
|
<div id="features" data-section="features">
|
||||||
<MetricCardEleven
|
<FeatureCardSixteen
|
||||||
animationType="scale-rotate"
|
animationType="depth-3d"
|
||||||
textboxLayout="split"
|
textboxLayout="default"
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={false}
|
||||||
metrics={[
|
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"] }}
|
||||||
id: "m1",
|
title="Top Game Modes"
|
||||||
value: "1.2M+",
|
description="Master the games that everyone is talking about."
|
||||||
title: "Active Players",
|
/>
|
||||||
description: "Global community reach",
|
</div>
|
||||||
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="testimonials" data-section="testimonials">
|
<div id="metrics" data-section="metrics">
|
||||||
<TestimonialCardTen
|
<MetricCardEleven
|
||||||
textboxLayout="split"
|
animationType="scale-rotate"
|
||||||
useInvertedBackground={false}
|
textboxLayout="split"
|
||||||
testimonials={[
|
useInvertedBackground={true}
|
||||||
{
|
metrics={[
|
||||||
id: "1",
|
{ 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" },
|
||||||
title: "Incredible Platform",
|
{ 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" },
|
||||||
quote: "The rocket mode is super fast and addictive. Highly recommended!",
|
{ 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" },
|
||||||
name: "Alex P.",
|
]}
|
||||||
role: "Pro Gamer",
|
title="Platform Growth"
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-delighted-player-bragging-after-being-victorious-gaming-computer-videogame_482257-87272.jpg",
|
description="Our community is growing rapidly across the globe."
|
||||||
},
|
/>
|
||||||
{
|
</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="ecommerce" data-section="ecommerce">
|
<div id="testimonials" data-section="testimonials">
|
||||||
<ProductCatalog
|
<TestimonialCardTen
|
||||||
layout="section"
|
textboxLayout="split"
|
||||||
products={[
|
useInvertedBackground={false}
|
||||||
{
|
testimonials={[
|
||||||
id: "prod-1",
|
{ 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" },
|
||||||
name: "Rocket Starter Kit",
|
{ 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" },
|
||||||
price: "0.05 BTC",
|
]}
|
||||||
rating: 5,
|
title="Winner Stories"
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-spaceship-travels-through-galaxy-dusk-generated-by-ai_188544-24581.jpg",
|
description="What our users are saying about the Stars platform."
|
||||||
},
|
/>
|
||||||
{
|
</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="footer" data-section="footer">
|
<div id="ecommerce" data-section="ecommerce">
|
||||||
<FooterLogoEmphasis
|
<ProductCatalog
|
||||||
columns={[
|
layout="section"
|
||||||
{
|
products={[
|
||||||
items: [
|
{ 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" },
|
||||||
label: "Play Rocket",
|
]}
|
||||||
href: "#",
|
/>
|
||||||
},
|
</div>
|
||||||
{
|
|
||||||
label: "Play Mines",
|
<div id="footer" data-section="footer">
|
||||||
href: "#",
|
<FooterLogoEmphasis
|
||||||
},
|
columns={[
|
||||||
{
|
{ items: [{ label: "Play Rocket", href: "#" }, { label: "Play Mines", href: "#" }] },
|
||||||
label: "Community",
|
{ items: [{ label: "Terms of Service", href: "#" }, { label: "Privacy Policy", href: "#" }] }
|
||||||
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>
|
</ReactLenis>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user