314 lines
17 KiB
TypeScript
314 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
|
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import { Award, CheckCircle, HelpCircle, Image, MessageCircle, Shield, TrendingUp, Zap } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="medium"
|
|
background="none"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="FAULTTECH"
|
|
navItems={[
|
|
{ name: "Services", id: "services" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Projects", id: "projects" },
|
|
{ name: "FAQ", id: "faq" }
|
|
]}
|
|
button={{ text: "Get Quote", href: "#contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarousel
|
|
title="FAULTTECH"
|
|
description="Premium Asphalt. Precision Work. Built to Last."
|
|
background={{ variant: "plain" }}
|
|
tag="Premium Contractor"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Get a Free Quote", href: "#contact" },
|
|
{ text: "View Projects", href: "#projects" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/glittery-golden-black-wrapping-paper_53876-88533.jpg", imageAlt: "Fresh asphalt paving installation"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/road-marking-road-surface_1252-1141.jpg", imageAlt: "Professional parking lot asphalt with striping"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/side-view-business-man-walking-outdoors_1262-7313.jpg", imageAlt: "Completed residential driveway installation"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/long-shot-man-with-protective-gear_23-2148269794.jpg", imageAlt: "Expert asphalt sealcoating protection"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/architecture-shadows-city-day_23-2149451222.jpg", imageAlt: "Large commercial asphalt paving project"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cement-texture_1194-5962.jpg", imageAlt: "Premium black asphalt finish quality"
|
|
}
|
|
]}
|
|
ariaLabel="FAULTTECH premium asphalt contractor hero section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTen
|
|
title="Our Services"
|
|
description="Complete asphalt solutions tailored to residential and commercial needs."
|
|
tag="Premium Services"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: "driveways", title: "Driveway Installation", description: "High-quality residential driveways engineered for durability and aesthetic appeal.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/heavy-machinery-used-construction-industry-engineering_23-2151307728.jpg", imageAlt: "Premium residential driveway installation"
|
|
},
|
|
items: [
|
|
{ icon: CheckCircle, text: "Expert installation" },
|
|
{ icon: CheckCircle, text: "Superior longevity" },
|
|
{ icon: CheckCircle, text: "Flawless finish" }
|
|
],
|
|
reverse: false
|
|
},
|
|
{
|
|
id: "parking", title: "Parking Lot Paving", description: "Commercial-grade asphalt paving with precision striping and markings.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-man-wearing-reflective-vest-beside-brokendown-car-roadside_123827-37001.jpg", imageAlt: "Commercial parking lot asphalt paving"
|
|
},
|
|
items: [
|
|
{ icon: CheckCircle, text: "Large-scale projects" },
|
|
{ icon: CheckCircle, text: "Professional striping" },
|
|
{ icon: CheckCircle, text: "Durable finish" }
|
|
],
|
|
reverse: true
|
|
},
|
|
{
|
|
id: "sealcoating", title: "Sealcoating & Maintenance", description: "Protective coatings to extend asphalt life and maintain pristine appearance.", media: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-night-streets-city_23-2149001250.jpg", imageAlt: "Professional asphalt sealcoating"
|
|
},
|
|
items: [
|
|
{ icon: CheckCircle, text: "Protective coating" },
|
|
{ icon: CheckCircle, text: "Extended lifespan" },
|
|
{ icon: CheckCircle, text: "Maintained beauty" }
|
|
],
|
|
reverse: false
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Our premium asphalt services"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="Why Faulttech"
|
|
tagIcon={Shield}
|
|
tagAnimation="slide-up"
|
|
title="Elite Asphalt Expertise and Craftsmanship"
|
|
useInvertedBackground={false}
|
|
ariaLabel="About Faulttech asphalt contractor"
|
|
/>
|
|
</div>
|
|
|
|
<div id="projects" data-section="projects">
|
|
<ProductCardTwo
|
|
title="Completed Projects"
|
|
description="See the quality and precision of our work across residential and commercial installations."
|
|
tag="Portfolio"
|
|
tagIcon={Image}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
gridVariant="uniform-all-items-equal"
|
|
products={[
|
|
{
|
|
id: "project-luxury-driveway", brand: "Residential", name: "Luxury Driveway Installation", price: "Completed", rating: 5,
|
|
reviewCount: "Premium Quality", imageSrc: "http://img.b2bpic.net/free-photo/heavy-machinery-used-construction-industry-engineering_23-2151307728.jpg", imageAlt: "Luxury residential driveway installation"
|
|
},
|
|
{
|
|
id: "project-commercial-parking", brand: "Commercial", name: "Large Parking Lot Paving", price: "Completed", rating: 5,
|
|
reviewCount: "Premium Quality", imageSrc: "http://img.b2bpic.net/free-photo/young-man-wearing-reflective-vest-beside-brokendown-car-roadside_123827-37001.jpg", imageAlt: "Commercial parking lot paving project"
|
|
},
|
|
{
|
|
id: "project-sealcoat", brand: "Maintenance", name: "Professional Sealcoating", price: "Completed", rating: 5,
|
|
reviewCount: "Premium Quality", imageSrc: "http://img.b2bpic.net/free-photo/man-night-streets-city_23-2149001250.jpg", imageAlt: "Professional sealcoating protection"
|
|
}
|
|
]}
|
|
ariaLabel="Faulttech completed projects gallery"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
title="Our Track Record"
|
|
description="Proven excellence in asphalt construction and maintenance."
|
|
tag="Results That Matter"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "projects-completed", value: "500+", title: "Projects Completed", description: "Successfully finished installations and repairs", imageSrc: "http://img.b2bpic.net/free-photo/glittery-golden-black-wrapping-paper_53876-88533.jpg", imageAlt: "Projects completed metric icon"
|
|
},
|
|
{
|
|
id: "years-experience", value: "20+", title: "Years Experience", description: "Decades of expertise in asphalt contracting", imageSrc: "http://img.b2bpic.net/free-photo/glittery-golden-black-wrapping-paper_53876-88533.jpg", imageAlt: "Years experience metric icon"
|
|
},
|
|
{
|
|
id: "client-satisfaction", value: "98%", title: "Client Satisfaction", description: "Premium service rated by our clients", imageSrc: "http://img.b2bpic.net/free-photo/glittery-golden-black-wrapping-paper_53876-88533.jpg", imageAlt: "Client satisfaction metric icon"
|
|
},
|
|
{
|
|
id: "square-feet", value: "10M+", title: "Square Feet Paved", description: "Total asphalt surface installed", imageSrc: "http://img.b2bpic.net/free-photo/glittery-golden-black-wrapping-paper_53876-88533.jpg", imageAlt: "Square feet paved metric icon"
|
|
}
|
|
]}
|
|
ariaLabel="Faulttech metrics and achievements"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
title="Client Testimonials"
|
|
description="Hear from satisfied customers about their premium Faulttech experience."
|
|
tag="Client Success"
|
|
tagIcon={MessageCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
showRating={true}
|
|
testimonials={[
|
|
{
|
|
id: "testimonial-1", name: "James Richardson", handle: "Fort Worth, TX", testimonial: "Faulttech transformed our driveway. The quality is exceptional and the team was professional throughout. Highly recommend for premium work.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/person-working-building-construction_23-2149184904.jpg", imageAlt: "James Richardson testimonial"
|
|
},
|
|
{
|
|
id: "testimonial-2", name: "Sarah Mitchell", handle: "Dallas, TX", testimonial: "Outstanding service. Our parking lot looks brand new. The precision and attention to detail are unmatched. Best contractor we've worked with.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-corporate-woman-looks-dreamy-smiles-stands-outside-street-leans-her-head-hands_1258-193992.jpg", imageAlt: "Sarah Mitchell testimonial"
|
|
},
|
|
{
|
|
id: "testimonial-3", name: "Michael Chen", handle: "Arlington, TX", testimonial: "Professional, reliable, and high-quality work. Faulttech completed our project on time and within budget. Exceptional value for premium service.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/black-businessman-sad-expression_1194-2739.jpg", imageAlt: "Michael Chen testimonial"
|
|
},
|
|
{
|
|
id: "testimonial-4", name: "Jennifer Lopez", handle: "Plano, TX", testimonial: "From consultation to completion, Faulttech delivered excellence. Our driveway looks perfect and will last for years. Trusted partner for future projects.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/mature-woman-smiling_1149-601.jpg", imageAlt: "Jennifer Lopez testimonial"
|
|
}
|
|
]}
|
|
ariaLabel="Faulttech client testimonials"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
title="Frequently Asked Questions"
|
|
description="Get answers to common questions about our asphalt services."
|
|
tag="Need Help?"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "faq-1", title: "What is your service area?", content: "We serve the Dallas-Fort Worth metroplex and surrounding areas. Our team covers residential and commercial projects throughout North Texas."
|
|
},
|
|
{
|
|
id: "faq-2", title: "How long does asphalt paving take?", content: "Project duration depends on size and complexity. Typical residential driveways take 1-3 days, while larger commercial projects may take 1-2 weeks."
|
|
},
|
|
{
|
|
id: "faq-3", title: "Do you offer warranties?", content: "Yes, we provide comprehensive warranties on all our work. Details vary by project type and are discussed during your free consultation."
|
|
},
|
|
{
|
|
id: "faq-4", title: "When should I sealcoat my asphalt?", content: "New asphalt should be sealcoated 6-12 months after installation, then every 2-3 years for optimal protection and appearance."
|
|
},
|
|
{
|
|
id: "faq-5", title: "Can you fix cracked asphalt?", content: "Absolutely. We specialize in crack repair, pothole filling, and comprehensive asphalt restoration to extend the life of your surface."
|
|
},
|
|
{
|
|
id: "faq-6", title: "Is a free quote really free?", content: "Yes, completely free. We visit your site, assess your needs, and provide a detailed no-obligation quote with no hidden costs."
|
|
}
|
|
]}
|
|
ariaLabel="Faulttech frequently asked questions"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Ready to Upgrade?"
|
|
title="Ready to Upgrade Your Surface?"
|
|
description="Get a fast, no-obligation quote today. Our team will assess your project and provide premium solutions."
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
mediaAnimation="slide-up"
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Contact Us"
|
|
ariaLabel="Contact Faulttech for asphalt quote"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Driveway Installation", href: "#services" },
|
|
{ label: "Parking Lot Paving", href: "#services" },
|
|
{ label: "Sealcoating", href: "#services" },
|
|
{ label: "Crack Repair", href: "#services" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Projects", href: "#projects" },
|
|
{ label: "Testimonials", href: "#testimonials" },
|
|
{ label: "FAQ", href: "#faq" }
|
|
]
|
|
},
|
|
{
|
|
title: "Contact", items: [
|
|
{ label: "Fort Worth, TX", href: "#" },
|
|
{ label: "Phone", href: "#" },
|
|
{ label: "Email", href: "#" },
|
|
{ label: "Get Quote", href: "#contact" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2024 FAULTTECH. Premium Asphalt Contractor. All rights reserved."
|
|
ariaLabel="Faulttech footer"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |