Update src/app/page.tsx
This commit is contained in:
472
src/app/page.tsx
472
src/app/page.tsx
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user