Files
8d7126b6-cda5-43ea-b520-353…/src/app/page.tsx
2026-03-03 04:20:05 +00:00

190 lines
11 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import ContactText from "@/components/sections/contact/ContactText";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Award, CheckCircle, Clock, MapPin, Phone, Star, TrendingUp, Wrench, Zap } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="mediumLarge"
sizing="largeSmallSizeMediumTitles"
background="circleGradient"
cardStyle="layered-gradient"
primaryButtonStyle="double-inset"
secondaryButtonStyle="solid"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "home" },
{ name: "Services", id: "services" },
{ name: "About", id: "about" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" },
]}
brandName="Antelope Valley Towing"
bottomLeftText="24/7 Emergency Service"
bottomRightText="(661) 555-0147"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
title="24/7 Emergency Towing in Antelope Valley"
description="Fast, reliable roadside assistance when you need it most. Our expert team is always ready to help with towing, recovery, and emergency services."
background={{ variant: "plain" }}
tag="Emergency Response"
tagIcon={Zap}
tagAnimation="slide-up"
buttons={[
{ text: "Call Now: (661) 555-0147", href: "tel:+16615550147" },
{ text: "Get Directions" },
]}
buttonAnimation="slide-up"
carouselItems={[
{
id: "1", imageSrc: "http://img.b2bpic.net/free-photo/man-try-fix-car-engine-problem-local-road_1150-10659.jpg", imageAlt: "Professional Towing Truck"},
{
id: "2", imageSrc: "http://img.b2bpic.net/free-photo/car-transporter-breakdown-lorry-working-using-locked-belt-transport-other-green-car_1150-6453.jpg?_wi=1", imageAlt: "Flatbed Towing Service"},
{
id: "3", imageSrc: "http://img.b2bpic.net/free-photo/emergency-auto-mechanic-changing-flat-tire-road_651396-3559.jpg?_wi=1", imageAlt: "Winch Recovery Service"},
{
id: "4", imageSrc: "http://img.b2bpic.net/free-photo/car-with-problems-red-triangle-warn-other-road-users_1157-35961.jpg", imageAlt: "Roadside Lockout Assistance"},
{
id: "5", imageSrc: "http://img.b2bpic.net/free-photo/jump-starting-dead-battery-using-jumper-electrical-wires_1153-4393.jpg?_wi=1", imageAlt: "Jump Start Service"},
{
id: "6", imageSrc: "http://img.b2bpic.net/free-photo/man-gas-station-with-car-close-up_23-2148906382.jpg", imageAlt: "Emergency Fuel Delivery"},
]}
autoPlay={true}
autoPlayInterval={4000}
/>
</div>
<div id="services" data-section="services">
<FeatureCardNineteen
title="Comprehensive Towing & Roadside Services"
description="From light-duty towing to heavy recovery, we handle every situation with professionalism and care."
tag="Our Services"
tagIcon={Wrench}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
id: 1,
tag: "Light & Heavy", title: "Professional Towing", subtitle: "Local and long-distance service", description: "Full range of towing solutions for all vehicle types. From personal cars to commercial trucks, our fleet is equipped to handle any towing need safely and efficiently.", imageSrc: "http://img.b2bpic.net/free-photo/car-transporter-breakdown-lorry-working-using-locked-belt-transport-other-green-car_1150-6453.jpg?_wi=2", imageAlt: "Professional Towing Service"},
{
id: 2,
tag: "Rapid Response", title: "Roadside Assistance", subtitle: "Help when you need it most", description: "Stranded on the road? We offer jump starts, lockout services, fuel delivery, and tire assistance. Our trained technicians arrive quickly to get you back on your way.", imageSrc: "http://img.b2bpic.net/free-photo/jump-starting-dead-battery-using-jumper-electrical-wires_1153-4393.jpg?_wi=2", imageAlt: "Roadside Assistance"},
{
id: 3,
tag: "Expert Recovery", title: "Accident & Recovery", subtitle: "Safe extraction and transport", description: "Specialized equipment and experienced team for accident recovery, winch-outs, and difficult extractions. We handle complex situations with precision and care.", imageSrc: "http://img.b2bpic.net/free-photo/emergency-auto-mechanic-changing-flat-tire-road_651396-3559.jpg?_wi=2", imageAlt: "Recovery Services"},
]}
/>
</div>
<div id="about" data-section="about">
<TestimonialAboutCard
tag="Why Choose Us"
tagIcon={Award}
tagAnimation="slide-up"
title="Trusted by Thousands Across Antelope Valley"
description="Antelope Valley Towing"
subdescription="Your Local, Dependable Towing Partner"
icon={CheckCircle}
imageSrc="http://img.b2bpic.net/free-photo/mid-adult-manager-using-digital-tablet-while-talking-car-mechanics-auto-repair-shop_637285-4225.jpg"
imageAlt="Professional Towing Team"
mediaAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTen
title="Our Impact"
description="Proven Excellence in Roadside Assistance"
tag="By The Numbers"
tagIcon={TrendingUp}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
metrics={[
{
id: "1", title: "15,000+", subtitle: "Vehicles Assisted", category: "Success Stories", value: "Since 2010"},
{
id: "2", title: "45 Minutes", subtitle: "Average Response Time", category: "Emergency Service", value: "24/7 Coverage"},
{
id: "3", title: "99.2%", subtitle: "Customer Satisfaction", category: "Quality Service", value: "Highly Rated"},
{
id: "4", title: "50+ Miles", subtitle: "Service Area Coverage", category: "Local Reach", value: "Antelope Valley"},
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
title="What Our Customers Say"
description="Real experiences from drivers we've helped"
tag="Testimonials"
tagIcon={Star}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
showRating={true}
carouselMode="buttons"
testimonials={[
{
id: "1", name: "Michael Rodriguez", handle: "@mrodriguez", testimonial: "Called Antelope Valley Towing after my car broke down on the highway. They arrived in less than 30 minutes and handled everything professionally. Will definitely use them again!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1", imageAlt: "Michael Rodriguez"},
{
id: "2", name: "Sarah Chen", handle: "@sarahchen", testimonial: "Amazing service! Locked my keys in my car and they came right away. Friendly staff and very reasonable pricing. Highly recommend for any towing needs.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", imageAlt: "Sarah Chen"},
{
id: "3", name: "David Thompson", handle: "@dthompson", testimonial: "Used them for roadside assistance when my truck overheated. Professional, knowledgeable, and fast. Best towing service in Antelope Valley without question.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2", imageAlt: "David Thompson"},
{
id: "4", name: "Jessica Martinez", handle: "@jmartinez", testimonial: "Got a flat tire on a late night drive. Antelope Valley Towing sent someone within minutes. They were courteous and got me back on the road safely. Five stars!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3", imageAlt: "Jessica Martinez"},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Need immediate assistance? Call our 24/7 emergency line right now. We're always ready to help get you back on the road safely."
animationType="entrance-slide"
buttons={[
{ text: "Call: (661) 555-0147", href: "tel:+16615550147" },
{ text: "Request Service Online" },
]}
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Antelope Valley Towing"
copyrightText="© 2025 Antelope Valley Towing. All rights reserved. 24/7 Emergency Service."
socialLinks={[
{ icon: Phone, href: "tel:+16615550147", ariaLabel: "Call Us" },
{ icon: MapPin, href: "#", ariaLabel: "Our Location" },
{ icon: Clock, href: "#", ariaLabel: "24/7 Service Hours" },
]}
/>
</div>
</ThemeProvider>
);
}