437 lines
14 KiB
TypeScript
437 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
import { AlertCircle, Award, CheckCircle, Home, Shield, Users } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="fluid"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{
|
|
name: "About",
|
|
id: "#about",
|
|
},
|
|
{
|
|
name: "Services",
|
|
id: "#services",
|
|
},
|
|
{
|
|
name: "Testimonials",
|
|
id: "#testimonials",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "#contact",
|
|
},
|
|
]}
|
|
brandName="Quality Roofing"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitTestimonial
|
|
background={{
|
|
variant: "gradient-bars",
|
|
}}
|
|
title="Protecting Your Home with Quality Roofing"
|
|
description="With over 20 years of experience, we provide reliable, professional roofing solutions for homeowners. From repairs to full replacements, your roof is our priority."
|
|
testimonials={[
|
|
{
|
|
name: "John D.",
|
|
handle: "@johnd",
|
|
testimonial: "Excellent service and professional team.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-influencer-taking-selfie-while-enjoying-pastry-coffee-cafe-shopping-mall_662251-2725.jpg",
|
|
},
|
|
{
|
|
name: "Sarah K.",
|
|
handle: "@sarahk",
|
|
testimonial: "Fastest roofing job ever. Very satisfied.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-cafe_273609-12859.jpg",
|
|
},
|
|
{
|
|
name: "Mike R.",
|
|
handle: "@miker",
|
|
testimonial: "Honest pricing and high quality work.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-thinking_93675-133241.jpg",
|
|
},
|
|
{
|
|
name: "Lisa T.",
|
|
handle: "@lisat",
|
|
testimonial: "They fixed my leak in record time.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/side-view-people-working-as-real-estate-agents_23-2151064915.jpg",
|
|
},
|
|
{
|
|
name: "David W.",
|
|
handle: "@davidw",
|
|
testimonial: "Highly recommended for any repair needs.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-happy-couple-with-flower_23-2148966573.jpg",
|
|
},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Get a Free Quote",
|
|
href: "#contact",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-metal-surface_23-2148796570.jpg"
|
|
imageAlt="Professional roof installation services"
|
|
mediaAnimation="slide-up"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/workers-having-little-chat-while-having-cup-coffee_329181-15632.jpg",
|
|
alt: "Customer 1",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/beautiful-woman-cafe_273609-12661.jpg",
|
|
alt: "Customer 2",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/stylish-woman-wearing-yellow-bandana_273609-13338.jpg",
|
|
alt: "Customer 3",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/beautiful-woman-cafe-with-laptop_273609-12676.jpg",
|
|
alt: "Customer 4",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/this-book-is-my-favourite_329181-1313.jpg",
|
|
alt: "Customer 5",
|
|
},
|
|
]}
|
|
marqueeItems={[
|
|
{
|
|
type: "text",
|
|
text: "Licensed & Insured",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "24/7 Emergency Support",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Quality Materials",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Local Experts",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Certified Roofers",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
icon: Award,
|
|
title: "Years Experience",
|
|
value: "20+",
|
|
},
|
|
{
|
|
id: "m2",
|
|
icon: CheckCircle,
|
|
title: "Projects Completed",
|
|
value: "1500+",
|
|
},
|
|
{
|
|
id: "m3",
|
|
icon: Users,
|
|
title: "Happy Customers",
|
|
value: "1200+",
|
|
},
|
|
]}
|
|
title="Built on Quality and Integrity"
|
|
description="Our numbers speak for themselves. We are dedicated to providing the best quality roof work in your area."
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureHoverPattern
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
icon: Shield,
|
|
title: "Roof Repair",
|
|
description: "Quick, reliable repairs to prevent leaks and structural damage.",
|
|
},
|
|
{
|
|
icon: Home,
|
|
title: "Roof Replacement",
|
|
description: "Full roof replacements with high-quality materials built to last.",
|
|
},
|
|
{
|
|
icon: AlertCircle,
|
|
title: "Emergency Services",
|
|
description: "Available for urgent repair after storm damage or sudden leaks.",
|
|
},
|
|
]}
|
|
title="Our Roofing Expertise"
|
|
description="We specialize in a full range of residential roofing services to keep your home safe and dry."
|
|
/>
|
|
</div>
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
<ProductCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1",
|
|
name: "Shingle Roof Replacement",
|
|
price: "Completed",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/roof-pattern_1203-2594.jpg",
|
|
},
|
|
{
|
|
id: "p2",
|
|
name: "Modern Metal Roofing",
|
|
price: "Completed",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-15608.jpg",
|
|
},
|
|
{
|
|
id: "p3",
|
|
name: "Asphalt Shingle Installation",
|
|
price: "Completed",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/detail-urban-stairs_23-2148107132.jpg",
|
|
},
|
|
{
|
|
id: "p4",
|
|
name: "Tile Roof Repair",
|
|
price: "Completed",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-working-together_23-2149343659.jpg",
|
|
},
|
|
{
|
|
id: "p5",
|
|
name: "New Construction Roofing",
|
|
price: "Completed",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-wooden-modern-house_23-2149343652.jpg",
|
|
},
|
|
{
|
|
id: "p6",
|
|
name: "Residential Roof Update",
|
|
price: "Completed",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/old-traditional-asian-building-with-sun-lay_1258-213.jpg",
|
|
},
|
|
]}
|
|
title="Our Recent Projects"
|
|
description="See the quality of our craftsmanship in our recent roofing installations and repairs."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "t1",
|
|
name: "Sarah",
|
|
handle: "@sarah_h",
|
|
testimonial: "Very professional and did a great job on my roof replacement.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-street-using-mobile-phone_657883-744.jpg",
|
|
},
|
|
{
|
|
id: "t2",
|
|
name: "Michael",
|
|
handle: "@mike_t",
|
|
testimonial: "Fast, quality work. Highly recommended for any home repair.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-warm-white-hoodie-home-kitchen-starts-her-day-with-cup-coffee_343596-7226.jpg",
|
|
},
|
|
{
|
|
id: "t3",
|
|
name: "Emily",
|
|
handle: "@emily_r",
|
|
testimonial: "Great attention to detail and cleaned up nicely afterwards.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-engineer-architect-shaking-hands_23-2148233783.jpg",
|
|
},
|
|
{
|
|
id: "t4",
|
|
name: "David",
|
|
handle: "@david_l",
|
|
testimonial: "Roof looks great! Fixed a leak no one else could handle.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-man-shirt-vest-hat-holding-house-model-looking-merry-front-view_176474-30838.jpg",
|
|
},
|
|
{
|
|
id: "t5",
|
|
name: "Jessica",
|
|
handle: "@jess_m",
|
|
testimonial: "Professional, on-time, and excellent communication throughout.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/african-american-caucasian-couple-hugging-happily-indoors-newly-purchased-home-joyful-moment_482257-134711.jpg",
|
|
},
|
|
]}
|
|
showRating={true}
|
|
title="What Our Clients Say"
|
|
description="We are proud of the trust our customers place in us to protect their most valuable investment."
|
|
/>
|
|
</div>
|
|
|
|
<div id="social" data-section="social">
|
|
<SocialProofOne
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Elite Roofing Supplies",
|
|
"ProBuild Materials",
|
|
"SafeHome Solutions",
|
|
"Quality Construction Group",
|
|
"Reliable Roofing Hub",
|
|
"Apex Build Partners",
|
|
"TopLine Roofers",
|
|
]}
|
|
title="Trusted by Homeowners Across the Region"
|
|
description="Our work is recognized for its durability and aesthetic appeal."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "f1",
|
|
title: "How long does a roof installation take?",
|
|
content: "Most residential roofs are completed in 1-3 days.",
|
|
},
|
|
{
|
|
id: "f2",
|
|
title: "Do you offer warranties?",
|
|
content: "Yes, we offer comprehensive warranties on all workmanship.",
|
|
},
|
|
{
|
|
id: "f3",
|
|
title: "Are you licensed and insured?",
|
|
content: "Yes, our team is fully licensed and insured for your peace of mind.",
|
|
},
|
|
]}
|
|
title="Frequently Asked Questions"
|
|
description="Answers to common questions about residential roofing."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Ready for a New Roof?"
|
|
description="Contact us for a free estimate or consultation today."
|
|
inputs={[
|
|
{
|
|
name: "name",
|
|
type: "text",
|
|
placeholder: "Your Name",
|
|
required: true,
|
|
},
|
|
{
|
|
name: "email",
|
|
type: "email",
|
|
placeholder: "Your Email",
|
|
required: true,
|
|
},
|
|
{
|
|
name: "phone",
|
|
type: "tel",
|
|
placeholder: "Phone Number",
|
|
required: true,
|
|
},
|
|
]}
|
|
textarea={{
|
|
name: "message",
|
|
placeholder: "Tell us about your project",
|
|
rows: 4,
|
|
required: true,
|
|
}}
|
|
imageSrc="http://img.b2bpic.net/free-photo/man-working-roof-medium-shot_23-2149343644.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Services",
|
|
items: [
|
|
{
|
|
label: "Repairs",
|
|
href: "#services",
|
|
},
|
|
{
|
|
label: "Replacement",
|
|
href: "#services",
|
|
},
|
|
{
|
|
label: "Emergency",
|
|
href: "#services",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{
|
|
label: "About Us",
|
|
href: "#about",
|
|
},
|
|
{
|
|
label: "Contact",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
bottomLeftText="© 2024 Quality Roofing. All rights reserved."
|
|
bottomRightText="Privacy Policy | Terms of Service"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|