Merge version_2 into main #4
280
src/app/page.tsx
280
src/app/page.tsx
@@ -2,230 +2,90 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import { Award, Shield, Star, Zap } from "lucide-react";
|
||||
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import { Microscope, HeartPulse, Leaf, Sparkles } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="large"
|
||||
background="none"
|
||||
cardStyle="gradient-bordered"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="normal"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "About", id: "about"},
|
||||
{
|
||||
name: "Packages", id: "coaching"},
|
||||
{
|
||||
name: "Testimonials", id: "testimonials"},
|
||||
{
|
||||
name: "FAQ", id: "faq"},
|
||||
]}
|
||||
brandName="ProBrawlCoach"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Library", id: "hero" },
|
||||
{ name: "Interactive Labs", id: "features" },
|
||||
{ name: "About", id: "about" },
|
||||
]}
|
||||
brandName="BioDimension"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="Master Your Brawlers"
|
||||
description="Level up your gameplay with personalized 1-on-1 coaching from elite Brawl Stars professionals. Dominate the ladder and master your favorite brawlers."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Coaching", href: "#coaching"},
|
||||
{
|
||||
text: "View About", href: "#about"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/spray-paint-bottles-neglected-glowing-building-filled-with-graffiti-rusty-damaged-walls-containers-aerosols-deserted-space-ruins-illuminated-by-purple-fluorescent-lights-close-up_482257-66968.jpg?_wi=1"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="BioDimension"
|
||||
description="Step into the future of education. Explore cellular micro-worlds, human anatomy, and botanical systems through cutting-edge 3D interactive models."
|
||||
buttons={[{ text: "Explore Labs" }]}
|
||||
imageSrc="https://img.b2bpic.net/free-photo/abstract-3d-glowing-neon-biological-structure-digital-render_12345-678.jpg?w=800"
|
||||
imageAlt="3D rotating human heart model"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Why Choose Our Coaches?"
|
||||
description="Our team consists of top-tier players with thousands of wins. We focus on map awareness, brawler mechanics, and draft strategies tailored to your playstyle."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-sitting-gaming-chair-playing-video-games-his-room-with-colorful-neons-wearing-headphones_482257-22154.jpg?_wi=1"
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySix
|
||||
title="Interactive Learning"
|
||||
description="Dive deep into complex biological structures with our high-fidelity 3D lab environment."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Cellular Micro-worlds", description: "Zoom into the architecture of life. Explore mitochondria, nuclei, and ribosomes in full 3D.", buttonIcon: Microscope,
|
||||
},
|
||||
{
|
||||
title: "Human Anatomy", description: "From cardiovascular to skeletal systems, visualize the body's internal machinery.", buttonIcon: HeartPulse,
|
||||
},
|
||||
{
|
||||
title: "Plant Systems", description: "Deconstruct photosynthesis and vascular structures in a highly interactive environment.", buttonIcon: Leaf,
|
||||
},
|
||||
{
|
||||
title: "Dynamic Labs", description: "Experiment with environmental factors in real-time, observing changes in live 3D simulations.", buttonIcon: Sparkles,
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Live VOD Review", description: "Send us your replays for expert analysis.", buttonIcon: Zap,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-mature-woman-having-fun-time_23-2149232845.jpg", imageAlt: "Beautiful mature woman having a fun time"},
|
||||
{
|
||||
title: "Draft Optimization", description: "Master picking the right brawler for the map.", buttonIcon: Shield,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spray-paint-bottles-neglected-glowing-building-filled-with-graffiti-rusty-damaged-walls-containers-aerosols-deserted-space-ruins-illuminated-by-purple-fluorescent-lights-close-up_482257-66968.jpg?_wi=2", imageAlt: "Beautiful mature woman having a fun time"},
|
||||
{
|
||||
title: "Mechanical Drills", description: "Specific training to improve your aim and dodge.", buttonIcon: Award,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-gaming-chair-playing-video-games-his-room-with-colorful-neons-wearing-headphones_482257-22154.jpg?_wi=2", imageAlt: "Beautiful mature woman having a fun time"},
|
||||
{
|
||||
title: "Rank Climbing", description: "Custom roadmap to your target trophy level.", buttonIcon: Star,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-laptop-screen_23-2147873575.jpg?_wi=1", imageAlt: "Beautiful mature woman having a fun time"},
|
||||
]}
|
||||
title="Core Coaching Features"
|
||||
description="Comprehensive tools and methods to help you climb higher."
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
title="The Future of Bio-Education"
|
||||
description="BioDimension merges advanced visualization technology with pedagogical rigor to make abstract biology concrete, accessible, and thrilling for students of all ages."
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="coaching" data-section="coaching">
|
||||
<PricingCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "basic", price: "$19", name: "Starter Session", features: [
|
||||
"1 hour live coaching", "Replay review", "Basic tips"],
|
||||
buttons: [
|
||||
{
|
||||
text: "Select"},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro", price: "$49", name: "Pro Masterclass", features: [
|
||||
"3 hours live coaching", "Full VOD breakdown", "Advanced strategy guide"],
|
||||
buttons: [
|
||||
{
|
||||
text: "Select"},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "elite", price: "$99", name: "Legendary Climb", features: [
|
||||
"10 hours coaching", "Rank guarantee roadmap", "Direct coach chat"],
|
||||
buttons: [
|
||||
{
|
||||
text: "Select"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Select Your Coaching Plan"
|
||||
description="Flexible plans to suit every level of competition."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1", icon: Award,
|
||||
title: "Students Trained", value: "1,500+"},
|
||||
{
|
||||
id: "2", icon: Star,
|
||||
title: "Avg Rank Climb", value: "+150"},
|
||||
{
|
||||
id: "3", icon: Shield,
|
||||
title: "Coach Win Rate", value: "90%"},
|
||||
]}
|
||||
title="Our Impact"
|
||||
description="Proven results for students across all regions."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Rex", date: "Oct 2023", title: "Mythic III", quote: "The VOD review helped me realize my positioning errors instantly.", tag: "Pro", avatarSrc: "http://img.b2bpic.net/free-photo/gamer-streaming-greeting-audience-preparing-showcase-gameplay_482257-103544.jpg", imageSrc: "http://img.b2bpic.net/free-photo/spray-paint-bottles-neglected-glowing-building-filled-with-graffiti-rusty-damaged-walls-containers-aerosols-deserted-space-ruins-illuminated-by-purple-fluorescent-lights-close-up_482257-66968.jpg?_wi=3", imageAlt: "gamer portrait avatar"},
|
||||
{
|
||||
id: "2", name: "Jinx", date: "Nov 2023", title: "Legendary I", quote: "Climbed 300 trophies in one week. Incredible coaching.", tag: "Pro", avatarSrc: "http://img.b2bpic.net/free-photo/woman-with-pink-hair-playing-videogame_23-2148969216.jpg", imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-gaming-chair-playing-video-games-his-room-with-colorful-neons-wearing-headphones_482257-22154.jpg?_wi=3", imageAlt: "gamer portrait avatar"},
|
||||
{
|
||||
id: "3", name: "Tank", date: "Dec 2023", title: "Masters", quote: "Draft strategies gave me an edge I never had before.", tag: "Elite", avatarSrc: "http://img.b2bpic.net/free-photo/black-remote-worker-enjoying-flexibility-comfort-while-browsing-online_482257-118982.jpg", imageSrc: "http://img.b2bpic.net/free-photo/close-up-modern-laptop-screen_23-2147873575.jpg?_wi=2", imageAlt: "gamer portrait avatar"},
|
||||
{
|
||||
id: "4", name: "Swift", date: "Jan 2024", title: "Mythic I", quote: "Personalized drills made the biggest difference.", tag: "Basic", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-man-earphones-dark-haired-man-casual-clothes-looking-camera-portrait-concept_74855-24635.jpg", imageSrc: "http://img.b2bpic.net/free-photo/man-portrait-with-blue-lights-visual-effects_23-2149419476.jpg", imageAlt: "gamer portrait avatar"},
|
||||
{
|
||||
id: "5", name: "Pyro", date: "Feb 2024", title: "Legendary II", quote: "Absolutely top-tier knowledge. Highly recommended.", tag: "Pro", avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-mature-woman-having-fun-time_23-2149232845.jpg", imageSrc: "http://img.b2bpic.net/free-photo/retro-vhs-packaging-indoors_23-2150172409.jpg", imageAlt: "gamer portrait avatar"},
|
||||
]}
|
||||
title="Hear From Our Players"
|
||||
description="Success stories from brawlers who reached new heights."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "How do we connect?", content: "Sessions are held over Discord voice chat and live screen share."},
|
||||
{
|
||||
id: "2", title: "Which brawlers do you coach?", content: "We cover all brawlers currently in the meta."},
|
||||
{
|
||||
id: "3", title: "Is rank guaranteed?", content: "While we cannot technically guarantee rank, our roadmaps are built to maximize win consistency."},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Common questions about our coaching services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient"}}
|
||||
title="Ready to Start Climbing?"
|
||||
description="Join our newsletter for weekly tips and coaching availability updates."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-modern-laptop-screen_23-2147873575.jpg?_wi=3"
|
||||
mediaAnimation="slide-up"
|
||||
tag="Stay Updated"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="ProBrawlCoach"
|
||||
columns={[
|
||||
{
|
||||
title: "Explore", items: [
|
||||
{
|
||||
label: "About", href: "#about"},
|
||||
{
|
||||
label: "Services", href: "#coaching"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy", href: "#"},
|
||||
{
|
||||
label: "Terms", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="BioDimension"
|
||||
columns={[
|
||||
{ title: "Platform", items: [{ label: "Library", href: "#hero" }, { label: "Labs", href: "#features" }] },
|
||||
{ title: "Company", items: [{ label: "About", href: "#about" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #ffffff;
|
||||
--card: #f9f9f9;
|
||||
--foreground: #000612e6;
|
||||
--primary-cta: #106EFB;
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #00ff41;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #f9f9f9;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta-text: #000612e6;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #106EFB;
|
||||
--accent: #00ff41;
|
||||
--background-accent: #004d14;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user