Merge version_3 into main #1
347
src/app/page.tsx
347
src/app/page.tsx
@@ -12,7 +12,7 @@ import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarS
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import { Award, Shield, Zap } from "lucide-react";
|
||||
import { Zap, Shield, Award, Gauge, BatteryCharging, Zap as Power } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -22,32 +22,20 @@ export default function LandingPage() {
|
||||
borderRadius="rounded"
|
||||
contentWidth="small"
|
||||
sizing="largeSmall"
|
||||
background="floatingGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
background="noise"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Models",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "The Fleet", id: "products" },
|
||||
{ name: "Technology", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Vertex Motors"
|
||||
/>
|
||||
@@ -55,24 +43,13 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
logoText="Vertex Motors"
|
||||
description="Redefining the future of luxury transportation with precision engineering and breathtaking 3D design aesthetics."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Models",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
text: "Contact Sales",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
description="Pushing the boundaries of performance and style. Our fleet defines the future of automotive motion."
|
||||
buttons={[{ text: "View Models", href: "#products" }, { text: "Inquire", href: "#contact" }]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/view-3d-car-model_23-2151138937.jpg"
|
||||
imageAlt="Futuristic luxury car"
|
||||
imageSrc="https://img.b2bpic.net/free-photo/view-3d-car-model_23-2151138937.jpg"
|
||||
imageAlt="Futuristic luxury car concept"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
@@ -81,24 +58,15 @@ export default function LandingPage() {
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Engineering Perfection"
|
||||
description="At Vertex, we combine artisanal craftsmanship with bleeding-edge digital manufacturing to push boundaries."
|
||||
title="Engineering Artistry"
|
||||
description="Where high-performance meets design. Every Vertex vehicle is crafted for the ultimate driving experience."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Precision Design",
|
||||
description: "Every curve is mathematically optimized.",
|
||||
},
|
||||
{
|
||||
title: "Advanced Materials",
|
||||
description: "Carbon fiber integration for extreme efficiency.",
|
||||
},
|
||||
{
|
||||
title: "Zero Emissions",
|
||||
description: "Pure electric power without compromise.",
|
||||
},
|
||||
{ title: "Carbon Monocoque", description: "Ultra-lightweight chassis for maximum agility.", icon: Shield },
|
||||
{ title: "Direct Drive", description: "Instant torque delivery on every acceleration.", icon: Zap },
|
||||
{ title: "Precision Tuning", description: "Handling dynamics refined in wind tunnel testing.", icon: Award },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/high-angle-hard-drive-components-blue-light_23-2149417059.jpg"
|
||||
imageAlt="Engine tech detail"
|
||||
imageSrc="https://img.b2bpic.net/free-photo/luxury-car-speeds-by-modern-building-dusk-generative-ai_188544-8048.jpg"
|
||||
imageAlt="Car in motion"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
@@ -109,64 +77,13 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
title="The Signature Fleet"
|
||||
description="Discover our precision-engineered electric sports cars."
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "Vertex",
|
||||
name: "V-Sport",
|
||||
price: "$120,000",
|
||||
rating: 5,
|
||||
reviewCount: "120",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/exterior-modern-white-luxury-car_181624-23559.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
brand: "Vertex",
|
||||
name: "V-Aerotech",
|
||||
price: "$150,000",
|
||||
rating: 5,
|
||||
reviewCount: "98",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/luxury-car-speeds-by-modern-building-dusk-generative-ai_188544-8048.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
brand: "Vertex",
|
||||
name: "V-Coupe",
|
||||
price: "$180,000",
|
||||
rating: 4,
|
||||
reviewCount: "75",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-rear-light-new-silver-automobile_23-2147963009.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
brand: "Vertex",
|
||||
name: "V-SUV",
|
||||
price: "$135,000",
|
||||
rating: 5,
|
||||
reviewCount: "210",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/family-with-cute-daughter-choosing-car-car-showroom_1303-26825.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
brand: "Vertex",
|
||||
name: "V-Sedan",
|
||||
price: "$110,000",
|
||||
rating: 4,
|
||||
reviewCount: "55",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hands-wheel-when-driving-high-speed-from-inside-car_169016-39107.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
brand: "Vertex",
|
||||
name: "V-Chassis",
|
||||
price: "$250,000",
|
||||
rating: 5,
|
||||
reviewCount: "15",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/back-view-people-talking-about-car_23-2150171274.jpg",
|
||||
},
|
||||
{ id: "1", brand: "Vertex", name: "Hyperion", price: "$280k", rating: 5, reviewCount: "45", imageSrc: "https://img.b2bpic.net/free-photo/exterior-modern-white-luxury-car_181624-23559.jpg" },
|
||||
{ id: "2", brand: "Vertex", name: "V-Racer", price: "$190k", rating: 5, reviewCount: "62", imageSrc: "https://img.b2bpic.net/free-photo/luxury-car-speeds-by-modern-building-dusk-generative-ai_188544-8048.jpg" },
|
||||
{ id: "3", brand: "Vertex", name: "Aerodyn", price: "$210k", rating: 5, reviewCount: "38", imageSrc: "https://img.b2bpic.net/free-photo/stylish-rear-light-new-silver-automobile_23-2147963009.jpg" }
|
||||
]}
|
||||
title="Our Signature Series"
|
||||
description="Explore the collection of our latest high-performance vehicles."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -175,194 +92,76 @@ export default function LandingPage() {
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Performance Stats"
|
||||
description="The core metrics of our latest engineering breakthrough."
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
icon: Zap,
|
||||
title: "HP Output",
|
||||
value: "1,200+",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
icon: Shield,
|
||||
title: "Safety Rating",
|
||||
value: "5 Stars",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
icon: Award,
|
||||
title: "Design Awards",
|
||||
value: "45+",
|
||||
},
|
||||
{ id: "m1", icon: Gauge, title: "Top Speed", value: "240mph" },
|
||||
{ id: "m2", icon: BatteryCharging, title: "Range", value: "600 miles" },
|
||||
{ id: "m3", icon: Power, title: "Peak Torque", value: "1,500Nm" },
|
||||
]}
|
||||
title="Performance at a Glance"
|
||||
description="The numbers behind our revolutionary automotive technology."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFour
|
||||
animationType="slide-up"
|
||||
title="Performance Tech"
|
||||
description="State-of-the-art innovation inside every machine."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Advanced Motors",
|
||||
author: "Engineering",
|
||||
description: "Electric motors designed for maximum efficiency.",
|
||||
tags: [
|
||||
"Tech",
|
||||
"Power",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-researcher-working-with-magnifier_23-2148925543.jpg",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Smart UI",
|
||||
author: "Software",
|
||||
description: "Intelligent dash interface for real-time monitoring.",
|
||||
tags: [
|
||||
"UX",
|
||||
"Digital",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/desktop-pc-wooden-desk-showcases-infographics-client-reach-data_482257-126353.jpg",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Aerodynamics",
|
||||
author: "R&D",
|
||||
description: "Wind-tunnel verified airflow systems.",
|
||||
tags: [
|
||||
"Performance",
|
||||
"Physics",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-using-ar-technology-perform-their-occupation_23-2151137456.jpg",
|
||||
},
|
||||
{ id: "f1", title: "Active Aero", author: "R&D", description: "Dynamic wing adjustments for track performance.", tags: ["Performance"], imageSrc: "https://img.b2bpic.net/free-photo/stylish-rear-light-new-silver-automobile_23-2147963009.jpg" },
|
||||
{ id: "f2", title: "Neural-Dash", author: "Digital", description: "Predictive AI interface for driver safety.", tags: ["UX"], imageSrc: "https://img.b2bpic.net/free-photo/desktop-pc-wooden-desk-showcases-infographics-client-reach-data_482257-126353.jpg" }
|
||||
]}
|
||||
title="Advanced Features"
|
||||
description="Experience superior driving dynamics through state-of-the-art tech."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
title="Driver Reviews"
|
||||
description="What our performance enthusiasts have to say."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah Johnson",
|
||||
role: "CEO",
|
||||
company: "TechCorp",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/trendy-rich-caucasian-man-is-sitting-new-modern-car-seriously-looking-straight-through-windscreen_8353-10899.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Michael Chen",
|
||||
role: "CTO",
|
||||
company: "InnovateLab",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-happy-corporate-woman-suit-stands-street-smiles-poses-near-office-bu_1258-119148.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Emily Rodriguez",
|
||||
role: "Director",
|
||||
company: "GrowthCo",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-length-portrait-confident-mature-businessman-formals-standing-isolated-white-background_613910-10632.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "David Kim",
|
||||
role: "Manager",
|
||||
company: "StartupXYZ",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Alice Wang",
|
||||
role: "Lead",
|
||||
company: "EcoDesign",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-portrait-with-blue-lights-visual-effects_23-2149419525.jpg",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "98%",
|
||||
label: "Retention",
|
||||
},
|
||||
{
|
||||
value: "4.9/5",
|
||||
label: "Customer Satisfaction",
|
||||
},
|
||||
{
|
||||
value: "10k+",
|
||||
label: "Happy Drivers",
|
||||
},
|
||||
{ value: "0-60", label: "1.9s" },
|
||||
{ value: "5-Star", label: "Safety Rating" },
|
||||
{ value: "100%", label: "Electric" }
|
||||
]}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Alex V.", role: "Track Enthusiast", company: "Racing Club", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/trendy-rich-caucasian-man-is-sitting-new-modern-car-seriously-looking-straight-through-windscreen_8353-10899.jpg" },
|
||||
{ id: "t2", name: "Mia L.", role: "Luxury Auto Collector", company: "Luxury Motors", rating: 5, imageSrc: "https://img.b2bpic.net/free-photo/portrait-beautiful-happy-corporate-woman-suit-stands-street-smiles-poses-near-office-bu_1258-119148.jpg" }
|
||||
]}
|
||||
title="Owner Testimonials"
|
||||
description="See why industry leaders choose Vertex."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
title="Frequently Asked Questions"
|
||||
description="Your path to owning a Vertex vehicle."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Is charging free?",
|
||||
content: "Yes, at all Vertex stations.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "How long for delivery?",
|
||||
content: "Typically 4-6 weeks.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Can I customize?",
|
||||
content: "Yes, through our configurator.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked"
|
||||
description="Have questions? We have answers."
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{ id: "q1", title: "How do I pre-order?", content: "Visit our online configurator to start your build." },
|
||||
{ id: "q2", title: "Are they road legal?", content: "Fully compliant in all major markets." },
|
||||
{ id: "q3", title: "Maintenance?", content: "Over-the-air updates for software; bi-annual physical service." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Start Your Build"
|
||||
description="Reach out to our specialists today."
|
||||
useInvertedBackground={false}
|
||||
title="Get In Touch"
|
||||
description="Ready to configure your dream car?"
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email",
|
||||
required: true,
|
||||
},
|
||||
{ name: "name", type: "text", placeholder: "Full Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true }
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Your message here...",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/empty-floor-front-modern-building_1127-2885.jpg"
|
||||
imageAlt="Car Showroom"
|
||||
textarea={{ name: "message", placeholder: "Describe your dream configuration..." }}
|
||||
imageSrc="https://img.b2bpic.net/free-photo/empty-floor-front-modern-building_1127-2885.jpg"
|
||||
imageAlt="Modern showroom entrance"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -370,32 +169,8 @@ export default function LandingPage() {
|
||||
<FooterBaseCard
|
||||
logoText="Vertex Motors"
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Brand", items: [{ label: "About Us", href: "#about" }, { label: "Gallery", href: "#products" }] },
|
||||
{ title: "Connect", items: [{ label: "Contact", href: "#contact" }, { label: "Legal", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f5f5f5;
|
||||
--card: #ffffff;
|
||||
--foreground: #1c1c1c;
|
||||
--primary-cta: #511f1f;
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #1f7cff;
|
||||
--primary-cta-text: #f5f5f5;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta: #010101;
|
||||
--secondary-cta-text: #1c1c1c;
|
||||
--accent: #e63946;
|
||||
--background-accent: #e8bea8;
|
||||
--accent: #1f7cff;
|
||||
--background-accent: #f96b2f;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user