Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 359aaa5902 | |||
| 650cd4dd26 | |||
| 67c951dc5e | |||
| bddf281671 | |||
| 2a2d72cb8c | |||
| 8312d2c770 | |||
| 412008af74 |
483
src/app/page.tsx
483
src/app/page.tsx
@@ -2,17 +2,16 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import { Shield } from "lucide-react";
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -29,377 +28,119 @@ export default function LandingPage() {
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Roofing Near Me"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Roofing Near Me"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Roofing Experts You Can Trust"
|
||||
description="Providing top-tier roofing installation, repair, and maintenance services for your home. Quality work, every time."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-young-business-woman-talking-phone-while-standing-outside-office-buildings-business-success-concept_58466-12283.jpg",
|
||||
alt: "Client",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/enjoying-morning-sun-before-start-work_329181-11779.jpg",
|
||||
alt: "Client",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/specialist-grinds-tile-before-fixing-it-wall-builder-decorates-walls-apartment-finishing-building-with-modern-materials_166373-2086.jpg",
|
||||
alt: "Client",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-male-model-posing-outdoor_23-2148289284.jpg",
|
||||
alt: "Client",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/exterior-home_1203-2241.jpg",
|
||||
alt: "Client",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Free Estimate",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Licensed & Insured",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "24/7 Emergency Service",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Lifetime Warranty",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Top Rated Local Pro",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Free Consultations",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Roofing Experts You Can Trust"
|
||||
description="Professional-grade roofing installation and repair services."
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/exterior-home_1203-2241.jpg", imageAlt: "Roofing project" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-doing-his-job-with-belt_23-2149343658.jpg?_wi=1", imageAlt: "Roofing professional" }
|
||||
]}
|
||||
buttons={[{ text: "Get Free Estimate", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="About Us"
|
||||
title="Decades of Roofing Excellence"
|
||||
description="We specialize in residential roofing, offering durable solutions tailored to your home's unique needs."
|
||||
subdescription="Our team uses premium materials and certified installation processes for long-lasting protection."
|
||||
icon={Shield}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/construction-worker-doing-his-job-with-belt_23-2149343658.jpg?_wi=1"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
tag="About Us"
|
||||
title="Decades of Roofing Excellence"
|
||||
description="We provide premium residential roofing solutions with unmatched quality and service."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/construction-worker-doing-his-job-with-belt_23-2149343658.jpg?_wi=2"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "New Installation",
|
||||
description: "High-quality shingle and metal roof installations.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-geometric-abstract-twist-background_1048-17020.jpg?_wi=1",
|
||||
titleImageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-13116.jpg",
|
||||
buttonText: "Read More",
|
||||
},
|
||||
{
|
||||
title: "Emergency Repairs",
|
||||
description: "Quick, reliable response for storm damage and leaks.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-sitting-roof_23-2149343640.jpg?_wi=1",
|
||||
titleImageSrc: "http://img.b2bpic.net/free-photo/mechanic-filling-out-insurance-contract_482257-85122.jpg",
|
||||
buttonText: "Read More",
|
||||
},
|
||||
{
|
||||
title: "Roof Inspections",
|
||||
description: "Thorough maintenance checks for peace of mind.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-walking-roof_1321-1041.jpg?_wi=1",
|
||||
titleImageSrc: "http://img.b2bpic.net/free-photo/full-shot-roofer-working-with-helmet_23-2149343710.jpg",
|
||||
buttonText: "Read More",
|
||||
},
|
||||
]}
|
||||
title="Our Professional Services"
|
||||
description="From complete roof replacements to minor repairs, we have you covered."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwelve
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
title="Our Professional Services"
|
||||
description="Comprehensive maintenance and installation packages."
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "f1", label: "Installation", title: "New Roofs", items: ["Asphalt Shingles", "Metal Roofing", "Slate Tile"], buttons: [{ text: "View Details" }] },
|
||||
{ id: "f2", label: "Maintenance", title: "Reliable Repairs", items: ["Emergency Leak Fix", "Storm Damage Repair", "Full Inspections"], buttons: [{ text: "Learn More" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="process" data-section="process">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "ProRoof",
|
||||
name: "Asphalt Shingles",
|
||||
price: "From $5,000",
|
||||
rating: 5,
|
||||
reviewCount: "120",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/white-tiled-building-blue-sky_181624-6378.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "MetalMax",
|
||||
name: "Standing Seam Metal",
|
||||
price: "From $12,000",
|
||||
rating: 5,
|
||||
reviewCount: "85",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-looking-into-solid-fuel-boiler-working-with-biofuels-economical-heating-top-view_169016-14806.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "EcoTile",
|
||||
name: "Slate Tile Roofing",
|
||||
price: "From $20,000",
|
||||
rating: 5,
|
||||
reviewCount: "45",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-working-with-helmet_23-2149343651.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
brand: "Composite",
|
||||
name: "Eco-Friendly Shingles",
|
||||
price: "From $7,000",
|
||||
rating: 5,
|
||||
reviewCount: "60",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-using-hammer-job-site_23-2150530685.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
brand: "ProRoof",
|
||||
name: "Architectural Shingles",
|
||||
price: "From $6,500",
|
||||
rating: 5,
|
||||
reviewCount: "95",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-geometric-weave-abstract-wallpaper-background_1048-9944.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
brand: "MetalMax",
|
||||
name: "Corrugated Metal",
|
||||
price: "From $9,000",
|
||||
rating: 5,
|
||||
reviewCount: "70",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-blue-lines-perfect-using-as-background_181624-15180.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Roofing Solutions"
|
||||
description="We offer a variety of roofing materials tailored to your climate and aesthetic preferences."
|
||||
/>
|
||||
</div>
|
||||
<div id="process" data-section="process">
|
||||
<ProductCatalog
|
||||
layout="section"
|
||||
products={[
|
||||
{ id: "p1", name: "Asphalt Shingles", price: "$5,000+", imageSrc: "http://img.b2bpic.net/free-photo/white-tiled-building-blue-sky_181624-6378.jpg", rating: 5 },
|
||||
{ id: "p2", name: "Metal Roofing", price: "$12,000+", imageSrc: "http://img.b2bpic.net/free-photo/young-man-looking-into-solid-fuel-boiler-working-with-biofuels-economical-heating-top-view_169016-14806.jpg", rating: 4 }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Mark R.",
|
||||
date: "Jan 2024",
|
||||
title: "Great Service!",
|
||||
quote: "The roofing team was professional and fast. Highly recommended.",
|
||||
tag: "Repair",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/blissful-tanned-woman-pajama-waving-hand-with-smile-amazing-caucasian-female-model-standing-balcony_197531-20975.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/old-house-with-tiled-roof_169016-29073.jpg",
|
||||
imageAlt: "happy homeowner looking at new roof",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Elena M.",
|
||||
date: "Dec 2023",
|
||||
title: "Excellent Job",
|
||||
quote: "Beautiful roof installation, done exactly as promised.",
|
||||
tag: "New Roof",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/happy-woman-background-new-house-portrait-first-time-buyer-house-owner-apartment-renter-flat-tenant-landlady-moving-day-buying-own-property-concept_493343-29871.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-doing-his-job-with-belt_23-2149343658.jpg?_wi=2",
|
||||
imageAlt: "happy homeowner looking at new roof",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "John D.",
|
||||
date: "Nov 2023",
|
||||
title: "Expert Team",
|
||||
quote: "Very thorough inspection and detailed repair process.",
|
||||
tag: "Inspection",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/country-music-band-singing-outdoors_23-2149498460.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-geometric-abstract-twist-background_1048-17020.jpg?_wi=2",
|
||||
imageAlt: "happy homeowner looking at new roof",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Sara W.",
|
||||
date: "Oct 2023",
|
||||
title: "Responsive",
|
||||
quote: "Quickest response to our leak emergency.",
|
||||
tag: "Emergency",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/stylish-woman-wearing-yellow-bandana_273609-13336.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-sitting-roof_23-2149343640.jpg?_wi=2",
|
||||
imageAlt: "happy homeowner looking at new roof",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Tom K.",
|
||||
date: "Sep 2023",
|
||||
title: "Professional",
|
||||
quote: "Clear pricing and perfect project completion.",
|
||||
tag: "Full Replace",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/construction-people-working-roof_23-2149343666.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-walking-roof_1321-1041.jpg?_wi=2",
|
||||
imageAlt: "happy homeowner looking at new roof",
|
||||
},
|
||||
]}
|
||||
title="What Homeowners Say"
|
||||
description="Our satisfied clients trust us for their most important asset."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
showRating={true}
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
title="What Clients Say"
|
||||
description="Hear from our satisfied customers."
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Mark R.", handle: "@markr", testimonial: "The roofing team was professional and fast!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/blissful-tanned-woman-pajama-waving-hand-with-smile-amazing-caucasian-female-model-standing-balcony_197531-20975.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "How long does a roof last?",
|
||||
content: "Most asphalt shingle roofs last between 20 to 30 years.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "How do I know I need a new roof?",
|
||||
content: "Look for cracked shingles, leaks, or granule loss.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Do you provide estimates?",
|
||||
content: "Yes, we offer free, detailed roofing estimates.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Common questions about our roofing processes."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
faqs={[{ id: "q1", title: "How long does a roof last?", content: "Typically 20-30 years." }]}
|
||||
title="FAQs"
|
||||
description="Common questions about our roofing services."
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/construction-people-working-roof_23-2149343666.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Roofing Masters",
|
||||
"Build Pro",
|
||||
"Shield Roofing",
|
||||
"Safe Roof",
|
||||
"Pro Installers",
|
||||
"Elite Roofing",
|
||||
"Top Repair",
|
||||
]}
|
||||
title="Industry Partners"
|
||||
description="Proudly working with industry-leading brands."
|
||||
/>
|
||||
</div>
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
names={["Roofing Masters", "Build Pro", "Shield Roofing"]}
|
||||
title="Industry Partners"
|
||||
description="We work with top industry experts."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "rotated-rays-static",
|
||||
}}
|
||||
text="Ready to get started? Contact us today for a free inspection or estimate."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us Now",
|
||||
href: "mailto:info@roofing.com",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Get Your Estimate"
|
||||
description="Our team is ready to inspect your property."
|
||||
useInvertedBackground={false}
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Full Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Installation",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Repair",
|
||||
href: "#features",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Roofing Near Me"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Roofing Near Me"
|
||||
columns={[{ title: "Links", items: [{ label: "Home", href: "#" }] }]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user