Files
ab63ef5a-90c2-46eb-a6c0-85a…/src/app/page.tsx
2026-01-04 18:10:54 +00:00

455 lines
24 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardCarouselSplit from '@/components/sections/hero/HeroBillboardCarouselSplit';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import SplitAboutMetric from '@/components/sections/about/SplitAboutMetric';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Zap, CheckCircle, CreditCard, Instagram, Facebook, Twitter, Linkedin, Sparkles, Award } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="mediumLarge"
sizing="large"
background="grid"
cardStyle="glass-depth"
primaryButtonStyle="flat"
secondaryButtonStyle="solid"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="BULLS"
navItems={[
{ name: "Bikes", id: "bikes" },
{ name: "Why BULLS", id: "why-bulls" },
{ name: "Specs", id: "specs" },
{ name: "Support", id: "faq" },
{ name: "Contact", id: "contact" }
]}
button={{
text: "Choose Your Bike",
href: "bikes"
}}
buttonClassName="font-bold px-6 py-3 text-sm"
buttonTextClassName="font-semibold tracking-wide"
/>
</div>
<div id="hero" data-section="hero" className="min-h-screen flex items-center justify-center py-20">
<div className="w-full px-4 md:px-8">
<HeroBillboardCarouselSplit
title="Engineered for Speed. Built for Control."
buttons={[
{ text: "Choose Your Bike", href: "bikes" },
{ text: "Learn More", href: "why-bulls" }
]}
mediaItems={[
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548980622-09kn53ws.jpg", imageAlt: "Premium BULLS hardtail mountain bike on trail" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548980989-4pbnp30w.jpg", imageAlt: "BULLS full-suspension enduro bike in action" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548981332-o291f5g8.jpg", imageAlt: "BULLS gravel bike adventure ready" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548981731-w525t3tm.jpg", imageAlt: "BULLS high-performance road bike" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548953993-s8siw7gl.jpg", imageAlt: "BULLS electric mountain bike with motor" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548982200-z7tuueza.jpg", imageAlt: "Cyclist riding BULLS bike in motion" }
]}
ariaLabel="BULLS premium bicycle hero section with auto-scrolling bike gallery"
className="w-full"
containerClassName="w-full"
titleClassName="text-5xl lg:text-7xl font-black tracking-tight"
buttonClassName="px-8 py-4 font-semibold text-lg rounded-full"
buttonTextClassName="font-bold"
/>
</div>
</div>
<div id="bikes" data-section="bikes" className="py-24 bg-gradient-to-b from-background to-background-accent/10">
<div className="w-full px-4 md:px-8">
<ProductCardTwo
title="Choose Your Perfect BULLS Bike"
description="Precision-engineered bicycles designed for every rider and terrain. From trail-crushing hardtails to race-winning road bikes."
tag="Bike Models"
tagIcon={Zap}
textboxLayout="default"
useInvertedBackground="noInvert"
animationType="slide-up"
gridVariant="three-columns-all-equal-width"
carouselMode="buttons"
products={[
{
id: "hardtail",
brand: "BULLS",
name: "Hardtail MTB",
price: "€1,299",
rating: 5,
reviewCount: "2.3k",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548982598-32a4ptfq.jpg",
imageAlt: "BULLS Hardtail Mountain Bike"
},
{
id: "full-suspension",
brand: "BULLS",
name: "Full-Suspension MTB",
price: "€2,499",
rating: 5,
reviewCount: "1.8k",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548983035-wadu76og.jpg",
imageAlt: "BULLS Full-Suspension Enduro Bike"
},
{
id: "gravel",
brand: "BULLS",
name: "Gravel Adventure",
price: "€1,699",
rating: 5,
reviewCount: "1.5k",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548983342-0okd3d7n.jpg",
imageAlt: "BULLS Gravel Adventure Bike"
},
{
id: "road",
brand: "BULLS",
name: "Road Racing",
price: "€1,899",
rating: 5,
reviewCount: "1.2k",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548983725-dhnjk8zr.jpg",
imageAlt: "BULLS High-Performance Road Bike"
},
{
id: "ebike",
brand: "BULLS",
name: "e-Bike Mountain",
price: "€3,999",
rating: 5,
reviewCount: "980",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548984087-jntmlw76.jpg",
imageAlt: "BULLS Electric Mountain Bike"
}
]}
buttons={[{ text: "View All Models", href: "contact" }]}
containerClassName="w-full"
textBoxTitleClassName="text-5xl lg:text-6xl font-black tracking-tight"
textBoxDescriptionClassName="text-xl text-accent/90"
/>
</div>
</div>
<div id="why-bulls" data-section="why-bulls" className="py-24 bg-card/30">
<div className="w-full px-4 md:px-8">
<SplitAboutMetric
title="Why Choose BULLS?"
description={[
"BULLS bicycles are engineered in Germany with precision manufacturing and race-tested designs. Every frame is optimized for performance, durability, and rider confidence on any terrain.",
"We source only premium components from industry leaders, ensuring your bike responds exactly as intended—whether you're conquering trails or chasing speed records."
]}
metrics={[
{ label: "Years of Engineering Excellence", value: "35+" },
{ label: "Pro Riders Trust BULLS Globally", value: "500+" }
]}
useInvertedBackground="noInvert"
showBorder={true}
containerClassName="w-full"
titleClassName="text-5xl lg:text-6xl font-black tracking-tight"
descriptionClassName="text-xl leading-relaxed"
metricValueClassName="text-7xl font-black"
metricLabelClassName="text-lg font-semibold"
/>
</div>
</div>
<div id="specs" data-section="specs" className="py-24 bg-gradient-to-b from-background to-background-accent/5">
<div className="w-full px-4 md:px-8">
<FeatureCardSix
title="From Selection to Ride: Your BULLS Journey"
description="Four simple steps to find your perfect match and get riding faster."
tag="How It Works"
tagIcon={CheckCircle}
textboxLayout="default"
useInvertedBackground="noInvert"
features={[
{
id: 1,
title: "Choose Your Model",
description: "Select from 5 premium categories: hardtail, full-suspension, gravel, road, or e-bike. Each engineered for specific terrain and riding style.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548988839-dc9gpnvf.jpg"
},
{
id: 2,
title: "Find Your Size",
description: "Use our height-based sizing guide to find your perfect frame size. Proper fit ensures maximum control, comfort, and performance on every ride.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548989178-7pe6yuhv.jpg"
},
{
id: 3,
title: "Customize Your Setup",
description: "Upgrade your wheelset, drivetrain, or add our premium accessories bundle. Personalize your BULLS to match your riding goals.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548989727-kojvw3y0.jpg"
},
{
id: 4,
title: "Checkout & Deliver",
description: "Fast, secure checkout with flexible financing (from €XX/month with Klarna). Free shipping and 30-day returns on all bikes.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548990013-s43enjvi.jpg"
}
]}
containerClassName="w-full"
textBoxTitleClassName="text-5xl lg:text-6xl font-black tracking-tight"
textBoxDescriptionClassName="text-xl text-accent/80"
/>
</div>
</div>
<div id="pricing" data-section="pricing" className="py-24 bg-background-accent/10">
<div className="w-full px-4 md:px-8">
<PricingCardOne
title="Flexible Financing Options"
description="Own your dream BULLS bike with affordable monthly payments. No hidden fees. No surprises."
tag="Financing"
tagIcon={CreditCard}
textboxLayout="default"
useInvertedBackground="noInvert"
animationType="slide-up"
carouselMode="buttons"
plans={[
{
id: "entry",
badge: "Best Value",
badgeIcon: Sparkles,
price: "From €50/mo",
subtitle: "Perfect for first-time buyers",
features: [
"12-month 0% financing available",
"Free first annual service",
"30-day returns guarantee",
"Lifetime frame warranty",
"Free accessories bundle"
]
},
{
id: "standard",
badge: "Most Popular",
badgeIcon: Award,
price: "From €99/mo",
subtitle: "Best for serious riders",
features: [
"24-month 0% financing available",
"Free first 2 annual services",
"30-day returns + 1-year trade-in credit",
"Lifetime frame warranty",
"Premium accessories bundle",
"Priority support hotline"
]
},
{
id: "pro",
badge: "Pro Choice",
badgeIcon: Zap,
price: "From €149/mo",
subtitle: "Ultimate performance setup",
features: [
"36-month 0% financing available",
"Free annual services (3 years)",
"Extended returns + trade-in flexibility",
"Lifetime frame + component warranty",
"Exclusive pro accessories bundle",
"24/7 dedicated support",
"Free shipping & setup"
]
}
]}
buttons={[{ text: "Apply for Financing", href: "contact" }]}
containerClassName="w-full"
textBoxTitleClassName="text-5xl lg:text-6xl font-black tracking-tight"
textBoxDescriptionClassName="text-xl text-accent/80"
/>
</div>
</div>
<div id="testimonials" data-section="testimonials" className="py-24 bg-card/20">
<div className="w-full px-4 md:px-8">
<TestimonialCardFive
title="Trusted by Riders Worldwide"
description="See what professional racers, gravel adventurers, and weekend warriors say about BULLS bikes."
tag="Real Riders"
textboxLayout="default"
useInvertedBackground="noInvert"
testimonials={[
{
id: "1",
name: "Marcus Schmidt, Pro MTB Racer",
date: "Date: November 2024",
title: "Speed and control combined perfectly.",
quote: "The BULLS hardtail geometry is razor-sharp on technical terrain. I've set three personal records this season. German engineering at its finest.",
tag: "Trail Racer",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548984930-o5sghpib.jpg",
avatarAlt: "Marcus Schmidt",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548984930-o5sghpib.jpg"
},
{
id: "2",
name: "Elena Rossi, Gravel Enthusiast",
date: "Date: November 2024",
title: "Unstoppable on any surface.",
quote: "My BULLS gravel bike handles tarmac, gravel, and rocky trails with equal confidence. The bike feels alive beneath me. Worth every euro.",
tag: "Adventure Cyclist",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548985556-ve2u07ca.jpg",
avatarAlt: "Elena Rossi",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548985556-ve2u07ca.jpg"
},
{
id: "3",
name: "Stefan Müller, Weekend Rider",
date: "Date: October 2024",
title: "Quality that lasts for years.",
quote: "Spent months researching. BULLS delivered on every promise: build quality, customer support, and pure riding joy. Two years in, feels brand new.",
tag: "Casual Rider",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548943588-3acl25me.jpg",
avatarAlt: "Stefan Müller",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548943588-3acl25me.jpg"
},
{
id: "4",
name: "Jessica Chen, Road Racing",
date: "Date: October 2024",
title: "Competitive advantage in every watt.",
quote: "The road bike's frame stiffness is incredible. Every pedal stroke translates to forward motion. Beat my personal best on three consecutive rides.",
tag: "Road Racer",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548985275-qyhbx9a9.jpg",
avatarAlt: "Jessica Chen",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548985275-qyhbx9a9.jpg"
},
{
id: "5",
name: "Oliver König, e-Bike Commuter",
date: "Date: September 2024",
title: "Game-changer for daily commuting.",
quote: "The e-MTB motor is smooth and responsive. 40-minute commute now feels effortless. Still getting the workout I want, but without the suffering.",
tag: "Urban Rider",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548986076-om3bcnlx.jpg",
avatarAlt: "Oliver König",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548986076-om3bcnlx.jpg"
}
]}
/>
</div>
</div>
<div id="faq" data-section="faq" className="py-24 bg-gradient-to-b from-background to-background-accent/5">
<div className="w-full px-4 md:px-8">
<FaqSplitMedia
title="Frequently Asked Questions"
description="Everything you need to know about choosing, sizing, and caring for your BULLS bike."
tag="Support"
textboxLayout="default"
useInvertedBackground="noInvert"
mediaPosition="right"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767548990667-qt7e5bke.jpg"
imageAlt="BULLS sizing and fit guide"
animationType="smooth"
faqs={[
{
id: "1",
title: "How do I choose the right bike model?",
content: "Each BULLS model is engineered for specific terrain and riding style. Hardtail MTBs excel on technical trails with efficient pedaling. Full-suspension offers max comfort on aggressive terrain. Gravel bikes dominate mixed surfaces. Road bikes prioritize speed. e-Bikes add motor assistance for distance and climbing. Consider where you ride most—that's your model."
},
{
id: "2",
title: "How do I find my correct frame size?",
content: "Frame size depends on your height and inseam. Use our height-based sizing chart: under 163cm = XS, 163-175cm = S, 175-185cm = M, 185-195cm = L, 195cm+ = XL. We also offer a detailed 'How to Measure' guide. Proper fit prevents injury and maximizes control. If between sizes, contact our team for personalized advice."
},
{
id: "3",
title: "What financing options are available?",
content: "We partner with Klarna for flexible 0% interest financing: 12-month plans from €50/month, 24-month plans from €99/month, 36-month plans from €149/month. No hidden fees. Fast approval (usually instant). You can also pay in full for a 5% discount. All options include free shipping and 30-day returns."
},
{
id: "4",
title: "How long does delivery take?",
content: "Standard free shipping: 35 business days to most locations in Europe. Express shipping (€29) available: 12 business days. All bikes arrive fully assembled and tested. You'll receive tracking updates at every step. If delivery is delayed beyond 5 days, contact support for immediate resolution."
},
{
id: "5",
title: "What's included with my BULLS bike?",
content: "Every BULLS bike includes: fully assembled frame and drivetrain, pedals, water bottle cage, basic lights (on select models), comprehensive user manual, and a free first annual service (up to 2 services on premium plans). Upgrade to the Accessories Bundle for grips, seat bag, repair kit, and lock."
},
{
id: "6",
title: "What warranty does BULLS offer?",
content: "Lifetime warranty on the frame against manufacturing defects. All components carry a 2-year manufacturer's warranty. The battery on e-bikes is warranted for 5 years. 30-day full returns on all bikes—no questions asked. All plans include one free service annually to keep your bike in peak condition."
},
{
id: "7",
title: "Can I return or trade in my bike?",
content: "Yes. 30-day no-questions-asked returns on all models. After 30 days, we offer a 1-year trade-in credit (standard plans get up to 40% trade-in value on future upgrades). Pro plan members get extended trade-in flexibility. Return shipping is free. Refunds process within 57 business days."
},
{
id: "8",
title: "How do I care for my BULLS bike?",
content: "Regular maintenance extends your bike's life: clean the chain every 50 km of muddy riding, check tire pressure monthly, inspect brakes before every ride, and schedule professional service annually (included with your plan). Our free first service teaches basic maintenance. Download the BULLS care guide or call support for step-by-step help."
}
]}
/>
</div>
</div>
<div id="contact" data-section="contact" className="py-24 bg-background-accent/15">
<div className="w-full px-4 md:px-8 flex justify-center">
<ContactCenterForm
title="Ready to Ride BULLS?"
description="Get expert sizing advice, arrange a test ride, or ask our team anything about your perfect bike. We respond within 2 hours."
useInvertedBackground="noInvert"
buttonText="Send Message"
inputs={[
{ name: "fullName", type: "text", placeholder: "Full Name", required: true },
{ name: "email", type: "email", placeholder: "Email Address", required: true },
{ name: "phone", type: "tel", placeholder: "Phone (optional for test ride requests)", required: false },
{ name: "bikeInterest", type: "text", placeholder: "Which model interests you? (e.g., Hardtail MTB, e-Bike)", required: true }
]}
textarea={{
name: "message",
placeholder: "Tell us about your riding style, terrain, or any questions. Need a test ride scheduled? Let us know your preferred date.",
rows: 6,
required: true
}}
containerClassName="w-full max-w-2xl"
titleClassName="text-5xl lg:text-6xl font-black tracking-tight mb-4"
descriptionClassName="text-lg text-accent/80 mb-8"
buttonClassName="px-8 py-4 font-semibold text-lg rounded-full w-full"
buttonTextClassName="font-bold tracking-wide"
/>
</div>
</div>
<div id="footer" data-section="footer" className="py-10 bg-background border-t border-accent/10">
<div className="w-full px-4 md:px-8 flex justify-center">
<FooterCard
logoText="BULLS"
copyrightText="© 2025 BULLS Premium Bicycles | Engineered in Germany | All Rights Reserved"
socialLinks={[
{ icon: Instagram, href: "https://instagram.com", ariaLabel: "BULLS Instagram" },
{ icon: Facebook, href: "https://facebook.com", ariaLabel: "BULLS Facebook" },
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "BULLS Twitter" },
{ icon: Linkedin, href: "https://linkedin.com", ariaLabel: "BULLS LinkedIn" }
]}
containerClassName="w-full py-20"
cardClassName="rounded-full px-10 py-10 backdrop-blur-sm border border-accent/20"
logoClassName="text-3xl font-black tracking-wider"
copyrightTextClassName="text-sm text-accent/75"
dividerClassName="h-px bg-accent/20 my-6"
socialIconClassName="w-6 h-6 hover:scale-125 transition-transform"
/>
</div>
</div>
</ThemeProvider>
);
}