bender/aac0e5c5-eae4-497c-9952-3d8d9a47b9b5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dk
2026-03-09 08:06:48 +00:00
commit d706d4b9cd
631 changed files with 86282 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
src/app/about/page.tsx Normal file
View File

@@ -0,0 +1,249 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
import FooterSimple from "@/components/sections/footer/FooterSimple";
export default function AboutPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Vehicles", id: "/vehicles" },
{ name: "About", id: "/about" },
{ name: "Pricing", id: "/pricing" },
{ name: "Contact", id: "/contact" },
];
const footerColumns = [
{
title: "Explore",
items: [
{ label: "Home", href: "/" },
{ label: "Vehicles", href: "/vehicles" },
{ label: "About Us", href: "/about" },
{ label: "Pricing", href: "/pricing" },
],
},
{
title: "Support",
items: [
{ label: "Contact Us", href: "/contact" },
{ label: "FAQ", href: "#faq" },
{ label: "Test Drive", href: "/contact" },
{ label: "Financing", href: "#financing" },
],
},
{
title: "Company",
items: [
{ label: "About Toyota", href: "/about" },
{ label: "News & Press", href: "#news" },
{ label: "Sustainability", href: "#sustainability" },
{ label: "Careers", href: "#careers" },
],
},
{
title: "Legal",
items: [
{ label: "Privacy Policy", href: "#privacy" },
{ label: "Terms of Service", href: "#terms" },
{ label: "Cookie Policy", href: "#cookies" },
{ label: "Accessibility", href: "#accessibility" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="smallMedium"
sizing="mediumLarge"
background="noiseDiagonalGradient"
cardStyle="layered-gradient"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
>
<div id="nav" data-section="nav" className="mx-auto px-4 md:px-6">
<NavbarLayoutFloatingOverlay
brandName="Toyota"
navItems={navItems}
button={{
text: "Book Test Drive",
href: "/contact",
}}
/>
</div>
<div id="features" data-section="features" className="mx-auto px-4 md:px-6">
<FeatureCardSeven
features={[
{
id: 1,
title: "Our Heritage",
description: "With over 50 years of automotive excellence, Toyota has built a legacy of reliability, innovation, and customer satisfaction that spans generations and continents.",
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-time-machines-design_23-2151599329.jpg",
imageAlt: "Toyota Heritage and Innovation",
},
{
id: 2,
title: "Global Leadership",
description: "Operating in over 170 countries and trusted by millions of drivers worldwide, Toyota is committed to delivering vehicles that exceed expectations and make a positive impact on communities.",
imageSrc: "http://img.b2bpic.net/free-photo/hong-kong-traffic-view_1359-452.jpg",
imageAlt: "Global Toyota Presence",
},
{
id: 3,
title: "Sustainability Focus",
description: "Pioneering hybrid technology and advancing electric vehicle solutions, Toyota leads the automotive industry in environmental responsibility and sustainable manufacturing practices.",
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-light-blue-interior-car-including-seats-steering-wheel_181624-12623.jpg",
imageAlt: "Sustainable Toyota Technology",
},
]}
title="About Toyota"
description="Discover what makes Toyota a trusted name in automotive excellence worldwide."
tag="Our Story"
tagAnimation="slide-up"
textboxLayout="default"
animationType="blur-reveal"
useInvertedBackground={false}
buttons={[
{
text: "Explore Our Mission",
href: "#mission",
},
]}
buttonAnimation="slide-up"
/>
</div>
<div id="metrics" data-section="metrics" className="mx-auto px-4 md:px-6">
<MetricCardTwo
metrics={[
{
id: "1",
value: "98%",
description: "Customer Satisfaction",
},
{
id: "2",
value: "15M+",
description: "Vehicles Sold Globally",
},
{
id: "3",
value: "#1",
description: "Reliability Ranking",
},
{
id: "4",
value: "50+",
description: "Years of Excellence",
},
]}
title="Toyota by the Numbers"
description="Our commitment to excellence reflected in measurable results and industry recognition."
tag="Industry Leadership"
tagAnimation="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
animationType="scale-rotate"
useInvertedBackground={false}
buttons={[
{
text: "View All Vehicles",
href: "/vehicles",
},
]}
buttonAnimation="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials" className="mx-auto px-4 md:px-6">
<TestimonialCardFive
testimonials={[
{
id: "1",
name: "Sarah Chen, Marketing Director of TechFlow",
date: "Date: 15 January 2025",
title: "Best purchase decision ever made",
quote: "Switched to Toyota three years ago and haven't looked back. The reliability is outstanding, fuel efficiency saves me money, and the safety features give me peace of mind every time I drive.",
tag: "Premium Owner",
avatarSrc: "http://img.b2bpic.net/free-photo/indoor-shot-attractive-caucasian-teenage-woman-with-long-dark-hair-sitting-desk-with-lots-textbooks_273609-1136.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/indoor-shot-attractive-caucasian-teenage-woman-with-long-dark-hair-sitting-desk-with-lots-textbooks_273609-1136.jpg",
},
{
id: "2",
name: "Michael Rodriguez, CEO of Innovate Inc",
date: "Date: 12 January 2025",
title: "Exceptional value and performance",
quote: "As someone who drives extensively for business, the Camry has been my perfect companion. Comfort, tech features, and resale value are all top-notch.",
tag: "Business Class",
avatarSrc: "http://img.b2bpic.net/free-photo/cheerful-young-businesswoman_1262-20867.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-businesswoman_1262-20867.jpg",
},
{
id: "3",
name: "Emily Johnson, Family of Four Parent",
date: "Date: 08 January 2025",
title: "Family vehicle paradise",
quote: "The Highlander gives us room for everything. Whether it's road trips or daily commutes, the space and comfort are unmatched. Our kids love the multimedia system!",
tag: "Family Plus",
avatarSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3798.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3798.jpg",
},
{
id: "4",
name: "David Park, Environmental Advocate",
date: "Date: 05 January 2025",
title: "Driving sustainably without compromise",
quote: "Toyota's hybrid technology lets me reduce my carbon footprint while maintaining excellent performance. It's the perfect balance of responsibility and driving pleasure.",
tag: "Eco-Conscious",
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-5399.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-5399.jpg",
},
{
id: "5",
name: "Jessica Martinez, Adventure Enthusiast",
date: "Date: 02 January 2025",
title: "Adventure-ready and reliable",
quote: "The RAV4 has conquered mountains, deserts, and city streets with equal capability. Toyota's durability means I can focus on the adventure, not vehicle worries.",
tag: "Adventure Series",
avatarSrc: "http://img.b2bpic.net/free-photo/happy-female-office-workers-thumbing-up-smiling-two-cheerful-professional-businesswomen-standing-together-posing-meeting-room-teamwork-business-success-cooperation-concept_74855-7378.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/happy-female-office-workers-thumbing-up-smiling-two-cheerful-professional-businesswomen-standing-together-posing-meeting-room-teamwork-business-success-cooperation-concept_74855-7378.jpg",
},
{
id: "6",
name: "James Wilson, Long-Term Satisfaction",
date: "Date: 28 December 2024",
title: "Still running strong after 200,000 miles",
quote: "My Toyota just hit 200k miles and runs like new. Minimal maintenance, maximum reliability. This is what Toyota represents to me and countless others.",
tag: "Loyalty Proven",
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-grey-haired-businessman-standing_74855-10324.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-grey-haired-businessman-standing_74855-10324.jpg",
},
]}
title="Customer Stories"
description="Hear from Toyota owners about their exceptional driving experiences and long-term satisfaction."
tag="Testimonials"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer" className="mx-auto px-4 md:px-6">
<FooterSimple
columns={footerColumns}
bottomLeftText="© 2025 Toyota. All rights reserved."
bottomRightText="Made with passion for automotive excellence"
/>
</div>
</ThemeProvider>
);
}

138
src/app/contact/page.tsx Normal file
View File

@@ -0,0 +1,138 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import Link from "next/link";
export default function ContactPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Vehicles", id: "/vehicles" },
{ name: "About", id: "/about" },
{ name: "Pricing", id: "/pricing" },
{ name: "Contact", id: "/contact" },
];
const footerColumns = [
{
title: "Explore",
items: [
{ label: "Home", href: "/" },
{ label: "Vehicles", href: "/vehicles" },
{ label: "About Us", href: "/about" },
{ label: "Pricing", href: "/pricing" },
],
},
{
title: "Support",
items: [
{ label: "Contact Us", href: "/contact" },
{ label: "FAQ", href: "#faq" },
{ label: "Test Drive", href: "/contact" },
{ label: "Financing", href: "#financing" },
],
},
{
title: "Company",
items: [
{ label: "About Toyota", href: "/about" },
{ label: "News & Press", href: "#news" },
{ label: "Sustainability", href: "#sustainability" },
{ label: "Careers", href: "#careers" },
],
},
{
title: "Legal",
items: [
{ label: "Privacy Policy", href: "#privacy" },
{ label: "Terms of Service", href: "#terms" },
{ label: "Cookie Policy", href: "#cookies" },
{ label: "Accessibility", href: "#accessibility" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="smallMedium"
sizing="mediumLarge"
background="noiseDiagonalGradient"
cardStyle="layered-gradient"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Toyota"
navItems={navItems}
button={{
text: "Book Test Drive",
href: "/contact",
}}
/>
</div>
<div id="contact" data-section="contact" className="mx-auto px-4 md:px-6">
<ContactSplitForm
title="Ready to Drive Excellence?"
description="Get in touch with our team to schedule your test drive, explore financing options, or learn more about Toyota's incredible vehicle lineup."
inputs={[
{
name: "name",
type: "text",
placeholder: "Full Name",
required: true,
},
{
name: "email",
type: "email",
placeholder: "Email Address",
required: true,
},
{
name: "phone",
type: "tel",
placeholder: "Phone Number",
required: true,
},
{
name: "vehicle",
type: "text",
placeholder: "Vehicle of Interest",
required: false,
},
]}
textarea={{
name: "message",
placeholder: "Tell us about your automotive needs...",
rows: 5,
required: true,
}}
useInvertedBackground={false}
imageSrc="http://img.b2bpic.net/free-photo/clothing-store-smiling-client-assistant-discussing-apparel-style-while-browsing-through-rack-african-american-man-showing-outfit-mall-customer-giving-fashion-advice_482257-71789.jpg"
imageAlt="Toyota Dealership Showroom"
mediaAnimation="blur-reveal"
mediaPosition="right"
buttonText="Book Your Test Drive"
onSubmit={(data) => {
console.log("Form submitted:", data);
}}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={footerColumns}
bottomLeftText="© 2025 Toyota. All rights reserved."
bottomRightText="Made with passion for automotive excellence"
/>
</div>
</ThemeProvider>
);
}

BIN
src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

5
src/app/globals.css Normal file
View File

@@ -0,0 +1,5 @@
@import "tailwindcss";
@import "./styles/variables.css";
@import "./styles/theme.css";
@import "./styles/utilities.css";
@import "./styles/base.css";

1442
src/app/layout.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

384
src/app/page.tsx Normal file
View File

@@ -0,0 +1,384 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import Link from "next/link";
export default function HomePage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="smallMedium"
sizing="mediumLarge"
background="noiseDiagonalGradient"
cardStyle="layered-gradient"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Toyota"
navItems={[
{ name: "Home", id: "/" },
{ name: "Vehicles", id: "/vehicles" },
{ name: "About", id: "/about" },
{ name: "Pricing", id: "/pricing" },
{ name: "Contact", id: "/contact" },
]}
button={{
text: "Book Test Drive",
href: "/contact",
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboard
logoText="Toyota"
description="Experience the future of automotive excellence. Innovative technology meets timeless reliability across our premium vehicle lineup."
buttons={[
{
text: "Explore Vehicles",
href: "/vehicles",
},
{
text: "Book Test Drive",
href: "/contact",
},
]}
buttonAnimation="slide-up"
background={{ variant: "sparkles-gradient" }}
imageSrc="http://img.b2bpic.net/free-vector/business-flyer-template_23-2147996475.jpg"
imageAlt="Premium Toyota Vehicle Showcase"
mediaAnimation="blur-reveal"
frameStyle="browser"
/>
</div>
<div id="features" data-section="features">
<FeatureCardSeven
title="Why Choose Toyota"
description="Discover the features that set Toyota apart in the automotive industry."
tag="Premium Features"
tagAnimation="slide-up"
textboxLayout="default"
features={[
{
id: 1,
title: "Advanced Performance",
description: "Engineered for power and efficiency. Our hybrid and gasoline engines deliver exceptional performance while minimizing environmental impact.",
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-time-machines-design_23-2151599329.jpg",
imageAlt: "Advanced Engine Performance Technology",
},
{
id: 2,
title: "Safety First",
description: "Industry-leading safety systems including collision avoidance, lane keeping assist, and adaptive cruise control keep you protected.",
imageSrc: "http://img.b2bpic.net/free-photo/hong-kong-traffic-view_1359-452.jpg",
imageAlt: "Advanced Safety Features System",
},
{
id: 3,
title: "Ultimate Comfort",
description: "Premium interiors with ergonomic seating, climate control, and premium audio systems ensure every journey is enjoyable.",
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-light-blue-interior-car-including-seats-steering-wheel_181624-12623.jpg",
imageAlt: "Luxury Interior Comfort Design",
},
]}
animationType="blur-reveal"
useInvertedBackground={false}
buttons={[
{
text: "Learn More",
href: "/vehicles",
},
]}
buttonAnimation="slide-up"
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
title="Our Vehicle Lineup"
description="Choose from our diverse range of vehicles designed for every lifestyle and need."
tag="Featured Vehicles"
tagAnimation="slide-up"
textboxLayout="default"
products={[
{
id: "corolla",
name: "Corolla",
price: "From $25,000",
imageSrc: "http://img.b2bpic.net/free-photo/fast-wagon-car-winter-highway-road-motion_169016-71288.jpg",
imageAlt: "Toyota Corolla Compact Sedan",
},
{
id: "camry",
name: "Camry",
price: "From $32,000",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-posing-front-modern-car_23-2148384978.jpg",
imageAlt: "Toyota Camry Mid-Size Sedan",
},
{
id: "rav4",
name: "RAV4",
price: "From $28,500",
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-couple-posing-together_23-2148637328.jpg",
imageAlt: "Toyota RAV4 Compact SUV",
},
{
id: "highlander",
name: "Highlander",
price: "From $38,000",
imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-sunglasses-traveling-alone-by-car_23-2148771845.jpg",
imageAlt: "Toyota Highlander Three-Row SUV",
},
]}
gridVariant="bento-grid"
animationType="scale-rotate"
useInvertedBackground={false}
buttons={[
{
text: "View All Vehicles",
href: "/vehicles",
},
]}
buttonAnimation="slide-up"
/>
</div>
<div id="socialproof" data-section="socialproof">
<SocialProofOne
title="Trusted Partnerships"
description="We collaborate with industry leaders to deliver exceptional automotive experiences."
tag="Our Partners"
textboxLayout="default"
useInvertedBackground={false}
names={["Google", "Apple", "Microsoft", "Samsung", "Intel", "NVIDIA", "Amazon"]}
speed={40}
showCard={true}
tagAnimation="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFive
title="Customer Stories"
description="Hear from Toyota owners about their exceptional driving experiences."
tag="Testimonials"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Sarah Chen, Marketing Director of TechFlow",
date: "Date: 15 January 2025",
title: "Best purchase decision ever made",
quote: "Switched to Toyota three years ago and haven't looked back. The reliability is outstanding, fuel efficiency saves me money, and the safety features give me peace of mind every time I drive.",
tag: "Premium Owner",
avatarSrc: "http://img.b2bpic.net/free-photo/indoor-shot-attractive-caucasian-teenage-woman-with-long-dark-hair-sitting-desk-with-lots-textbooks_273609-1136.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/indoor-shot-attractive-caucasian-teenage-woman-with-long-dark-hair-sitting-desk-with-lots-textbooks_273609-1136.jpg",
},
{
id: "2",
name: "Michael Rodriguez, CEO of Innovate Inc",
date: "Date: 12 January 2025",
title: "Exceptional value and performance",
quote: "As someone who drives extensively for business, the Camry has been my perfect companion. Comfort, tech features, and resale value are all top-notch.",
tag: "Business Class",
avatarSrc: "http://img.b2bpic.net/free-photo/cheerful-young-businesswoman_1262-20867.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-businesswoman_1262-20867.jpg",
},
{
id: "3",
name: "Emily Johnson, Family of Four Parent",
date: "Date: 08 January 2025",
title: "Family vehicle paradise",
quote: "The Highlander gives us room for everything. Whether it's road trips or daily commutes, the space and comfort are unmatched. Our kids love the multimedia system!",
tag: "Family Plus",
avatarSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3798.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3798.jpg",
},
{
id: "4",
name: "David Park, Environmental Advocate",
date: "Date: 05 January 2025",
title: "Driving sustainably without compromise",
quote: "Toyota's hybrid technology lets me reduce my carbon footprint while maintaining excellent performance. It's the perfect balance of responsibility and driving pleasure.",
tag: "Eco-Conscious",
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-5399.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-5399.jpg",
},
{
id: "5",
name: "Jessica Martinez, Adventure Enthusiast",
date: "Date: 02 January 2025",
title: "Adventure-ready and reliable",
quote: "The RAV4 has conquered mountains, deserts, and city streets with equal capability. Toyota's durability means I can focus on the adventure, not vehicle worries.",
tag: "Adventure Series",
avatarSrc: "http://img.b2bpic.net/free-photo/happy-female-office-workers-thumbing-up-smiling-two-cheerful-professional-businesswomen-standing-together-posing-meeting-room-teamwork-business-success-cooperation-concept_74855-7378.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/happy-female-office-workers-thumbing-up-smiling-two-cheerful-professional-businesswomen-standing-together-posing-meeting-room-teamwork-business-success-cooperation-concept_74855-7378.jpg",
},
{
id: "6",
name: "James Wilson, Long-Term Satisfaction",
date: "Date: 28 December 2024",
title: "Still running strong after 200,000 miles",
quote: "My Toyota just hit 200k miles and runs like new. Minimal maintenance, maximum reliability. This is what Toyota represents to me and countless others.",
tag: "Loyalty Proven",
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-grey-haired-businessman-standing_74855-10324.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-grey-haired-businessman-standing_74855-10324.jpg",
},
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
title="Toyota by the Numbers"
description="Our commitment to excellence reflected in measurable results."
tag="Industry Leadership"
tagAnimation="slide-up"
textboxLayout="default"
metrics={[
{
id: "1",
value: "98%",
description: "Customer Satisfaction",
},
{
id: "2",
value: "15M+",
description: "Vehicles Sold Globally",
},
{
id: "3",
value: "#1",
description: "Reliability Ranking",
},
{
id: "4",
value: "50+",
description: "Years of Excellence",
},
]}
gridVariant="uniform-all-items-equal"
animationType="scale-rotate"
useInvertedBackground={false}
buttons={[
{
text: "Explore Our Legacy",
href: "/about",
},
]}
buttonAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
title="Ready to Drive Excellence?"
description="Get in touch with our team to schedule your test drive, explore financing options, or learn more about Toyota's incredible vehicle lineup."
inputs={[
{
name: "name",
type: "text",
placeholder: "Full Name",
required: true,
},
{
name: "email",
type: "email",
placeholder: "Email Address",
required: true,
},
{
name: "phone",
type: "tel",
placeholder: "Phone Number",
required: true,
},
{
name: "vehicle",
type: "text",
placeholder: "Vehicle of Interest",
required: false,
},
]}
textarea={{
name: "message",
placeholder: "Tell us about your automotive needs...",
rows: 5,
required: true,
}}
useInvertedBackground={false}
imageSrc="http://img.b2bpic.net/free-photo/clothing-store-smiling-client-assistant-discussing-apparel-style-while-browsing-through-rack-african-american-man-showing-outfit-mall-customer-giving-fashion-advice_482257-71789.jpg"
imageAlt="Toyota Dealership Showroom"
mediaAnimation="blur-reveal"
mediaPosition="right"
buttonText="Book Your Test Drive"
onSubmit={(data) => {
console.log("Form submitted:", data);
}}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Explore",
items: [
{ label: "Home", href: "/" },
{ label: "Vehicles", href: "/vehicles" },
{ label: "About Us", href: "/about" },
{ label: "Pricing", href: "/pricing" },
],
},
{
title: "Support",
items: [
{ label: "Contact Us", href: "/contact" },
{ label: "FAQ", href: "#faq" },
{ label: "Test Drive", href: "/contact" },
{ label: "Financing", href: "#financing" },
],
},
{
title: "Company",
items: [
{ label: "About Toyota", href: "/about" },
{ label: "News & Press", href: "#news" },
{ label: "Sustainability", href: "#sustainability" },
{ label: "Careers", href: "#careers" },
],
},
{
title: "Legal",
items: [
{ label: "Privacy Policy", href: "#privacy" },
{ label: "Terms of Service", href: "#terms" },
{ label: "Cookie Policy", href: "#cookies" },
{ label: "Accessibility", href: "#accessibility" },
],
},
]}
bottomLeftText="© 2025 Toyota. All rights reserved."
bottomRightText="Made with passion for automotive excellence"
/>
</div>
</ThemeProvider>
);
}

