Merge version_2 into main #1
396
src/app/page.tsx
396
src/app/page.tsx
@@ -3,16 +3,16 @@
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial";
|
||||
import SplitAbout from "@/components/sections/about/SplitAbout";
|
||||
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
|
||||
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
|
||||
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
|
||||
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
||||
import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
|
||||
import TextAbout from "@/components/sections/about/TextAbout";
|
||||
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
|
||||
import MetricCardOne from "@/components/sections/metric/MetricCardOne";
|
||||
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
|
||||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import { Shield, Wrench, Search, HelpCircle, ClipboardCheck, Phone, HardHat, CheckCircle, Clock, Users, Award, ThumbsUp, Star } from "lucide-react";
|
||||
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
||||
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { Shield, Wrench, Search, Phone, HardHat, CheckCircle, Clock, Users, Award, ThumbsUp, Star, HelpCircle } from "lucide-react";
|
||||
|
||||
export default function RoofingPage() {
|
||||
return (
|
||||
@@ -44,177 +44,53 @@ export default function RoofingPage() {
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
background={{ variant: "plain" }}
|
||||
avatars={[
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/contact.webp", alt: "Roofing professional" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/custom-proposal.webp", alt: "Roofer carrying tiles" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/avatar-3.webp", alt: "Technician inspecting roof" },
|
||||
]}
|
||||
avatarText="Professional Roofing Services"
|
||||
avatarGroupClassName="[&_div.overflow-hidden]:h-10 [&_div.overflow-hidden]:aspect-square [&>p]:whitespace-nowrap"
|
||||
<HeroSplitTestimonial
|
||||
title="Your Roof. Our Reputation."
|
||||
description="Trusted by homeowners for over 25 years. From storm damage repairs to full roof replacements, Summit Roofing delivers quality craftsmanship you can count on."
|
||||
buttons={[
|
||||
{ text: "Get Free Estimate", href: "#contact" },
|
||||
{ text: "Our Services", href: "#services" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
background={{ variant: "plain" }}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/hero-main.webp"
|
||||
imageAlt="Roofer walking on rooftop against blue sky"
|
||||
imagePosition="right"
|
||||
mediaAnimation="slide-up"
|
||||
marqueeItems={[
|
||||
{ type: "text-icon", text: "24/7 Availability", icon: Clock },
|
||||
{ type: "text-icon", text: "Family Owned", icon: Users },
|
||||
{ type: "text-icon", text: "Licensed & Insured", icon: Shield },
|
||||
{ type: "text-icon", text: "Free Estimates", icon: Award },
|
||||
{ type: "text-icon", text: "Lifetime Warranty", icon: Star },
|
||||
{ type: "text-icon", text: "5-Star Rated", icon: ThumbsUp },
|
||||
]}
|
||||
buttons={[{ text: "Get Free Estimate", href: "#contact" }]}
|
||||
testimonials={[
|
||||
{
|
||||
name: "James Mitchell",
|
||||
handle: "Homeowner, Dallas TX",
|
||||
testimonial:
|
||||
"Summit replaced our entire roof in two days. Professional crew, clean job site, and the new roof looks incredible.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/robert-thompson.webp",
|
||||
imageAlt: "James Mitchell",
|
||||
},
|
||||
{
|
||||
name: "Karen O'Brien",
|
||||
handle: "Homeowner, Fort Worth TX",
|
||||
testimonial:
|
||||
"After the hailstorm, Summit handled our insurance claim and had us covered within a week. Truly outstanding service.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/patricia-nguyen.webp",
|
||||
imageAlt: "Karen O'Brien",
|
||||
},
|
||||
{
|
||||
name: "David & Lisa Park",
|
||||
handle: "Homeowners, Plano TX",
|
||||
testimonial:
|
||||
"We got three quotes and Summit offered the best value with a lifetime warranty. No-brainer decision.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/steve-amy-collins.webp",
|
||||
imageAlt: "David and Lisa Park",
|
||||
},
|
||||
{ name: "James Mitchell", handle: "@jamesm", testimonial: "Summit replaced our entire roof in two days. Outstanding.", rating: 5 },
|
||||
{ name: "Karen O'Brien", handle: "@karenob", testimonial: "Fast response and great insurance claim assistance!", rating: 5 }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
<TextAbout
|
||||
title="Built on Trust. Backed by Results."
|
||||
description="Summit Roofing has been protecting homes since 1999. We combine old-school craftsmanship with modern materials and techniques to deliver roofs that last a lifetime."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Licensed & Insured",
|
||||
description:
|
||||
"Fully licensed, bonded, and insured for your complete peace of mind.",
|
||||
icon: Shield,
|
||||
},
|
||||
{
|
||||
title: "Lifetime Warranty",
|
||||
description:
|
||||
"Every installation backed by our industry-leading lifetime workmanship warranty.",
|
||||
icon: Wrench,
|
||||
},
|
||||
{
|
||||
title: "Free Inspections",
|
||||
description:
|
||||
"Complimentary roof inspections with honest assessments — no pressure, no hidden fees.",
|
||||
icon: Search,
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/hero.webp"
|
||||
imageAlt="Roofing crew installing a new roof"
|
||||
mediaBadge={{
|
||||
text: "25+ Years",
|
||||
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/avatar-3.webp",
|
||||
avatarAlt: "Roofing professional"
|
||||
}}
|
||||
imagePosition="right"
|
||||
mediaAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
tag="Our Story"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardThree
|
||||
<FeatureCardTwentySix
|
||||
title="Our Roofing Services"
|
||||
description="From new installations to emergency repairs, we have your roof covered."
|
||||
description="Comprehensive solutions for your residential roofing needs."
|
||||
features={[
|
||||
{
|
||||
title: "Roof Installation",
|
||||
description:
|
||||
"Complete roof installations using premium materials from GAF, Owens Corning, and CertainTeed.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/roofing-installation.webp",
|
||||
imageAlt: "New roof installation",
|
||||
},
|
||||
{
|
||||
title: "Roof Repair",
|
||||
description:
|
||||
"Fast, reliable repairs for leaks, missing shingles, flashing damage, and storm damage.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/roofing-repair.webp",
|
||||
imageAlt: "Roof repair service",
|
||||
},
|
||||
{
|
||||
title: "Roof Inspection",
|
||||
description:
|
||||
"Detailed inspections with photo documentation and transparent repair recommendations.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/roofing-inspection.webp",
|
||||
imageAlt: "Roof inspection",
|
||||
},
|
||||
{
|
||||
title: "Emergency Services",
|
||||
description:
|
||||
"24/7 emergency tarping and repairs when storms hit. We respond within hours, not days.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/emergency-services.webp",
|
||||
imageAlt: "Emergency roofing service",
|
||||
},
|
||||
{ title: "Roof Installation", description: "Premium shingles and materials.", buttonIcon: CheckCircle },
|
||||
{ title: "Roof Repair", description: "Fast leak detection and repair.", buttonIcon: Wrench },
|
||||
{ title: "Roof Inspection", description: "Detailed safety reports.", buttonIcon: Search },
|
||||
{ title: "Emergency Services", description: "24/7 storm protection.", buttonIcon: Shield },
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
title="The Numbers Speak for Themselves"
|
||||
description="Decades of experience and thousands of satisfied homeowners stand behind every Summit roof."
|
||||
<MetricCardOne
|
||||
title="Why Choose Us?"
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "500+",
|
||||
title: "Roofs Completed",
|
||||
description:
|
||||
"Over 500 residential and commercial roofing projects delivered on time and on budget.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/roofs-completed.webp",
|
||||
imageAlt: "Completed roofing projects",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "25+",
|
||||
title: "Years Experience",
|
||||
description:
|
||||
"A quarter century of protecting homes with quality materials and expert installation.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/years-experience.webp",
|
||||
imageAlt: "Experienced roofing team",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "98%",
|
||||
title: "Customer Satisfaction",
|
||||
description:
|
||||
"Nearly every homeowner we work with recommends Summit Roofing to their friends and neighbors.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/customer-satisfaction.webp",
|
||||
imageAlt: "Satisfied customers",
|
||||
},
|
||||
{ id: "1", value: "25+", title: "Years", description: "Industry experience", icon: Award },
|
||||
{ id: "2", value: "500+", title: "Roofs", description: "Successfully completed", icon: HomeIconWrapper },
|
||||
{ id: "3", value: "98%", title: "Rated", description: "Customer satisfaction", icon: ThumbsUp }
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
@@ -223,56 +99,15 @@ export default function RoofingPage() {
|
||||
|
||||
<div id="process" data-section="process">
|
||||
<FeatureCardTen
|
||||
title="How We Work"
|
||||
description="From first call to final inspection, our process is designed to be simple, transparent, and stress-free."
|
||||
title="Our Process"
|
||||
description="Simple, transparent, and professional from start to finish."
|
||||
features={[
|
||||
{
|
||||
title: "Free Inspection",
|
||||
description:
|
||||
"We start with a thorough roof inspection and provide an honest assessment with photos — completely free, no obligations.",
|
||||
media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/free-inspection.webp",
|
||||
imageAlt: "Roof inspection process",
|
||||
},
|
||||
items: [
|
||||
{ icon: Phone, text: "Schedule online or call us" },
|
||||
{ icon: ClipboardCheck, text: "Detailed photo report" },
|
||||
{ icon: Shield, text: "Honest recommendation" },
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
{
|
||||
title: "Custom Proposal",
|
||||
description:
|
||||
"You'll receive a clear, itemized proposal with material options, timeline, and pricing — no hidden fees or surprises.",
|
||||
media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/custom-proposal.webp",
|
||||
imageAlt: "Roofing proposal and planning",
|
||||
},
|
||||
items: [
|
||||
{ icon: ClipboardCheck, text: "Transparent line-item pricing" },
|
||||
{ icon: Shield, text: "Insurance claim assistance" },
|
||||
{ icon: Wrench, text: "Material and color selection" },
|
||||
],
|
||||
reverse: true,
|
||||
},
|
||||
{
|
||||
title: "Expert Installation",
|
||||
description:
|
||||
"Our certified crew handles everything — from tear-off to cleanup. Most jobs are completed in just 1-2 days.",
|
||||
media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/about.webp",
|
||||
imageAlt: "Professional roof installation",
|
||||
},
|
||||
items: [
|
||||
{ icon: HardHat, text: "Certified installation crew" },
|
||||
{ icon: Wrench, text: "Premium materials only" },
|
||||
{ icon: CheckCircle, text: "Full site cleanup included" },
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
title: "Inspection", description: "Professional roof evaluation.", media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/free-inspection.webp" },
|
||||
items: [{ icon: Phone, text: "Schedule online" }],
|
||||
reverse: false
|
||||
}
|
||||
]}
|
||||
buttons={[{ text: "Get Started", href: "#contact" }]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
@@ -280,168 +115,49 @@ export default function RoofingPage() {
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
title="What Our Customers Say"
|
||||
description="Don't just take our word for it — hear from homeowners who trust Summit with their roofs."
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Robert Thompson",
|
||||
role: "Homeowner",
|
||||
company: "Dallas, TX",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/robert-thompson.webp",
|
||||
imageAlt: "Robert Thompson",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Maria Gonzalez",
|
||||
role: "Homeowner",
|
||||
company: "Arlington, TX",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/maria-gonzalez.webp",
|
||||
imageAlt: "Maria Gonzalez",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Steve & Amy Collins",
|
||||
role: "Homeowners",
|
||||
company: "Frisco, TX",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/steve-amy-collins.webp",
|
||||
imageAlt: "Steve and Amy Collins",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Patricia Nguyen",
|
||||
role: "Homeowner",
|
||||
company: "McKinney, TX",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/patricia-nguyen.webp",
|
||||
imageAlt: "Patricia Nguyen",
|
||||
},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
<TestimonialCardFifteen
|
||||
testimonial="The team was professional, clean, and fast. The best roofing experience I've had."
|
||||
rating={5}
|
||||
author="Robert Thompson"
|
||||
avatars={[{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/robert-thompson.webp", alt: "Robert" }]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
title="Frequently Asked Questions"
|
||||
description="Get answers to common questions about our roofing services, warranties, and process."
|
||||
tag="FAQ"
|
||||
tagIcon={HelpCircle}
|
||||
tagAnimation="slide-up"
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
<FaqSplitText
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How long does a typical roof replacement take?",
|
||||
content:
|
||||
"Most residential roof replacements are completed in 1-3 days depending on the size and complexity of the project. We'll provide an estimated timeline during your free consultation.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Do you help with insurance claims?",
|
||||
content:
|
||||
"Yes! We work directly with all major insurance companies and guide you through the entire claims process — from initial inspection to final paperwork. Our team ensures you get the coverage you deserve.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "What roofing materials do you use?",
|
||||
content:
|
||||
"We use premium materials from trusted manufacturers like GAF, Owens Corning, and CertainTeed. We offer asphalt shingles, metal roofing, tile, and flat roof systems to match your home and budget.",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "What does your warranty cover?",
|
||||
content:
|
||||
"Our lifetime workmanship warranty covers all labor and installation defects. Additionally, manufacturer warranties cover the materials themselves — typically 25-50 years depending on the product.",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "How do I know if my roof needs replacing?",
|
||||
content:
|
||||
"Common signs include missing or curling shingles, granules in gutters, visible sagging, daylight through the attic, and a roof age over 20 years. We offer free inspections to assess your roof's condition.",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
title: "Do you offer financing options?",
|
||||
content:
|
||||
"Yes, we offer flexible financing plans with competitive rates so you can protect your home without straining your budget. Ask about our 0% interest options during your free estimate.",
|
||||
},
|
||||
{ id: "1", title: "Do you offer free estimates?", content: "Yes, all consultations are free." },
|
||||
{ id: "2", title: "Is your work insured?", content: "We are fully bonded and insured." }
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
faqsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Get Your Free Estimate"
|
||||
description="Fill out the form below and one of our roofing experts will get back to you within 24 hours."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
||||
{ name: "phone", type: "tel", placeholder: "Your Phone Number" },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Tell us about your roofing needs...", rows: 5, required: true }}
|
||||
buttonText="Request Free Estimate"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/roofing/contact.webp"
|
||||
imageAlt="Roofing professional using tablet on site"
|
||||
mediaPosition="right"
|
||||
mediaAnimation="slide-up"
|
||||
<ContactText
|
||||
text="Ready to protect your home?"
|
||||
background={{ variant: "plain" }}
|
||||
buttons={[{ text: "Get A Free Estimate", href: "#contact" }]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
<FooterBaseCard
|
||||
logoText="Summit Roofing"
|
||||
columns={[
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{ label: "Roof Installation", href: "#services" },
|
||||
{ label: "Roof Repair", href: "#services" },
|
||||
{ label: "Roof Inspection", href: "#services" },
|
||||
{ label: "Emergency Services", href: "#services" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About Us", href: "#about" },
|
||||
{ label: "Testimonials", href: "#testimonials" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Free Estimate", href: "#contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Hours",
|
||||
items: [
|
||||
{ label: "Mon-Fri: 7:00 AM - 6:00 PM" },
|
||||
{ label: "Saturday: 8:00 AM - 2:00 PM" },
|
||||
{ label: "Sunday: Closed" },
|
||||
{ label: "Emergency: 24/7" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
{ label: "(555) 123-4567", href: "tel:5551234567" },
|
||||
{ label: "info@summitroofing.com", href: "mailto:info@summitroofing.com" },
|
||||
{ label: "Dallas, TX" },
|
||||
],
|
||||
},
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#about" }] }
|
||||
]}
|
||||
copyrightText="© 2026 | Summit Roofing"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
function HomeIconWrapper(props: any) { return <HardHat {...props} />; }
|
||||
Reference in New Issue
Block a user