200 lines
10 KiB
TypeScript
200 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
import { Award, Building2, Gauge, Home, RefreshCw, ShieldCheck } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
brandName="SD Roofing Pros"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCentered
|
|
background={{ variant: "gradient-bars" }}
|
|
title="San Diego's Premier Roofing Replacement & Repair"
|
|
description="Protect your home with expert roofing services built for San Diego weather. Quality repairs, reliable replacements, and 100% satisfaction guaranteed."
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/country-music-interpret-singing-outdoors_23-2149498452.jpg", alt: "Happy homeowner" },
|
|
{ src: "http://img.b2bpic.net/free-photo/cheerful-good-looking-young-caucasian-man-blue-t-shirt-gloves-smiling-with-teeth-being-tired-from-hard-work-garden-farmer-planting-leaves-countryside-house_176420-19908.jpg", alt: "Satisfied client" },
|
|
{ src: "http://img.b2bpic.net/free-photo/happy-family-near-new-house-real-estate-concept_493343-29881.jpg", alt: "Family member" },
|
|
{ src: "http://img.b2bpic.net/free-photo/side-view-couple-celebrating-birthday-together_23-2150598981.jpg", alt: "Senior resident" },
|
|
{ src: "http://img.b2bpic.net/free-photo/man-working-roof-front-view_23-2148748780.jpg", alt: "Roofing professional" }
|
|
]}
|
|
avatarText="Trusted by 500+ local homeowners"
|
|
buttons={[{ text: "Get a Free Quote", href: "#contact" }]}
|
|
marqueeItems={[
|
|
{ type: "text", text: "Licensed & Insured" },
|
|
{ type: "text", text: "24/7 Emergency Support" },
|
|
{ type: "text", text: "Local San Diego Team" },
|
|
{ type: "text", text: "Energy-Efficient Solutions" },
|
|
{ type: "text", text: "Satisfaction Guaranteed" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{ id: "m1", icon: ShieldCheck, title: "Licensed & Insured", value: "100%" },
|
|
{ id: "m2", icon: Award, title: "Years Experience", value: "20+" },
|
|
{ id: "m3", icon: Home, title: "Roofs Completed", value: "1.2k+" }
|
|
]}
|
|
title="Why Choose Our Roofing Experts"
|
|
description="Proven performance, unmatched quality, and dedicated local service."
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureHoverPattern
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{ icon: Building2, title: "Expert Repair", description: "Rapid response to leaks and storm damage." },
|
|
{ icon: RefreshCw, title: "Full Replacement", description: "Seamless, efficient roof replacement services." },
|
|
{ icon: Gauge, title: "Free Inspection", description: "Thorough professional analysis of your roof's condition." }
|
|
]}
|
|
title="Comprehensive Roofing Solutions"
|
|
description="From minor repairs to full-scale roof replacements, we have the skills and materials to protect your investment."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{ id: "p1", name: "Asphalt Shingles", price: "From $5/sq ft", variant: "Standard", imageSrc: "http://img.b2bpic.net/free-photo/detail-shot-stone-stairs_1359-889.jpg" },
|
|
{ id: "p2", name: "Metal Roofing", price: "From $12/sq ft", variant: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-13942.jpg" },
|
|
{ id: "p3", name: "Clay Tile", price: "From $15/sq ft", variant: "Classic", imageSrc: "http://img.b2bpic.net/free-photo/tile-roof-texture_23-2148164702.jpg" },
|
|
{ id: "p4", name: "Solar Tiles", price: "Custom Pricing", variant: "Eco", imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-smoking-roof_1321-1036.jpg" },
|
|
{ id: "p5", name: "Synthetic Slate", price: "From $10/sq ft", variant: "Durable", imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-15735.jpg" },
|
|
{ id: "p6", name: "Skylights", price: "From $800", variant: "Add-on", imageSrc: "http://img.b2bpic.net/free-photo/mother-son-go-around-apartment-toy-car_1157-31623.jpg" }
|
|
]}
|
|
title="Premium Roofing Materials"
|
|
description="Durable and aesthetic options to match any home design and budget."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "basic", title: "Basic Repair", price: "$450", period: "/per service", features: ["Leak detection", "Minor patching", "24-month warranty"],
|
|
button: { text: "Select", href: "#contact" },
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-working-roof-together_23-2149343670.jpg"
|
|
},
|
|
{
|
|
id: "standard", title: "Standard Replacement", price: "$12,000", period: "/avg roof", features: ["Quality asphalt shingles", "Waste removal", "5-year warranty"],
|
|
button: { text: "Select", href: "#contact" },
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-working-roof-with-drill_23-2148748774.jpg?_wi=1"
|
|
},
|
|
{
|
|
id: "premium", title: "Premium Installation", price: "$25,000", period: "/avg roof", features: ["Full solar integration", "Premium metal roofing", "10-year warranty"],
|
|
button: { text: "Select", href: "#contact" },
|
|
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-spraying-powder-paint_23-2149714282.jpg"
|
|
}
|
|
]}
|
|
title="Transparent Pricing Packages"
|
|
description="Clear options to help you choose the best roofing solution for your budget."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{ id: "t1", name: "John Doe", handle: "@john.doe", testimonial: "Excellent service and quick repair. Highly recommend!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-bench-with-laptop-talking-cellphone_23-2147891934.jpg" },
|
|
{ id: "t2", name: "Jane Smith", handle: "@jane.smith", testimonial: "My new roof looks fantastic. Very professional team.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-serious-confident-middle-aged-woman-with-gray-short-hair-green-eyes-wrinkles-charming-smile-posing-indoors-with-arms-folded_343059-3731.jpg" },
|
|
{ id: "t3", name: "Mike Johnson", handle: "@mike.j", testimonial: "Fair pricing and top-notch work quality.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiley-female-friends-taking-selfie-with-smartphone_23-2148708898.jpg" },
|
|
{ id: "t4", name: "Sarah Miller", handle: "@s.miller", testimonial: "Fastest roofing team in San Diego!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-senior-businesswoman_344912-1656.jpg" },
|
|
{ id: "t5", name: "David Brown", handle: "@d.brown", testimonial: "Efficient, professional, and very thorough.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/person-showcasing-their-home_23-2151624837.jpg" }
|
|
]}
|
|
showRating={true}
|
|
title="Happy San Diego Customers"
|
|
description="Don't take our word for it—see what our local clients have to say."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{ id: "f1", title: "How long does a replacement take?", content: "Typically 2-3 days for standard homes." },
|
|
{ id: "f2", title: "Do you provide financing?", content: "Yes, we offer various flexible financing plans." },
|
|
{ id: "f3", title: "Are you licensed in CA?", content: "Yes, fully licensed, bonded, and insured." }
|
|
]}
|
|
sideTitle="Common Roofing Questions"
|
|
sideDescription="Find quick answers to common questions about our repair and installation services."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={true}
|
|
background={{ variant: "gradient-bars" }}
|
|
tag="Contact Us"
|
|
title="Get Your Free Quote Today"
|
|
description="Ready to improve your home? Send us a message and our team will get back to you promptly."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/man-working-roof-with-drill_23-2148748774.jpg?_wi=2"
|
|
logoText="SD Roofing Pros"
|
|
columns={[
|
|
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Services", href: "#services" }] },
|
|
{ title: "Contact", items: [{ label: "Support", href: "#contact" }, { label: "Location", href: "#" }] }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|