Update src/app/page.tsx

This commit is contained in:
2026-04-23 07:40:35 +00:00
parent 112a93ec49
commit dcd07a085f

View File

@@ -11,7 +11,7 @@ import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import TextAbout from '@/components/sections/about/TextAbout';
import { Award, CheckCircle, Download, Droplet, ListChecks, ShieldCheck, Star, Tool, Wrench } from "lucide-react";
import { Award, CheckCircle, Download, Droplet, ListChecks, ShieldCheck, Star, Wrench, Hammer } from "lucide-react";
export default function LandingPage() {
return (
@@ -28,366 +28,163 @@ export default function LandingPage() {
headingFontWeight="semibold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Services",
id: "services",
},
{
name: "Why Choose Us",
id: "why-choose-us",
},
{
name: "Testimonials",
id: "testimonials",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Advanced Roof Care"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "hero" },
{ name: "Services", id: "services" },
{ name: "Why Choose Us", id: "why-choose-us" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" },
]}
brandName="Advanced Roof Care"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
background={{
variant: "gradient-bars",
}}
title="Expert Roofing, Done Right."
description="From roof restorations to leak repairs, Advanced Roof Care delivers meticulous craftsmanship that protects your home for decades. Trusted by 74+ homeowners across Melbourne's south-east."
kpis={[
{
value: "74+",
label: "Five-Star Reviews",
},
{
value: "20+",
label: "Years Experience",
},
{
value: "100%",
label: "Satisfaction",
},
]}
enableKpiAnimation={true}
tag="Melbourne's Top-Rated Roofer"
buttons={[
{
text: "Get a Free Quote",
href: "#contact",
},
{
text: "Our Services",
href: "#services",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-man-working-with-protection-helmet_23-2149343636.jpg?_wi=1"
imageAlt="Professional roof restoration in Melbourne"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/portrait-smiley-woman_23-2149022640.jpg",
alt: "Portrait of smiley woman",
},
{
src: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg",
alt: "Smiling Beautiful Middle-aged Business Woman",
},
{
src: "http://img.b2bpic.net/free-photo/pleased-successful-female-administrator-office_273609-4124.jpg",
alt: "Pleased successful female administrator in office",
},
{
src: "http://img.b2bpic.net/free-photo/woman-wearing-pajamas-while-sitting-bed_273609-13213.jpg",
alt: "Woman wearing in pajamas while sitting in bed",
},
{
src: "http://img.b2bpic.net/free-photo/charming-happy-excited-young-caucasian-woman-with-dyed-pinkish-hair-posing-isolated-wearing-nice-red-sweater-laughing-funny-joke-smiling-broadly-showing-her-white-perfect-teeth_343059-4767.jpg",
alt: "Charming happy excited young Caucasian woman with dyed pinkish hair posing isolated wearing nice red sweater laughing at funny joke, showing her white perfect teeth",
},
]}
avatarText="Trusted by local homeowners"
marqueeItems={[
{
type: "text",
text: "Roof Restoration",
},
{
type: "text",
text: "Tile Repairs",
},
{
type: "text",
text: "Leak Detection",
},
{
type: "text",
text: "Re-Bedding",
},
{
type: "text",
text: "Valley Replacement",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
background={{ variant: "gradient-bars" }}
title="Expert Roofing, Done Right."
description="From roof restorations to leak repairs, Advanced Roof Care delivers meticulous craftsmanship that protects your home for decades. Trusted by 74+ homeowners across Melbourne's south-east."
kpis={[
{ value: "74+", label: "Five-Star Reviews" },
{ value: "20+", label: "Years Experience" },
{ value: "100%", label: "Satisfaction" }
]}
enableKpiAnimation={true}
tag="Melbourne's Top-Rated Roofer"
buttons={[
{ text: "Get a Free Quote", href: "#contact" },
{ text: "Our Services", href: "#services" }
]}
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-man-working-with-protection-helmet_23-2149343636.jpg"
imageAlt="Professional roof restoration in Melbourne"
mediaAnimation="slide-up"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/portrait-smiley-woman_23-2149022640.jpg", alt: "Portrait of smiley woman" },
{ src: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg", alt: "Smiling Beautiful Middle-aged Business Woman" },
{ src: "http://img.b2bpic.net/free-photo/pleased-successful-female-administrator-office_273609-4124.jpg", alt: "Pleased successful female administrator in office" },
{ src: "http://img.b2bpic.net/free-photo/woman-wearing-pajamas-while-sitting-bed_273609-13213.jpg", alt: "Woman wearing in pajamas while sitting in bed" },
{ src: "http://img.b2bpic.net/free-photo/charming-happy-excited-young-caucasian-woman-with-dyed-pinkish-hair-posing-isolated-wearing-nice-red-sweater-laughing-funny-joke-smiling-broadly-showing-her-white-perfect-teeth_343059-4767.jpg", alt: "Charming happy excited young Caucasian woman with dyed pinkish hair posing isolated wearing nice red sweater laughing at funny joke, showing her white perfect teeth" }
]}
avatarText="Trusted by local homeowners"
marqueeItems={[
{ type: "text", text: "Roof Restoration" },
{ type: "text", text: "Tile Repairs" },
{ type: "text", text: "Leak Detection" },
{ type: "text", text: "Re-Bedding" },
{ type: "text", text: "Valley Replacement" }
]}
/>
</div>
<div id="services" data-section="services">
<FeatureBento
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
features={[
{
title: "Roof Restoration",
description: "Full roof makeovers including cleaning, repainting, and sealing. We bring ageing roofs back to life.",
bentoComponent: "reveal-icon",
icon: Tool,
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-smiley-man-working-roof_23-2149343672.jpg",
imageAlt: "Full shot smiley man working on roof",
},
{
title: "Tile Repairs",
description: "Cracked, broken, or slipped tiles replaced with expert precision. We match existing tiles seamlessly.",
bentoComponent: "reveal-icon",
icon: Wrench,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-working-with-protection-helmet_23-2149343636.jpg?_wi=2",
imageAlt: "Full shot smiley man working on roof",
},
{
title: "Leak Detection & Repair",
description: "Fast, thorough leak investigation and permanent repair. We find the source and fix it right.",
bentoComponent: "reveal-icon",
icon: Droplet,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-business-woman-looking-up-copy-space_1262-3088.jpg?_wi=1",
imageAlt: "Full shot smiley man working on roof",
},
{
title: "Re-Bedding & Pointing",
description: "Ridge cap re-bedding and flexible pointing to prevent leaks and secure your roof.",
bentoComponent: "reveal-icon",
icon: ShieldCheck,
imageSrc: "http://img.b2bpic.net/free-photo/man-shirt-smiling-posing-kitchen_23-2148414940.jpg?_wi=1",
imageAlt: "Full shot smiley man working on roof",
},
{
title: "Valley Replacement",
description: "Rusted or deteriorated valleys replaced with quality materials to prevent water damage.",
bentoComponent: "reveal-icon",
icon: Download,
imageSrc: "http://img.b2bpic.net/free-photo/contemplated-serious-young-man-looking-camera_23-2148130297.jpg?_wi=1",
imageAlt: "Full shot smiley man working on roof",
},
{
title: "Roof Inspections",
description: "Comprehensive inspections with honest assessments and detailed reports.",
bentoComponent: "reveal-icon",
icon: ListChecks,
imageSrc: "http://img.b2bpic.net/free-photo/young-female-blazer-beauty-blonde_1139-773.jpg?_wi=1",
imageAlt: "Full shot smiley man working on roof",
},
]}
title="Complete Roofing Solutions"
description="From minor repairs to full restorations, we handle every aspect of your roof with precision and care."
/>
</div>
<div id="services" data-section="services">
<FeatureBento
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
title="Complete Roofing Solutions"
description="From minor repairs to full restorations, we handle every aspect of your roof with precision and care."
features={[
{ title: "Roof Restoration", description: "Full roof makeovers including cleaning, repainting, and sealing. We bring ageing roofs back to life.", bentoComponent: "reveal-icon", icon: Hammer },
{ title: "Tile Repairs", description: "Cracked, broken, or slipped tiles replaced with expert precision. We match existing tiles seamlessly.", bentoComponent: "reveal-icon", icon: Wrench },
{ title: "Leak Detection & Repair", description: "Fast, thorough leak investigation and permanent repair. We find the source and fix it right.", bentoComponent: "reveal-icon", icon: Droplet },
{ title: "Re-Bedding & Pointing", description: "Ridge cap re-bedding and flexible pointing to prevent leaks and secure your roof.", bentoComponent: "reveal-icon", icon: ShieldCheck },
{ title: "Valley Replacement", description: "Rusted or deteriorated valleys replaced with quality materials to prevent water damage.", bentoComponent: "reveal-icon", icon: Download },
{ title: "Roof Inspections", description: "Comprehensive inspections with honest assessments and detailed reports.", bentoComponent: "reveal-icon", icon: ListChecks }
]}
/>
</div>
<div id="why-choose-us" data-section="why-choose-us">
<TextAbout
useInvertedBackground={false}
tag="Why Choose Us"
title="Craftsmanship You Can Trust"
buttons={[
{
text: "Call Rob Now",
href: "#contact",
},
]}
/>
</div>
<div id="why-choose-us" data-section="why-choose-us">
<TextAbout
useInvertedBackground={false}
tag="Why Choose Us"
title="Craftsmanship You Can Trust"
buttons={[{ text: "Call Rob Now", href: "#contact" }]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
metrics={[
{
id: "m1",
value: "74+",
title: "Happy Clients",
description: "Five-star reviews and counting.",
icon: Star,
},
{
id: "m2",
value: "20+",
title: "Years Experience",
description: "Professional roofing mastery.",
icon: Award,
},
{
id: "m3",
value: "0",
title: "Negative Reviews",
description: "Perfect track record of quality.",
icon: CheckCircle,
},
]}
title="Our Track Record"
description="Quality work that speaks for itself."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
metrics={[
{ id: "m1", value: "74+", title: "Happy Clients", description: "Five-star reviews and counting.", icon: Star },
{ id: "m2", value: "20+", title: "Years Experience", description: "Professional roofing mastery.", icon: Award },
{ id: "m3", value: "0", title: "Negative Reviews", description: "Perfect track record of quality.", icon: CheckCircle }
]}
title="Our Track Record"
description="Quality work that speaks for itself."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Susan C.",
handle: "Cheltenham",
testimonial: "Robert replaced two very rusted valleys on our 70 year-old roof. He is a professional and clearly takes pride in his work.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-business-woman-looking-up-copy-space_1262-3088.jpg?_wi=2",
},
{
id: "2",
name: "Melissa T.",
handle: "Melbourne",
testimonial: "Rob has been one of the best tradespeople we've worked with! He refreshed our early 90s tile roof and it still looks amazing.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/man-shirt-smiling-posing-kitchen_23-2148414940.jpg?_wi=2",
},
{
id: "3",
name: "Brendan A.",
handle: "Melbourne",
testimonial: "Rob quoted within a day or two, gave me a date and was spot on. No fuss, no hassle, just careful workmanship.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/contemplated-serious-young-man-looking-camera_23-2148130297.jpg?_wi=2",
},
{
id: "4",
name: "Sarah J.",
handle: "Bentleigh",
testimonial: "Fantastic communication and high quality repairs. My roof is leak-free and looks brand new.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-female-blazer-beauty-blonde_1139-773.jpg?_wi=2",
},
{
id: "5",
name: "Mark D.",
handle: "Brighton",
testimonial: "Honest, reliable and fair pricing. Highly recommended for any roofing needs.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg",
},
]}
showRating={true}
title="What Our Clients Say"
description="Don't just take our word for it. Here's what Melbourne homeowners have to say."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
showRating={true}
title="What Our Clients Say"
description="Don't just take our word for it. Here's what Melbourne homeowners have to say."
testimonials={[
{ id: "1", name: "Susan C.", handle: "Cheltenham", testimonial: "Robert replaced two very rusted valleys on our 70 year-old roof. He is a professional and clearly takes pride in his work.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-business-woman-looking-up-copy-space_1262-3088.jpg" },
{ id: "2", name: "Melissa T.", handle: "Melbourne", testimonial: "Rob has been one of the best tradespeople we've worked with! He refreshed our early 90s tile roof and it still looks amazing.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-shirt-smiling-posing-kitchen_23-2148414940.jpg" },
{ id: "3", name: "Brendan A.", handle: "Melbourne", testimonial: "Rob quoted within a day or two, gave me a date and was spot on. No fuss, no hassle, just careful workmanship.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/contemplated-serious-young-man-looking-camera_23-2148130297.jpg" },
{ id: "4", name: "Sarah J.", handle: "Bentleigh", testimonial: "Fantastic communication and high quality repairs. My roof is leak-free and looks brand new.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-female-blazer-beauty-blonde_1139-773.jpg" },
{ id: "5", name: "Mark D.", handle: "Brighton", testimonial: "Honest, reliable and fair pricing. Highly recommended for any roofing needs.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/positive-shaved-head-male-dressed-grey-suit-dark-grey-background_613910-11352.jpg" }
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={true}
faqs={[
{
id: "faq1",
title: "How long does a roof restoration take?",
content: "Most restorations take between 3-5 days depending on the size of the roof and the extent of the work required.",
},
{
id: "faq2",
title: "Do you provide free quotes?",
content: "Yes, we provide obligation-free, transparent quotes within 24-48 hours of our inspection.",
},
{
id: "faq3",
title: "Are you fully insured?",
content: "Yes, we are fully insured and carry all necessary licenses to ensure your home is protected during our work.",
},
{
id: "faq4",
title: "Do you cover south-east Melbourne?",
content: "We proudly serve all south-east Melbourne suburbs with prompt, reliable roofing services.",
},
]}
sideTitle="Common Roofing Questions"
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={true}
faqs={[
{ id: "faq1", title: "How long does a roof restoration take?", content: "Most restorations take between 3-5 days depending on the size of the roof and the extent of the work required." },
{ id: "faq2", title: "Do you provide free quotes?", content: "Yes, we provide obligation-free, transparent quotes within 24-48 hours of our inspection." },
{ id: "faq3", title: "Are you fully insured?", content: "Yes, we are fully insured and carry all necessary licenses to ensure your home is protected during our work." },
{ id: "faq4", title: "Do you cover south-east Melbourne?", content: "We proudly serve all south-east Melbourne suburbs with prompt, reliable roofing services." }
]}
sideTitle="Common Roofing Questions"
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{
variant: "sparkles-gradient",
}}
text="Your Roof Deserves The Best Care. Get in touch today for an obligation-free quote. Fast response, fair pricing, and workmanship guaranteed."
buttons={[
{
text: "Call Rob Now: 0416 424 345",
href: "tel:0416424345",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{ variant: "sparkles-gradient" }}
text="Your Roof Deserves The Best Care. Get in touch today for an obligation-free quote. Fast response, fair pricing, and workmanship guaranteed."
buttons={[{ text: "Call Rob Now: 0416 424 345", href: "tel:0416424345" }]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/hand-woven-geometric-denim-area-rug-wooden-floor_169016-48743.jpg"
logoText="Advanced Roof Care"
columns={[
{
title: "Services",
items: [
{
label: "Roof Restoration",
href: "#services",
},
{
label: "Tile Repairs",
href: "#services",
},
{
label: "Leak Repairs",
href: "#services",
},
{
label: "Valley Replacement",
href: "#services",
},
],
},
{
title: "Contact",
items: [
{
label: "0416 424 345",
href: "tel:0416424345",
},
{
label: "Cheltenham, VIC",
href: "#",
},
],
},
]}
copyrightText="© 2026 Advanced Roof Care. All rights reserved."
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/hand-woven-geometric-denim-area-rug-wooden-floor_169016-48743.jpg"
logoText="Advanced Roof Care"
columns={[
{
title: "Services", items: [
{ label: "Roof Restoration", href: "#services" },
{ label: "Tile Repairs", href: "#services" },
{ label: "Leak Repairs", href: "#services" },
{ label: "Valley Replacement", href: "#services" }
]
},
{
title: "Contact", items: [
{ label: "0416 424 345", href: "tel:0416424345" },
{ label: "Cheltenham, VIC", href: "#" }
]
}
]}
copyrightText="© 2026 Advanced Roof Care. All rights reserved."
/>
</div>
</ReactLenis>
</ThemeProvider>
);