Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 699d4ac1ed | |||
| 9f28b675b6 | |||
| ec2b1573c0 | |||
| 99cc5bd46b | |||
| 0718d42a79 | |||
| dbbb67ce97 |
357
src/app/page.tsx
357
src/app/page.tsx
@@ -2,19 +2,30 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { useState } from "react";
|
||||
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
||||
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
||||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import { Shield, Star, Zap } from "lucide-react";
|
||||
import { Shield, Star, Zap, Heart, Trophy, Play, RotateCcw } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
const [score, setScore] = useState(0);
|
||||
const [lives, setLives] = useState(3);
|
||||
const [gameState, setGameState] = useState<'idle' | 'playing' | 'over'>('idle');
|
||||
|
||||
const startGame = () => {
|
||||
setScore(0);
|
||||
setLives(3);
|
||||
setGameState('playing');
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
@@ -32,313 +43,63 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Community",
|
||||
id: "community",
|
||||
},
|
||||
{
|
||||
name: "Devlog",
|
||||
id: "blog",
|
||||
},
|
||||
{
|
||||
name: "Support",
|
||||
id: "faq",
|
||||
},
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Community", id: "community" },
|
||||
{ name: "Devlog", id: "blog" },
|
||||
{ name: "Support", id: "faq" },
|
||||
]}
|
||||
brandName="TurboShift 2D"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Game Overlay UI */}
|
||||
{gameState !== 'idle' && (
|
||||
<div className="fixed top-24 left-0 w-full z-50 flex justify-between px-8 py-4 pointer-events-none">
|
||||
<div className="flex items-center gap-4 bg-background/80 backdrop-blur-md p-4 rounded-full border">
|
||||
<Trophy className="text-accent" />
|
||||
<span className="font-bold text-xl">Score: {score}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 bg-background/80 backdrop-blur-md p-4 rounded-full border">
|
||||
{[...Array(lives)].map((_, i) => <Heart key={i} className="text-red-500 fill-red-500" />)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{gameState === 'over' && (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-background/90 backdrop-blur-sm">
|
||||
<div className="text-center space-y-6 p-8 border rounded-xl bg-card shadow-2xl">
|
||||
<h2 className="text-4xl font-bold">Game Over</h2>
|
||||
<p className="text-lg">Final Score: {score}</p>
|
||||
<button onClick={startGame} className="flex items-center gap-2 px-6 py-3 bg-accent text-white rounded-full mx-auto">
|
||||
<RotateCcw size={20} /> Play Again
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
<HeroBillboardScroll
|
||||
background={{ variant: "plain" }}
|
||||
title="Shift into High Gear"
|
||||
description="Experience the ultimate adrenaline-fueled 2D racing simulation. Master the curves, upgrade your engine, and dominate the global leaderboards."
|
||||
buttons={[
|
||||
{
|
||||
text: "Play Now",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#about",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bright-purple-square-mosaic-textural-background_1258-69254.jpg?_wi=1",
|
||||
imageAlt: "Dynamic racing scene",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-aerial-shot-narrow-bridge_181624-198.jpg?_wi=1",
|
||||
imageAlt: "Racing track layout",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/professional-dashboard-element-set_23-2148359394.jpg?_wi=1",
|
||||
imageAlt: "Cockpit interface",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-car-model_23-2151138949.jpg?_wi=1",
|
||||
imageAlt: "City racer car",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/collage-cyber-punk-portrait_52683-103757.jpg",
|
||||
imageAlt: "Finish line celebration",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-street-dark-atmosphere_23-2150914448.jpg",
|
||||
imageAlt: "Speed motion lines",
|
||||
},
|
||||
]}
|
||||
buttons={gameState === 'idle' ? [
|
||||
{ text: "Start Game", onClick: startGame },
|
||||
{ text: "Learn More", href: "#about" },
|
||||
] : []}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/bright-purple-square-mosaic-textural-background_1258-69254.jpg?_wi=1"
|
||||
imageAlt="Dynamic racing scene"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={true}
|
||||
title="Built for Speed, Made for Gamers"
|
||||
description={[
|
||||
"TurboShift 2D redefines the racing genre with ultra-responsive controls and realistic physics engines.",
|
||||
"Our team has obsessed over every pixel to ensure a fluid, intense gaming experience that keeps you glued to the screen.",
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Join our Community",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Precision Drifting",
|
||||
description: "Perfect every corner with our adaptive drifting mechanics.",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Engine Customization",
|
||||
description: "Tweak every aspect of your machine for peak performance.",
|
||||
},
|
||||
{
|
||||
icon: Star,
|
||||
title: "Global Competition",
|
||||
description: "Race against the best players worldwide in weekly tournaments.",
|
||||
},
|
||||
]}
|
||||
title="Unrivaled Gameplay Features"
|
||||
description="Master advanced mechanics designed for competitive racing enthusiasts."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={true}
|
||||
title="Racing by the Numbers"
|
||||
tag="Player Growth"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "1.2M",
|
||||
description: "Active Racers",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "50+",
|
||||
description: "Customizable Cars",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "24/7",
|
||||
description: "Tournaments Live",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah J.",
|
||||
role: "Pro Gamer",
|
||||
company: "RacingElite",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-challenging-other-players-videogame-tournaments-online_482257-116029.jpg",
|
||||
imageAlt: "game development studio workspace",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Mark D.",
|
||||
role: "Streamer",
|
||||
company: "TwitchSpeed",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bright-purple-square-mosaic-textural-background_1258-69254.jpg?_wi=2",
|
||||
imageAlt: "game development studio workspace",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Elena V.",
|
||||
role: "Game Critic",
|
||||
company: "TechRacer",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-aerial-shot-narrow-bridge_181624-198.jpg?_wi=2",
|
||||
imageAlt: "game development studio workspace",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Chris B.",
|
||||
role: "Fan",
|
||||
company: "CasualRacer",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/professional-dashboard-element-set_23-2148359394.jpg?_wi=2",
|
||||
imageAlt: "game development studio workspace",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Alice T.",
|
||||
role: "Casual",
|
||||
company: "DriveDaily",
|
||||
rating: 4,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-car-model_23-2151138949.jpg?_wi=2",
|
||||
imageAlt: "game development studio workspace",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "4.9",
|
||||
label: "App Store Rating",
|
||||
},
|
||||
{
|
||||
value: "98%",
|
||||
label: "Player Satisfaction",
|
||||
},
|
||||
{
|
||||
value: "100k+",
|
||||
label: "Discord Members",
|
||||
},
|
||||
]}
|
||||
title="What the Pros Say"
|
||||
description="See why TurboShift 2D is the top choice for arcade racing fans."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Is TurboShift free to play?",
|
||||
content: "Yes, the base game is completely free with optional customization packs available.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Do I need a controller?",
|
||||
content: "The game supports both touch, keyboard, and controller setups for the best experience.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Are there leaderboards?",
|
||||
content: "Absolutely! Track your progress and compete against players globally.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/neon-rider-cyberpunk-city_23-2152031338.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Frequently Asked Questions"
|
||||
description="Have questions? We have answers about TurboShift 2D."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="blog" data-section="blog">
|
||||
<BlogCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Latest Dev News"
|
||||
description="Get the latest updates, tips, and behind-the-scenes insights from our development team."
|
||||
blogs={[
|
||||
{
|
||||
id: "b1",
|
||||
category: "Updates",
|
||||
title: "Summer Track Pack Released!",
|
||||
excerpt: "Explore three new sunny tracks and two new vehicles.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/watercolor-car-painting-illustration_23-2151706315.jpg",
|
||||
authorName: "Dev Team",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/3d-rendering-road-scenario_23-2151294026.jpg",
|
||||
date: "Oct 12, 2023",
|
||||
},
|
||||
{
|
||||
id: "b2",
|
||||
category: "Guides",
|
||||
title: "Mastering the Drift",
|
||||
excerpt: "Pro tips for handling hairpin turns.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/futuristic-infographics-template-design_23-2148447380.jpg",
|
||||
authorName: "Lead Racer",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/batmobile-concept-car-with-neon-lights_23-2151649864.jpg",
|
||||
date: "Oct 05, 2023",
|
||||
},
|
||||
{
|
||||
id: "b3",
|
||||
category: "Community",
|
||||
title: "World Tournament Winners",
|
||||
excerpt: "Celebrating the top racers from our Q3 season.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-colorful-light-ai-generated_268835-10905.jpg",
|
||||
authorName: "Mod Team",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/spectrum-flashes-coloured-light_23-2151792396.jpg",
|
||||
date: "Sep 28, 2023",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Newsletter"
|
||||
title="Stay Informed"
|
||||
description="Sign up to receive updates and exclusive news about upcoming patches."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-streamer-winning-shooting-video-games-tournament-celebrating-success-online-live-stream-cheerful-person-feeling-happy-about-action-gameplay-championship-win-computer_482257-41448.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="TurboShift 2D"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Terms of Service",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about"><TextSplitAbout useInvertedBackground={true} title="Built for Speed, Made for Gamers" description={["TurboShift 2D redefines the racing genre with ultra-responsive controls and realistic physics engines.", "Our team has obsessed over every pixel to ensure a fluid, intense gaming experience that keeps you glued to the screen."]} buttons={[{ text: "Join our Community", href: "#" }]} /></div>
|
||||
<div id="features" data-section="features"><FeatureHoverPattern animationType="slide-up" textboxLayout="split" useInvertedBackground={false} features={[{ icon: Zap, title: "Precision Drifting", description: "Perfect every corner with our adaptive drifting mechanics." }, { icon: Shield, title: "Engine Customization", description: "Tweak every aspect of your machine for peak performance." }, { icon: Star, title: "Global Competition", description: "Race against the best players worldwide in weekly tournaments." }]} title="Unrivaled Gameplay Features" description="Master advanced mechanics designed for competitive racing enthusiasts." /></div>
|
||||
<div id="metrics" data-section="metrics"><MetricCardFourteen useInvertedBackground={true} title="Racing by the Numbers" tag="Player Growth" metrics={[{ id: "m1", value: "1.2M", description: "Active Racers" }, { id: "m2", value: "50+", description: "Customizable Cars" }, { id: "m3", value: "24/7", description: "Tournaments Live" }]} metricsAnimation="blur-reveal" /></div>
|
||||
<div id="testimonials" data-section="testimonials"><TestimonialCardSixteen animationType="slide-up" textboxLayout="split" useInvertedBackground={false} testimonials={[{ id: "1", name: "Sarah J.", role: "Pro Gamer", company: "RacingElite", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-challenging-other-players-videogame-tournaments-online_482257-116029.jpg" }, { id: "2", name: "Mark D.", role: "Streamer", company: "TwitchSpeed", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/bright-purple-square-mosaic-textural-background_1258-69254.jpg?_wi=2" }, { id: "3", name: "Elena V.", role: "Game Critic", company: "TechRacer", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/vertical-aerial-shot-narrow-bridge_181624-198.jpg?_wi=2" }, { id: "4", name: "Chris B.", role: "Fan", company: "CasualRacer", rating: 5, imageSrc: "http://img.b2bpic.net/free-vector/professional-dashboard-element-set_23-2148359394.jpg?_wi=2" }, { id: "5", name: "Alice T.", role: "Casual", company: "DriveDaily", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/view-3d-car-model_23-2151138949.jpg?_wi=2" }]} kpiItems={[{ value: "4.9", label: "App Store Rating" }, { value: "98%", label: "Player Satisfaction" }, { value: "100k+", label: "Discord Members" }]} title="What the Pros Say" description="See why TurboShift 2D is the top choice for arcade racing fans." /></div>
|
||||
<div id="faq" data-section="faq"><FaqSplitMedia textboxLayout="split" useInvertedBackground={true} faqs={[{ id: "f1", title: "Is TurboShift free to play?", content: "Yes, the base game is completely free with optional customization packs available." }, { id: "f2", title: "Do I need a controller?", content: "The game supports both touch, keyboard, and controller setups for the best experience." }, { id: "f3", title: "Are there leaderboards?", content: "Absolutely! Track your progress and compete against players globally." }]} imageSrc="http://img.b2bpic.net/free-photo/neon-rider-cyberpunk-city_23-2152031338.jpg" mediaAnimation="slide-up" title="Frequently Asked Questions" description="Have questions? We have answers about TurboShift 2D." faqsAnimation="blur-reveal" /></div>
|
||||
<div id="blog" data-section="blog"><BlogCardTwo animationType="slide-up" textboxLayout="split" useInvertedBackground={false} title="Latest Dev News" description="Get the latest updates, tips, and behind-the-scenes insights from our development team." blogs={[{ id: "b1", category: "Updates", title: "Summer Track Pack Released!", excerpt: "Explore three new sunny tracks and two new vehicles.", imageSrc: "http://img.b2bpic.net/free-photo/watercolor-car-painting-illustration_23-2151706315.jpg", authorName: "Dev Team", authorAvatar: "http://img.b2bpic.net/free-photo/3d-rendering-road-scenario_23-2151294026.jpg", date: "Oct 12, 2023" }, { id: "b2", category: "Guides", title: "Mastering the Drift", excerpt: "Pro tips for handling hairpin turns.", imageSrc: "http://img.b2bpic.net/free-vector/futuristic-infographics-template-design_23-2148447380.jpg", authorName: "Lead Racer", authorAvatar: "http://img.b2bpic.net/free-photo/batmobile-concept-car-with-neon-lights_23-2151649864.jpg", date: "Oct 05, 2023" }, { id: "b3", category: "Community", title: "World Tournament Winners", excerpt: "Celebrating the top racers from our Q3 season.", imageSrc: "http://img.b2bpic.net/free-photo/abstract-colorful-light-ai-generated_268835-10905.jpg", authorName: "Mod Team", authorAvatar: "http://img.b2bpic.net/free-photo/spectrum-flashes-coloured-light_23-2151792396.jpg", date: "Sep 28, 2023" }]} /></div>
|
||||
<div id="contact" data-section="contact"><ContactSplit useInvertedBackground={true} background={{ variant: "plain" }} tag="Newsletter" title="Stay Informed" description="Sign up to receive updates and exclusive news about upcoming patches." imageSrc="http://img.b2bpic.net/free-photo/young-streamer-winning-shooting-video-games-tournament-celebrating-success-online-live-stream-cheerful-person-feeling-happy-about-action-gameplay-championship-win-computer_482257-41448.jpg" mediaAnimation="slide-up" /></div>
|
||||
<div id="footer" data-section="footer"><FooterLogoReveal logoText="TurboShift 2D" leftLink={{ text: "Privacy Policy", href: "#" }} rightLink={{ text: "Terms of Service", href: "#" }} /></div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #fffaf5e6;
|
||||
--primary-cta: #ffaa70;
|
||||
--background: #000000;
|
||||
--card: #0c0c0c;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #106EFB;
|
||||
--primary-cta-text: #0a0a0a;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--secondary-cta: #000000;
|
||||
--secondary-cta-text: #fffaf5e6;
|
||||
--accent: #737373;
|
||||
--background-accent: #737373;
|
||||
--accent: #535353;
|
||||
--background-accent: #106EFB;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user