bender/a9dd87af-9941-4b97-bbf9-ee10cfba55eb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main

Browse Source 
Merge version_1 into main
This commit was merged in pull request #1.
This commit is contained in:
bender
2026-04-22 18:01:25 +00:00
parent 9dba66b283 b9db1367bb
commit 07ea140d4f
1 changed files with 147 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

528
src/app/page.tsx
View File

@@ -30,397 +30,163 @@ export default function LandingPage() {
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Features",
id: "features",
},
{
name: "Products",
id: "products",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Pensi Battles"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Features", id: "features" },
{ name: "Products", id: "products" },
{ name: "Contact", id: "contact" },
]}
brandName="Pensi Battles"
button={{ text: "Join Now" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDualMedia
background={{
variant: "sparkles-gradient",
}}
title="Where Freestyle Legends Battle Live"
description="Pensi Battles brings Spain's top freestyle rappers head-to-head in high-energy tournament competition. Watch, compete, and join the community."
tag="Spain's #1 Rap Battle"
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/girl-with-perfect-slim-body-woman-posing-bodysuit-red-light-smoke_1157-47713.jpg",
imageAlt: "rap battle stage",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/microphone-with-motivational-message_1134-376.jpg",
imageAlt: "microphone on stage",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/hackers-detected-by-police-collecting-technology-equipment-running-from-abandoned-warehouse-scared-internet-scammers-stopped-by-cybercops-while-breaking-into-database-server_482257-64004.jpg",
imageAlt: "Hackers detected by police collecting technology equipment and running from abandoned warehouse.",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/hacker-arriving-underground-base-looking-spray-cans_482257-124369.jpg",
imageAlt: "Hacker arriving in underground base looking at spray cans",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/people-with-gothic-style-costumes-make-up-performing-drama-world-theatre-day_23-2151182165.jpg",
imageAlt: "People with gothic style costumes and make-up performing drama for world theatre day",
},
]}
mediaAnimation="slide-up"
rating={5}
ratingText="Trusted by 10k+ Fans"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDualMedia
background={{ variant: "sparkles-gradient" }}
title="Where Freestyle Legends Battle Live"
description="Pensi Battles brings Spain's top freestyle rappers head-to-head in high-energy tournament competition. Watch, compete, and join the community."
tag="Spain's #1 Rap Battle"
mediaItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/girl-with-perfect-slim-body-woman-posing-bodysuit-red-light-smoke_1157-47713.jpg", imageAlt: "rap battle stage" },
{ imageSrc: "http://img.b2bpic.net/free-photo/microphone-with-motivational-message_1134-376.jpg", imageAlt: "microphone on stage" }
]}
mediaAnimation="slide-up"
rating={5}
ratingText="Trusted by 10k+ Fans"
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={true}
title="The Pensi Battles Phenomenon"
metrics={[
{
icon: Mic,
label: "Battle Archives",
value: "500+",
},
{
icon: Award,
label: "Tournament Editions",
value: "25+",
},
{
icon: Users,
label: "Active Community",
value: "10k+",
},
]}
metricsAnimation="blur-reveal"
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={true}
title="The Pensi Battles Phenomenon"
metrics={[
{ icon: Mic, label: "Battle Archives", value: "500+" },
{ icon: Award, label: "Tournament Editions", value: "25+" },
{ icon: Users, label: "Active Community", value: "10k+" },
]}
metricsAnimation="blur-reveal"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyFour
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
id: "f1",
title: "Live Streaming",
author: "Pensi Team",
description: "Watch every tournament live in high definition.",
tags: [
"live",
"streaming",
],
imageSrc: "http://img.b2bpic.net/free-photo/male-couch-holding-musical-note-icon_53876-41267.jpg",
},
{
id: "f2",
title: "Artist Profiles",
author: "Rapper Admin",
description: "Build your personal brand and track battle stats.",
tags: [
"artist",
"profile",
],
imageSrc: "http://img.b2bpic.net/free-photo/fake-news-works-coming-out-man-mouth_23-2149261956.jpg",
},
{
id: "f3",
title: "Battle Leaderboards",
author: "Pensi Stats",
description: "Follow the top contenders in the national rankings.",
tags: [
"stats",
"ranking",
],
imageSrc: "http://img.b2bpic.net/free-photo/brazil-vs-denmark_187299-30919.jpg",
},
]}
title="Community Experience"
description="Discover all the ways we support the freestyle culture."
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyFour
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{ id: "f1", title: "Live Streaming", author: "Pensi Team", description: "Watch every tournament live in high definition.", tags: ["live", "streaming"], imageSrc: "http://img.b2bpic.net/free-photo/male-couch-holding-musical-note-icon_53876-41267.jpg" },
{ id: "f2", title: "Artist Profiles", author: "Rapper Admin", description: "Build your personal brand and track battle stats.", tags: ["artist", "profile"], imageSrc: "http://img.b2bpic.net/free-photo/fake-news-works-coming-out-man-mouth_23-2149261956.jpg" },
{ id: "f3", title: "Battle Leaderboards", author: "Pensi Stats", description: "Follow the top contenders in the national rankings.", tags: ["stats", "ranking"], imageSrc: "http://img.b2bpic.net/free-photo/brazil-vs-denmark_187299-30919.jpg" },
]}
title="Community Experience"
description="Discover all the ways we support the freestyle culture."
/>
</div>
<div id="products" data-section="products">
<ProductCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
products={[
{
id: "p1",
name: "Pensi Battles Tee",
price: "$25.00",
imageSrc: "http://img.b2bpic.net/free-photo/happy-monday-with-man-with-headphones_23-2149814530.jpg",
},
{
id: "p2",
name: "Legendary Battles Vinyl",
price: "$40.00",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-vintage-objects_23-2150244550.jpg",
},
{
id: "p3",
name: "Grand Finale Ticket",
price: "$15.00",
imageSrc: "http://img.b2bpic.net/free-photo/arrangement-bright-tickets-cinema_23-2147807352.jpg",
},
{
id: "p4",
name: "Tournament Wall Art",
price: "$30.00",
imageSrc: "http://img.b2bpic.net/free-photo/clean-concrete-white-background-no-people-lighting-equipment_53876-16240.jpg",
},
{
id: "p5",
name: "Pro Mic Set",
price: "$150.00",
imageSrc: "http://img.b2bpic.net/free-photo/asmr-microphone-with-breadsticks-sound_23-2149329790.jpg",
},
{
id: "p6",
name: "Snapback Cap",
price: "$20.00",
imageSrc: "http://img.b2bpic.net/free-photo/skater-wearing-trucker-hat_23-2149431181.jpg",
},
]}
title="Official Merch & Access"
description="Get exclusive gear and tournament tickets."
/>
</div>
<div id="products" data-section="products">
<ProductCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
products={[
{ id: "p1", name: "Pensi Battles Tee", price: "$25.00", imageSrc: "http://img.b2bpic.net/free-photo/happy-monday-with-man-with-headphones_23-2149814530.jpg" },
{ id: "p2", name: "Legendary Battles Vinyl", price: "$40.00", imageSrc: "http://img.b2bpic.net/free-photo/still-life-vintage-objects_23-2150244550.jpg" },
{ id: "p3", name: "Grand Finale Ticket", price: "$15.00", imageSrc: "http://img.b2bpic.net/free-photo/arrangement-bright-tickets-cinema_23-2147807352.jpg" },
]}
title="Official Merch & Access"
description="Get exclusive gear and tournament tickets."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{
id: "free",
price: "$0",
name: "Fan",
buttons: [
{
text: "Get Started",
},
],
features: [
"Watch Public Battles",
"Community Forum Access",
],
},
{
id: "supporter",
price: "$9/mo",
name: "Supporter",
badge: "Popular",
buttons: [
{
text: "Upgrade",
},
],
features: [
"Ad-free Viewing",
"Exclusive Behind-the-Scenes",
],
},
{
id: "pro",
price: "$29/mo",
name: "Legend",
buttons: [
{
text: "Go Pro",
},
],
features: [
"Pro Content Access",
"Priority Event Booking",
"Artist Badge",
],
},
]}
title="Become a Member"
description="Support the battles and get extra perks."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{ id: "free", price: "$0", name: "Fan", buttons: [{ text: "Get Started" }], features: ["Watch Public Battles", "Community Forum Access"] },
{ id: "supporter", price: "$9/mo", name: "Supporter", badge: "Popular", buttons: [{ text: "Upgrade" }], features: ["Ad-free Viewing", "Exclusive Behind-the-Scenes"] },
{ id: "pro", price: "$29/mo", name: "Legend", buttons: [{ text: "Go Pro" }], features: ["Pro Content Access", "Priority Event Booking", "Artist Badge"] },
]}
title="Become a Member"
description="Support the battles and get extra perks."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
textboxLayout="default"
useInvertedBackground={true}
metrics={[
{
id: "m1",
icon: TrendingUp,
title: "Views per Event",
value: "200k+",
},
{
id: "m2",
icon: Clock,
title: "Streaming Hours",
value: "1.2M+",
},
{
id: "m3",
icon: UserCheck,
title: "Battle Participants",
value: "150+",
},
]}
title="Tournament Impact"
description="Evidence of the growing freestyle movement."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
animationType="depth-3d"
textboxLayout="default"
useInvertedBackground={true}
metrics={[
{ id: "m1", icon: TrendingUp, title: "Views per Event", value: "200k+" },
{ id: "m2", icon: Clock, title: "Streaming Hours", value: "1.2M+" },
{ id: "m3", icon: UserCheck, title: "Battle Participants", value: "150+" },
]}
title="Tournament Impact"
description="Evidence of the growing freestyle movement."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Carlos M.",
role: "Fan",
testimonial: "The best freestyle platform in Spain!",
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-fashionable-man-smiles-broadly-demonstrates-white-even-teeth-wears-hood-from-anorak-listens-music-earphones_273609-8834.jpg",
},
{
id: "t2",
name: "Lucia R.",
role: "Rapper",
testimonial: "Pensi Battles opened doors for my career.",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-cool-man-with-hat_23-2149439818.jpg",
},
{
id: "t3",
name: "Javier P.",
role: "Fan",
testimonial: "The energy in every tournament is insane.",
imageSrc: "http://img.b2bpic.net/free-photo/back-view-excited-audience-with-arms-raised-cheering-front-stage-music-concert-copy-space_637285-538.jpg",
},
{
id: "t4",
name: "Sofia G.",
role: "Fan",
testimonial: "I watch every single event release.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-volunteer-smiling_23-2149134455.jpg",
},
{
id: "t5",
name: "Mario F.",
role: "Fan",
testimonial: "Amazing production quality throughout.",
imageSrc: "http://img.b2bpic.net/free-photo/red-hair-girl-sport-outfits_114579-17768.jpg",
},
]}
title="Community Voices"
description="What our battle fans and rappers say."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{ id: "t1", name: "Carlos M.", role: "Fan", testimonial: "The best freestyle platform in Spain!", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-fashionable-man-smiles-broadly-demonstrates-white-even-teeth-wears-hood-from-anorak-listens-music-earphones_273609-8834.jpg" },
{ id: "t2", name: "Lucia R.", role: "Rapper", testimonial: "Pensi Battles opened doors for my career.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-cool-man-with-hat_23-2149439818.jpg" },
{ id: "t3", name: "Javier P.", role: "Fan", testimonial: "The energy in every tournament is insane.", imageSrc: "http://img.b2bpic.net/free-photo/back-view-excited-audience-with-arms-raised-cheering-front-stage-music-concert-copy-space_637285-538.jpg" },
]}
title="Community Voices"
description="What our battle fans and rappers say."
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="default"
useInvertedBackground={true}
faqs={[
{
id: "q1",
title: "How do I compete?",
content: "Register through the artist portal in the menu.",
},
{
id: "q2",
title: "Is it free to watch?",
content: "Basic battles are free for everyone.",
},
{
id: "q3",
title: "Can I sponsor events?",
content: "Contact us using the form below.",
},
]}
title="Got Questions?"
description="Here is what you need to know."
faqsAnimation="blur-reveal"
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="default"
useInvertedBackground={true}
faqs={[
{ id: "q1", title: "How do I compete?", content: "Register through the artist portal in the menu." },
{ id: "q2", title: "Is it free to watch?", content: "Basic battles are free for everyone." },
{ id: "q3", title: "Can I sponsor events?", content: "Contact us using the form below." },
]}
title="Got Questions?"
description="Here is what you need to know."
faqsAnimation="blur-reveal"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={false}
background={{
variant: "plain",
}}
tag="Stay Informed"
title="Join Our Mailing List"
description="Get updates on upcoming tournament editions."
imageSrc="http://img.b2bpic.net/free-photo/developing-photographs-darkroom-work_23-2149893780.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={false}
background={{ variant: "plain" }}
tag="Stay Informed"
title="Join Our Mailing List"
description="Get updates on upcoming tournament editions."
imageSrc="http://img.b2bpic.net/free-photo/developing-photographs-darkroom-work_23-2149893780.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Platform",
items: [
{
label: "About",
href: "#about",
},
{
label: "Merch",
href: "#products",
},
],
},
{
title: "Legal",
items: [
{
label: "Terms",
href: "#",
},
{
label: "Privacy",
href: "#",
},
],
},
]}
bottomLeftText="© 2024 Pensi Battles"
bottomRightText="Built by the community"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{ title: "Platform", items: [{ label: "About", href: "#about" }, { label: "Merch", href: "#products" }] },
{ title: "Legal", items: [{ label: "Terms", href: "#" }, { label: "Privacy", href: "#" }] },
]}
bottomLeftText="© 2024 Pensi Battles"
bottomRightText="Built by the community"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}