Update src/app/page.tsx

This commit is contained in:
2026-05-04 16:17:54 +00:00
parent 5f23b7bab4
commit 1a67e1d3af

View File

@@ -16,348 +16,156 @@ import { Building2, RefreshCw, Search, Wrench } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="compact"
sizing="medium"
background="noiseDiagonalGradient"
cardStyle="soft-shadow"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="radial-glow"
headingFontWeight="semibold"
defaultButtonVariant="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="compact"
sizing="medium"
background="noiseDiagonalGradient"
cardStyle="soft-shadow"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="radial-glow"
headingFontWeight="semibold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Services",
id: "services",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Roofing Specialists"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Services", id: "services" },
{ name: "Contact", id: "contact" }
]}
brandName="Roofing Specialists"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardTestimonial
background={{
variant: "gradient-bars",
}}
title="Protecting San Diego Homes with Expert Roofing"
description="Professional, reliable, and high-quality roofing services. From inspections to full replacements, we've got San Diego covered."
testimonials={[
{
name: "Sarah Miller",
handle: "@sarah_m",
testimonial: "Excellent service. My new roof looks fantastic and was finished on time.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/collaboration-two-carpenters-building_329181-15617.jpg",
},
{
name: "James Rodriguez",
handle: "@jr_sd",
testimonial: "Highly recommended for any roofing repairs in San Diego.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-near-house-looking-camera_259150-59313.jpg",
},
{
name: "Elena Carter",
handle: "@ecarter",
testimonial: "Very professional and detailed inspection report.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-people-with-tablet_23-2149068607.jpg",
},
{
name: "Robert Kim",
handle: "@robert_k",
testimonial: "The best roofing company we have worked with.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/family-with-newborns_1157-8120.jpg",
},
{
name: "Lisa Wang",
handle: "@lisawang",
testimonial: "Top quality materials and great workmanship.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-shaking-hands_23-2148920604.jpg",
},
]}
buttons={[
{
text: "Get Free Quote",
href: "#contact",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/man-working-roof-medium-shot_23-2149343644.jpg"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/man-engaged-household-task_23-2151741210.jpg",
alt: "Man engaged in household task",
},
{
src: "http://img.b2bpic.net/free-photo/construction-worker-doing-his-job-with-belt_23-2149343658.jpg",
alt: "Construction worker doing his job with belt",
},
{
src: "http://img.b2bpic.net/free-photo/bearded-man-smoking-roof_1321-1036.jpg",
alt: "Bearded man smoking on the roof ",
},
{
src: "http://img.b2bpic.net/free-photo/man-sitting-roof_23-2148748778.jpg",
alt: "Man sitting on the roof",
},
{
src: "http://img.b2bpic.net/free-photo/man-with-raised-fist-celebrating_1187-3131.jpg",
alt: "Man with a raised fist celebrating",
},
]}
marqueeItems={[
{
type: "text",
text: "Licensed & Insured",
},
{
type: "text",
text: "20+ Years Experience",
},
{
type: "text",
text: "Satisfaction Guaranteed",
},
{
type: "text",
text: "San Diego Local",
},
{
type: "text",
text: "High-Quality Materials",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardTestimonial
background={{ variant: "gradient-bars" }}
title="Protecting San Diego Homes with Expert Roofing"
description="Professional, reliable, and high-quality roofing services. From inspections to full replacements, we've got San Diego covered."
testimonials={[
{ name: "Sarah Miller", handle: "@sarah_m", testimonial: "Excellent service. My new roof looks fantastic and was finished on time.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/collaboration-two-carpenters-building_329181-15617.jpg" },
{ name: "James Rodriguez", handle: "@jr_sd", testimonial: "Highly recommended for any roofing repairs in San Diego.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-near-house-looking-camera_259150-59313.jpg" },
{ name: "Elena Carter", handle: "@ecarter", testimonial: "Very professional and detailed inspection report.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-people-with-tablet_23-2149068607.jpg" },
{ name: "Robert Kim", handle: "@robert_k", testimonial: "The best roofing company we have worked with.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/family-with-newborns_1157-8120.jpg" },
{ name: "Lisa Wang", handle: "@lisawang", testimonial: "Top quality materials and great workmanship.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-shaking-hands_23-2148920604.jpg" }
]}
buttons={[{ text: "Get Free Quote", href: "#contact" }]}
imageSrc="http://img.b2bpic.net/free-photo/man-working-roof-medium-shot_23-2149343644.jpg"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/man-engaged-household-task_23-2151741210.jpg", alt: "Man engaged in household task" },
{ src: "http://img.b2bpic.net/free-photo/construction-worker-doing-his-job-with-belt_23-2149343658.jpg", alt: "Construction worker doing his job with belt" },
{ src: "http://img.b2bpic.net/free-photo/bearded-man-smoking-roof_1321-1036.jpg", alt: "Bearded man smoking on the roof" },
{ src: "http://img.b2bpic.net/free-photo/man-sitting-roof_23-2148748778.jpg", alt: "Man sitting on the roof" },
{ src: "http://img.b2bpic.net/free-photo/man-with-raised-fist-celebrating_1187-3131.jpg", alt: "Man with a raised fist celebrating" }
]}
marqueeItems={[
{ type: "text", text: "Licensed & Insured" },
{ type: "text", text: "20+ Years Experience" },
{ type: "text", text: "Satisfaction Guaranteed" },
{ type: "text", text: "San Diego Local" },
{ type: "text", text: "High-Quality Materials" }
]}
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
useInvertedBackground={false}
title="Your Local Roofing Experts"
description={[
"For over 20 years, we have provided San Diego residents with superior roofing solutions.",
"Our mission is to provide safety, durability, and aesthetics for every roof we install.",
]}
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
useInvertedBackground={false}
title="Your Local Roofing Experts"
description={[
"For over 20 years, we have provided San Diego residents with superior roofing solutions.", "Our mission is to provide safety, durability, and aesthetics for every roof we install."
]}
/>
</div>
<div id="services" data-section="services">
<FeatureHoverPattern
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
features={[
{
title: "Roof Installation",
description: "New roof installation with high-quality materials.",
icon: Building2,
},
{
title: "Roof Repair",
description: "Prompt repairs for leaks, tiles, and shingle damage.",
icon: Wrench,
},
{
title: "Inspection",
description: "Professional roof inspection for your peace of mind.",
icon: Search,
},
{
title: "Roof Replacement",
description: "Complete replacement services for aging roofs.",
icon: RefreshCw,
},
]}
title="Our Roofing Services"
description="Comprehensive roofing solutions tailored to your home's unique requirements."
/>
</div>
<div id="services" data-section="services">
<FeatureHoverPattern
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
features={[
{ title: "Roof Installation", description: "New roof installation with high-quality materials.", icon: Building2 },
{ title: "Roof Repair", description: "Prompt repairs for leaks, tiles, and shingle damage.", icon: Wrench },
{ title: "Inspection", description: "Professional roof inspection for your peace of mind.", icon: Search },
{ title: "Roof Replacement", description: "Complete replacement services for aging roofs.", icon: RefreshCw }
]}
title="Our Roofing Services"
description="Comprehensive roofing solutions tailored to your home's unique requirements."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "20+",
title: "Years Experience",
items: [
"Serving SD",
"Fully Licensed",
],
},
{
id: "m2",
value: "5k+",
title: "Projects Completed",
items: [
"Satisfied Clients",
"Reliable Results",
],
},
{
id: "m3",
value: "100%",
title: "Satisfaction Rate",
items: [
"Guarantee",
"High Quality",
],
},
]}
title="Why Choose Us?"
description="Proven results for San Diego homeowners."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "20+", title: "Years Experience", items: ["Serving SD", "Fully Licensed"] },
{ id: "m2", value: "5k+", title: "Projects Completed", items: ["Satisfied Clients", "Reliable Results"] },
{ id: "m3", value: "100%", title: "Satisfaction Rate", items: ["Guarantee", "High Quality"] }
]}
title="Why Choose Us?"
description="Proven results for San Diego homeowners."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
textboxLayout="split"
useInvertedBackground={true}
testimonials={[
{
id: "t1",
title: "Great Work",
quote: "Reliable and honest.",
name: "Alice P.",
role: "Client",
imageSrc: "http://img.b2bpic.net/free-photo/two-people-working-warehouse_329181-12852.jpg",
},
{
id: "t2",
title: "Efficient",
quote: "Fast installation.",
name: "Bob D.",
role: "Client",
imageSrc: "http://img.b2bpic.net/free-photo/photo-black-woman-caucasian-guy-have-outdoor-walk-stand-closely_273609-18072.jpg",
},
{
id: "t3",
title: "Professional",
quote: "Highly recommend.",
name: "Charlie S.",
role: "Client",
imageSrc: "http://img.b2bpic.net/free-photo/young-man-holding-house-model-showing-winner-gesture-shirt-vest-hat-looking-happy-front-view_176474-30662.jpg",
},
{
id: "t4",
title: "Exceptional",
quote: "Best roofers in SD.",
name: "Diana V.",
role: "Client",
imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-safety-helmet-giving-hand-shake_23-2148242884.jpg",
},
{
id: "t5",
title: "Quality",
quote: "Sturdy and well done.",
name: "Edward M.",
role: "Client",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-portrait-beautiful-woman_23-2148317338.jpg",
},
]}
title="Client Reviews"
description="See what our clients say about our services."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
textboxLayout="split"
useInvertedBackground={true}
testimonials={[
{ id: "t1", title: "Great Work", quote: "Reliable and honest.", name: "Alice P.", role: "Client", imageSrc: "http://img.b2bpic.net/free-photo/two-people-working-warehouse_329181-12852.jpg" },
{ id: "t2", title: "Efficient", quote: "Fast installation.", name: "Bob D.", role: "Client", imageSrc: "http://img.b2bpic.net/free-photo/photo-black-woman-caucasian-guy-have-outdoor-walk-stand-closely_273609-18072.jpg" },
{ id: "t3", title: "Professional", quote: "Highly recommend.", name: "Charlie S.", role: "Client", imageSrc: "http://img.b2bpic.net/free-photo/young-man-holding-house-model-showing-winner-gesture-shirt-vest-hat-looking-happy-front-view_176474-30662.jpg" },
{ id: "t4", title: "Exceptional", quote: "Best roofers in SD.", name: "Diana V.", role: "Client", imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-safety-helmet-giving-hand-shake_23-2148242884.jpg" },
{ id: "t5", title: "Quality", quote: "Sturdy and well done.", name: "Edward M.", role: "Client", imageSrc: "http://img.b2bpic.net/free-photo/front-view-portrait-beautiful-woman_23-2148317338.jpg" }
]}
title="Client Reviews"
description="See what our clients say about our services."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "How long does a roof last?",
content: "Depending on materials, 20-50 years.",
},
{
id: "f2",
title: "Do you provide estimates?",
content: "Yes, we offer free estimates.",
},
{
id: "f3",
title: "Are you licensed?",
content: "Yes, fully licensed and insured.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/mid-section-view-two-businessman-with-folder-clipboard_23-2147839930.jpg"
mediaAnimation="slide-up"
title="Common Questions"
description="Answers to frequently asked roofing questions."
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{ id: "f1", title: "How long does a roof last?", content: "Depending on materials, 20-50 years." },
{ id: "f2", title: "Do you provide estimates?", content: "Yes, we offer free estimates." },
{ id: "f3", title: "Are you licensed?", content: "Yes, fully licensed and insured." }
]}
imageSrc="http://img.b2bpic.net/free-photo/mid-section-view-two-businessman-with-folder-clipboard_23-2147839930.jpg"
mediaAnimation="slide-up"
title="Common Questions"
description="Answers to frequently asked roofing questions."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={true}
background={{
variant: "plain",
}}
title="Contact Us for a Free Quote"
description="Ready to get started? Reach out to us today."
imageSrc="http://img.b2bpic.net/free-photo/blueprint-calculator-helmet_23-2147785587.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
tag="Contact"
useInvertedBackground={true}
background={{ variant: "plain" }}
title="Contact Us for a Free Quote"
description="Ready to get started? Reach out to us today."
imageSrc="http://img.b2bpic.net/free-photo/blueprint-calculator-helmet_23-2147785587.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="Roofing Specialists"
columns={[
{
title: "Company",
items: [
{
label: "About",
href: "#about",
},
{
label: "Services",
href: "#services",
},
],
},
{
title: "Support",
items: [
{
label: "FAQ",
href: "#faq",
},
{
label: "Contact",
href: "#contact",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="Roofing Specialists"
columns={[
{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Services", href: "#services" }] },
{ title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);