533 lines
19 KiB
TypeScript
533 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
import { Activity, Award, Building, Building2, Diamond, Headphones, Home, Search, Shield, Star, UserCheck, Users, Wallet, Wrench, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="light"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "#hero",
|
|
},
|
|
{
|
|
name: "Services",
|
|
id: "#services",
|
|
},
|
|
{
|
|
name: "Gallery",
|
|
id: "#gallery",
|
|
},
|
|
{
|
|
name: "Why Us",
|
|
id: "#why-choose-us",
|
|
},
|
|
{
|
|
name: "Testimonials",
|
|
id: "#testimonials",
|
|
},
|
|
{
|
|
name: "About Us",
|
|
id: "#about",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "#contact",
|
|
},
|
|
]}
|
|
brandName="JM Roofing 3rd Generation"
|
|
button={{
|
|
text: "Get Free Estimate",
|
|
href: "#contact",
|
|
}}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardTestimonial
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "radial-gradient",
|
|
}}
|
|
title="3rd Generation Roofing Experts You Can Trust"
|
|
description="Professional Residential & Commercial Roofing Services, delivering unparalleled quality and durability for over three generations."
|
|
testimonials={[
|
|
{
|
|
name: "Emily R.",
|
|
handle: "@emilyreviews",
|
|
testimonial: "JM Roofing transformed our home! The quality and service were exceptional. Truly experts.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/black-businessman-sad-expression_1194-2739.jpg?_wi=1",
|
|
},
|
|
{
|
|
name: "Michael S.",
|
|
handle: "@mikesroof",
|
|
testimonial: "Professional, efficient, and reliable. Our new commercial roof looks fantastic.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-successful-entrepreneur_1098-3855.jpg?_wi=1",
|
|
},
|
|
{
|
|
name: "Sarah J.",
|
|
handle: "@sarah_home",
|
|
testimonial: "Couldn't be happier with the roof repair. Fast and high quality work!",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiley-architect-wearing-his-safety-equipment_23-2148242918.jpg?_wi=1",
|
|
},
|
|
{
|
|
name: "David L.",
|
|
handle: "@dl_builds",
|
|
testimonial: "They live up to their reputation. A trustworthy family business.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businesswoman-sunglasses-catching-car-business-centre_176420-5670.jpg?_wi=1",
|
|
},
|
|
{
|
|
name: "Jessica M.",
|
|
handle: "@jessicaprojects",
|
|
testimonial: "From estimate to completion, the process was smooth. Highly recommend!",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-bearded-builder-man-construction-uniform-safety-helmet-taking-selfie-happy-cheerful-smiling-broadly-standing-purple-background_141793-110865.jpg",
|
|
},
|
|
]}
|
|
testimonialRotationInterval={5000}
|
|
buttons={[
|
|
{
|
|
text: "Get Free Estimate",
|
|
href: "#contact",
|
|
},
|
|
{
|
|
text: "Call Now",
|
|
href: "tel:+1-555-ROOF",
|
|
},
|
|
]}
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-portrait-smiling-construction-worker_23-2148233742.jpg",
|
|
alt: "Customer testimonial avatar 1",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg",
|
|
alt: "Customer testimonial avatar 2",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/senior-businessman-architect-hard-hat_1303-18991.jpg",
|
|
alt: "Customer testimonial avatar 3",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/cheerful-workman-white-wall_23-2147772246.jpg",
|
|
alt: "Customer testimonial avatar 4",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/serious-afroamerican-businessman-front-view_23-2148508922.jpg",
|
|
alt: "Professional male portrait smiling",
|
|
},
|
|
]}
|
|
avatarText="Trusted by 56+ verified clients."
|
|
imageSrc="http://img.b2bpic.net/free-photo/closeup-roof-house-made-wooden-tiles_169016-24747.jpg?_wi=1"
|
|
imageAlt="Cinematic view of a modern luxury roof with dark tiles."
|
|
mediaAnimation="slide-up"
|
|
marqueeItems={[
|
|
{
|
|
type: "text",
|
|
text: "Quality Craftsmanship",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Family Owned & Operated",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Residential & Commercial",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Free Estimates Available",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Customer Satisfaction Guaranteed",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="trust" data-section="trust">
|
|
<MetricCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
icon: Star,
|
|
title: "5-Star Rating",
|
|
value: "Across All Platforms",
|
|
},
|
|
{
|
|
id: "m2",
|
|
icon: UserCheck,
|
|
title: "56+ Verified Reviews",
|
|
value: "From Satisfied Clients",
|
|
},
|
|
{
|
|
id: "m3",
|
|
icon: Award,
|
|
title: "Licensed & Insured",
|
|
value: "For Your Peace of Mind",
|
|
},
|
|
{
|
|
id: "m4",
|
|
icon: Home,
|
|
title: "Family Owned",
|
|
value: "Since 3 Generations",
|
|
},
|
|
]}
|
|
title="Our Legacy of Trust & Excellence"
|
|
description="Building on generations of expertise and a commitment to customer satisfaction."
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureBento
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Metal Roofing",
|
|
description: "Durable, energy-efficient, and stylish metal roofing installations for modern homes and businesses.",
|
|
bentoComponent: "reveal-icon",
|
|
icon: Shield,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-silver-stars-background_23-2150160746.jpg",
|
|
imageAlt: "star rating icon gold",
|
|
},
|
|
{
|
|
title: "Roof Repair",
|
|
description: "Expert repair services for all types of roofs, addressing leaks, storm damage, and wear with lasting solutions.",
|
|
bentoComponent: "reveal-icon",
|
|
icon: Wrench,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/closeup-roof-house-made-wooden-tiles_169016-24747.jpg?_wi=2",
|
|
imageAlt: "star rating icon gold",
|
|
},
|
|
{
|
|
title: "Roof Installation",
|
|
description: "New roof installations using premium materials and proven techniques for superior performance and longevity.",
|
|
bentoComponent: "reveal-icon",
|
|
icon: Home,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/black-businessman-sad-expression_1194-2739.jpg?_wi=2",
|
|
imageAlt: "star rating icon gold",
|
|
},
|
|
{
|
|
title: "Commercial Roofing",
|
|
description: "Specialized roofing services for commercial properties, ensuring minimal disruption and maximum protection.",
|
|
bentoComponent: "reveal-icon",
|
|
icon: Building,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-successful-entrepreneur_1098-3855.jpg?_wi=2",
|
|
imageAlt: "star rating icon gold",
|
|
},
|
|
{
|
|
title: "Roof Inspection",
|
|
description: "Thorough roof inspections to identify potential issues and recommend proactive maintenance or repairs.",
|
|
bentoComponent: "reveal-icon",
|
|
icon: Search,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiley-architect-wearing-his-safety-equipment_23-2148242918.jpg?_wi=2",
|
|
imageAlt: "star rating icon gold",
|
|
},
|
|
{
|
|
title: "Emergency Roofing",
|
|
description: "Rapid response for urgent roofing needs, providing immediate protection against further damage.",
|
|
bentoComponent: "reveal-icon",
|
|
icon: Zap,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businesswoman-sunglasses-catching-car-business-centre_176420-5670.jpg?_wi=2",
|
|
imageAlt: "star rating icon gold",
|
|
},
|
|
]}
|
|
title="Comprehensive Roofing Solutions"
|
|
description="From initial inspection to flawless installation, we cover all your roofing needs with precision and care."
|
|
/>
|
|
</div>
|
|
|
|
<div id="gallery" data-section="gallery">
|
|
<ProductCardTwo
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "proj1",
|
|
brand: "Residential",
|
|
name: "Shingle Roof Replacement",
|
|
price: "View Project",
|
|
rating: 5,
|
|
reviewCount: "New Build",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-roofer-working-with-helmet_23-2149343710.jpg",
|
|
imageAlt: "Newly installed dark shingle roof on a modern residential home.",
|
|
},
|
|
{
|
|
id: "proj2",
|
|
brand: "Commercial",
|
|
name: "Flat Roof Resurfacing",
|
|
price: "View Project",
|
|
rating: 5,
|
|
reviewCount: "Renovation",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/factory_23-2148098549.jpg",
|
|
imageAlt: "Smooth, new flat roof on a commercial building after resurfacing.",
|
|
},
|
|
{
|
|
id: "proj3",
|
|
brand: "Residential",
|
|
name: "Tile Roof Restoration",
|
|
price: "View Project",
|
|
rating: 5,
|
|
reviewCount: "Restoration",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/tile-roof-texture_23-2148164702.jpg",
|
|
imageAlt: "Restored red clay tile roof on a traditional home, vibrant and clean.",
|
|
},
|
|
{
|
|
id: "proj4",
|
|
brand: "Industrial",
|
|
name: "Metal Roof Coating",
|
|
price: "View Project",
|
|
rating: 5,
|
|
reviewCount: "Maintenance",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-working-roof-together_23-2149343670.jpg",
|
|
imageAlt: "Clean, coated metal roof on an industrial building, shiny and protected.",
|
|
},
|
|
{
|
|
id: "proj5",
|
|
brand: "Residential",
|
|
name: "Full Roof Overhaul",
|
|
price: "View Project",
|
|
rating: 5,
|
|
reviewCount: "Full Replacement",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-symmetrical-old-brick-building_23-2148252746.jpg",
|
|
imageAlt: "Complete roof replacement on a suburban home, showcasing new shingles.",
|
|
},
|
|
{
|
|
id: "proj6",
|
|
brand: "Commercial",
|
|
name: "Flat Roof Sealant",
|
|
price: "View Project",
|
|
rating: 5,
|
|
reviewCount: "Upgrade",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/teenagers-roof_23-2147678119.jpg",
|
|
imageAlt: "Sealed and maintained flat roof on a commercial property, looking fresh.",
|
|
},
|
|
]}
|
|
title="Transformations You Can See"
|
|
description="Explore our portfolio of completed projects, showcasing the quality and craftsmanship we bring to every roof."
|
|
/>
|
|
</div>
|
|
|
|
<div id="why-choose-us" data-section="why-choose-us">
|
|
<MetricCardThree
|
|
animationType="depth-3d"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "w1",
|
|
icon: Users,
|
|
title: "Experienced Team",
|
|
value: "Certified & Skilled Professionals",
|
|
},
|
|
{
|
|
id: "w2",
|
|
icon: Activity,
|
|
title: "Fast Service",
|
|
value: "Efficient & Timely Project Completion",
|
|
},
|
|
{
|
|
id: "w3",
|
|
icon: Wallet,
|
|
title: "Affordable Pricing",
|
|
value: "Competitive Rates & Transparent Quotes",
|
|
},
|
|
{
|
|
id: "w4",
|
|
icon: Diamond,
|
|
title: "Premium Quality Materials",
|
|
value: "Durable & Long-Lasting Solutions",
|
|
},
|
|
{
|
|
id: "w5",
|
|
icon: Headphones,
|
|
title: "24/7 Support",
|
|
value: "Always Here When You Need Us",
|
|
},
|
|
]}
|
|
title="The JM Roofing Advantage"
|
|
description="Why generations of clients trust us for their most important roofing projects."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "t1",
|
|
name: "Robert D.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/country-music-interpret-singing-outdoors_23-2149498451.jpg",
|
|
},
|
|
{
|
|
id: "t2",
|
|
name: "Samantha K.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg",
|
|
},
|
|
{
|
|
id: "t3",
|
|
name: "James L.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-woman-outdoors_23-2149901729.jpg",
|
|
},
|
|
{
|
|
id: "t4",
|
|
name: "Olivia P.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-photogenic-blonde-woman-wearing-headphones_23-2148397120.jpg",
|
|
},
|
|
{
|
|
id: "t5",
|
|
name: "William B.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-jolly-man-home-feeling-happy-grateful-life_482257-123005.jpg",
|
|
},
|
|
{
|
|
id: "t6",
|
|
name: "Sophia G.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-happy-hr-manager-talking-female-candidate-cafe_1262-16890.jpg",
|
|
},
|
|
]}
|
|
cardTitle="Hear From Our Valued Clients"
|
|
cardTag="Customer Stories"
|
|
cardAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
useInvertedBackground={false}
|
|
tag="Our Story"
|
|
title="Built on a Legacy of Craftsmanship"
|
|
description="JM Roofing 3rd Generation stands as a testament to enduring quality and trust, passed down through a proud family heritage."
|
|
subdescription="For over three generations, our family has dedicated itself to mastering the art and science of roofing. We uphold a tradition of excellence, combining time-honored techniques with cutting-edge solutions to protect and enhance homes and businesses across the region. Every project is a personal commitment to the legacy of our name, ensuring superior durability, beauty, and reliability."
|
|
icon={Building2}
|
|
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-men-wearing-helmet_23-2148921379.jpg"
|
|
imageAlt="Three generations of roofing experts discussing a project blueprint."
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "radial-gradient",
|
|
}}
|
|
tag="Connect With Us"
|
|
title="Get Your Free Roofing Estimate Today!"
|
|
description="Ready to start your roofing project? Fill out the form below, and our team will get in touch to provide a no-obligation quote and expert consultation. We serve a wide area, ensuring top-tier service wherever you are."
|
|
inputPlaceholder="Your Email Address"
|
|
buttonText="Request a Free Estimate"
|
|
termsText="By clicking Request a Free Estimate, you're confirming that you agree with our Terms and Conditions."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/abstract-ferromagnetic-mirrored-metal-with-blurred-elements_23-2148253535.jpg"
|
|
imageAlt="Stylish roof background texture for footer"
|
|
logoText="JM Roofing 3rd Generation"
|
|
columns={[
|
|
{
|
|
title: "Services",
|
|
items: [
|
|
{
|
|
label: "Metal Roofing",
|
|
href: "#services",
|
|
},
|
|
{
|
|
label: "Roof Repair",
|
|
href: "#services",
|
|
},
|
|
{
|
|
label: "Roof Installation",
|
|
href: "#services",
|
|
},
|
|
{
|
|
label: "Commercial Roofing",
|
|
href: "#services",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{
|
|
label: "About Us",
|
|
href: "#about",
|
|
},
|
|
{
|
|
label: "Why Choose Us",
|
|
href: "#why-choose-us",
|
|
},
|
|
{
|
|
label: "Testimonials",
|
|
href: "#testimonials",
|
|
},
|
|
{
|
|
label: "Project Gallery",
|
|
href: "#gallery",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Contact",
|
|
items: [
|
|
{
|
|
label: "Get Free Estimate",
|
|
href: "#contact",
|
|
},
|
|
{
|
|
label: "Call Us",
|
|
href: "tel:+1-555-ROOF",
|
|
},
|
|
{
|
|
label: "Email Us",
|
|
href: "mailto:info@jmroofing.com",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 JM Roofing 3rd Generation. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|