234
src/app/pricing/page.tsx Normal file
View File

@@ -0,0 +1,234 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterSimple from "@/components/sections/footer/FooterSimple";
export default function PricingPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Vehicles", id: "/vehicles" },
{ name: "About", id: "/about" },
{ name: "Pricing", id: "/pricing" },
{ name: "Contact", id: "/contact" },
];
const footerColumns = [
{
title: "Explore",
items: [
{ label: "Home", href: "/" },
{ label: "Vehicles", href: "/vehicles" },
{ label: "About Us", href: "/about" },
{ label: "Pricing", href: "/pricing" },
],
},
{
title: "Support",
items: [
{ label: "Contact Us", href: "/contact" },
{ label: "FAQ", href: "#faq" },
{ label: "Test Drive", href: "/contact" },
{ label: "Financing", href: "#financing" },
],
},
{
title: "Company",
items: [
{ label: "About Toyota", href: "/about" },
{ label: "News & Press", href: "#news" },
{ label: "Sustainability", href: "#sustainability" },
{ label: "Careers", href: "#careers" },
],
},
{
title: "Legal",
items: [
{ label: "Privacy Policy", href: "#privacy" },
{ label: "Terms of Service", href: "#terms" },
{ label: "Cookie Policy", href: "#cookies" },
{ label: "Accessibility", href: "#accessibility" },
],
},
];
const handleSubmit = (data: Record<string, string>) => {
console.log("Financing inquiry:", data);
};
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="smallMedium"
sizing="mediumLarge"
background="noiseDiagonalGradient"
cardStyle="layered-gradient"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
>
<div id="nav" data-section="nav" className="mx-auto px-4 md:px-6">
<NavbarLayoutFloatingOverlay
brandName="Toyota"
navItems={navItems}
button={{
text: "Book Test Drive",
href: "/contact",
}}
/>
</div>
<div id="products" data-section="products" className="mx-auto px-4 md:px-6">
<ProductCardOne
products={[
{
id: "corolla",
name: "Corolla",
price: "From $25,000",
imageSrc: "http://img.b2bpic.net/free-photo/fast-wagon-car-winter-highway-road-motion_169016-71288.jpg",
imageAlt: "Toyota Corolla Compact Sedan",
},
{
id: "camry",
name: "Camry",
price: "From $32,000",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-posing-front-modern-car_23-2148384978.jpg",
imageAlt: "Toyota Camry Mid-Size Sedan",
},
{
id: "rav4",
name: "RAV4",
price: "From $28,500",
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-couple-posing-together_23-2148637328.jpg",
imageAlt: "Toyota RAV4 Compact SUV",
},
{
id: "highlander",
name: "Highlander",
price: "From $38,000",
imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-sunglasses-traveling-alone-by-car_23-2148771845.jpg",
imageAlt: "Toyota Highlander Three-Row SUV",
},
]}
title="Vehicle Pricing"
description="Explore our competitive pricing options across our premium vehicle lineup. Find the perfect Toyota to fit your budget and lifestyle."
tag="Transparent Pricing"
tagAnimation="slide-up"
textboxLayout="default"
gridVariant="bento-grid"
animationType="scale-rotate"
useInvertedBackground={false}
buttons={[
{
text: "Configure Your Vehicle",
href: "/contact",
},
]}
buttonAnimation="slide-up"
/>
</div>
<div id="financing" data-section="financing" className="mx-auto px-4 md:px-6">
<MetricCardTwo
metrics={[
{
id: "1",
value: "0%",
description: "APR Financing Available",
},
{
id: "2",
value: "60+",
description: "Months Payment Plans",
},
{
id: "3",
value: "Quick",
description: "Loan Approval Process",
},
{
id: "4",
value: "Flexible",
description: "Trade-In Options",
},
]}
title="Financing & Incentives"
description="Discover flexible financing options, special offers, and incentives available on Toyota vehicles."
tag="Special Offers"
tagAnimation="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
animationType="scale-rotate"
useInvertedBackground={false}
buttons={[
{
text: "View All Incentives",
href: "/contact",
},
]}
buttonAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact" className="mx-auto px-4 md:px-6">
<ContactSplitForm
title="Get Financing Information"
description="Our team is ready to help you find the perfect financing solution for your Toyota vehicle. Complete the form below and we'll contact you within 24 hours with personalized options."
inputs={[
{
name: "name",
type: "text",
placeholder: "Full Name",
required: true,
},
{
name: "email",
type: "email",
placeholder: "Email Address",
required: true,
},
{
name: "phone",
type: "tel",
placeholder: "Phone Number",
required: true,
},
{
name: "vehicle",
type: "text",
placeholder: "Vehicle of Interest",
required: false,
},
]}
textarea={{
name: "message",
placeholder: "Tell us about your financing needs...",
rows: 5,
required: true,
}}
useInvertedBackground={false}
imageSrc="http://img.b2bpic.net/free-photo/clothing-store-smiling-client-assistant-discussing-apparel-style-while-browsing-through-rack-african-american-man-showing-outfit-mall-customer-giving-fashion-advice_482257-71789.jpg"
imageAlt="Toyota Dealership Showroom"
mediaAnimation="blur-reveal"
mediaPosition="right"
buttonText="Request Financing Quote"
onSubmit={handleSubmit}
/>
</div>
<div id="footer" data-section="footer" className="mx-auto px-4 md:px-6">
<FooterSimple
columns={footerColumns}
bottomLeftText="© 2025 Toyota. All rights reserved."
bottomRightText="Made with passion for automotive excellence"
/>
</div>
</ThemeProvider>
);
}

