246 lines
11 KiB
TypeScript
246 lines
11 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||
import { Building2, CheckCircle, Cloud, Droplets, LayoutDashboard, ShieldCheck, Star } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="text-shift"
|
||
defaultTextAnimation="entrance-slide"
|
||
borderRadius="pill"
|
||
contentWidth="mediumSmall"
|
||
sizing="large"
|
||
background="aurora"
|
||
cardStyle="solid"
|
||
primaryButtonStyle="gradient"
|
||
secondaryButtonStyle="radial-glow"
|
||
headingFontWeight="normal"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarLayoutFloatingOverlay
|
||
navItems={[
|
||
{
|
||
name: "Home", id: "home"},
|
||
{
|
||
name: "Services", id: "services"},
|
||
{
|
||
name: "Why Us", id: "why-us"},
|
||
{
|
||
name: "Reviews", id: "reviews"},
|
||
{
|
||
name: "Contact", id: "contact"},
|
||
]}
|
||
brandName="M&N Roofing"
|
||
/>
|
||
</div>
|
||
|
||
<div id="home" data-section="home">
|
||
<HeroOverlayTestimonial
|
||
title="Roofing Done Right the First Time."
|
||
description="Trusted by homeowners across Greeley for expert roofing, siding, gutters, and storm restoration."
|
||
testimonials={[
|
||
{
|
||
name: "Sarah J.", handle: "Homeowner", testimonial: "Installed metal roofing, gutters, and siding. No leaks, great cleanup, and works with insurance.", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-low-angle-closeup-shot-black-roof-building_181624-10654.jpg", imageAlt: "luxury home modern roof exterior"},
|
||
{
|
||
name: "Mike R.", handle: "Homeowner", testimonial: "On time, fair pricing, and better work than most in town. 5-star company.", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/streetlight_23-2148098639.jpg", imageAlt: "roof replacement work professional"},
|
||
{
|
||
name: "David K.", handle: "Homeowner", testimonial: "Re-roofed our house, added gutters, and even painted. Reliable and no nails left behind.", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-daytime-shadows-from-outdoors_23-2149080188.jpg", imageAlt: "seamless gutter installation"},
|
||
{
|
||
name: "Emily R.", handle: "Homeowner", testimonial: "The crew was professional and handled our claim seamlessly.", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/windows-apartment-building-city_23-2148798614.jpg", imageAlt: "modern vinyl house siding"},
|
||
{
|
||
name: "Jason L.", handle: "Homeowner", testimonial: "Best roofing experience we've had. Fast, honest, and high quality.", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/pensioner-filling-out-aform_53876-165297.jpg", imageAlt: "storm damage roof inspection"},
|
||
]}
|
||
buttons={[
|
||
{
|
||
text: "Get Free Estimate", href: "#contact"},
|
||
{
|
||
text: "Call (970) 702-6509", href: "tel:9707026509"},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/vertical-low-angle-closeup-shot-black-roof-building_181624-10654.jpg"
|
||
showDimOverlay={true}
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/vertical-low-angle-closeup-shot-black-roof-building_181624-10654.jpg", alt: "Customer 1"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/vertical-low-angle-closeup-shot-black-roof-building_181624-10654.jpg", alt: "Customer 2"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/vertical-low-angle-closeup-shot-black-roof-building_181624-10654.jpg", alt: "Customer 3"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/vertical-low-angle-closeup-shot-black-roof-building_181624-10654.jpg", alt: "Customer 4"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/vertical-low-angle-closeup-shot-black-roof-building_181624-10654.jpg", alt: "Customer 5"},
|
||
]}
|
||
avatarText="Trusted by over 1,000+ local homeowners."
|
||
/>
|
||
</div>
|
||
|
||
<div id="services" data-section="services">
|
||
<FeatureCardTwentyFive
|
||
animationType="slide-up"
|
||
textboxLayout="split"
|
||
useInvertedBackground={true}
|
||
features={[
|
||
{
|
||
title: "Roofing", description: "Full replacements, repairs, and high-quality metal, tile, and shingle systems.", icon: Building2,
|
||
mediaItems: [
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/streetlight_23-2148098639.jpg"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/streetlight_23-2148098639.jpg"},
|
||
],
|
||
},
|
||
{
|
||
title: "Gutters", description: "Expert seamless gutter installation and comprehensive drainage solutions.", icon: Droplets,
|
||
mediaItems: [
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-daytime-shadows-from-outdoors_23-2149080188.jpg"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-daytime-shadows-from-outdoors_23-2149080188.jpg"},
|
||
],
|
||
},
|
||
{
|
||
title: "Siding", description: "Upgrade your home's curb appeal and weather protection with modern siding.", icon: LayoutDashboard,
|
||
mediaItems: [
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/windows-apartment-building-city_23-2148798614.jpg"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/windows-apartment-building-city_23-2148798614.jpg"},
|
||
],
|
||
},
|
||
{
|
||
title: "Storm & Insurance", description: "Expert insurance claim assistance and fast storm damage restoration services.", icon: Cloud,
|
||
mediaItems: [
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/pensioner-filling-out-aform_53876-165297.jpg"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/pensioner-filling-out-aform_53876-165297.jpg"},
|
||
],
|
||
},
|
||
]}
|
||
title="Complete Exterior Solutions"
|
||
description="Premium services designed to protect your home for years to come."
|
||
/>
|
||
</div>
|
||
|
||
<div id="why-us" data-section="why-us">
|
||
<AboutMetric
|
||
useInvertedBackground={false}
|
||
title="Why Homeowners Trust M&N"
|
||
metrics={[
|
||
{
|
||
icon: Star,
|
||
label: "Rating", value: "4.9+"},
|
||
{
|
||
icon: CheckCircle,
|
||
label: "Projects", value: "1000+"},
|
||
{
|
||
icon: ShieldCheck,
|
||
label: "Insurance Claims", value: "Expert"},
|
||
]}
|
||
metricsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="reviews" data-section="reviews">
|
||
<TestimonialCardSixteen
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
testimonials={[
|
||
{
|
||
id: "1", name: "Sarah J.", role: "Greeley, CO", company: "Homeowner", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/windows-apartment-building-city_23-2148798614.jpg", imageAlt: "modern vinyl house siding"},
|
||
{
|
||
id: "2", name: "Mike R.", role: "Greeley, CO", company: "Homeowner", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/pensioner-filling-out-aform_53876-165297.jpg", imageAlt: "storm damage roof inspection"},
|
||
{
|
||
id: "3", name: "David K.", role: "Greeley, CO", company: "Homeowner", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/financial-independent-woman-buying-new-house_23-2149571915.jpg", imageAlt: "roofing contractor professional consultation"},
|
||
{
|
||
id: "4", name: "Emily R.", role: "Greeley, CO", company: "Homeowner", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-low-angle-closeup-shot-black-roof-building_181624-10654.jpg", imageAlt: "luxury home modern roof exterior"},
|
||
{
|
||
id: "5", name: "Jason L.", role: "Greeley, CO", company: "Homeowner", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/streetlight_23-2148098639.jpg", imageAlt: "roof replacement work professional"},
|
||
]}
|
||
kpiItems={[
|
||
{
|
||
value: "4.9/5", label: "Rating"},
|
||
{
|
||
value: "36+", label: "Happy Clients"},
|
||
{
|
||
value: "100%", label: "Insured"},
|
||
]}
|
||
title="Real Reviews from Real Customers"
|
||
description="See why Greeley homeowners trust us with their biggest investment."
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactSplitForm
|
||
useInvertedBackground={false}
|
||
title="Request Your Free Estimate"
|
||
description="Fast response. Honest pricing. Quality you can trust."
|
||
inputs={[
|
||
{
|
||
name: "name", type: "text", placeholder: "Your Name", required: true,
|
||
},
|
||
{
|
||
name: "phone", type: "tel", placeholder: "Your Phone", required: true,
|
||
},
|
||
{
|
||
name: "email", type: "email", placeholder: "Your Email", required: true,
|
||
},
|
||
]}
|
||
textarea={{
|
||
name: "message", placeholder: "Details about your roofing or exterior needs...", rows: 4,
|
||
}}
|
||
imageSrc="http://img.b2bpic.net/free-photo/financial-independent-woman-buying-new-house_23-2149571915.jpg"
|
||
buttonText="Schedule My Free Inspection"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterBaseReveal
|
||
logoText="M&N Roofing & Exteriors"
|
||
columns={[
|
||
{
|
||
title: "Contact", items: [
|
||
{
|
||
label: "2001 Talon Pkwy, Greeley, CO", href: "#"},
|
||
{
|
||
label: "(970) 702-6509", href: "tel:9707026509"},
|
||
],
|
||
},
|
||
{
|
||
title: "Hours", items: [
|
||
{
|
||
label: "Mon–Sat: 7:00 AM – 6:00 PM", href: "#"},
|
||
{
|
||
label: "Sunday: Closed", href: "#"},
|
||
],
|
||
},
|
||
]}
|
||
copyrightText="© 2024 M&N Roofing & Exteriors. All rights reserved."
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|