266 lines
14 KiB
TypeScript
266 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import { Award, Car, CheckCircle, Diamond, Sparkles, Star } from "lucide-react";
|
|
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
|
|
export default function SitePage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLarge"
|
|
background="fluid"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{ name: "Hero", id: "hero-section" },
|
|
{ name: "Feature", id: "features-section" },
|
|
{ name: "About", id: "about-section" },
|
|
{ name: "Product", id: "products-section" },
|
|
{ name: "Testimonial", id: "testimonials-section" },
|
|
{ name: "Pricing", id: "pricing-section" },
|
|
{ name: "Contact", id: "contact-section" },
|
|
]}
|
|
button={{ text: "Book Now", href: "#booking-section" }}
|
|
brandName="GoGoR"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero-section" data-section="hero-section">
|
|
<HeroBillboard
|
|
title="Rent Smarter, Travel Greener"
|
|
description="Discover eco-friendly vehicles for every journey. Book seamlessly with GoGoR and enjoy reliable, sustainable transportation for your adventures."
|
|
background={{ variant: 'radial-gradient' }}
|
|
tag="Eco-Friendly Rentals"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Explore Vehicles", href: "#products-section" },
|
|
{ text: "Book Now", href: "#pricing-section" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/young-family-with-kids-travelling-by-car-stopped-field_1303-22455.jpg", alt: "Happy customer" },
|
|
{ src: "http://img.b2bpic.net/free-photo/woman-charging-electro-car-electric-gas-station_1303-14825.jpg", alt: "Satisfied traveler" },
|
|
]}
|
|
avatarText="Trusted by 10,000+ travelers"
|
|
imageSrc="http://img.b2bpic.net/free-photo/young-family-with-kids-travelling-by-car-stopped-field_1303-22455.jpg?_wi=1"
|
|
imageAlt="Modern electric car in scenic location"
|
|
mediaAnimation="slide-up"
|
|
marqueeItems={[
|
|
{ icon: CheckCircle, text: "24/7 Support" },
|
|
{ icon: CheckCircle, text: "No Hidden Fees" },
|
|
{ icon: CheckCircle, text: "Eco-Friendly Fleet" },
|
|
]}
|
|
marqueeSpeed={30}
|
|
showMarqueeCard={true}
|
|
ariaLabel="Hero section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features-section" data-section="features-section">
|
|
<FeatureCardSix
|
|
title="Why Choose GoGoR for Your Rental Needs?"
|
|
description="Experience seamless car rentals with our eco-friendly fleet, transparent pricing, and hassle-free booking process."
|
|
textboxLayout="split-description"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Eco-Friendly Fleet", description: "Drive sustainably with our collection of hybrid and electric vehicles designed to reduce your carbon footprint.", imageSrc: "http://img.b2bpic.net/free-photo/electric-cars-are-being-charged-vehicle-parking-with-solar-panel-energy_35913-3355.jpg", imageAlt: "Hybrid and electric cars in a modern garage"},
|
|
{
|
|
id: 2,
|
|
title: "Transparent Pricing", description: "No hidden fees or surprise charges. See exactly what you pay before you book.", imageSrc: "http://img.b2bpic.net/free-photo/office-with-laptop-other-business-elements_1232-478.jpg", imageAlt: "Price breakdown chart showing clear cost breakdown"},
|
|
{
|
|
id: 3,
|
|
title: "24/7 Customer Support", description: "Our dedicated team is always ready to assist you with any questions or concerns.", imageSrc: "http://img.b2bpic.net/free-photo/woman-living-with-disability-answering-client-call-customer-service-wheelchair-user-with-physical-health-condition-working-helpline-support-helpdesk-operator-with-chronic-pain_482257-47208.jpg", imageAlt: "Customer support team available around the clock"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about-section" data-section="about-section">
|
|
<TextAbout
|
|
tag="ABOUT US"
|
|
tagIcon={Car}
|
|
tagAnimation="slide-up"
|
|
title="Your Trusted Partner in Eco-Friendly Travel"
|
|
buttons={[
|
|
{ text: "Explore Our Fleet", href: "#products-section", props: { variant: "primary" } },
|
|
{ text: "Learn More", href: "#features-section", props: { variant: "secondary" } },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="products-section" data-section="products-section">
|
|
<ProductCardOne
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
title="Our Premium Fleet"
|
|
description="Discover our range of eco-friendly and well-maintained vehicles, perfect for your next journey. Each car is selected for comfort, reliability, and sustainability."
|
|
tag="Best Value"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="blur-reveal"
|
|
buttons={[{ text: "View All Vehicles", href: "#products-section" }]}
|
|
buttonAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "eco-car-1", name: "EcoFlex Hybrid", price: "$45/day", imageSrc: "http://img.b2bpic.net/free-photo/young-family-with-kids-travelling-by-car-stopped-field_1303-22455.jpg?_wi=2", imageAlt: "EcoFlex Hybrid Car", isFavorited: false,
|
|
},
|
|
{
|
|
id: "suv-2", name: "Urban SUV Pro", price: "$65/day", imageSrc: "http://img.b2bpic.net/free-photo/lovely-couple-hugging-car_23-2148349743.jpg", imageAlt: "Urban SUV Pro Car", isFavorited: false,
|
|
},
|
|
{
|
|
id: "sedan-3", name: "City Sedan Elite", price: "$55/day", imageSrc: "http://img.b2bpic.net/free-photo/young-family-with-kids-travelling-by-car-stopped-field_1303-22455.jpg?_wi=3", imageAlt: "City Sedan Elite Car", isFavorited: false,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials-section" data-section="testimonials-section">
|
|
<TestimonialCardOne
|
|
testimonials={[
|
|
{
|
|
id: "testimonial-1", name: "Sarah Johnson", role: "Travel Blogger", company: "Wanderlust Diaries", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-people-standing-near-car-with-road-map_23-2148039049.jpg", imageAlt: "Sarah Johnson, Travel Blogger"},
|
|
{
|
|
id: "testimonial-2", name: "Michael Chen", role: "Local Business Owner", company: "UrbanTech Solutions", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/female-standing-near-car-enjoying-view-with-trees-snowy-mountains-distance_181624-1602.jpg", imageAlt: "Michael Chen, Local Business Owner"},
|
|
{
|
|
id: "testimonial-3", name: "Emma Rodriguez", role: "Frequent Traveler", company: "Global Nomad", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/mother-with-four-kids-sitting-trunk-big-suv-car_627829-1516.jpg", imageAlt: "Emma Rodriguez, Frequent Traveler"},
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
title="What Our Customers Say"
|
|
description="Don't just take our word for it. Hear from travelers and locals who have experienced the GoGoR difference."
|
|
tag="Trusted by Thousands"
|
|
tagIcon={CheckCircle}
|
|
tagAnimation="slide-up"
|
|
buttons={[{ text: "View All Reviews", href: "#" }]}
|
|
buttonAnimation="opacity"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Customer testimonials section"
|
|
textBoxTitleClassName="text-xl font-bold text-darkGreen"
|
|
textBoxDescriptionClassName="text-gray-600 mt-2"
|
|
ratingClassName="text-yellow-400"
|
|
nameClassName="font-semibold text-darkGreen"
|
|
roleClassName="text-sm text-gray-500"
|
|
companyClassName="text-sm text-gray-400"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing-section" data-section="pricing-section">
|
|
<PricingCardOne
|
|
title="Simple, Transparent Pricing"
|
|
description="Choose the perfect plan for your journey. All plans include unlimited mileage, 24/7 roadside assistance, and eco-friendly vehicles."
|
|
plans={[
|
|
{
|
|
id: "basic-plan", badge: "Best Value", badgeIcon: Star,
|
|
price: "$39", subtitle: "per day", features: ["Unlimited mileage", "24/7 roadside assistance", "Eco-friendly vehicle", "No hidden fees"],
|
|
},
|
|
{
|
|
id: "premium-plan", badge: "Popular Choice", badgeIcon: Award,
|
|
price: "$59", subtitle: "per day", features: ["All Basic features", "GPS navigation", "Premium vehicle class", "Priority customer support"],
|
|
},
|
|
{
|
|
id: "luxury-plan", badge: "Luxury Experience", badgeIcon: Diamond,
|
|
price: "$89", subtitle: "per day", features: ["All Premium features", "Executive vehicle class", "Personal concierge", "Complimentary upgrades"],
|
|
},
|
|
]}
|
|
carouselMode="buttons"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Book Now", href: "#contact-section" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact-section" data-section="contact-section">
|
|
<ContactSplitForm
|
|
title="Get in Touch with GoGoR"
|
|
description="Have questions or ready to book your next adventure? Our team is here to help you every step of the way."
|
|
inputs={[
|
|
{ name: "name", type: "text", placeholder: "Your Full Name", required: true },
|
|
{ name: "email", type: "email", placeholder: "Your Email Address", required: true },
|
|
{ name: "phone", type: "tel", placeholder: "Your Phone Number" },
|
|
]}
|
|
textarea={{ name: "message", placeholder: "Your Message", rows: 5, required: true }}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/call-center-agent-typing-pc-keyboard-assisting-customers-through-live-chat_482257-125755.jpg"
|
|
imageAlt="Happy customers contacting GoGoR support"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
buttonText="Send Message"
|
|
ariaLabel="Contact section"
|
|
className="py-16"
|
|
containerClassName="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
|
|
contentClassName="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"
|
|
formCardClassName="bg-white rounded-xl shadow-lg p-8"
|
|
titleClassName="text-3xl font-bold text-darkGreen mb-4"
|
|
descriptionClassName="text-gray-600 mb-6"
|
|
buttonClassName="bg-darkGreen hover:bg-green-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-300"
|
|
buttonTextClassName="flex items-center justify-center"
|
|
mediaWrapperClassName="relative"
|
|
mediaClassName="rounded-xl shadow-md"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer-section" data-section="footer-section">
|
|
<FooterBase
|
|
columns={[
|
|
{
|
|
title: "GoGoR", items: [
|
|
{ label: "About Us", href: "#about-section" },
|
|
{ label: "Our Fleet", href: "#products-section" },
|
|
{ label: "Testimonials", href: "#testimonials-section" },
|
|
{ label: "Pricing", href: "#pricing-section" },
|
|
],
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "Help Center", href: "#contact-section" },
|
|
{ label: "FAQs", href: "#contact-section" },
|
|
{ label: "Contact Us", href: "#contact-section" },
|
|
{ label: "Booking Policy", href: "#contact-section" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Terms of Service", href: "#contact-section" },
|
|
{ label: "Privacy Policy", href: "#contact-section" },
|
|
{ label: "Cookie Policy", href: "#contact-section" },
|
|
],
|
|
},
|
|
]}
|
|
logoText="GoGoR"
|
|
copyrightText="© 2025 GoGoR. All rights reserved."
|
|
ariaLabel="Site footer"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|