28
src/app/styles/base.css Normal file
View File

@@ -0,0 +1,28 @@
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-figtree), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-figtree), sans-serif;
}

176
src/app/styles/theme.css Normal file
View File

@@ -0,0 +1,176 @@
@theme inline {
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* theme border radius */
--radius-theme: var(--theme-border-radius);
--radius-theme-capped: var(--theme-border-radius-capped);
/* text */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
/* height */
--height-4: var(--height-4);
--height-5: var(--height-5);
--height-6: var(--height-6);
--height-7: var(--height-7);
--height-8: var(--height-8);
--height-9: var(--height-9);
--height-11: var(--height-11);
--height-12: var(--height-12);
--height-10: var(--height-10);
--height-30: var(--height-30);
--height-90: var(--height-90);
--height-100: var(--height-100);
--height-110: var(--height-110);
--height-120: var(--height-120);
--height-130: var(--height-130);
--height-140: var(--height-140);
--height-150: var(--height-150);
--height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
/* width */
--width-5: var(--width-5);
--width-7_5: var(--width-7_5);
--width-10: var(--width-10);
--width-12_5: var(--width-12_5);
--width-15: var(--width-15);
--width-17: var(--width-17);
--width-17_5: var(--width-17_5);
--width-20: var(--width-20);
--width-21: var(--width-21);
--width-22_5: var(--width-22_5);
--width-25: var(--width-25);
--width-26: var(--width-26);
--width-27_5: var(--width-27_5);
--width-30: var(--width-30);
--width-32_5: var(--width-32_5);
--width-35: var(--width-35);
--width-37_5: var(--width-37_5);
--width-40: var(--width-40);
--width-42_5: var(--width-42_5);
--width-45: var(--width-45);
--width-47_5: var(--width-47_5);
--width-50: var(--width-50);
--width-52_5: var(--width-52_5);
--width-55: var(--width-55);
--width-57_5: var(--width-57_5);
--width-60: var(--width-60);
--width-62_5: var(--width-62_5);
--width-65: var(--width-65);
--width-67_5: var(--width-67_5);
--width-70: var(--width-70);
--width-72_5: var(--width-72_5);
--width-75: var(--width-75);
--width-77_5: var(--width-77_5);
--width-80: var(--width-80);
--width-82_5: var(--width-82_5);
--width-85: var(--width-85);
--width-87_5: var(--width-87_5);
--width-90: var(--width-90);
--width-92_5: var(--width-92_5);
--width-95: var(--width-95);
--width-97_5: var(--width-97_5);
--width-100: var(--width-100);
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-padding-expanded: var(--width-carousel-padding-expanded);
--width-carousel-padding-controls-expanded: var(--width-carousel-padding-controls-expanded);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
--width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
--width-content-width-expanded: var(--width-content-width-expanded);
/* gap */
--spacing-1: var(--vw-0_25);
--spacing-2: var(--vw-0_5);
--spacing-3: var(--vw-0_75);
--spacing-4: var(--vw-1);
--spacing-5: var(--vw-1_25);
--spacing-6: var(--vw-1_5);
--spacing-7: var(--vw-1_75);
--spacing-8: var(--vw-2);
--spacing-x-1: var(--vw-0_25);
--spacing-x-2: var(--vw-0_5);
--spacing-x-3: var(--vw-0_75);
--spacing-x-4: var(--vw-1);
--spacing-x-5: var(--vw-1_25);
--spacing-x-6: var(--vw-1_5);
/* border radius */
--radius-none: 0;
--radius-sm: var(--vw-0_5);
--radius: var(--vw-0_75);
--radius-md: var(--vw-1);
--radius-lg: var(--vw-1_25);
--radius-xl: var(--vw-1_75);
--radius-full: 999px;
/* padding */
--padding-1: var(--vw-0_25);
--padding-2: var(--vw-0_5);
--padding-2.5: var(--vw-0_625);
--padding-3: var(--vw-0_75);
--padding-4: var(--vw-1);
--padding-5: var(--vw-1_25);
--padding-6: var(--vw-1_5);
--padding-7: var(--vw-1_75);
--padding-8: var(--vw-2);
--padding-x-1: var(--vw-0_25);
--padding-x-2: var(--vw-0_5);
--padding-x-3: var(--vw-0_75);
--padding-x-4: var(--vw-1);
--padding-x-5: var(--vw-1_25);
--padding-x-6: var(--vw-1_5);
--padding-x-7: var(--vw-1_75);
--padding-x-8: var(--vw-2);
--padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
--padding-hero-page-padding: var(--padding-hero-page-padding);
--padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
--padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
/* margin */
--margin-1: var(--vw-0_25);
--margin-2: var(--vw-0_5);
--margin-3: var(--vw-0_75);
--margin-4: var(--vw-1);
--margin-5: var(--vw-1_25);
--margin-6: var(--vw-1_5);
--margin-7: var(--vw-1_75);
--margin-8: var(--vw-2);
--margin-x-1: var(--vw-0_25);
--margin-x-2: var(--vw-0_5);
--margin-x-3: var(--vw-0_75);
--margin-x-4: var(--vw-1);
--margin-x-5: var(--vw-1_25);
--margin-x-6: var(--vw-1_5);
--margin-x-7: var(--vw-1_75);
--margin-x-8: var(--vw-2);
}

