215 lines
11 KiB
TypeScript
215 lines
11 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
|
|
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import { Award, Download, Gamepad2, Globe, Shield, Swords, TrendingUp, Users, Zap } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="slide-background"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="large"
|
|
background="none"
|
|
cardStyle="glass"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="Battle Royale"
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Gameplay", id: "gameplay" },
|
|
{ name: "Community", id: "testimonials" },
|
|
{ name: "Download", id: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboardSplit
|
|
logoText="My New Title"
|
|
description="This is a test description"
|
|
background={{ variant: "radial-gradient" }}
|
|
buttons={[
|
|
{ text: "Download Now", href: "https://apps.apple.com/app/clash-of-clans" },
|
|
{ text: "Watch Trailer", href: "#gameplay" }
|
|
]}
|
|
layoutOrder="default"
|
|
backgroundImage="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1920&q=80"
|
|
imageAlt="Battle Royale epic battle scene with castle and warriors"
|
|
frameStyle="browser"
|
|
/>
|
|
</div>
|
|
|
|
<div id="gameplay" data-section="gameplay">
|
|
<ProductCardOne
|
|
title="Game Modes"
|
|
description="Experience multiple thrilling gameplay modes designed for every playstyle and strategy preference."
|
|
tag="Gameplay"
|
|
tagIcon={Gamepad2}
|
|
products={[
|
|
{
|
|
id: "1", name: "Campaign Mode", price: "Single Player", imageSrc: "https://img.b2bpic.net/free-photo/diverse-viking-men-outdoors_23-2151689953.jpg", imageAlt: "Campaign mode gameplay with base building"
|
|
},
|
|
{
|
|
id: "2", name: "Multiplayer Battles", price: "1v1 Combat", imageSrc: "https://img.b2bpic.net/free-photo/portrait-scandinavian-female-viking-person_23-2151707052.jpg", imageAlt: "Multiplayer PvP battle arena"
|
|
},
|
|
{
|
|
id: "3", name: "Clan Wars", price: "Team Events", imageSrc: "https://img.b2bpic.net/free-photo/diverse-viking-men-outdoors_23-2151689959.jpg", imageAlt: "Epic clan war gameplay in Epic Battle"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<AboutMetric
|
|
title="Our Numbers"
|
|
metrics={[
|
|
{ icon: Users, label: "Active Players", value: "100M+" },
|
|
{ icon: Globe, label: "Countries", value: "200+" },
|
|
{ icon: Award, label: "Years Active", value: "12+" },
|
|
{ icon: Zap, label: "Daily Battles", value: "1B+" }
|
|
]}
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyFive
|
|
title="Amazing Features"
|
|
description="Unleash powerful features that define the Battle Royale experience. Build your empire with cutting-edge gameplay mechanics."
|
|
tag="Game Features"
|
|
tagIcon={Zap}
|
|
features={[
|
|
{
|
|
title: "Epic Troop Arsenal", description: "Command hundreds of unique troops and spells. Each unit has special abilities to dominate your enemies.", icon: Swords,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-medieval-soldiers-posing-studio_23-2150542225.jpg", imageAlt: "Battle Royale warrior troops"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/diverse-viking-men-outdoors_23-2151689862.jpg", imageAlt: "Magical spells and abilities"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: "Build Your Clan Legacy", description: "Join clans with thousands of active players worldwide. Participate in epic clan wars in Epic Battle, share resources, and climb global rankings together.", icon: Users,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/diverse-viking-men-outdoors_23-2151689957.jpg", imageAlt: "Clan cooperative gameplay"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-medieval-soldiers-posing-studio_23-2150542250.jpg", imageAlt: "Clan war raids and battles"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: "Conquer & Defend", description: "Design impenetrable defenses for your village. Attack enemy bases with tactical precision. Balance offense and defense to become invincible.", icon: Shield,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/portrait-scandinavian-female-viking-person_23-2151707039.jpg", imageAlt: "Base defense strategy"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-medieval-soldiers-posing-studio_23-2150542250.jpg", imageAlt: "Attack and conquest gameplay"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: "Endless Progression", description: "Upgrade hundreds of buildings and troops. Reach new Town Hall levels with increasingly powerful capabilities. Your journey never ends.", icon: TrendingUp,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/diverse-viking-men-outdoors_23-2151689953.jpg", imageAlt: "Base progression and upgrades"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/portrait-scandinavian-female-viking-person_23-2151707039.jpg", imageAlt: "Advanced game progression"
|
|
}
|
|
]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
title="What Champions Say"
|
|
description="Hear from legendary players who have dominated the realm and achieved greatness in Battle Royale."
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Marcus Thunder", role: "Clan Leader", company: "Dragon Slayers", rating: 4,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/fantastic-aliens-with-glowing-neon-colours_23-2151648371.jpg", imageAlt: "Marcus Thunder clan leader portrait"
|
|
},
|
|
{
|
|
id: "2", name: "Sarah Nova", role: "Competitive Player", company: "Elite Warriors", rating: 4,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/cyberpunk-warrior-urban-scenery_23-2150712384.jpg", imageAlt: "Sarah Nova competitive gamer portrait"
|
|
},
|
|
{
|
|
id: "3", name: "James Phoenix", role: "Streaming Legend", company: "Epic Battle Community", rating: 4,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/cyberpunk-man-warrior-portrait_23-2150712414.jpg", imageAlt: "James Phoenix streamer portrait"
|
|
},
|
|
{
|
|
id: "4", name: "Elena Storm", role: "Tournament Winner", company: "Royal Giants", rating: 4,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/cyberpunk-warrior-woman-portrait_23-2150712500.jpg", imageAlt: "Elena Storm tournament champion portrait"
|
|
}
|
|
]}
|
|
kpiItems={[
|
|
{ value: "12+", label: "Years of Epic Battles" },
|
|
{ value: "5★", label: "Player Rating" },
|
|
{ value: "Millions", label: "Active Clans" }
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="https://img.b2bpic.net/free-photo/portrait-scandinavian-female-viking-person_23-2151707039.jpg"
|
|
imageAlt="Battle Royale epic battle scene"
|
|
logoText="Battle Royale"
|
|
copyrightText="© 2024 Supercell | Epic Battle Official"
|
|
columns={[
|
|
{
|
|
title: "Game", items: [
|
|
{ label: "Download", href: "#contact" },
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Gameplay", href: "#gameplay" }
|
|
]
|
|
},
|
|
{
|
|
title: "Community", items: [
|
|
{ label: "Join a Clan", href: "https://supercell.com" },
|
|
{ label: "Global Rankings", href: "https://supercell.com" },
|
|
{ label: "Events & Updates", href: "https://supercell.com" }
|
|
]
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "Help Center", href: "https://supercell.com" },
|
|
{ label: "Contact Us", href: "https://supercell.com" },
|
|
{ label: "Privacy Policy", href: "https://supercell.com" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |