274 lines
13 KiB
TypeScript
274 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import { Award, Car, Diamond, Flag, Globe, Star, Users } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSizeMediumTitles"
|
|
background="noise"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "#hero"},
|
|
{
|
|
name: "Products", id: "#products"},
|
|
{
|
|
name: "Features", id: "#features"},
|
|
{
|
|
name: "Stats", id: "#stats"},
|
|
{
|
|
name: "About Us", id: "#about"},
|
|
{
|
|
name: "Reviews", id: "#reviews"},
|
|
{
|
|
name: "FAQ", id: "#faq"},
|
|
{
|
|
name: "Contact", id: "#contact"},
|
|
]}
|
|
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=29ejsv"
|
|
logoAlt="F1 Toy Racers Logo"
|
|
brandName="F1 Toy Racers"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogo
|
|
logoText="F1 Toy Racers"
|
|
description="Experience the thrill of Formula 1 with meticulously crafted scale models and collectibles. Your ultimate destination for miniature racing legends."
|
|
buttons={[
|
|
{
|
|
text: "Shop Now", href: "#products"},
|
|
{
|
|
text: "Explore Collection", href: "#features"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/red-formula-one-car_1048-1983.jpg"
|
|
imageAlt="Hero image of a detailed F1 toy car"
|
|
showDimOverlay={true}
|
|
/>
|
|
</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: "Red Racer F1 Model", price: "$79.99", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-generic-racing-car-with-half-sketch-preview_1048-12734.jpg", imageAlt: "Red F1 toy car"},
|
|
{
|
|
id: "p2", name: "Blue Lightning Replica", price: "$89.99", imageSrc: "http://img.b2bpic.net/free-photo/view-three-dimensional-car-model_23-2151139017.jpg", imageAlt: "Blue F1 toy car"},
|
|
{
|
|
id: "p3", name: "Silver Arrow Collector's Edition", price: "$99.99", imageSrc: "http://img.b2bpic.net/free-photo/f1-racing-24-hours-le-mans-render-3d-illustration_654080-332.jpg", imageAlt: "Silver F1 toy car"},
|
|
{
|
|
id: "p4", name: "Emerald Champion F1", price: "$74.99", imageSrc: "http://img.b2bpic.net/free-photo/view-3d-car-model_23-2151138948.jpg", imageAlt: "Green F1 toy car"},
|
|
{
|
|
id: "p5", name: "Golden Streak F1", price: "$84.99", imageSrc: "http://img.b2bpic.net/free-photo/f1-racing-24-hours-le-mans-render-3d-illustration_654080-387.jpg", imageAlt: "Yellow F1 toy car"},
|
|
{
|
|
id: "p6", name: "Shadow Stealth Racer", price: "$94.99", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-sports-car-back-view_23-2151955587.jpg", imageAlt: "Black F1 toy car"},
|
|
]}
|
|
title="Our Latest Race Cars"
|
|
description="Discover precision-engineered F1 toy cars, from classic champions to modern marvels. Each model is a masterpiece of detail and realism."
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyNine
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Authentic Detailing", description: "Every curve, decal, and aerodynamic element is meticulously replicated for unparalleled realism.", imageSrc: "http://img.b2bpic.net/free-photo/robot-style-car-with-joystick_140725-9003.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/still-life-little-music-boxes_52683-121766.jpg", buttonText: "View Details"},
|
|
{
|
|
title: "Collector's Grade Materials", description: "Crafted from high-quality die-cast metal and durable plastics, built to last and impress.", imageSrc: "http://img.b2bpic.net/free-photo/steering-wheel_1339-655.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/fun-3d-illustration-super-santa-claus-with-vr-helmet_183364-81251.jpg", buttonText: "Discover Quality"},
|
|
{
|
|
title: "Iconic Liveries", description: "Celebrate racing history with famous team colors and sponsor logos, bringing the track to life.", imageSrc: "http://img.b2bpic.net/free-photo/driving-formula-one-car_1048-1996.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/motorbike-motor_1417-1535.jpg", buttonText: "Explore Designs"},
|
|
]}
|
|
title="Unleash Your Inner Champion"
|
|
description="Explore the exceptional qualities that make our F1 toy cars stand out. Precision, detail, and passion in every model."
|
|
/>
|
|
</div>
|
|
|
|
<div id="stats" data-section="stats">
|
|
<MetricCardOne
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={true}
|
|
animationType="depth-3d"
|
|
metrics={[
|
|
{
|
|
id: "m1", value: "150+", title: "Unique Models", description: "From classic legends to modern champions.", icon: Car,
|
|
},
|
|
{
|
|
id: "m2", value: "10K+", title: "Happy Collectors", description: "Join our growing community of F1 aficionados.", icon: Users,
|
|
},
|
|
{
|
|
id: "m3", value: "5-Star", title: "Average Rating", description: "Consistently excellent reviews from our customers.", icon: Star,
|
|
},
|
|
{
|
|
id: "m4", value: "Limited", title: "Editions", description: "Exclusive releases for the most dedicated enthusiasts.", icon: Diamond,
|
|
},
|
|
]}
|
|
title="Our Legacy in Numbers"
|
|
description="More than just toys, we're building a community of F1 enthusiasts and collectors worldwide."
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
useInvertedBackground={false}
|
|
title="Passion for Speed, Precision in Miniature"
|
|
metrics={[
|
|
{
|
|
icon: Flag,
|
|
label: "Years in Passion", value: "10+"},
|
|
{
|
|
icon: Award,
|
|
label: "Expert Craftsmanship", value: "Unrivaled"},
|
|
{
|
|
icon: Globe,
|
|
label: "Global Community", value: "Spanning Continents"},
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
names={[
|
|
"Racing Gazette", "Grand Prix Fans", "Miniature Motors", "Collector's World", "Speed Enthusiast", "The Diecast Times", "Track Legends"]}
|
|
title="Trusted by Fellow Enthusiasts"
|
|
description="Our collection is admired by F1 fans and collectors around the globe."
|
|
/>
|
|
</div>
|
|
|
|
<div id="reviews" data-section="reviews">
|
|
<TestimonialCardFifteen
|
|
useInvertedBackground={false}
|
|
testimonial="The quality and detail of these F1 toy cars are simply breathtaking. As a lifelong F1 fan, I can confidently say these are a must-have for any collector!"
|
|
rating={5}
|
|
author="Marcus 'Speed Demon' Vance"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/front-view-lawyer-portrait_23-2151202434.jpg", alt: "Marcus Vance"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/glad-curly-haired-woman-clenches-fists-with-triumpg-feels-like-winner-celebrates-triumph-wears-casual-pink-turtleneck-isolated-beige-background-rejoices-victory-achieves-goals-yes-i-did-it_273609-58260.jpg", alt: "Sophia Perez"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-nervous-young-man-with-beard-raising-up-brow_176420-12180.jpg", alt: "Liam O'Connell"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/confident-businesswoman-looking-camera-with-arm-crossed_23-2148187252.jpg", alt: "Ava Sharma"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit_1298-185.jpg", alt: "David Lee"},
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "faq1", title: "What scale are the F1 toy cars?", content: "Most of our F1 toy cars are 1:18 or 1:43 scale, offering a perfect balance of detail and display size. Specific scales are listed on each product page."},
|
|
{
|
|
id: "faq2", title: "Are these suitable for children?", content: "While durable, our F1 toy cars are primarily designed for collectors aged 14+. They contain small, intricate parts and are not intended for rough play."},
|
|
{
|
|
id: "faq3", title: "Do you offer international shipping?", content: "Yes, we ship our F1 toy cars worldwide! Shipping costs and delivery times vary by destination and are calculated at checkout."},
|
|
{
|
|
id: "faq4", title: "How can I care for my F1 toy car?", content: "To maintain your car's pristine condition, we recommend dusting regularly with a soft brush and keeping it out of direct sunlight to prevent fading."},
|
|
]}
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about our F1 toy cars, orders, and more."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "radial-gradient"}}
|
|
text="Ready to add a legendary racer to your collection? Contact us for custom orders or any inquiries. Our team is here to help you fuel your passion."
|
|
buttons={[
|
|
{
|
|
text: "Get in Touch", href: "mailto:info@f1toyracers.com"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/vertical-shot-lamp-post-by-street-captured-night_181624-15527.jpg"
|
|
imageAlt="Abstract F1 racing background"
|
|
logoText="F1 Toy Racers"
|
|
columns={[
|
|
{
|
|
title: "Explore", items: [
|
|
{
|
|
label: "Products", href: "#products"},
|
|
{
|
|
label: "Features", href: "#features"},
|
|
{
|
|
label: "About Us", href: "#about"},
|
|
],
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{
|
|
label: "FAQ", href: "#faq"},
|
|
{
|
|
label: "Contact Us", href: "#contact"},
|
|
{
|
|
label: "Shipping Info", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Social", items: [
|
|
{
|
|
label: "Instagram", href: "https://instagram.com"},
|
|
{
|
|
label: "Facebook", href: "https://facebook.com"},
|
|
{
|
|
label: "Twitter", href: "https://twitter.com"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 F1 Toy Racers. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|