Update src/app/page.tsx
This commit is contained in:
383
src/app/page.tsx
383
src/app/page.tsx
@@ -16,276 +16,139 @@ import { Crown, MapPin, Trophy } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Clan Info",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Roster",
|
||||
id: "team",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="ZRX CLAN"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Clan Info", id: "hero" },
|
||||
{ name: "Roster", id: "team" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="ZRX CLAN"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="ZRX CLAN"
|
||||
description="Elite gaming squad based in Sigatoka, Fiji. Pushing limits, competing globally."
|
||||
buttons={[
|
||||
{
|
||||
text: "Follow us",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/friends-playing-bowling_107420-84936.jpg",
|
||||
imageAlt: "gaming clan logo neon background",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gamer-glasses-is-sitting-chair-while-pretty-girl-behide-his-back-is-smiling-camera_613910-21684.jpg",
|
||||
imageAlt: "cyberpunk gaming background neon blue",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/e-sports-winner-trophy-standing-stage_1419-2793.jpg",
|
||||
imageAlt: "pro gaming setup dark room",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=x0hkdc",
|
||||
imageAlt: "gaming logo badge on metal",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cartoon-man-wearing-vr-glasses_23-2151136905.jpg",
|
||||
imageAlt: "competitive gaming team digital art",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-network-communications-background-with-low-poly-plexus-design_1048-15687.jpg",
|
||||
imageAlt: "abstract tech network lines blue",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="ZRX CLAN"
|
||||
description="Elite gaming squad based in Sigatoka, Fiji. Pushing limits, competing globally."
|
||||
buttons={[{ text: "Follow us", href: "#contact" }]}
|
||||
slides={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/friends-playing-bowling_107420-84936.jpg", imageAlt: "gaming clan logo neon background" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/gamer-glasses-is-sitting-chair-while-pretty-girl-behide-his-back-is-smiling-camera_613910-21684.jpg", imageAlt: "cyberpunk gaming background neon blue" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/e-sports-winner-trophy-standing-stage_1419-2793.jpg", imageAlt: "pro gaming setup dark room" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=x0hkdc", imageAlt: "gaming logo badge on metal" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/cartoon-man-wearing-vr-glasses_23-2151136905.jpg", imageAlt: "competitive gaming team digital art" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-render-network-communications-background-with-low-poly-plexus-design_1048-15687.jpg", imageAlt: "abstract tech network lines blue" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Clan Profile"
|
||||
metrics={[
|
||||
{
|
||||
icon: MapPin,
|
||||
label: "Location",
|
||||
value: "Sigatoka, Fiji",
|
||||
},
|
||||
{
|
||||
icon: Crown,
|
||||
label: "Owner",
|
||||
value: "ZRX IMXNZ",
|
||||
},
|
||||
{
|
||||
icon: Trophy,
|
||||
label: "Star Player",
|
||||
value: "DEV KUMAR",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
title="Clan Profile"
|
||||
metrics={[
|
||||
{ icon: MapPin, label: "Location", value: "Sigatoka, Fiji" },
|
||||
{ icon: Crown, label: "Owner", value: "ZRX IMXNZ" },
|
||||
{ icon: Trophy, label: "Star Player", value: "DEV KUMAR" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTen
|
||||
useInvertedBackground={false}
|
||||
title="Active Roster"
|
||||
tag="12 Dedicated Members"
|
||||
members={[
|
||||
{
|
||||
id: "m1",
|
||||
name: "ZRX IMXNZ",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cartoon-man-wearing-glasses_23-2151136786.jpg",
|
||||
imageAlt: "gaming avatar cool style",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
name: "DEV KUMAR",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pixel-art-design-portrait-bitmap_23-2149232488.jpg",
|
||||
imageAlt: "tech esports profile",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
name: "Player 3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-futuristic-female-humanoid-with-advanced-technology_23-2151666248.jpg",
|
||||
imageAlt: "esports player avatar helmet",
|
||||
},
|
||||
{
|
||||
id: "m4",
|
||||
name: "Player 4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fit-individual-doing-sport_23-2151764314.jpg",
|
||||
imageAlt: "neon gaming avatar glitch effect",
|
||||
},
|
||||
]}
|
||||
memberVariant="card"
|
||||
membersAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTen
|
||||
title="Active Roster"
|
||||
tag="12 Dedicated Members"
|
||||
membersAnimation="slide-up"
|
||||
memberVariant="card"
|
||||
useInvertedBackground={false}
|
||||
members={[
|
||||
{ id: "m1", name: "ZRX IMXNZ", imageSrc: "http://img.b2bpic.net/free-photo/cartoon-man-wearing-glasses_23-2151136786.jpg", imageAlt: "gaming avatar cool style" },
|
||||
{ id: "m2", name: "DEV KUMAR", imageSrc: "http://img.b2bpic.net/free-photo/pixel-art-design-portrait-bitmap_23-2149232488.jpg", imageAlt: "tech esports profile" },
|
||||
{ id: "m3", name: "Player 3", imageSrc: "http://img.b2bpic.net/free-photo/portrait-futuristic-female-humanoid-with-advanced-technology_23-2151666248.jpg", imageAlt: "esports player avatar helmet" },
|
||||
{ id: "m4", name: "Player 4", imageSrc: "http://img.b2bpic.net/free-photo/fit-individual-doing-sport_23-2151764314.jpg", imageAlt: "neon gaming avatar glitch effect" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Scrims & Practice",
|
||||
author: "Pro Division",
|
||||
description: "High-intensity training and practice matches.",
|
||||
tags: [
|
||||
"Gaming",
|
||||
"Scrims",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bright-neon-colors-illuminated-arrow_23-2151204943.jpg",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Recruitment",
|
||||
author: "Management",
|
||||
description: "Always looking for top talent to join our ranks.",
|
||||
tags: [
|
||||
"Recruiting",
|
||||
"Team",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/virtual-projection-lights-forming-square-pattern-dark-background_181624-32736.jpg",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Collaborations",
|
||||
author: "Leadership",
|
||||
description: "Open to partnerships with brands and creators.",
|
||||
tags: [
|
||||
"Collab",
|
||||
"Events",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-young-handsome-sporty-man-wearing-headband-wristbands-headphones-stretching-out-hands-isolated-pink-with-copy-space_141793-76996.jpg",
|
||||
},
|
||||
]}
|
||||
title="Clan Capabilities"
|
||||
description="We specialize in competitive scrims, professional recruitment, and high-impact collaboration in the gaming scene."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Clan Capabilities"
|
||||
description="We specialize in competitive scrims, professional recruitment, and high-impact collaboration in the gaming scene."
|
||||
features={[
|
||||
{ id: "f1", title: "Scrims & Practice", author: "Pro Division", description: "High-intensity training and practice matches.", tags: ["Gaming", "Scrims"], imageSrc: "http://img.b2bpic.net/free-photo/bright-neon-colors-illuminated-arrow_23-2151204943.jpg" },
|
||||
{ id: "f2", title: "Recruitment", author: "Management", description: "Always looking for top talent to join our ranks.", tags: ["Recruiting", "Team"], imageSrc: "http://img.b2bpic.net/free-photo/virtual-projection-lights-forming-square-pattern-dark-background_181624-32736.jpg" },
|
||||
{ id: "f3", title: "Collaborations", author: "Leadership", description: "Open to partnerships with brands and creators.", tags: ["Collab", "Events"], imageSrc: "http://img.b2bpic.net/free-photo/confident-young-handsome-sporty-man-wearing-headband-wristbands-headphones-stretching-out-hands-isolated-pink-with-copy-space_141793-76996.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah",
|
||||
role: "Supporter",
|
||||
testimonial: "The best clan in Fiji!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-holding-controller-close-up_23-2149005239.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Mike",
|
||||
role: "Opponent",
|
||||
testimonial: "Tough competition, great squad.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-warrior-woman-portrait_23-2150712492.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Alex",
|
||||
role: "Fan",
|
||||
testimonial: "ZRX is dominating the scene.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-boy-illustration_23-2151728220.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "John",
|
||||
role: "Recruit",
|
||||
testimonial: "Amazing community and leadership.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-model-listening-music_23-2151884522.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Liam",
|
||||
role: "Player",
|
||||
testimonial: "Training here pushed my limits.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fantastic-aliens-with-glowing-neon-colours_23-2151648366.jpg",
|
||||
},
|
||||
]}
|
||||
title="Player Feedback"
|
||||
description="Hear what our community says about ZRX."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Player Feedback"
|
||||
description="Hear what our community says about ZRX."
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah", role: "Supporter", testimonial: "The best clan in Fiji!", imageSrc: "http://img.b2bpic.net/free-photo/man-holding-controller-close-up_23-2149005239.jpg" },
|
||||
{ id: "t2", name: "Mike", role: "Opponent", testimonial: "Tough competition, great squad.", imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-warrior-woman-portrait_23-2150712492.jpg" },
|
||||
{ id: "t3", name: "Alex", role: "Fan", testimonial: "ZRX is dominating the scene.", imageSrc: "http://img.b2bpic.net/free-photo/cyberpunk-boy-illustration_23-2151728220.jpg" },
|
||||
{ id: "t4", name: "John", role: "Recruit", testimonial: "Amazing community and leadership.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-model-listening-music_23-2151884522.jpg" },
|
||||
{ id: "t5", name: "Liam", role: "Player", testimonial: "Training here pushed my limits.", imageSrc: "http://img.b2bpic.net/free-photo/fantastic-aliens-with-glowing-neon-colours_23-2151648366.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "faq1",
|
||||
title: "How to join?",
|
||||
content: "Contact us via email or DM on social media.",
|
||||
},
|
||||
{
|
||||
id: "faq2",
|
||||
title: "Are you hiring?",
|
||||
content: "We are always looking for skilled players.",
|
||||
},
|
||||
{
|
||||
id: "faq3",
|
||||
title: "Do you do scrims?",
|
||||
content: "Yes, we regularly host and attend scrims.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked"
|
||||
description="Common queries about our clan profile."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Frequently Asked"
|
||||
description="Common queries about our clan profile."
|
||||
faqsAnimation="blur-reveal"
|
||||
faqs={[
|
||||
{ id: "faq1", title: "How to join?", content: "Contact us via email or DM on social media." },
|
||||
{ id: "faq2", title: "Are you hiring?", content: "We are always looking for skilled players." },
|
||||
{ id: "faq3", title: "Do you do scrims?", content: "Yes, we regularly host and attend scrims." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "canvas-reveal",
|
||||
}}
|
||||
title="Get In Touch"
|
||||
description="For scrims, recruitment, or collaborations."
|
||||
tag="Contact Us"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "canvas-reveal" }}
|
||||
title="Get In Touch"
|
||||
description="For scrims, recruitment, or collaborations."
|
||||
tag="Contact Us"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="ZRX CLAN"
|
||||
leftLink={{
|
||||
text: "Instagram",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "TikTok",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="ZRX CLAN"
|
||||
leftLink={{ text: "Instagram", href: "#" }}
|
||||
rightLink={{ text: "TikTok", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user