bender/2ee2314f-db55-4750-87a1-e3519dd7cda7
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-06 18:26:25 +00:00
parent 1513f168ab
commit 0e862371d2
1 changed files with 158 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files

521
src/app/page.tsx
View File

@@ -17,380 +17,175 @@ import { Sparkles } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="medium"
sizing="largeSizeMediumTitles"
background="circleGradient"
cardStyle="gradient-mesh"
primaryButtonStyle="gradient"
secondaryButtonStyle="solid"
headingFontWeight="medium"
defaultButtonVariant="bounce-effect"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="medium"
sizing="largeSizeMediumTitles"
background="circleGradient"
cardStyle="gradient-mesh"
primaryButtonStyle="gradient"
secondaryButtonStyle="solid"
headingFontWeight="medium"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{
name: "Services",
id: "features",
},
{
name: "Roofing",
id: "products",
},
{
name: "Reviews",
id: "testimonials",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Atlantic Roofing"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{ name: "Services", id: "features" },
{ name: "Roofing", id: "products" },
{ name: "Reviews", id: "testimonials" },
{ name: "Contact", id: "contact" },
]}
brandName="Atlantic Roofing"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDualMedia
background={{
variant: "gradient-bars",
}}
title="Roofing Excellence in Miami"
description="Top-rated roofing services for residential and commercial properties. Quality materials, expert installation, and unmatched customer service."
tag="Expert Roofing Solutions"
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/modern-house-architecture-navy-roof-wooden-soffit-blue-sky_626616-509.jpg",
imageAlt: "New roof installation",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/young-asian-technician-man-standing-talking-smartphone-long-rows-photovoltaic-solar-panels-copy-space_1150-57278.jpg",
imageAlt: "Roofing professional working",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet_23-2149343634.jpg",
imageAlt: "Full shot man wearing protection helmet",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-roofer-working-with-protection-helmet_23-2149343637.jpg",
imageAlt: "Medium shot roofer working with protection helmet",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/man-working-roof-with-drill_23-2148748770.jpg",
imageAlt: "Man working on roof with a drill",
},
]}
mediaAnimation="slide-up"
rating={5}
ratingText="Trusted by 1000+ local homeowners"
tagIcon={Sparkles}
buttons={[
{
text: "Get a Free Quote",
href: "#contact",
},
{
text: "View Our Services",
href: "#features",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDualMedia
background={{ variant: "gradient-bars" }}
title="Roofing Excellence in Miami"
description="Top-rated roofing services for residential and commercial properties. Quality materials, expert installation, and unmatched customer service."
tag="Expert Roofing Solutions"
mediaItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-house-architecture-navy-roof-wooden-soffit-blue-sky_626616-509.jpg", imageAlt: "New roof installation" },
{ imageSrc: "http://img.b2bpic.net/free-photo/young-asian-technician-man-standing-talking-smartphone-long-rows-photovoltaic-solar-panels-copy-space_1150-57278.jpg", imageAlt: "Roofing professional working" }
]}
mediaAnimation="slide-up"
rating={5}
ratingText="Trusted by 1000+ local homeowners"
tagIcon={Sparkles}
buttons={[
{ text: "Get a Free Quote", href: "#contact" },
{ text: "View Our Services", href: "#features" },
]}
/>
</div>
<div id="about" data-section="about">
<TextAbout
useInvertedBackground={true}
tag="About Atlantic Roofing"
title="Decades of Protection, Thousands of Satisfied Clients"
buttons={[
{
text: "Learn More",
href: "#contact",
},
]}
/>
</div>
<div id="about" data-section="about">
<TextAbout
useInvertedBackground={true}
tag="About Atlantic Roofing"
title="Decades of Protection, Thousands of Satisfied Clients"
buttons={[{ text: "Learn More", href: "#contact" }]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyThree
animationType="slide-up"
textboxLayout="split-description"
useInvertedBackground={false}
features={[
{
id: "f1",
title: "Emergency Repair",
tags: [
"Fast",
"24/7",
],
imageSrc: "http://img.b2bpic.net/free-photo/man-holding-hammer-drill-looking-away_23-2148748783.jpg",
},
{
id: "f2",
title: "Precision Inspection",
tags: [
"Drone",
"Accurate",
],
imageSrc: "http://img.b2bpic.net/free-photo/top-view-blank-clipboard-keyboard-blueprint_23-2148183049.jpg",
},
{
id: "f3",
title: "Energy Efficient Roofs",
tags: [
"Eco",
"Cool",
],
imageSrc: "http://img.b2bpic.net/free-photo/chair-bed-around-swimming-pool-hotel_74190-6668.jpg",
},
{
id: "f4",
title: "Roof Replacement",
tags: [
"Full",
"Quality",
],
imageSrc: "http://img.b2bpic.net/free-photo/sideways-man-working-roof-with-drill_23-2148748771.jpg",
},
{
id: "f5",
title: "Leak Detection",
tags: [
"Pro",
"Dry",
],
imageSrc: "http://img.b2bpic.net/free-photo/man-engaged-household-task_23-2151741209.jpg",
},
]}
title="Our Core Services"
description="We specialize in end-to-end roofing management for the Miami area."
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyThree
animationType="slide-up"
textboxLayout="split-description"
useInvertedBackground={false}
features={[
{ id: "f1", title: "Emergency Repair", tags: ["Fast", "24/7"], imageSrc: "http://img.b2bpic.net/free-photo/man-holding-hammer-drill-looking-away_23-2148748783.jpg" },
{ id: "f2", title: "Precision Inspection", tags: ["Drone", "Accurate"], imageSrc: "http://img.b2bpic.net/free-photo/top-view-blank-clipboard-keyboard-blueprint_23-2148183049.jpg" },
{ id: "f3", title: "Energy Efficient Roofs", tags: ["Eco", "Cool"], imageSrc: "http://img.b2bpic.net/free-photo/chair-bed-around-swimming-pool-hotel_74190-6668.jpg" },
{ id: "f4", title: "Roof Replacement", tags: ["Full", "Quality"], imageSrc: "http://img.b2bpic.net/free-photo/sideways-man-working-roof-with-drill_23-2148748771.jpg" },
{ id: "f5", title: "Leak Detection", tags: ["Pro", "Dry"], imageSrc: "http://img.b2bpic.net/free-photo/man-engaged-household-task_23-2151741209.jpg" },
]}
title="Our Core Services"
description="We specialize in end-to-end roofing management for the Miami area."
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
products={[
{
id: "p1",
name: "Asphalt Shingles",
price: "From $4/sqft",
imageSrc: "http://img.b2bpic.net/free-photo/orange-grooved-metal-rooftops_53876-74730.jpg",
},
{
id: "p2",
name: "Metal Roofing",
price: "From $8/sqft",
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-modern-white-building-facade_181624-29733.jpg",
},
{
id: "p3",
name: "Clay Tiles",
price: "From $12/sqft",
imageSrc: "http://img.b2bpic.net/free-photo/tile-texture_1122-1283.jpg",
},
{
id: "p4",
name: "Flat Roofing",
price: "From $6/sqft",
imageSrc: "http://img.b2bpic.net/free-photo/wall_23-2148098660.jpg",
},
{
id: "p5",
name: "Green Roof System",
price: "From $15/sqft",
imageSrc: "http://img.b2bpic.net/free-photo/greenhouse-owner-presenting-flowers-options-potential-customer-retailer_158595-7023.jpg",
},
{
id: "p6",
name: "Slate Tile",
price: "From $20/sqft",
imageSrc: "http://img.b2bpic.net/free-photo/gray-slate-wall-textured-background_53876-101839.jpg",
},
]}
title="Roofing Solutions"
description="Premium materials matched to your style and budget."
/>
</div>
<div id="products" data-section="products">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
products={[
{ id: "p1", name: "Asphalt Shingles", price: "From $4/sqft", imageSrc: "http://img.b2bpic.net/free-photo/orange-grooved-metal-rooftops_53876-74730.jpg" },
{ id: "p2", name: "Metal Roofing", price: "From $8/sqft", imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-modern-white-building-facade_181624-29733.jpg" },
{ id: "p3", name: "Clay Tiles", price: "From $12/sqft", imageSrc: "http://img.b2bpic.net/free-photo/tile-texture_1122-1283.jpg" },
{ id: "p4", name: "Flat Roofing", price: "From $6/sqft", imageSrc: "http://img.b2bpic.net/free-photo/wall_23-2148098660.jpg" },
{ id: "p5", name: "Green Roof System", price: "From $15/sqft", imageSrc: "http://img.b2bpic.net/free-photo/greenhouse-owner-presenting-flowers-options-potential-customer-retailer_158595-7023.jpg" },
{ id: "p6", name: "Slate Tile", price: "From $20/sqft", imageSrc: "http://img.b2bpic.net/free-photo/gray-slate-wall-textured-background_53876-101839.jpg" },
]}
title="Roofing Solutions"
description="Premium materials matched to your style and budget."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "15,000+",
title: "Roofs Installed",
description: "Across Miami-Dade County",
imageSrc: "http://img.b2bpic.net/free-photo/image-multiethnic-woman-man-entrepreneurs-work-together-new-business-startup-project_273609-44843.jpg",
},
{
id: "m2",
value: "25+",
title: "Years Experience",
description: "Licensed and Insured",
imageSrc: "http://img.b2bpic.net/free-photo/man-working-roof-front-view_23-2148748780.jpg",
},
{
id: "m3",
value: "99%",
title: "Client Retention",
description: "Satisfaction guaranteed",
imageSrc: "http://img.b2bpic.net/free-photo/green-house-white-roof-with-blue-sky-sunny-day_1428-519.jpg",
},
{
id: "m4",
value: "50+",
title: "Certified Techs",
description: "On-staff professionals",
imageSrc: "http://img.b2bpic.net/free-photo/bottom-view-worker-sitting-brick-wall_259150-57719.jpg",
},
{
id: "m5",
value: "24/7",
title: "Emergency Availability",
description: "Ready when you need us",
imageSrc: "http://img.b2bpic.net/free-photo/worker-with-hard-hat-level-checking-roof-timber_23-2148748853.jpg",
},
]}
title="By the Numbers"
description="Quality we stand by."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "15,000+", title: "Roofs Installed", description: "Across Miami-Dade County", imageSrc: "http://img.b2bpic.net/free-photo/image-multiethnic-woman-man-entrepreneurs-work-together-new-business-startup-project_273609-44843.jpg" },
{ id: "m2", value: "25+", title: "Years Experience", description: "Licensed and Insured", imageSrc: "http://img.b2bpic.net/free-photo/man-working-roof-front-view_23-2148748780.jpg" },
{ id: "m3", value: "99%", title: "Client Retention", description: "Satisfaction guaranteed", imageSrc: "http://img.b2bpic.net/free-photo/green-house-white-roof-with-blue-sky-sunny-day_1428-519.jpg" },
{ id: "m4", value: "50+", title: "Certified Techs", description: "On-staff professionals", imageSrc: "http://img.b2bpic.net/free-photo/bottom-view-worker-sitting-brick-wall_259150-57719.jpg" },
{ id: "m5", value: "24/7", title: "Emergency Availability", description: "Ready when you need us", imageSrc: "http://img.b2bpic.net/free-photo/worker-with-hard-hat-level-checking-roof-timber_23-2148748853.jpg" },
]}
title="By the Numbers"
description="Quality we stand by."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
testimonials={[
{
id: "t1",
name: "Mark D.",
handle: "@mark_miami",
testimonial: "Excellent service and quick repair.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-middle-aged-businesswoman_1262-21005.jpg",
},
{
id: "t2",
name: "Sarah P.",
handle: "@sarahp_realestate",
testimonial: "Very professional and clean work.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-female-with-hair-bun-having-joyful-look-smiling-cheerfully-happy-with-some-positive-news_273609-9042.jpg",
},
{
id: "t3",
name: "Robert B.",
handle: "@rob_b",
testimonial: "Highly recommended for roof leaks.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/peaceful-young-happy-woman-with-short-curly-hair-pink-long-skirt-white-shirt-alone-outside-her-villa_343596-2888.jpg",
},
{
id: "t4",
name: "Jennifer K.",
handle: "@jenny_k",
testimonial: "Great team, fair prices.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/man-looking-camera-his-office_23-2148242891.jpg",
},
{
id: "t5",
name: "Alex W.",
handle: "@alex_w",
testimonial: "Best roofing in Miami hands down.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/managers-with-drinks_1098-14738.jpg",
},
]}
showRating={true}
title="What Our Clients Say"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
testimonials={[
{ id: "t1", name: "Mark D.", handle: "@mark_miami", testimonial: "Excellent service and quick repair.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/cheerful-middle-aged-businesswoman_1262-21005.jpg" },
{ id: "t2", name: "Sarah P.", handle: "@sarahp_realestate", testimonial: "Very professional and clean work.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-female-with-hair-bun-having-joyful-look-smiling-cheerfully-happy-with-some-positive-news_273609-9042.jpg" },
{ id: "t3", name: "Robert B.", handle: "@rob_b", testimonial: "Highly recommended for roof leaks.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/peaceful-young-happy-woman-with-short-curly-hair-pink-long-skirt-white-shirt-alone-outside-her-villa_343596-2888.jpg" },
{ id: "t4", name: "Jennifer K.", handle: "@jenny_k", testimonial: "Great team, fair prices.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-looking-camera-his-office_23-2148242891.jpg" },
{ id: "t5", name: "Alex W.", handle: "@alex_w", testimonial: "Best roofing in Miami hands down.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/managers-with-drinks_1098-14738.jpg" },
]}
showRating={true}
title="What Our Clients Say"
description="Read what our happy customers have to say about our roofing services."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{
id: "q1",
title: "Do you offer free estimates?",
content: "Yes, we provide free site inspections and estimates.",
},
{
id: "q2",
title: "Are you fully licensed?",
content: "We are fully licensed and insured in Miami-Dade.",
},
{
id: "q3",
title: "Do you offer financing?",
content: "We offer flexible financing options for all roofing projects.",
},
]}
sideTitle="Common Questions"
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{ id: "q1", title: "Do you offer free estimates?", content: "Yes, we provide free site inspections and estimates." },
{ id: "q2", title: "Are you fully licensed?", content: "We are fully licensed and insured in Miami-Dade." },
{ id: "q3", title: "Do you offer financing?", content: "We offer flexible financing options for all roofing projects." },
]}
sideTitle="Common Questions"
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={true}
background={{
variant: "plain",
}}
tag="Get In Touch"
title="Ready to Start Your Project?"
description="Send us your details and get a free quote."
imageSrc="http://img.b2bpic.net/free-photo/fashion-stylish-fit-tanned-european-woman-sunglasses-leopard-cami-top-biker-shorts-outside-villa-near-palm-tree_343596-580.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={true}
background={{ variant: "plain" }}
tag="Get In Touch"
title="Ready to Start Your Project?"
description="Send us your details and get a free quote."
imageSrc="http://img.b2bpic.net/free-photo/fashion-stylish-fit-tanned-european-woman-sunglasses-leopard-cami-top-biker-shorts-outside-villa-near-palm-tree_343596-580.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Atlantic Roofing"
columns={[
{
title: "Company",
items: [
{
label: "About",
href: "#about",
},
{
label: "Contact",
href: "#contact",
},
],
},
{
title: "Services",
items: [
{
label: "Repairs",
href: "#features",
},
{
label: "New Roofs",
href: "#products",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Atlantic Roofing"
columns={[
{
title: "Company", items: [
{ label: "About", href: "#about" },
{ label: "Contact", href: "#contact" },
],
},
{
title: "Services", items: [
{ label: "Repairs", href: "#features" },
{ label: "New Roofs", href: "#products" },
],
},
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);