354 lines
11 KiB
TypeScript
354 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import { Home, Shield, Wrench } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumLarge"
|
|
sizing="large"
|
|
background="grid"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{
|
|
name: "About",
|
|
id: "about",
|
|
},
|
|
{
|
|
name: "Services",
|
|
id: "features",
|
|
},
|
|
{
|
|
name: "Testimonials",
|
|
id: "testimonials",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="4 Star Roofing"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplit
|
|
background={{
|
|
variant: "gradient-bars",
|
|
}}
|
|
title="Excellence in Roofing & Maintenance"
|
|
description="Providing top-tier roofing solutions, repairs, and annual maintenance for residential properties since 2010. Reliable service you can count on."
|
|
buttons={[
|
|
{
|
|
text: "Get a Quote",
|
|
href: "#contact",
|
|
},
|
|
{
|
|
text: "Our Services",
|
|
href: "#features",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/construction-worker-doing-his-job-with-belt_23-2149343658.jpg?_wi=1"
|
|
imageAlt="Professional roof inspection"
|
|
mediaAnimation="slide-up"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/fellows-having-fun-outside_23-2147679231.jpg",
|
|
alt: "Happy client 1",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/couple-front-house_23-2147986417.jpg",
|
|
alt: "Happy client 2",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/lifestyle-scene-showing-care-support-from-people-community_23-2151261237.jpg",
|
|
alt: "Happy client 3",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/sun-shines-happy-son-mom-having-fun-while-they-play-outside_8353-5355.jpg",
|
|
alt: "Happy client 4",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/medium-shot-people-hugging_23-2149039821.jpg",
|
|
alt: "Happy client 5",
|
|
},
|
|
]}
|
|
avatarText="Trusted by 1200+ homeowners"
|
|
marqueeItems={[
|
|
{
|
|
type: "text",
|
|
text: "Licensed & Insured",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Quality Guaranteed",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Fast Repairs",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Expert Team",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Reliable Service",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={false}
|
|
title="Your Trusted Roofing Partners"
|
|
description={[
|
|
"4 Star Roofing & Maintenance brings over a decade of expertise to every project. We specialize in comprehensive roof health, repair, and long-term maintenance programs designed to extend the life of your biggest asset.",
|
|
"Our team is licensed, insured, and committed to transparency. From minor leaks to full roof replacements, we treat your home like our own.",
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureHoverPattern
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
icon: Shield,
|
|
title: "Roof Inspections",
|
|
description: "Professional assessment of your roof health.",
|
|
},
|
|
{
|
|
icon: Wrench,
|
|
title: "Leak Repairs",
|
|
description: "Quick, reliable fixes for all types of leaks.",
|
|
},
|
|
{
|
|
icon: Home,
|
|
title: "Replacement",
|
|
description: "High-quality installation for full replacements.",
|
|
},
|
|
]}
|
|
title="Comprehensive Roofing Services"
|
|
description="We offer a full spectrum of roofing and maintenance services to keep your roof in top shape all year round."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
textboxLayout="split"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
value: "1200+",
|
|
description: "Roofs Repaired",
|
|
},
|
|
{
|
|
id: "m2",
|
|
value: "15+",
|
|
description: "Years of Experience",
|
|
},
|
|
{
|
|
id: "m3",
|
|
value: "98%",
|
|
description: "Customer Satisfaction",
|
|
},
|
|
]}
|
|
title="By The Numbers"
|
|
description="Our commitment to quality speaks for itself through our track record of success."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Sarah Miller",
|
|
date: "2023-10",
|
|
title: "Quality Work",
|
|
quote: "Fantastic service. They repaired my roof leak quickly.",
|
|
tag: "Repair",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/smiling-woman-standing-near-house_250224-214.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-doing-his-job-with-belt_23-2149343658.jpg?_wi=2",
|
|
imageAlt: "happy customer house exterior",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "David Smith",
|
|
date: "2023-11",
|
|
title: "Great Team",
|
|
quote: "Professional, punctual, and very affordable roofers.",
|
|
tag: "Inspection",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/female-wedding-planner-meeting-with-clients_23-2150167197.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-holding-coffee-cups_23-2148752019.jpg",
|
|
imageAlt: "happy customer house exterior",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Emily Wong",
|
|
date: "2024-01",
|
|
title: "Replacement",
|
|
quote: "My new roof looks incredible. Highly recommend.",
|
|
tag: "Replacement",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/young-woman-girl-having-fun-street_259150-57532.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-with-calculator_23-2148819843.jpg?_wi=1",
|
|
imageAlt: "happy customer house exterior",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "John Doe",
|
|
date: "2024-02",
|
|
title: "Excellent",
|
|
quote: "Very thorough with the inspection. Honest team.",
|
|
tag: "Inspection",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/woman-makes-repairs-home_1398-5140.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/people-practicing-social-integration-workspace_23-2149405355.jpg",
|
|
imageAlt: "happy customer house exterior",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Karen B.",
|
|
date: "2024-03",
|
|
title: "Happy",
|
|
quote: "They solved my persistent leak in just one day.",
|
|
tag: "Repair",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/full-shot-worker-with-helmet-working-roof_23-2149343663.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/closeup-roof-house-made-wooden-tiles_169016-24989.jpg",
|
|
imageAlt: "happy customer house exterior",
|
|
},
|
|
]}
|
|
title="What Homeowners Say"
|
|
description="Join hundreds of satisfied homeowners across the region who trust 4 Star Roofing."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "f1",
|
|
title: "How long do roof inspections take?",
|
|
content: "Typically 1-2 hours depending on roof size.",
|
|
},
|
|
{
|
|
id: "f2",
|
|
title: "Are you licensed?",
|
|
content: "Yes, we are fully licensed and insured contractors.",
|
|
},
|
|
{
|
|
id: "f3",
|
|
title: "Do you offer warranties?",
|
|
content: "We offer comprehensive labor warranties on all work.",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-woman-with-calculator_23-2148819843.jpg?_wi=2"
|
|
title="Frequently Asked Questions"
|
|
description="Have questions about our services? Find answers here."
|
|
faqsAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social" data-section="social">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
names={[
|
|
"GAF Certified",
|
|
"Owens Corning",
|
|
"CertainTeed",
|
|
"Better Business Bureau",
|
|
"Roofing Contractors Association",
|
|
"Local Builders Guild",
|
|
"Energy Star Partner",
|
|
]}
|
|
title="Trusted Partners"
|
|
description="We are affiliated with industry-leading manufacturers and local associations."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "gradient-bars",
|
|
}}
|
|
text="Ready to get started on your roof project? Get a free inspection or a no-obligation quote today."
|
|
buttons={[
|
|
{
|
|
text: "Contact Us",
|
|
href: "mailto:info@4starroofing.com",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
columns={[
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{
|
|
label: "About",
|
|
href: "#about",
|
|
},
|
|
{
|
|
label: "Contact",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Services",
|
|
items: [
|
|
{
|
|
label: "Repairs",
|
|
href: "#features",
|
|
},
|
|
{
|
|
label: "Maintenance",
|
|
href: "#features",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
logoText="4 Star Roofing"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|