Merge version_1 into main #1
342
src/app/page.tsx
342
src/app/page.tsx
@@ -17,262 +17,108 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Why Us",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="ROOF SQUAD"
|
||||
button={{
|
||||
text: "Free Estimate",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Why Us", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="ROOF SQUAD"
|
||||
button={{ text: "Free Estimate", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "rotated-rays-animated",
|
||||
}}
|
||||
title="Holtsville's Premier Roofing Authority"
|
||||
description="34+ Years of military-grade precision and unmatched excellence. We don't cut corners—we build roofs that last a lifetime."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Your Free Estimate",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "View Our Services",
|
||||
href: "#services",
|
||||
},
|
||||
]}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "1",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BVK0OoH0teYLU2GnQJdr68c1ju/luxury-modern-residential-roof-with-prem-1774568608644-ea315146.png",
|
||||
imageAlt: "High-end luxury residential roof",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BVK0OoH0teYLU2GnQJdr68c1ju/close-up-high-end-roof-construction-prem-1774568607983-848655b3.png",
|
||||
imageAlt: "Professional roof installation",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BVK0OoH0teYLU2GnQJdr68c1ju/close-up-of-premium-slate-shingles-crisp-1774568608407-5c3148de.png",
|
||||
imageAlt: "Close up shingles",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BVK0OoH0teYLU2GnQJdr68c1ju/professional-roofing-team-working-on-a-h-1774568608219-66e985f6.png",
|
||||
imageAlt: "Roofing crew project",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BVK0OoH0teYLU2GnQJdr68c1ju/finished-premium-roof-project-on-a-beaut-1774568608376-692c74e2.png",
|
||||
imageAlt: "Residential roofing finished",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BVK0OoH0teYLU2GnQJdr68c1ju/aerial-view-of-a-custom-luxury-estate-ro-1774568608688-4aed0ae7.png",
|
||||
imageAlt: "Luxury mansion roofing",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
title="Holtsville's Premier Roofing Authority"
|
||||
description="34+ Years of military-grade precision and unmatched excellence. We don't cut corners—we build roofs that last a lifetime."
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
carouselItems={[
|
||||
{ id: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BVK0OoH0teYLU2GnQJdr68c1ju/luxury-modern-residential-roof-with-prem-1774568608644-ea315146.png", imageAlt: "Luxury modern residential roof with premium architectural shingles" },
|
||||
{ id: "2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BVK0OoH0teYLU2GnQJdr68c1ju/close-up-high-end-roof-construction-prem-1774568607983-848655b3.png", imageAlt: "Close up high-end roof construction" },
|
||||
{ id: "3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BVK0OoH0teYLU2GnQJdr68c1ju/close-up-of-premium-slate-shingles-crisp-1774568608407-5c3148de.png", imageAlt: "Close-up of premium slate shingles" },
|
||||
{ id: "4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BVK0OoH0teYLU2GnQJdr68c1ju/professional-roofing-team-working-on-a-h-1774568608219-66e985f6.png", imageAlt: "Professional roofing team working on a high-end mansion roof" },
|
||||
{ id: "5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BVK0OoH0teYLU2GnQJdr68c1ju/finished-premium-roof-project-on-a-beaut-1774568608376-692c74e2.png", imageAlt: "Finished premium roof project on a beautiful home" },
|
||||
{ id: "6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BVK0OoH0teYLU2GnQJdr68c1ju/aerial-view-of-a-custom-luxury-estate-ro-1774568608688-4aed0ae7.png", imageAlt: "Aerial view of a custom luxury estate roof" }
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Get Your Free Estimate", href: "#contact" },
|
||||
{ text: "View Our Services", href: "#services" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="The Roof Squad Difference"
|
||||
metrics={[
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
label: "Years in Business",
|
||||
value: "34+",
|
||||
},
|
||||
{
|
||||
icon: Star,
|
||||
label: "Google Rating",
|
||||
value: "5.0",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
label: "Happy Customers",
|
||||
value: "2,400+",
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
label: "Satisfaction Rate",
|
||||
value: "98%",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
title="The Roof Squad Difference"
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ icon: ShieldCheck, label: "Years in Business", value: "34+" },
|
||||
{ icon: Star, label: "Google Rating", value: "5.0" },
|
||||
{ icon: Users, label: "Happy Customers", value: "2,400+" },
|
||||
{ icon: Award, label: "Satisfaction Rate", value: "98%" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "s1",
|
||||
title: "New Roof Installation",
|
||||
description: "Full-service replacement and installation using premium materials.",
|
||||
media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BVK0OoH0teYLU2GnQJdr68c1ju/new-roof-installation-site-clean-equipme-1774568608352-a57d858a.png",
|
||||
imageAlt: "New roof installation site",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: Check,
|
||||
text: "Lifetime Guarantee",
|
||||
},
|
||||
{
|
||||
icon: Check,
|
||||
text: "Expert Craftsmanship",
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
{
|
||||
id: "s2",
|
||||
title: "Emergency Repairs",
|
||||
description: "Fast, reliable 24/7 support for leaks and storm damage.",
|
||||
media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BVK0OoH0teYLU2GnQJdr68c1ju/storm-damaged-roof-repair-focused-work-h-1774568608624-932e0df0.png",
|
||||
imageAlt: "Storm damaged roof repair",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: Check,
|
||||
text: "Rapid Response",
|
||||
},
|
||||
{
|
||||
icon: Check,
|
||||
text: "Insurance Assistance",
|
||||
},
|
||||
],
|
||||
reverse: true,
|
||||
},
|
||||
{
|
||||
id: "s3",
|
||||
title: "Maintenance Plans",
|
||||
description: "Extend your roof lifespan with proactive annual inspections.",
|
||||
media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BVK0OoH0teYLU2GnQJdr68c1ju/detailed-roof-inspection-with-binoculars-1774568607945-a52aa167.png",
|
||||
imageAlt: "Detailed roof inspection",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: Check,
|
||||
text: "Regular Inspections",
|
||||
},
|
||||
{
|
||||
icon: Check,
|
||||
text: "Minor Repair Fixes",
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
]}
|
||||
title="Premium Roofing Services"
|
||||
description="Comprehensive care for your property, backed by decades of expertise."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTen
|
||||
title="Premium Roofing Services"
|
||||
description="Comprehensive care for your property, backed by decades of expertise."
|
||||
textboxLayout="split"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "s1", title: "New Roof Installation", description: "Full-service replacement and installation using premium materials.", media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BVK0OoH0teYLU2GnQJdr68c1ju/new-roof-installation-site-clean-equipme-1774568608352-a57d858a.png" }, items: [{ icon: Check, text: "Lifetime Guarantee" }, { icon: Check, text: "Expert Craftsmanship" }], reverse: false },
|
||||
{ id: "s2", title: "Emergency Repairs", description: "Fast, reliable 24/7 support for leaks and storm damage.", media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BVK0OoH0teYLU2GnQJdr68c1ju/storm-damaged-roof-repair-focused-work-h-1774568608624-932e0df0.png" }, items: [{ icon: Check, text: "Rapid Response" }, { icon: Check, text: "Insurance Assistance" }], reverse: true },
|
||||
{ id: "s3", title: "Maintenance Plans", description: "Extend your roof lifespan with proactive annual inspections.", media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BVK0OoH0teYLU2GnQJdr68c1ju/detailed-roof-inspection-with-binoculars-1774568607945-a52aa167.png" }, items: [{ icon: Check, text: "Regular Inspections" }, { icon: Check, text: "Minor Repair Fixes" }], reverse: false }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={true}
|
||||
testimonial="Roof Squad made my roof repair experience completely stress-free. Jimmy and his team were professional, on time, and the quality is unmatched. Truly the best in the business."
|
||||
rating={5}
|
||||
author="Hailey Barber"
|
||||
avatars={[
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BVK0OoH0teYLU2GnQJdr68c1ju/happy-customer-testimonial-avatar-1774568609441-9d153930.png",
|
||||
alt: "Customer Review",
|
||||
},
|
||||
]}
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
testimonial="Roof Squad made my roof repair experience completely stress-free. Jimmy and his team were professional, on time, and the quality is unmatched. Truly the best in the business."
|
||||
rating={5}
|
||||
author="Hailey Barber"
|
||||
avatars={[{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BVK0OoH0teYLU2GnQJdr68c1ju/happy-customer-testimonial-avatar-1774568609441-9d153930.png", alt: "Customer Review" }]}
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="blur-reveal"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
text="Ready to experience the Roof Squad standard? Let's protect your home today."
|
||||
buttons={[
|
||||
{
|
||||
text: "Request Free Quote",
|
||||
href: "tel:555-555-5555",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
text="Ready to experience the Roof Squad standard? Let's protect your home today."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
buttons={[{ text: "Request Free Quote", href: "tel:555-555-5555" }]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BVK0OoH0teYLU2GnQJdr68c1ju/minimalist-shield-logo-with-roofline-ico-1774568607890-8270abf9.png"
|
||||
columns={[
|
||||
{
|
||||
title: "Service Areas",
|
||||
items: [
|
||||
{
|
||||
label: "Holtsville",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Long Island",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
{
|
||||
label: "555-ROOF-SQUAD",
|
||||
href: "tel:5555555555",
|
||||
},
|
||||
{
|
||||
label: "jimmy@roofsquad.com",
|
||||
href: "mailto:jimmy@roofsquad.com",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
imageAlt="Roof Squad Logo"
|
||||
copyrightText="© 2025 | Roof Squad. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BVK0OoH0teYLU2GnQJdr68c1ju/minimalist-shield-logo-with-roofline-ico-1774568607890-8270abf9.png"
|
||||
columns={[
|
||||
{ title: "Service Areas", items: [{ label: "Holtsville", href: "#" }, { label: "Long Island", href: "#" }] },
|
||||
{ title: "Contact", items: [{ label: "555-ROOF-SQUAD", href: "tel:5555555555" }, { label: "jimmy@roofsquad.com", href: "mailto:jimmy@roofsquad.com" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user