Initial commit
This commit is contained in:
232
src/app/page.tsx
Normal file
232
src/app/page.tsx
Normal file
@@ -0,0 +1,232 @@
|
||||
"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 ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
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="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="large"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="Clash of Clans"
|
||||
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="CLASH"
|
||||
description="Command your army, upgrade your castle, and dominate the realm. Join millions of players in the ultimate strategy battle game. Lead your clan to glory and become a legendary commander."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
buttons={[
|
||||
{ text: "Download Now", href: "https://apps.apple.com/app/clash-of-clans" },
|
||||
{ text: "Watch Trailer", href: "#gameplay" }
|
||||
]}
|
||||
layoutOrder="default"
|
||||
imageSrc="https://img.b2bpic.net/free-photo/portrait-scandinavian-female-viking-person_23-2151707039.jpg"
|
||||
imageAlt="Clash of Clans epic battle scene with castle and warriors"
|
||||
frameStyle="browser"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFive
|
||||
title="Master Your Strategy"
|
||||
description="Unleash powerful features that define the Clash of Clans 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: "Clash of Clans 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, 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="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"
|
||||
}
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground="noInvert"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<AboutMetric
|
||||
title="Join Millions of Players Worldwide. Clash of Clans Dominates Mobile Gaming with Unmatched Community and Longevity."
|
||||
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="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
title="What Champions Say"
|
||||
description="Hear from legendary players who have dominated the realm and achieved greatness in Clash of Clans."
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Marcus Thunder", role: "Clan Leader", company: "Dragon Slayers", rating: 5,
|
||||
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: 5,
|
||||
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: "Clash Community", rating: 5,
|
||||
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: 5,
|
||||
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="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Ready to Clash?"
|
||||
tagIcon={Download}
|
||||
title="Download Clash of Clans Today"
|
||||
description="Join the global community of legendary warriors. Free to play on iOS and Android. Build, upgrade, attack, and dominate. Your epic adventure awaits."
|
||||
buttons={[
|
||||
{ text: "Download on iOS", href: "https://apps.apple.com/app/clash-of-clans" },
|
||||
{ text: "Download on Android", href: "https://play.google.com/store/apps/details?id=com.supercell.clashofclans" }
|
||||
]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
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="Clash of Clans epic battle scene"
|
||||
logoText="Clash of Clans"
|
||||
copyrightText="© 2024 Supercell | Clash of Clans 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user