Merge version_1 into main #2
337
src/app/page.tsx
337
src/app/page.tsx
@@ -32,26 +32,11 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Detail Rain Gutters Miami"
|
||||
/>
|
||||
@@ -59,113 +44,40 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
title="Premium Gutter Installation in Miami"
|
||||
description="Protect your home from Florida rain. We provide top-tier gutter installation, cleaning, and maintenance services for Miami residents."
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=q1a64p&_wi=1",
|
||||
imageAlt: "Gutter installation",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tzj5qt&_wi=1",
|
||||
imageAlt: "Gutter system",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g52u0r",
|
||||
imageAlt: "Gutter installation",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4t9fgx",
|
||||
imageAlt: "Gutter system",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=y9irh2",
|
||||
imageAlt: "Gutter installation",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=eigw9w",
|
||||
imageAlt: "Gutter system",
|
||||
},
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=q1a64p", imageAlt: "Gutter installation" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tzj5qt", imageAlt: "Gutter system" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g52u0r", imageAlt: "Gutter installation" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4t9fgx", imageAlt: "Gutter system" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=y9irh2", imageAlt: "Gutter installation" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=eigw9w", imageAlt: "Gutter system" },
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=beam5l",
|
||||
imageAlt: "Gutter system",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=81sh8k",
|
||||
imageAlt: "Gutter installation",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qpejw9",
|
||||
imageAlt: "Gutter system",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kgf37k",
|
||||
imageAlt: "Gutter installation",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8d3mjy",
|
||||
imageAlt: "Gutter system",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=455544",
|
||||
imageAlt: "Gutter installation",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Get a Free Quote",
|
||||
href: "#contact",
|
||||
},
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=beam5l", imageAlt: "Gutter system" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=81sh8k", imageAlt: "Gutter installation" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qpejw9", imageAlt: "Gutter system" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kgf37k", imageAlt: "Gutter installation" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8d3mjy", imageAlt: "Gutter system" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=455544", imageAlt: "Gutter installation" },
|
||||
]}
|
||||
buttons={[{ text: "Get a Free Quote", href: "#contact" }]}
|
||||
avatars={[
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=q1a64p",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g52u0r",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=y9irh2",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=81sh8k",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kgf37k",
|
||||
alt: "Customer",
|
||||
},
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=q1a64p", alt: "Customer" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=g52u0r", alt: "Customer" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=y9irh2", alt: "Customer" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=81sh8k", alt: "Customer" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kgf37k", alt: "Customer" },
|
||||
]}
|
||||
avatarText="Trusted by 1500+ happy Miami homeowners"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Licensed & Insured",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Expert Technicians",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Miami Local",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Fast Turnaround",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Affordable Pricing",
|
||||
},
|
||||
{ type: "text", text: "Licensed & Insured" },
|
||||
{ type: "text", text: "Expert Technicians" },
|
||||
{ type: "text", text: "Miami Local" },
|
||||
{ type: "text", text: "Fast Turnaround" },
|
||||
{ type: "text", text: "Affordable Pricing" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -178,7 +90,7 @@ export default function LandingPage() {
|
||||
description="With years of expertise in South Florida, we understand the importance of efficient water management for your home."
|
||||
subdescription="Our team uses high-quality materials and precise installation techniques to ensure your gutters withstand every tropical storm."
|
||||
icon={Shield}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bcsrqw&_wi=1"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bcsrqw"
|
||||
mediaAnimation="slide-up"
|
||||
imageAlt="Gutter maintenance expert"
|
||||
/>
|
||||
@@ -191,55 +103,25 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Seamless Installation",
|
||||
description: "Custom-fitted seamless gutters that perfectly match your roofline, preventing leaks and overflows.",
|
||||
icon: CheckCircle,
|
||||
title: "Seamless Installation", description: "Custom-fitted seamless gutters that perfectly match your roofline, preventing leaks and overflows.", icon: CheckCircle,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6djwcz",
|
||||
imageAlt: "Seamless installation",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=oyx5g4",
|
||||
imageAlt: "Gutter protection",
|
||||
},
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6djwcz", imageAlt: "Seamless installation" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=oyx5g4", imageAlt: "Gutter protection" },
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=q1a64p&_wi=2",
|
||||
imageAlt: "aluminum gutter installation",
|
||||
},
|
||||
{
|
||||
title: "Gutter Cleaning",
|
||||
description: "Thorough removal of debris, leaves, and buildup to ensure optimal water flow year-round.",
|
||||
icon: Zap,
|
||||
title: "Gutter Cleaning", description: "Thorough removal of debris, leaves, and buildup to ensure optimal water flow year-round.", icon: Zap,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wgr76b",
|
||||
imageAlt: "Cleaning service",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=obx3sx",
|
||||
imageAlt: "Gutter flow maintenance",
|
||||
},
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wgr76b", imageAlt: "Cleaning service" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=obx3sx", imageAlt: "Gutter flow maintenance" },
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tzj5qt&_wi=2",
|
||||
imageAlt: "aluminum gutter installation",
|
||||
},
|
||||
{
|
||||
title: "Gutter Guards",
|
||||
description: "Installation of high-efficiency gutter protection systems to keep debris out and maintenance minimal.",
|
||||
icon: Shield,
|
||||
title: "Gutter Guards", description: "Installation of high-efficiency gutter protection systems to keep debris out and maintenance minimal.", icon: Shield,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jl0g6x",
|
||||
imageAlt: "Gutter guards installation",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=eh9izl",
|
||||
imageAlt: "Protection screen",
|
||||
},
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jl0g6x", imageAlt: "Gutter guards installation" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=eh9izl", imageAlt: "Protection screen" },
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=bcsrqw&_wi=2",
|
||||
imageAlt: "aluminum gutter installation",
|
||||
},
|
||||
]}
|
||||
title="Our Professional Services"
|
||||
@@ -254,55 +136,16 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
badge: "Standard",
|
||||
price: "$150",
|
||||
subtitle: "Essential gutter cleaning package.",
|
||||
features: [
|
||||
"Gutter debris removal",
|
||||
"Downspout flush",
|
||||
"System inspection",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Select Plan",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
id: "basic", badge: "Standard", price: "$150", subtitle: "Essential gutter cleaning package.", features: ["Gutter debris removal", "Downspout flush", "System inspection"],
|
||||
buttons: [{ text: "Select Plan", href: "#contact" }],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
badge: "Popular",
|
||||
price: "$450",
|
||||
subtitle: "Premium protection and maintenance.",
|
||||
features: [
|
||||
"Installation of gutter guards",
|
||||
"Full system cleaning",
|
||||
"Priority support",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Select Plan",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
id: "pro", badge: "Popular", price: "$450", subtitle: "Premium protection and maintenance.", features: ["Installation of gutter guards", "Full system cleaning", "Priority support"],
|
||||
buttons: [{ text: "Select Plan", href: "#contact" }],
|
||||
},
|
||||
{
|
||||
id: "enterprise",
|
||||
badge: "Full Install",
|
||||
price: "Custom",
|
||||
subtitle: "Professional full installation.",
|
||||
features: [
|
||||
"Custom seamless gutters",
|
||||
"Full installation",
|
||||
"Warranty included",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Get Quote",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
id: "enterprise", badge: "Full Install", price: "Custom", subtitle: "Professional full installation.", features: ["Custom seamless gutters", "Full installation", "Warranty included"],
|
||||
buttons: [{ text: "Get Quote", href: "#contact" }],
|
||||
},
|
||||
]}
|
||||
title="Transparent Pricing"
|
||||
@@ -316,21 +159,9 @@ export default function LandingPage() {
|
||||
title="Serving Miami Families"
|
||||
tag="Our Growth"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "1500+",
|
||||
description: "Gutter Projects Completed",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "100%",
|
||||
description: "Customer Satisfaction Rate",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "12",
|
||||
description: "Years of Experience",
|
||||
},
|
||||
{ id: "m1", value: "1500+", description: "Gutter Projects Completed" },
|
||||
{ id: "m2", value: "100%", description: "Customer Satisfaction Rate" },
|
||||
{ id: "m3", value: "12", description: "Years of Experience" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -342,41 +173,11 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "John Smith",
|
||||
role: "Homeowner",
|
||||
testimonial: "Excellent service and very fast installation. My house stays dry now!",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6xkox2",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Elena Rodriguez",
|
||||
role: "Homeowner",
|
||||
testimonial: "Professional team. They explained everything clearly and the cleanup was perfect.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xycge9",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Michael Davis",
|
||||
role: "Property Manager",
|
||||
testimonial: "My first choice for all residential projects in Miami. Highly reliable.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vzaev5",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Sarah Miller",
|
||||
role: "Homeowner",
|
||||
testimonial: "Fantastic results. My new gutters are looking great and performing perfectly.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cbjyoq",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "David Wilson",
|
||||
role: "Homeowner",
|
||||
testimonial: "A reliable company that really cares about the customer satisfaction. Great work.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fo6vns",
|
||||
},
|
||||
{ id: "t1", name: "John Smith", role: "Homeowner", testimonial: "Excellent service and very fast installation. My house stays dry now!", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6xkox2" },
|
||||
{ id: "t2", name: "Elena Rodriguez", role: "Homeowner", testimonial: "Professional team. They explained everything clearly and the cleanup was perfect.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xycge9" },
|
||||
{ id: "t3", name: "Michael Davis", role: "Property Manager", testimonial: "My first choice for all residential projects in Miami. Highly reliable.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vzaev5" },
|
||||
{ id: "t4", name: "Sarah Miller", role: "Homeowner", testimonial: "Fantastic results. My new gutters are looking great and performing perfectly.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cbjyoq" },
|
||||
{ id: "t5", name: "David Wilson", role: "Homeowner", testimonial: "A reliable company that really cares about the customer satisfaction. Great work.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=fo6vns" },
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Read about experiences from your neighbors in Miami."
|
||||
@@ -387,21 +188,9 @@ export default function LandingPage() {
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "faq1",
|
||||
title: "How often should I clean my gutters?",
|
||||
content: "Generally twice a year, depending on foliage around your property.",
|
||||
},
|
||||
{
|
||||
id: "faq2",
|
||||
title: "Do you provide estimates?",
|
||||
content: "Yes, we offer free onsite inspections and estimates for every job.",
|
||||
},
|
||||
{
|
||||
id: "faq3",
|
||||
title: "What materials do you use?",
|
||||
content: "We use high-grade aluminum and durable accessories for all installations.",
|
||||
},
|
||||
{ id: "faq1", title: "How often should I clean my gutters?", content: "Generally twice a year, depending on foliage around your property." },
|
||||
{ id: "faq2", title: "Do you provide estimates?", content: "Yes, we offer free onsite inspections and estimates for every job." },
|
||||
{ id: "faq3", title: "What materials do you use?", content: "We use high-grade aluminum and durable accessories for all installations." },
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Get clear answers to the most common questions about our services."
|
||||
@@ -412,9 +201,7 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Get in Touch"
|
||||
title="Request Your Free Quote"
|
||||
description="Ready to protect your home? Send us your details and we will get back to you promptly."
|
||||
@@ -427,14 +214,8 @@ export default function LandingPage() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Detail Rain Gutters Miami"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Terms of Service",
|
||||
href: "#",
|
||||
}}
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user