199 lines
7.7 KiB
TypeScript
199 lines
7.7 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import { ShieldCheck, Wrench, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="grid"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "Services", id: "services"},
|
|
{
|
|
name: "Why Us", id: "why-us"},
|
|
{
|
|
name: "Testimonials", id: "testimonials"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="The AC Guys"
|
|
button={{
|
|
text: "Get a Quote", href: "#contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
background={{
|
|
variant: "gradient-bars"}}
|
|
logoText="The AC Guys"
|
|
description="Fast, affordable, and professional HVAC solutions in your neighborhood. Serving your comfort needs 24/7."
|
|
buttons={[
|
|
{
|
|
text: "Get a Quote", href: "#contact"},
|
|
{
|
|
text: "Learn More", href: "#why-us"},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/abstract-minimal-background-with-floor_23-2149207757.jpg"
|
|
imageAlt="Professional HVAC technician"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureBento
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
bentoComponent: "reveal-icon", icon: Zap,
|
|
title: "Fast Repairs", description: "Emergency services when you need them most."
|
|
},
|
|
{
|
|
bentoComponent: "reveal-icon", icon: ShieldCheck,
|
|
title: "Professional Installation", description: "Precise setup for peak system performance."
|
|
},
|
|
{
|
|
bentoComponent: "reveal-icon", icon: Wrench,
|
|
title: "Full Maintenance", description: "Preventative care to extend system lifespan."
|
|
},
|
|
]}
|
|
title="Our Expert Services"
|
|
description="Providing top-tier HVAC repairs, installations, and maintenance."
|
|
/>
|
|
</div>
|
|
|
|
<div id="why-us" data-section="why-us">
|
|
<MetricSplitMediaAbout
|
|
useInvertedBackground={true}
|
|
title="Why Choose Us?"
|
|
description="We are a trusted, locally-owned HVAC contractor dedicated to honesty, quality, and fast turnaround times. Our 4.8/5 rating speaks for our commitment."
|
|
metrics={[
|
|
{
|
|
value: "4.8", title: "Star Rating"},
|
|
{
|
|
value: "17", title: "Verified Reviews"},
|
|
{
|
|
value: "24/7", title: "Service Availability"},
|
|
]}
|
|
mediaAnimation="blur-reveal"
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-dirty-broken-inside-compartments-air-conditioner_632498-1086.jpg"
|
|
imageAlt="Close up of dirty and broken inside compartments air conditioner"
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "James Tirado", role: "Client", company: "Resident", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-person_23-2151098592.jpg"},
|
|
{
|
|
id: "2", name: "Rhayna Marques", role: "Client", company: "Apartment", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-engineer-designing-building-model-maquette-layout-architecture-work-architect-working-construction-structure-design-urban-development-project_482257-37228.jpg"},
|
|
{
|
|
id: "3", name: "Anatol Percival", role: "Client", company: "Homeowner", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/hopeful-cheerful-cute-redhead-girlfriend-rooting-you-believe-win-smiling-supportive-satisfied-sh_1258-143196.jpg"},
|
|
{
|
|
id: "4", name: "Maria G.", role: "Client", company: "Local", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-fashionable-man-with-stylish-haircut-sunglasses-dressed-black-t-shirt-pants-standing-with-crossed-arms-modern-city-against-skyscraper_613910-18546.jpg"},
|
|
{
|
|
id: "5", name: "John D.", role: "Client", company: "Homeowner", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-shirt-smiling-posing-kitchen_23-2148414940.jpg"},
|
|
]}
|
|
title="Customer Stories"
|
|
description="See why our neighbors trust us with their HVAC needs."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "f1", title: "Do you offer emergency service?", content: "Yes, we are available 24/7."},
|
|
{
|
|
id: "f2", title: "Is the estimate free?", content: "We offer affordable upfront pricing."},
|
|
{
|
|
id: "f3", title: "Are you licensed?", content: "Yes, we are certified HVAC contractors."},
|
|
]}
|
|
title="Common Questions"
|
|
description="Everything you need to know about our services."
|
|
faqsAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-heat-pump-outside-home_23-2149250265.jpg"
|
|
imageAlt="Close up on heat pump outside home"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain"}}
|
|
tag="Get in touch"
|
|
title="Need AC Help?"
|
|
description="Leave your details and we'll reach out immediately."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="The AC Guys"
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{
|
|
label: "Installation", href: "#"},
|
|
{
|
|
label: "Repairs", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Contact", items: [
|
|
{
|
|
label: "Call Us", href: "tel:5550123"},
|
|
{
|
|
label: "Email", href: "mailto:info@acguys.com"},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|