280 lines
16 KiB
TypeScript
280 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import { Zap, Shield, Users, ShoppingCart, MapPin, Star, Facebook, Instagram, Twitter, Linkedin } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Shop", id: "products" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Blog", id: "blog" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
button={{ text: "Shop Now", href: "products" }}
|
|
brandName="DriveDish"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="DriveDish"
|
|
description="Innovative automotive dining solutions for the modern traveler. Foldable silicone plates and spill-resistant bowls designed for eating comfortably in your car."
|
|
buttons={[
|
|
{ text: "Shop Now", href: "/shop" },
|
|
{ text: "Learn More", href: "#about" },
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
imageSrc="http://img.b2bpic.net/free-photo/view-travel-items-inside-car-ready-trip_23-2151078288.jpg"
|
|
imageAlt="DriveDish innovative car dining solution"
|
|
frameStyle="card"
|
|
mediaAnimation="slide-up"
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="About Us"
|
|
title="Revolutionizing How You Eat on the Road. Born in Colorado, crafted for adventure seekers everywhere."
|
|
useInvertedBackground={true}
|
|
buttons={[
|
|
{ text: "Explore Our Story", href: "/about" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardThree
|
|
title="Our Product Collection"
|
|
description="Premium automotive dining solutions designed for convenience, durability, and style."
|
|
tag="Shop"
|
|
products={[
|
|
{
|
|
id: "1", name: "Foldable Silicone Car Plate", price: "$24.99", imageSrc: "http://img.b2bpic.net/free-photo/close-up-fuel-level-gauge-vehicle_23-2150163675.jpg?_wi=1", imageAlt: "Foldable Silicone Car Plate", initialQuantity: 1,
|
|
},
|
|
{
|
|
id: "2", name: "Spill-Resistant Silicone Car Bowl", price: "$19.99", imageSrc: "http://img.b2bpic.net/free-photo/vegetarian-salad-with-berries-measuring-tape_23-2148035076.jpg?_wi=1", imageAlt: "Spill-Resistant Silicone Car Bowl", initialQuantity: 1,
|
|
},
|
|
{
|
|
id: "3", name: "DriveDish Complete Combo Set", price: "$39.99", imageSrc: "http://img.b2bpic.net/free-photo/assortment-different-colored-plates_23-2148633604.jpg?_wi=1", imageAlt: "DriveDish Plate and Bowl Combo Set", initialQuantity: 1,
|
|
},
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "View All Products", href: "/shop" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyFive
|
|
title="Why Choose DriveDish"
|
|
description="Experience the innovation that transforms your car into a comfortable dining space."
|
|
tag="Features"
|
|
features={[
|
|
{
|
|
title: "Foldable Design", description: "Compact and space-saving when not in use. Unfolds to full size for comfortable eating.", icon: Zap,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-vector/car-background-design_1300-61.jpg?_wi=1", imageAlt: "Foldable design demonstration"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-fuel-level-gauge-vehicle_23-2150163675.jpg?_wi=2", imageAlt: "Plate in use"},
|
|
],
|
|
},
|
|
{
|
|
title: "Spill-Resistant", description: "Advanced silicone engineering prevents spills and messes. Keep your car clean while you eat.", icon: Shield,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/friends-having-fun-party-covid_23-2149316348.jpg?_wi=1", imageAlt: "Spill-resistant technology"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/vegetarian-salad-with-berries-measuring-tape_23-2148035076.jpg?_wi=2", imageAlt: "Bowl in action"},
|
|
],
|
|
},
|
|
]}
|
|
animationType="depth-3d"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
buttons={[
|
|
{ text: "Discover More", href: "/about" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
title="DriveDish by the Numbers"
|
|
description="Our impact on automotive dining culture across North America."
|
|
metrics={[
|
|
{
|
|
id: "1", icon: Users,
|
|
title: "Happy Customers", value: "15,000+"},
|
|
{
|
|
id: "2", icon: ShoppingCart,
|
|
title: "Products Sold", value: "45,000+"},
|
|
{
|
|
id: "3", icon: MapPin,
|
|
title: "Colorado Based", value: "Est. 2023"},
|
|
{
|
|
id: "4", icon: Star,
|
|
title: "Customer Rating", value: "4.9/5"},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="socialproof" data-section="socialproof">
|
|
<SocialProofOne
|
|
title="Trusted by Leading Brands"
|
|
description="DriveDish partnerships with automotive and lifestyle companies."
|
|
tag="Partners"
|
|
names={[
|
|
"Outdoor Gear Co", "Road Trip Magazine", "Car Travel Weekly", "Adventure Lifestyle", "Mobile Dining Today", "Automotive Accessories Pro", "Travel Essentials Hub", "Modern Nomad Living"]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", imageSrc: "http://img.b2bpic.net/free-photo/successful-businesswoman-smiling-looking-confident-happy-standing-suit-street-leans-her_1258-193996.jpg", imageAlt: "Sarah Johnson"},
|
|
{
|
|
id: "2", name: "Michael Chen", imageSrc: "http://img.b2bpic.net/free-photo/middle-age-hispanic-woman-standing-isolated-background-doing-happy-thumbs-up-gesture-with-hand-approving-expression-looking-camera-showing-success_839833-32510.jpg", imageAlt: "Michael Chen"},
|
|
{
|
|
id: "3", name: "Emily Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/female-employee-black-suit-smiling_114579-15858.jpg", imageAlt: "Emily Rodriguez"},
|
|
{
|
|
id: "4", name: "David Kim", imageSrc: "http://img.b2bpic.net/free-photo/portrait-close-up-smart-attractive-asian-business-female-smile-with-confident-leadership-modern-office-background_609648-1462.jpg", imageAlt: "David Kim"},
|
|
{
|
|
id: "5", name: "Jessica Martinez", imageSrc: "http://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg", imageAlt: "Jessica Martinez"},
|
|
{
|
|
id: "6", name: "James Wilson", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-afro-american-woman_23-2148332136.jpg", imageAlt: "James Wilson"},
|
|
]}
|
|
cardTitle="Keeps my car clean and meal times stress-free on every road trip"
|
|
cardTag="See What Customers Say"
|
|
cardAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about DriveDish products and services."
|
|
tag="Help"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "Are the plates and bowls dishwasher safe?", content: "Yes, all DriveDish products are fully dishwasher safe. We recommend the top rack for best results. Hand washing with warm soapy water also works perfectly."},
|
|
{
|
|
id: "2", title: "What materials are used in DriveDish products?", content: "Our products are made from premium food-grade silicone that is BPA-free, non-toxic, and environmentally responsible. The silicone is durable, flexible, and designed to withstand extreme temperatures."},
|
|
{
|
|
id: "3", title: "Can the plates and bowls handle hot food?", content: "Absolutely! DriveDish products are temperature-resistant and can safely hold foods and beverages from -40°F to 400°F. Perfect for hot soups, cold desserts, or anything in between."},
|
|
{
|
|
id: "4", title: "What is your return policy?", content: "We offer a 30-day satisfaction guarantee. If you're not completely happy with your purchase, we'll provide a full refund or replacement at no cost. No questions asked."},
|
|
{
|
|
id: "5", title: "Do you ship internationally?", content: "Currently, we ship to all 50 US states and Canada. International shipping coming soon! Sign up for our newsletter to be notified when we expand to your region."},
|
|
{
|
|
id: "6", title: "What sizes do the plates and bowls come in?", content: "Our standard car plate is 8 inches when unfolded, perfect for most car cup holders when folded. The spill-resistant bowl is 6 inches in diameter, designed to fit securely in vehicle cup holders."},
|
|
]}
|
|
faqsAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
animationType="smooth"
|
|
/>
|
|
</div>
|
|
|
|
<div id="blog" data-section="blog">
|
|
<BlogCardOne
|
|
title="Latest Articles"
|
|
description="Tips, tricks, and insights for road trip dining and vehicle maintenance."
|
|
tag="Blog"
|
|
blogs={[
|
|
{
|
|
id: "1", category: "Road Trips", title: "The Ultimate Guide to Road Trip Dining", excerpt: "Discover how to meal prep for long drives and keep your vehicle clean while enjoying delicious meals on the go.", imageSrc: "http://img.b2bpic.net/free-photo/traveling-with-off-road-car_23-2151473015.jpg?_wi=1", imageAlt: "Road trip dining guide", authorName: "Sarah Mitchell", authorAvatar: "http://img.b2bpic.net/free-photo/successful-businesswoman-smiling-looking-confident-happy-standing-suit-street-leans-her_1258-193996.jpg", date: "15 Jan 2025"},
|
|
{
|
|
id: "2", category: "Vehicle Care", title: "Keeping Your Car Clean While Eating: Best Practices", excerpt: "Learn proven strategies to maintain your vehicle's interior cleanliness even with regular in-car dining using DriveDish solutions.", imageSrc: "http://img.b2bpic.net/free-photo/young-man-glasses-polishing-inside-his-car-with-rug-man-wearing-white-t-shirt_1157-49926.jpg?_wi=1", imageAlt: "Vehicle maintenance tips", authorName: "Michael Rodriguez", authorAvatar: "http://img.b2bpic.net/free-photo/middle-age-hispanic-woman-standing-isolated-background-doing-happy-thumbs-up-gesture-with-hand-approving-expression-looking-camera-showing-success_839833-32510.jpg", date: "10 Jan 2025"},
|
|
{
|
|
id: "3", category: "Lifestyle", title: "Modern Dining Solutions for On-the-Go Living", excerpt: "Explore how portable dining products are revolutionizing the way busy professionals and travelers manage meals throughout their day.", imageSrc: "http://img.b2bpic.net/free-photo/arrangement-different-frozen-goodies_23-2148969367.jpg?_wi=1", imageAlt: "Modern dining solutions", authorName: "Emma Thompson", authorAvatar: "http://img.b2bpic.net/free-photo/female-employee-black-suit-smiling_114579-15858.jpg", date: "5 Jan 2025"},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
buttons={[
|
|
{ text: "Read All Articles", href: "/blog" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact-cta" data-section="contact-cta">
|
|
<ContactText
|
|
text="Ready to transform your road dining experience? Get in touch with our team or shop our complete collection of innovative automotive dining solutions."
|
|
animationType="entrance-slide"
|
|
buttons={[
|
|
{ text: "Contact Us", href: "/contact" },
|
|
{ text: "Shop Now", href: "/shop" },
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="DriveDish"
|
|
copyrightText="© 2025 DriveDish | Automotive Dining Solutions. All rights reserved."
|
|
socialLinks={[
|
|
{
|
|
icon: Facebook,
|
|
href: "https://facebook.com/drivedish", ariaLabel: "DriveDish on Facebook"},
|
|
{
|
|
icon: Instagram,
|
|
href: "https://instagram.com/drivedish", ariaLabel: "DriveDish on Instagram"},
|
|
{
|
|
icon: Twitter,
|
|
href: "https://twitter.com/drivedish", ariaLabel: "DriveDish on Twitter"},
|
|
{
|
|
icon: Linkedin,
|
|
href: "https://linkedin.com/company/drivedish", ariaLabel: "DriveDish on LinkedIn"},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|