239 lines
14 KiB
TypeScript
239 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import { Download, Sword, Users, Trophy, Star } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="medium"
|
|
sizing="large"
|
|
background="circleGradient"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Clash of Clans"
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Community", id: "testimonials" },
|
|
{ name: "Stats", id: "metrics" },
|
|
{ name: "Download", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Play Now", href: "https://supercell.com/en/games/clashofclans/"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroOverlay
|
|
title="Rise to Glory in Clash of Clans"
|
|
description="Build your empire, train powerful troops, and lead your clan to victory in the ultimate strategy battle game. Join millions of players worldwide in epic multiplayer warfare."
|
|
tag="Strategy RPG"
|
|
tagIcon={Sword}
|
|
imageSrc="https://img.b2bpic.net/free-photo/still-life-figurine-with-dices_23-2149352296.jpg"
|
|
imageAlt="Clash of Clans epic battle scene"
|
|
textPosition="bottom-left"
|
|
showBlur={true}
|
|
showDimOverlay={true}
|
|
buttons={[
|
|
{
|
|
text: "Download Free", href: "https://supercell.com/en/games/clashofclans/"
|
|
},
|
|
{
|
|
text: "Watch Trailer", href: "#gallery"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
title="The Battle Awaits"
|
|
description={[
|
|
"Clash of Clans is a multiplayer online strategy game where you build a village, train troops, and attack other players' bases. With millions of active players globally, it's a thriving community of tacticians, warriors, and legendary clan leaders.", "Develop your base defenses, unlock powerful spells and heroes, and join forces with your clan to participate in epic clan wars. Compete in seasonal tournaments, unlock rare troops, and prove yourself as the ultimate strategist."
|
|
]}
|
|
useInvertedBackground="invertDefault"
|
|
showBorder={true}
|
|
buttons={[
|
|
{
|
|
text: "Explore Clans", href: "#community"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardMedia
|
|
title="Master Strategic Gameplay"
|
|
description="Discover the core mechanics that make Clash of Clans the most engaging strategy game"
|
|
useInvertedBackground="noInvert"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
features={[
|
|
{
|
|
id: "troops", title: "Train & Deploy Troops", description: "Command diverse armies including barbarians, archers, dragons, and legendary heroes. Each troop has unique strengths and abilities.", tag: "Army Building", imageSrc: "https://img.b2bpic.net/free-photo/few-knights-armor-is-fighting_1398-2146.jpg", imageAlt: "Clash of Clans troops and units"
|
|
},
|
|
{
|
|
id: "base", title: "Build Your Kingdom", description: "Construct and upgrade defenses, buildings, and walls. Design strategic base layouts to defend against enemy attacks.", tag: "Base Design", imageSrc: "https://img.b2bpic.net/free-photo/top-view-beautiful-rpg-still-life-items_23-2149282422.jpg", imageAlt: "Base building and fortress design"
|
|
},
|
|
{
|
|
id: "multiplayer", title: "Multiplayer Battles", description: "Challenge players worldwide in real-time PvP combat. Test your strategy against legendary opponents and climb the leaderboards.", tag: "PvP Combat", imageSrc: "https://img.b2bpic.net/free-photo/top-view-beautiful-rpg-still-life-items_23-2149282421.jpg", imageAlt: "Multiplayer gameplay and battles"
|
|
},
|
|
{
|
|
id: "clans", title: "Join Epic Clans", description: "Team up with friends and players globally. Participate in clan wars, share strategies, and unlock exclusive rewards together.", tag: "Teamwork", imageSrc: "https://img.b2bpic.net/free-photo/still-life-objects-with-role-playing-game-sheet_23-2149352299.jpg", imageAlt: "Clan community and cooperation"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
title="Global Gaming Phenomenon"
|
|
description="Join a massive community of strategy enthusiasts and competitive gamers"
|
|
useInvertedBackground="invertDefault"
|
|
textboxLayout="default"
|
|
animationType="scale-rotate"
|
|
gridVariant="uniform-all-items-equal"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "100M", title: "Active Players", description: "Monthly active gamers from around the world", icon: Users
|
|
},
|
|
{
|
|
id: "2", value: "10B+", title: "Total Downloads", description: "Games downloaded and installed globally", icon: Download
|
|
},
|
|
{
|
|
id: "3", value: "12Y+", title: "Years Running", description: "Continuously updated and expanded since launch", icon: Trophy
|
|
},
|
|
{
|
|
id: "4", value: "4.8★", title: "Player Rating", description: "Highly rated across all major app stores", icon: Star
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="gallery" data-section="gallery">
|
|
<BlogCardThree
|
|
title="Legendary Moments"
|
|
description="Experience the most epic gameplay moments and victories"
|
|
useInvertedBackground="noInvert"
|
|
textboxLayout="default"
|
|
animationType="blur-reveal"
|
|
blogs={[
|
|
{
|
|
id: "1", category: "Gameplay", title: "The Great Siege", excerpt: "Watch as a fully coordinated clan executes a perfect attack strategy against an impenetrable fortress", imageSrc: "https://img.b2bpic.net/free-photo/collection-cubes-with-games-title_23-2148030957.jpg", imageAlt: "Epic siege warfare gameplay", authorName: "Clash Team", authorAvatar: "https://img.b2bpic.net/free-photo/man-with-glasses-playing-with-controller_23-2148422239.jpg", date: "Dec 20, 2024"
|
|
},
|
|
{
|
|
id: "2", category: "Victory", title: "Championship Glory", excerpt: "Experience the thrill of winning the Clan War League and claiming ultimate supremacy", imageSrc: "https://img.b2bpic.net/free-photo/still-life-map-with-dices_23-2149352317.jpg", imageAlt: "Victory celebration and trophy", authorName: "Pro Gaming", authorAvatar: "https://img.b2bpic.net/free-photo/pro-gamer-broadcasting-gameplay-front-internet-audience_482257-77071.jpg", date: "Dec 15, 2024"
|
|
},
|
|
{
|
|
id: "3", category: "Combat", title: "Legendary Raid", excerpt: "Witness an intense one-on-one raid battle featuring strategic hero deployment and spell combos", imageSrc: "https://img.b2bpic.net/free-photo/still-life-figurine-with-dices_23-2149352308.jpg", imageAlt: "Intense raid battle action", authorName: "Strategy Guide", authorAvatar: "https://img.b2bpic.net/free-photo/portrait-young-handsome-man-earphones-dark-haired-man-casual-clothes-looking-camera-portrait-concept_74855-24635.jpg", date: "Dec 10, 2024"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
title="Trusted by Millions of Clashers"
|
|
description="Hear what passionate players worldwide say about their Clash of Clans experience"
|
|
useInvertedBackground="invertDefault"
|
|
textboxLayout="default"
|
|
animationType="opacity"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Marcus Chen", role: "Clan Leader", company: "Dragon Slayers", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/man-with-glasses-playing-with-controller_23-2148422239.jpg", imageAlt: "Marcus Chen clan leader"
|
|
},
|
|
{
|
|
id: "2", name: "Sarah Williams", role: "Content Creator", company: "Gaming Streams", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/pro-gamer-broadcasting-gameplay-front-internet-audience_482257-77071.jpg", imageAlt: "Sarah Williams gamer"
|
|
},
|
|
{
|
|
id: "3", name: "Alex Rodriguez", role: "Tournament Player", company: "Elite Gamers", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-handsome-man-earphones-dark-haired-man-casual-clothes-looking-camera-portrait-concept_74855-24635.jpg", imageAlt: "Alex Rodriguez professional player"
|
|
},
|
|
{
|
|
id: "4", name: "Emma Thompson", role: "Strategy Master", company: "Clash Community", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/close-up-shot-pro-gamer-broadcasting-game-internet-talking-with-audience_482257-99050.jpg", imageAlt: "Emma Thompson strategy expert"
|
|
}
|
|
]}
|
|
kpiItems={[
|
|
{
|
|
value: "500K+", label: "Clan Wars Won"
|
|
},
|
|
{
|
|
value: "98%", label: "Player Satisfaction"
|
|
},
|
|
{
|
|
value: "24/7", label: "Community Support"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Ready to Play?"
|
|
title="Download Clash of Clans Today"
|
|
description="Join the greatest strategy game ever created. Build your village, train your troops, and clash with players around the world. Download free on iOS and Android."
|
|
tagIcon={Download}
|
|
useInvertedBackground="noInvert"
|
|
background={{ variant: "radial-gradient" }}
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Get Download Link"
|
|
termsText="By clicking Get Download Link, you agree to receive updates about Clash of Clans. We respect your privacy and never share your information."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="Clash of Clans"
|
|
copyrightText="© 2025 Supercell. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Game", items: [
|
|
{ label: "Download", href: "https://supercell.com/en/games/clashofclans/" },
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Updates", href: "https://supercell.com/en/games/clashofclans/" },
|
|
{ label: "Clans", href: "#community" }
|
|
]
|
|
},
|
|
{
|
|
title: "Community", items: [
|
|
{ label: "Forums", href: "https://supercell.com/en/games/clashofclans/" },
|
|
{ label: "Tournaments", href: "https://supercell.com/en/games/clashofclans/" },
|
|
{ label: "Support", href: "https://supercell.com/en/games/clashofclans/" },
|
|
{ label: "Social", href: "https://supercell.com/en/games/clashofclans/" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "https://supercell.com/en/games/clashofclans/" },
|
|
{ label: "Terms of Service", href: "https://supercell.com/en/games/clashofclans/" },
|
|
{ label: "Contact Us", href: "https://supercell.com/en/games/clashofclans/" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |