Merge version_1 into main #3
281
src/app/page.tsx
281
src/app/page.tsx
@@ -26,182 +26,123 @@ export default function LandingPage() {
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "About", id: "about"},
|
||||
{
|
||||
name: "Services", id: "features"},
|
||||
{
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="Colin's Roofers"
|
||||
button={{
|
||||
text: "Call Now", href: "tel:+1234567890"}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Colin's Roofers"
|
||||
button={{ text: "Call Now", href: "tel:+1234567890" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
background={{
|
||||
variant: "radial-gradient"}}
|
||||
title="24/7 Emergency Roofing Repairs"
|
||||
description="Don't let a leak compromise your home. Colin's Emergency Roofers provides fast, reliable, and professional roofing repair services when you need them most."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alice Johnson", handle: "@alice", testimonial: "Fast response time and quality work. Highly recommend!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/boy-putting-up-electric-guitar_23-2148006422.jpg"},
|
||||
{
|
||||
name: "Bob Smith", handle: "@bob", testimonial: "Saved our living room from disaster during the storm.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/real-estate-insurance-concept-happy-young-man-winking-smiling-showing-paper-house-cutout-sta_1258-173394.jpg"},
|
||||
{
|
||||
name: "Carol White", handle: "@carol", testimonial: "Professional and courteous team throughout the process.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/workers-having-little-chat-while-having-cup-coffee_329181-15632.jpg"},
|
||||
{
|
||||
name: "David Brown", handle: "@david", testimonial: "Great service at a fair price in an emergency.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/expressive-senior-female-posing-indoor_344912-992.jpg"},
|
||||
{
|
||||
name: "Eve Davis", handle: "@eve", testimonial: "The best emergency roofing service in the area.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/brazilian-young-man-standing-brick-wall-doing-italian-gesture-with-hand-fingers-confident-expression_839833-1656.jpg"},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Emergency Help", href: "tel:+1234567890"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-smiley-man-working-roof_23-2149343654.jpg"
|
||||
imageAlt="Professional roof repair service in progress"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/boy-putting-up-electric-guitar_23-2148006422.jpg", alt: "Alice Johnson"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/real-estate-insurance-concept-happy-young-man-winking-smiling-showing-paper-house-cutout-sta_1258-173394.jpg", alt: "Bob Smith"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/workers-having-little-chat-while-having-cup-coffee_329181-15632.jpg", alt: "Carol White"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/expressive-senior-female-posing-indoor_344912-992.jpg", alt: "David Brown"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/brazilian-young-man-standing-brick-wall-doing-italian-gesture-with-hand-fingers-confident-expression_839833-1656.jpg", alt: "Eve Davis"},
|
||||
],
|
||||
avatarText: "Trusted by over 500+ local homeowners", marqueeItems:[
|
||||
{
|
||||
type: "text-icon", text: "24/7 Availability", icon: Clock,
|
||||
},
|
||||
{
|
||||
type: "text-icon", text: "Licensed & Insured", icon: ShieldCheck,
|
||||
},
|
||||
{
|
||||
type: "text-icon", text: "Rapid Response", icon: Zap,
|
||||
},
|
||||
{
|
||||
type: "text-icon", text: "Free Assessments", icon: ListChecks,
|
||||
},
|
||||
{
|
||||
type: "text-icon", text: "Quality Guaranteed", icon: Award,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
background={{ variant: "radial-gradient" }}
|
||||
title="24/7 Emergency Roofing Repairs"
|
||||
description="Don't let a leak compromise your home. Colin's Emergency Roofers provides fast, reliable, and professional roofing repair services when you need them most."
|
||||
testimonials={[
|
||||
{ name: "Alice Johnson", handle: "@alice", testimonial: "Fast response time and quality work. Highly recommend!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/boy-putting-up-electric-guitar_23-2148006422.jpg" },
|
||||
{ name: "Bob Smith", handle: "@bob", testimonial: "Saved our living room from disaster during the storm.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/real-estate-insurance-concept-happy-young-man-winking-smiling-showing-paper-house-cutout-sta_1258-173394.jpg" },
|
||||
{ name: "Carol White", handle: "@carol", testimonial: "Professional and courteous team throughout the process.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/workers-having-little-chat-while-having-cup-coffee_329181-15632.jpg" },
|
||||
{ name: "David Brown", handle: "@david", testimonial: "Great service at a fair price in an emergency.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/expressive-senior-female-posing-indoor_344912-992.jpg" },
|
||||
{ name: "Eve Davis", handle: "@eve", testimonial: "The best emergency roofing service in the area.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/brazilian-young-man-standing-brick-wall-doing-italian-gesture-with-hand-fingers-confident-expression_839833-1656.jpg" }
|
||||
]}
|
||||
buttons={[{ text: "Get Emergency Help", href: "tel:+1234567890" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-smiley-man-working-roof_23-2149343654.jpg"
|
||||
imageAlt="Professional roof repair service in progress"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/boy-putting-up-electric-guitar_23-2148006422.jpg", alt: "Alice Johnson" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/real-estate-insurance-concept-happy-young-man-winking-smiling-showing-paper-house-cutout-sta_1258-173394.jpg", alt: "Bob Smith" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/workers-having-little-chat-while-having-cup-coffee_329181-15632.jpg", alt: "Carol White" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/expressive-senior-female-posing-indoor_344912-992.jpg", alt: "David Brown" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/brazilian-young-man-standing-brick-wall-doing-italian-gesture-with-hand-fingers-confident-expression_839833-1656.jpg", alt: "Eve Davis" }
|
||||
]}
|
||||
avatarText="Trusted by over 500+ local homeowners"
|
||||
marqueeItems={[
|
||||
{ type: "text-icon", text: "24/7 Availability", icon: Clock },
|
||||
{ type: "text-icon", text: "Licensed & Insured", icon: ShieldCheck },
|
||||
{ type: "text-icon", text: "Rapid Response", icon: Zap },
|
||||
{ type: "text-icon", text: "Free Assessments", icon: ListChecks },
|
||||
{ type: "text-icon", text: "Quality Guaranteed", icon: Award }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Reliability When You Need It Most"
|
||||
description="With over 20 years of experience, Colin's Emergency Roofers are dedicated to ensuring the safety and integrity of your home. We respond to calls fast, assess damage, and provide permanent solutions."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "24/7 Availability", description: "We are ready to fix your roof any time, day or night."},
|
||||
{
|
||||
title: "Rapid Response", description: "Guaranteed arrival times to prevent further damage."},
|
||||
{
|
||||
title: "Licensed & Insured", description: "Professional work you can trust with full liability coverage."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-man-working-with-protection-helmet_23-2149343636.jpg"
|
||||
imageAlt="Experienced roofing crew at work"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Reliability When You Need It Most"
|
||||
description="With over 20 years of experience, Colin's Emergency Roofers are dedicated to ensuring the safety and integrity of your home. We respond to calls fast, assess damage, and provide permanent solutions."
|
||||
bulletPoints={[
|
||||
{ title: "24/7 Availability", description: "We are ready to fix your roof any time, day or night." },
|
||||
{ title: "Rapid Response", description: "Guaranteed arrival times to prevent further damage." },
|
||||
{ title: "Licensed & Insured", description: "Professional work you can trust with full liability coverage." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-man-working-with-protection-helmet_23-2149343636.jpg"
|
||||
imageAlt="Experienced roofing crew at work"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Storm Damage Repair", description: "Immediate patching for wind and storm destruction.", buttonIcon: Zap,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-working-roof_23-2149343654.jpg", imageAlt: "emergency roofing service repair worker"},
|
||||
{
|
||||
title: "Roof Leak Detection", description: "Identifying and fixing leaks at the source.", buttonIcon: Droplets,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-working-with-protection-helmet_23-2149343636.jpg", imageAlt: "roofing installation team working"},
|
||||
{
|
||||
title: "Tarping Services", description: "Emergency covering until permanent repairs start.", buttonIcon: Shield,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/knives-tools-electrical-maintenance_23-2147743046.jpg", imageAlt: "roof inspection tools close up"},
|
||||
{
|
||||
title: "Shingle Replacement", description: "Matching and replacing lost or damaged shingles.", buttonIcon: Home,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/boy-putting-up-electric-guitar_23-2148006422.jpg", imageAlt: "happy client portrait residential"},
|
||||
]}
|
||||
title="Our Emergency Services"
|
||||
description="We cover all common roofing emergencies to keep you and your property dry."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Storm Damage Repair", description: "Immediate patching for wind and storm destruction.", buttonIcon: Zap, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-working-roof_23-2149343654.jpg", imageAlt: "emergency roofing service repair worker" },
|
||||
{ title: "Roof Leak Detection", description: "Identifying and fixing leaks at the source.", buttonIcon: Droplets, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-working-with-protection-helmet_23-2149343636.jpg", imageAlt: "roofing installation team working" },
|
||||
{ title: "Tarping Services", description: "Emergency covering until permanent repairs start.", buttonIcon: Shield, imageSrc: "http://img.b2bpic.net/free-photo/knives-tools-electrical-maintenance_23-2147743046.jpg", imageAlt: "roof inspection tools close up" },
|
||||
{ title: "Shingle Replacement", description: "Matching and replacing lost or damaged shingles.", buttonIcon: Home, imageSrc: "http://img.b2bpic.net/free-photo/boy-putting-up-electric-guitar_23-2148006422.jpg", imageAlt: "happy client portrait residential" }
|
||||
]}
|
||||
title="Our Emergency Services"
|
||||
description="We cover all common roofing emergencies to keep you and your property dry."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "faq-1", title: "How fast do you arrive?", content: "Our emergency team aims to be at your doorstep within 2 hours."},
|
||||
{
|
||||
id: "faq-2", title: "Do you provide estimates?", content: "Yes, all emergency assessments come with a transparent cost breakdown."},
|
||||
{
|
||||
id: "faq-3", title: "What payment methods do you accept?", content: "We accept all major credit cards, cash, and work with most insurance providers."},
|
||||
]}
|
||||
sideTitle="Common Roof Questions"
|
||||
sideDescription="Get clear answers about our emergency process."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "faq-1", title: "How fast do you arrive?", content: "Our emergency team aims to be at your doorstep within 2 hours." },
|
||||
{ id: "faq-2", title: "Do you provide estimates?", content: "Yes, all emergency assessments come with a transparent cost breakdown." },
|
||||
{ id: "faq-3", title: "What payment methods do you accept?", content: "We accept all major credit cards, cash, and work with most insurance providers." }
|
||||
]}
|
||||
sideTitle="Common Roof Questions"
|
||||
sideDescription="Get clear answers about our emergency process."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Need Help? Contact Us Now"
|
||||
description="Call us immediately or use the form below for non-urgent inquiries."
|
||||
inputs={[
|
||||
{
|
||||
name: "name", type: "text", placeholder: "Your Name", required: true,
|
||||
},
|
||||
{
|
||||
name: "email", type: "email", placeholder: "Email Address", required: true,
|
||||
},
|
||||
{
|
||||
name: "phone", type: "tel", placeholder: "Phone Number", required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message", placeholder: "Tell us about your roofing problem...", rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/knives-tools-electrical-maintenance_23-2147743046.jpg"
|
||||
imageAlt="Emergency repair tools"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Need Help? Contact Us Now"
|
||||
description="Call us immediately or use the form below for non-urgent inquiries."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
||||
{ name: "phone", type: "tel", placeholder: "Phone Number", required: true }
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Tell us about your roofing problem...", rows: 4, required: true }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/knives-tools-electrical-maintenance_23-2147743046.jpg"
|
||||
imageAlt="Emergency repair tools"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Colin's Roofers"
|
||||
copyrightText="© 2025 Colin's Emergency Roofers. All rights reserved."
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Facebook,
|
||||
href: "#", ariaLabel: "Facebook"},
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "#", ariaLabel: "Instagram"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Colin's Roofers"
|
||||
copyrightText="© 2025 Colin's Emergency Roofers. All rights reserved."
|
||||
socialLinks={[
|
||||
{ icon: Facebook, href: "#", ariaLabel: "Facebook" },
|
||||
{ icon: Instagram, href: "#", ariaLabel: "Instagram" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user