228
src/app/styles/utilities.css Normal file
View File

@@ -0,0 +1,228 @@
@layer components {}
@layer utilities {
/* Card, primary-button, and secondary-button styles are now dynamically injected via ThemeProvider */
/* .card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.primary-button {
@apply bg-gradient-to-b from-primary-cta/83 to-primary-cta;
box-shadow:
color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset,
color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
}
.secondary-button {
@apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
} */
.tag-card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.inset-glow-border {
@apply relative;
}
.inset-glow-border::before {
content: "";
@apply absolute pointer-events-none inset-0 p-[1px];
border-radius: inherit;
background: linear-gradient(
0deg,
color-mix(in srgb, var(--color-primary-cta) 20%, var(--color-background)) 0%,
color-mix(in srgb, var(--color-primary-cta) 40%, var(--color-background)) 27%,
color-mix(in srgb, var(--color-primary-cta) 60%, var(--color-foreground)) 62%,
color-mix(in srgb, var(--color-primary-cta) 80%, var(--color-foreground)) 100%
);
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
}
.mask-fade-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(100% - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(100% - (100vw - var(--width-content-width)) / 4), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(100% - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(100% - (100vw - var(--width-content-width)) / 4), transparent 100%);
}
.mask-padding-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
}
.mask-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-y-medium {
mask-image: linear-gradient(to bottom,
transparent 0%,
black 20%,
black 80%,
transparent 100%);
}
.mask-fade-bottom-large {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
}
.mask-fade-bottom-long {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
}
.mask-fade-top-long {
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
}
.mask-fade-xy {
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* ANIMATION */
.animation-container {
animation:
fadeInOpacity 0.8s ease-in-out forwards,
fadeInTranslate 0.6s forwards;
}
.animation-container-fade {
animation: fadeInOpacity 0.8s ease-in-out forwards;
}
@keyframes fadeInOpacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInTranslate {
from {
transform: translateY(0.75vh);
}
to {
transform: translateY(0vh);
}
}
@keyframes aurora {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-reverse {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.animate-spin-slow {
animation: spin-slow 15s linear infinite;
}
.animate-spin-reverse {
animation: spin-reverse 10s linear infinite;
}
@keyframes marquee-vertical {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
.animate-marquee-vertical {
animation: marquee-vertical 40s linear infinite;
}
@keyframes marquee-vertical-reverse {
from {
transform: translateY(-50%);
}
to {
transform: translateY(0);
}
}
.animate-marquee-vertical-reverse {
animation: marquee-vertical-reverse 40s linear infinite;
}
@keyframes orbit {
from {
transform: rotate(var(--initial-position, 0deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * var(--initial-position, 0deg)));
}
to {
transform: rotate(calc(var(--initial-position, 0deg) + 360deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * (var(--initial-position, 0deg) + 360deg)));
}
}
@keyframes map-dot-pulse {
0%, 100% {
transform: scale(0.4);
opacity: 0.6;
}
50% {
transform: scale(1.4);
opacity: 1;
}
}
}

217
src/app/styles/variables.css Normal file
View File

@@ -0,0 +1,217 @@
:root {
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #f5f4ef;
--card: #dad6cd;
--foreground: #2a2928;
--primary-cta: #2a2928;
--secondary-cta: #ecebea;
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #ffffff;
--card: #f9f9f9;
--foreground: #120a00e6;
--primary-cta: #E34400;
--primary-cta-text: #ffffff;
--secondary-cta: #f9f9f9;
--secondary-cta-text: #120a00e6;
--accent: #e2e2e2;
--background-accent: #E34400;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem); */
/* Base spacing units */
--vw-0_25: calc(var(--vw) * 0.25);
--vw-0_5: calc(var(--vw) * 0.5);
--vw-0_625: calc(var(--vw) * 0.625);
--vw-0_75: calc(var(--vw) * 0.75);
--vw-1: calc(var(--vw) * 1);
--vw-1_25: calc(var(--vw) * 1.25);
--vw-1_5: calc(var(--vw) * 1.5);
--vw-1_75: calc(var(--vw) * 1.75);
--vw-2: calc(var(--vw) * 2);
--vw-2_25: calc(var(--vw) * 2.25);
--vw-2_5: calc(var(--vw) * 2.5);
--vw-2_75: calc(var(--vw) * 2.75);
--vw-3: calc(var(--vw) * 3);
/* width */
--width-5: clamp(4rem, 5vw, 6rem);
--width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
--width-10: clamp(7.5rem, 10vw, 10rem);
--width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
--width-15: clamp(11.25rem, 15vw, 15rem);
--width-17: clamp(12.75rem, 17vw, 17rem);
--width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
--width-20: clamp(15rem, 20vw, 20rem);
--width-21: clamp(15.75rem, 21vw, 21rem);
--width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
--width-25: clamp(18.75rem, 25vw, 25rem);
--width-26: clamp(19.5rem, 26vw, 26rem);
--width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
--width-30: clamp(22.5rem, 30vw, 30rem);
--width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
--width-35: clamp(26.25rem, 35vw, 35rem);
--width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
--width-40: clamp(30rem, 40vw, 40rem);
--width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
--width-45: clamp(33.75rem, 45vw, 45rem);
--width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
--width-50: clamp(37.5rem, 50vw, 50rem);
--width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
--width-55: clamp(41.25rem, 55vw, 55rem);
--width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
--width-60: clamp(45rem, 60vw, 60rem);
--width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
--width-65: clamp(48.75rem, 65vw, 65rem);
--width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
--width-70: clamp(52.5rem, 70vw, 70rem);
--width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
--width-75: clamp(56.25rem, 75vw, 75rem);
--width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
--width-80: clamp(60rem, 80vw, 80rem);
--width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
--width-85: clamp(63.75rem, 85vw, 85rem);
--width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
--width-90: clamp(67.5rem, 90vw, 90rem);
--width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
--width-95: clamp(71.25rem, 95vw, 95rem);
--width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
--width-100: clamp(75rem, 100vw, 100rem);
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
--width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
--height-4: 1rem;
--height-5: 1.25rem;
--height-6: 1.5rem;
--height-7: 1.75rem;
--height-8: 2rem;
--height-9: 2.25rem;
--height-10: 2.5rem;
--height-11: 2.75rem;
--height-12: 3rem;
--height-30: 7.5rem;
--height-90: 22.5rem;
--height-100: 25rem;
--height-110: 27.5rem;
--height-120: 30rem;
--height-130: 32.5rem;
--height-140: 35rem;
--height-150: 37.5rem;
/* hero page padding */
--padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
--padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
--padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
--padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
}
@media (max-width: 767px) {
:root {
/* --vw and text sizing are set by ThemeProvider */
/* --vw: 3vw;
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw; */
--width-5: 5vw;
--width-7_5: 7.5vw;
--width-10: 10vw;
--width-12_5: 12.5vw;
--width-15: 15vw;
--width-17_5: 17.5vw;
--width-20: 20vw;
--width-22_5: 22.5vw;
--width-25: 25vw;
--width-27_5: 27.5vw;
--width-30: 30vw;
--width-32_5: 32.5vw;
--width-35: 35vw;
--width-37_5: 37.5vw;
--width-40: 40vw;
--width-42_5: 42.5vw;
--width-45: 45vw;
--width-47_5: 47.5vw;
--width-50: 50vw;
--width-52_5: 52.5vw;
--width-55: 55vw;
--width-57_5: 57.5vw;
--width-60: 60vw;
--width-62_5: 62.5vw;
--width-65: 65vw;
--width-67_5: 67.5vw;
--width-70: 70vw;
--width-72_5: 72.5vw;
--width-75: 75vw;
--width-77_5: 77.5vw;
--width-80: 80vw;
--width-82_5: 82.5vw;
--width-85: 85vw;
--width-87_5: 87.5vw;
--width-90: 90vw;
--width-92_5: 92.5vw;
--width-95: 95vw;
--width-97_5: 97.5vw;
--width-100: 100vw;
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
--width-x-padding-mask-fade: 10vw;
--height-4: 3.5vw;
--height-5: 4.5vw;
--height-6: 5.5vw;
--height-7: 6.5vw;
--height-8: 7.5vw;
--height-9: 8.5vw;
--height-10: 9vw;
--height-11: 10vw;
--height-12: 11vw;
--height-30: 25vw;
--height-90: 81vw;
--height-100: 90vw;
--height-110: 99vw;
--height-120: 108vw;
--height-130: 117vw;
--height-140: 126vw;
--height-150: 135vw;
}
}

203
src/app/vehicles/page.tsx Normal file
View File

@@ -0,0 +1,203 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import Link from "next/link";
export default function VehiclesPage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="smallMedium"
sizing="mediumLarge"
background="noiseDiagonalGradient"
cardStyle="layered-gradient"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Toyota"
navItems={[
{ name: "Home", id: "/" },
{ name: "Vehicles", id: "/vehicles" },
{ name: "About", id: "/about" },
{ name: "Pricing", id: "/pricing" },
{ name: "Contact", id: "/contact" },
]}
button={{
text: "Book Test Drive",
href: "/contact",
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboard
logoText="Toyota Vehicles"
description="Explore our complete lineup of premium vehicles. From efficient sedans to powerful SUVs, find the perfect match for your lifestyle."
buttons={[
{
text: "Browse Models",
href: "#products",
},
{
text: "Schedule Test Drive",
href: "/contact",
},
]}
buttonAnimation="slide-up"
background={{ variant: "sparkles-gradient" }}
imageSrc="http://img.b2bpic.net/free-vector/business-flyer-template_23-2147996475.jpg"
imageAlt="Toyota Vehicle Lineup Showcase"
mediaAnimation="blur-reveal"
frameStyle="browser"
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
title="Complete Vehicle Lineup"
description="Discover our full range of vehicles engineered for performance, safety, and comfort."
tag="All Models"
tagAnimation="slide-up"
textboxLayout="default"
products={[
{
id: "corolla",
name: "Corolla",
price: "From $25,000",
imageSrc: "http://img.b2bpic.net/free-photo/fast-wagon-car-winter-highway-road-motion_169016-71288.jpg",
imageAlt: "Toyota Corolla Compact Sedan",
},
{
id: "camry",
name: "Camry",
price: "From $32,000",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-posing-front-modern-car_23-2148384978.jpg",
imageAlt: "Toyota Camry Mid-Size Sedan",
},
{
id: "rav4",
name: "RAV4",
price: "From $28,500",
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-couple-posing-together_23-2148637328.jpg",
imageAlt: "Toyota RAV4 Compact SUV",
},
{
id: "highlander",
name: "Highlander",
price: "From $38,000",
imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-sunglasses-traveling-alone-by-car_23-2148771845.jpg",
imageAlt: "Toyota Highlander Three-Row SUV",
},
]}
gridVariant="bento-grid-inverted"
animationType="scale-rotate"
useInvertedBackground={false}
buttons={[
{
text: "Compare Models",
href: "/vehicles",
},
]}
buttonAnimation="slide-up"
/>
</div>
<div id="features" data-section="features">
<FeatureCardSeven
title="Vehicle Technologies & Features"
description="Every Toyota model is equipped with cutting-edge technology and premium features designed for your comfort and safety."
tag="Innovation Across All Models"
tagAnimation="slide-up"
textboxLayout="default"
features={[
{
id: 1,
title: "Smart Safety Technology",
description: "Toyota Safety Sense includes pre-collision system, lane departure alert, and adaptive cruise control across all models for maximum protection.",
imageSrc: "http://img.b2bpic.net/free-photo/hong-kong-traffic-view_1359-452.jpg",
imageAlt: "Advanced Safety Technology",
},
{
id: 2,
title: "Efficient Engine Options",
description: "Choose from our range of gasoline, hybrid, and electric powertrains optimized for fuel efficiency without compromising on performance.",
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-time-machines-design_23-2151599329.jpg",
imageAlt: "Efficient Engine Technology",
},
{
id: 3,
title: "Premium Interior Comfort",
description: "Enjoy luxurious cabins with heated seats, premium audio systems, large touchscreen displays, and intuitive infotainment across the lineup.",
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-light-blue-interior-car-including-seats-steering-wheel_181624-12623.jpg",
imageAlt: "Luxury Interior Features",
},
]}
animationType="blur-reveal"
useInvertedBackground={false}
buttons={[
{
text: "Explore Features",
href: "/vehicles",
},
]}
buttonAnimation="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Explore",
items: [
{ label: "Home", href: "/" },
{ label: "Vehicles", href: "/vehicles" },
{ label: "About Us", href: "/about" },
{ label: "Pricing", href: "/pricing" },
],
},
{
title: "Support",
items: [
{ label: "Contact Us", href: "/contact" },
{ label: "FAQ", href: "#faq" },
{ label: "Test Drive", href: "/contact" },
{ label: "Financing", href: "#financing" },
],
},
{
title: "Company",
items: [
{ label: "About Toyota", href: "/about" },
{ label: "News & Press", href: "#news" },
{ label: "Sustainability", href: "#sustainability" },
{ label: "Careers", href: "#careers" },
],
},
{
title: "Legal",
items: [
{ label: "Privacy Policy", href: "#privacy" },
{ label: "Terms of Service", href: "#terms" },
{ label: "Cookie Policy", href: "#cookies" },
{ label: "Accessibility", href: "#accessibility" },
],
},
]}
bottomLeftText="© 2025 Toyota. All rights reserved."
bottomRightText="Made with passion for automotive excellence"
/>
</div>
</ThemeProvider>
);
}