Update src/app/page.tsx
This commit is contained in:
476
src/app/page.tsx
476
src/app/page.tsx
@@ -19,346 +19,164 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
{
|
||||
name: "Projects",
|
||||
id: "#projects",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="Roady Exteriors"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Projects", id: "#projects" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="Roady Exteriors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Crafting Luxury Exteriors for Your Home"
|
||||
description="Premium roofing, siding, and renovation services for the most discerning homeowners. Quality that lasts, service that exceeds expectations."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get a Consultation",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet_23-2149343634.jpg?_wi=1"
|
||||
showBlur={true}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/closeup-roof-house-made-wooden-tiles_169016-25417.jpg",
|
||||
alt: "Homeowner profile",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/full-shot-smiley-man-working-roof_23-2149343672.jpg",
|
||||
alt: "Homeowner profile",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/construction-worker-doing-his-job-with-belt_23-2149343658.jpg",
|
||||
alt: "Homeowner profile",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/closeup-roof-house-made-wooden-tiles_169016-24989.jpg",
|
||||
alt: "Homeowner profile",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-home-with-heater_23-2149339547.jpg",
|
||||
alt: "Homeowner profile",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 500+ local homeowners"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Crafting Luxury Exteriors for Your Home"
|
||||
description="Premium roofing, siding, and renovation services for the most discerning homeowners. Quality that lasts, service that exceeds expectations."
|
||||
buttons={[{ text: "Get a Consultation", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet_23-2149343634.jpg"
|
||||
showBlur={true}
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/closeup-roof-house-made-wooden-tiles_169016-25417.jpg", alt: "Homeowner profile" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/full-shot-smiley-man-working-roof_23-2149343672.jpg", alt: "Homeowner profile" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/construction-worker-doing-his-job-with-belt_23-2149343658.jpg", alt: "Homeowner profile" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/closeup-roof-house-made-wooden-tiles_169016-24989.jpg", alt: "Homeowner profile" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-home-with-heater_23-2149339547.jpg", alt: "Homeowner profile" },
|
||||
]}
|
||||
avatarText="Trusted by 500+ local homeowners"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Decades of Excellence in Construction"
|
||||
description="At Roady Exteriors, we believe that every home deserves a masterpiece exterior. We leverage premium materials and master craftsmanship to deliver results that stand the test of time."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Precision Workmanship",
|
||||
description: "Every nail, tile, and joint is placed with absolute accuracy.",
|
||||
},
|
||||
{
|
||||
title: "Premium Materials",
|
||||
description: "We source the best industry-leading materials for long-term durability.",
|
||||
},
|
||||
{
|
||||
title: "Customer First",
|
||||
description: "Your satisfaction is our only metric of success.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-men-working-together_23-2149343659.jpg?_wi=1"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Decades of Excellence in Construction"
|
||||
description="At Roady Exteriors, we believe that every home deserves a masterpiece exterior. We leverage premium materials and master craftsmanship to deliver results that stand the test of time."
|
||||
bulletPoints={[
|
||||
{ title: "Precision Workmanship", description: "Every nail, tile, and joint is placed with absolute accuracy." },
|
||||
{ title: "Premium Materials", description: "We source the best industry-leading materials for long-term durability." },
|
||||
{ title: "Customer First", description: "Your satisfaction is our only metric of success." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-men-working-together_23-2149343659.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Roofing Solutions",
|
||||
description: "Complete roof replacements and repairs.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-using-hammer-job-site_23-2150530686.jpg",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-working-mdf-boards-warehouse_23-2149384864.jpg",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet_23-2149343634.jpg?_wi=2",
|
||||
imageAlt: "roofing installation close up",
|
||||
},
|
||||
{
|
||||
title: "Siding Installation",
|
||||
description: "High-grade fiber cement and vinyl siding options.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-walking-roof_1321-1040.jpg",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-15653.jpg",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-working-together_23-2149343659.jpg?_wi=2",
|
||||
imageAlt: "roofing installation close up",
|
||||
},
|
||||
{
|
||||
title: "Gutters & Drainage",
|
||||
description: "Advanced drainage systems to protect your foundation.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-wooden-toolbox-with-different-tools_23-2148428300.jpg",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-drinking-water-after-workout_23-2148856740.jpg",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/roof-pattern_1203-3266.jpg?_wi=1",
|
||||
imageAlt: "roofing installation close up",
|
||||
},
|
||||
]}
|
||||
showStepNumbers={false}
|
||||
title="Comprehensive Exterior Services"
|
||||
description="Everything your home needs to stay beautiful, safe, and protected."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Roofing Solutions", description: "Complete roof replacements and repairs.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/construction-worker-using-hammer-job-site_23-2150530686.jpg" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/man-working-mdf-boards-warehouse_23-2149384864.jpg" }
|
||||
},
|
||||
{
|
||||
title: "Siding Installation", description: "High-grade fiber cement and vinyl siding options.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/man-walking-roof_1321-1040.jpg" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-15653.jpg" }
|
||||
},
|
||||
{
|
||||
title: "Gutters & Drainage", description: "Advanced drainage systems to protect your foundation.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-wooden-toolbox-with-different-tools_23-2148428300.jpg" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/woman-drinking-water-after-workout_23-2148856740.jpg" }
|
||||
}
|
||||
]}
|
||||
showStepNumbers={false}
|
||||
title="Comprehensive Exterior Services"
|
||||
description="Everything your home needs to stay beautiful, safe, and protected."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="projects" data-section="projects">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Luxury Manor Roof",
|
||||
price: "Custom Pricing",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/roof-pattern_1203-3266.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Modern Siding Install",
|
||||
price: "Custom Pricing",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-house-with-chimney-blue-sky_23-2149627194.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Copper Gutters",
|
||||
price: "Custom Pricing",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/old-tiles-roof-background_1373-13.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Victorian Restoration",
|
||||
price: "Custom Pricing",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/combination-makeup-textures_23-2150039217.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Modern Farmhouse Roof",
|
||||
price: "Custom Pricing",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/contrasting-outdoor-texture-design_23-2149756549.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Stone Veneer Exterior",
|
||||
price: "Custom Pricing",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-eye-shadow-cosmetic_74190-573.jpg",
|
||||
},
|
||||
]}
|
||||
title="Featured Exterior Projects"
|
||||
description="A glimpse into our recent luxury home transformations."
|
||||
/>
|
||||
</div>
|
||||
<div id="projects" data-section="projects">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", name: "Luxury Manor Roof", price: "Custom Pricing", imageSrc: "http://img.b2bpic.net/free-photo/roof-pattern_1203-3266.jpg" },
|
||||
{ id: "2", name: "Modern Siding Install", price: "Custom Pricing", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-house-with-chimney-blue-sky_23-2149627194.jpg" },
|
||||
{ id: "3", name: "Copper Gutters", price: "Custom Pricing", imageSrc: "http://img.b2bpic.net/free-photo/old-tiles-roof-background_1373-13.jpg" },
|
||||
]}
|
||||
title="Featured Exterior Projects"
|
||||
description="A glimpse into our recent luxury home transformations."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "John Doe",
|
||||
role: "Homeowner",
|
||||
testimonial: "Excellent service and stunning roof results.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-happy-mother-home_23-2148321636.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Jane Smith",
|
||||
role: "Homeowner",
|
||||
testimonial: "The best siding job we've ever had done.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/workers-having-little-chat-while-having-cup-coffee_329181-15628.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Mark Wilson",
|
||||
role: "Homeowner",
|
||||
testimonial: "Professional, clean, and fast installation.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-shirt-vest-hat-holding-house-model-looking-up-looking-hopeful-front-view_176474-30837.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Sara King",
|
||||
role: "Homeowner",
|
||||
testimonial: "Our house looks completely brand new again.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/specialist-technician-professional-engineer-with-laptop-tablet-maintenance-checking-installing-solar-roof-panel-factory-rooftop-sunlight-engineers-team-survey-check-solar-panel-roof_609648-2202.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "David Brown",
|
||||
role: "Homeowner",
|
||||
testimonial: "A reliable team that delivers quality.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-bench-with-laptop-talking-cellphone_23-2147891934.jpg",
|
||||
},
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Trusted by hundreds of homeowners across the region."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "John Doe", role: "Homeowner", testimonial: "Excellent service and stunning roof results.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-happy-mother-home_23-2148321636.jpg" },
|
||||
{ id: "2", name: "Jane Smith", role: "Homeowner", testimonial: "The best siding job we've ever had done.", imageSrc: "http://img.b2bpic.net/free-photo/workers-having-little-chat-while-having-cup-coffee_329181-15628.jpg" },
|
||||
{ id: "3", name: "Mark Wilson", role: "Homeowner", testimonial: "Professional, clean, and fast installation.", imageSrc: "http://img.b2bpic.net/free-photo/young-man-shirt-vest-hat-holding-house-model-looking-up-looking-hopeful-front-view_176474-30837.jpg" },
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Trusted by hundreds of homeowners across the region."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "500+",
|
||||
title: "Homes Renovated",
|
||||
description: "Completed projects since 2010.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-hummer-tools-stairs-house-construction_181624-28753.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "98%",
|
||||
title: "Satisfaction Rate",
|
||||
description: "Happy homeowners love our work.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-fit-man-doing-parkour-training_23-2150510438.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "12",
|
||||
title: "Expert Crews",
|
||||
description: "Dedicated teams for every task.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/urban-architectural-texture-close-up_23-2151900430.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Impact"
|
||||
description="Numbers speak to our commitment to excellence."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "1", value: "500+", title: "Homes Renovated", description: "Completed projects since 2010.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-hummer-tools-stairs-house-construction_181624-28753.jpg" },
|
||||
{ id: "2", value: "98%", title: "Satisfaction Rate", description: "Happy homeowners love our work.", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-fit-man-doing-parkour-training_23-2150510438.jpg" },
|
||||
{ id: "3", value: "12", title: "Expert Crews", description: "Dedicated teams for every task.", imageSrc: "http://img.b2bpic.net/free-photo/urban-architectural-texture-close-up_23-2151900430.jpg" },
|
||||
]}
|
||||
title="Our Impact"
|
||||
description="Numbers speak to our commitment to excellence."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "What materials do you offer?",
|
||||
content: "We offer premium asphalt, cedar shake, and metal roofing.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Do you provide estimates?",
|
||||
content: "Yes, all estimates are free and detailed.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "What about cleanup?",
|
||||
content: "We leave every worksite cleaner than we found it.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Get clear answers to your exterior questions."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "1", title: "What materials do you offer?", content: "We offer premium asphalt, cedar shake, and metal roofing." },
|
||||
{ id: "2", title: "Do you provide estimates?", content: "Yes, all estimates are free and detailed." },
|
||||
{ id: "3", title: "What about cleanup?", content: "We leave every worksite cleaner than we found it." },
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Get clear answers to your exterior questions."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "canvas-reveal",
|
||||
}}
|
||||
text="Ready to transform your home? Contact Roady Exteriors today for a consultation."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us Now",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "canvas-reveal" }}
|
||||
text="Ready to transform your home? Contact Roady Exteriors today for a consultation."
|
||||
buttons={[{ text: "Contact Us Now", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Projects",
|
||||
href: "#projects",
|
||||
},
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Roady Exteriors"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ items: [{ label: "About", href: "#about" }, { label: "Services", href: "#services" }] },
|
||||
{ items: [{ label: "Projects", href: "#projects" }, { label: "Privacy Policy", href: "#" }] },
|
||||
]}
|
||||
logoText="Roady Exteriors"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user