Update src/pages/HomePage.tsx
This commit is contained in:
@@ -13,309 +13,197 @@ import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroCenteredLogos
|
||||
avatarsSrc={[
|
||||
"http://img.b2bpic.net/free-photo/young-latin-man-architect-smiling-confident-standing-with-arms-crossed-gesture-street_839833-2747.jpg",
|
||||
"http://img.b2bpic.net/free-photo/middle-age-woman-business-worker-smiling-confident-standing-with-arms-crossed-gesture-office_839833-20646.jpg",
|
||||
"http://img.b2bpic.net/free-photo/cheerful-business-man-greeting-colleague_74855-1519.jpg",
|
||||
"http://img.b2bpic.net/free-photo/full-shot-man-traveling-by-train_23-2150510174.jpg",
|
||||
]}
|
||||
avatarText="Trusted by 500+ satisfied clients"
|
||||
title="Quality Roofing & Property Solutions You Can Trust"
|
||||
description="GHAPH Roofing And Properties Services provides premium, durable roofing and expert property solutions for residential and commercial clients."
|
||||
primaryButton={{
|
||||
text: "Get a Free Quote",
|
||||
href: "#contact",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Contact Us",
|
||||
href: "#contact",
|
||||
}}
|
||||
names={[
|
||||
"John Doe",
|
||||
"Jane Smith",
|
||||
"Mike Ross",
|
||||
"Sarah Connor",
|
||||
]}
|
||||
imageSrc="https://storage.googleapis.com/webild/users/user_3FS60V67V1yEKVckyy9a9hrOiRz/uploaded-1782055994642-mum67cf0.webp?_wi=1"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
avatarsSrc={[
|
||||
"http://img.b2bpic.net/free-photo/young-latin-man-architect-smiling-confident-standing-with-arms-crossed-gesture-street_839833-2747.jpg", "http://img.b2bpic.net/free-photo/middle-age-woman-business-worker-smiling-confident-standing-with-arms-crossed-gesture-office_839833-20646.jpg", "http://img.b2bpic.net/free-photo/cheerful-business-man-greeting-colleague_74855-1519.jpg", "http://img.b2bpic.net/free-photo/full-shot-man-traveling-by-train_23-2150510174.jpg"]}
|
||||
avatarText="Trusted by 500+ satisfied clients"
|
||||
title="Quality Roofing & Property Solutions You Can Trust"
|
||||
description="GHAPH Roofing And Properties Services provides premium, durable roofing and expert property solutions for residential and commercial clients."
|
||||
primaryButton={{
|
||||
text: "Get a Free Quote", href: "#contact"}}
|
||||
secondaryButton={{
|
||||
text: "Contact Us", href: "#contact"}}
|
||||
names={[
|
||||
"John Doe", "Jane Smith", "Mike Ross", "Sarah Connor"]}
|
||||
imageSrc="https://storage.googleapis.com/webild/users/user_3FS60V67V1yEKVckyy9a9hrOiRz/uploaded-1782055994642-mum67cf0.webp"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutTestimonial
|
||||
tag="Our Story"
|
||||
quote="GHAPH Roofing is committed to quality, integrity, and reliability in every project we undertake. We don't just build roofs; we protect your biggest investments."
|
||||
author="Management Team"
|
||||
role="GHAPH Roofing & Properties Services"
|
||||
imageSrc="https://storage.googleapis.com/webild/users/user_3FS60V67V1yEKVckyy9a9hrOiRz/uploaded-1782055994645-32oihcpx.webp?_wi=1"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Our Story"
|
||||
quote="GHAPH Roofing is committed to quality, integrity, and reliability in every project we undertake. We don't just build roofs; we protect your biggest investments."
|
||||
author="Management Team"
|
||||
role="GHAPH Roofing & Properties Services"
|
||||
imageSrc="https://storage.googleapis.com/webild/users/user_3FS60V67V1yEKVckyy9a9hrOiRz/uploaded-1782055994645-32oihcpx.webp"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<SectionErrorBoundary name="services">
|
||||
<div id="services" data-section="services">
|
||||
<SectionErrorBoundary name="services">
|
||||
<FeaturesBento
|
||||
tag="Our Services"
|
||||
title="Comprehensive Roofing & Property Expertise"
|
||||
description="From minor repairs to large commercial developments, our team handles it all with professional precision."
|
||||
features={[
|
||||
{
|
||||
title: "Roofing Services",
|
||||
description: "Expert installation, repair, and maintenance for both residential and commercial structures.",
|
||||
bentoComponent: "info-card-marquee",
|
||||
infoCards: [
|
||||
{
|
||||
icon: Hammer,
|
||||
label: "Installation",
|
||||
value: "Expert",
|
||||
},
|
||||
{
|
||||
icon: Wrench,
|
||||
label: "Repair",
|
||||
value: "Rapid",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
label: "Safety",
|
||||
value: "100%",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/metallic-structure_1127-2046.jpg",
|
||||
imageAlt: "commercial roofing steel sheets",
|
||||
},
|
||||
{
|
||||
title: "Property Care",
|
||||
description: "Full property maintenance and development services tailored to your needs.",
|
||||
bentoComponent: "checklist-timeline",
|
||||
heading: "Development Process",
|
||||
subheading: "How we work",
|
||||
checklistItems: [
|
||||
{
|
||||
label: "Inspection",
|
||||
detail: "Detailed site audit",
|
||||
},
|
||||
{
|
||||
label: "Planning",
|
||||
detail: "Tailored solutions",
|
||||
},
|
||||
{
|
||||
label: "Execution",
|
||||
detail: "Professional delivery",
|
||||
},
|
||||
],
|
||||
completedLabel: "Done",
|
||||
imageSrc: "https://storage.googleapis.com/webild/users/user_3FS60V67V1yEKVckyy9a9hrOiRz/uploaded-1782055994642-mum67cf0.webp?_wi=2",
|
||||
imageAlt: "commercial roofing steel sheets",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Our Services"
|
||||
title="Comprehensive Roofing & Property Expertise"
|
||||
description="From minor repairs to large commercial developments, our team handles it all with professional precision."
|
||||
features={[
|
||||
{
|
||||
title: "Roofing Services", description: "Expert installation, repair, and maintenance for both residential and commercial structures.", bentoComponent: "info-card-marquee", infoCards: [
|
||||
{
|
||||
icon: Hammer,
|
||||
label: "Installation", value: "Expert"},
|
||||
{
|
||||
icon: Wrench,
|
||||
label: "Repair", value: "Rapid"},
|
||||
{
|
||||
icon: Shield,
|
||||
label: "Safety", value: "100%"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Property Care", description: "Full property maintenance and development services tailored to your needs.", bentoComponent: "checklist-timeline", heading: "Development Process", subheading: "How we work", checklistItems: [
|
||||
{
|
||||
label: "Inspection", detail: "Detailed site audit"},
|
||||
{
|
||||
label: "Planning", detail: "Tailored solutions"},
|
||||
{
|
||||
label: "Execution", detail: "Professional delivery"},
|
||||
],
|
||||
completedLabel: "Done"},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="projects" data-section="projects">
|
||||
<SectionErrorBoundary name="projects">
|
||||
<div id="projects" data-section="projects">
|
||||
<SectionErrorBoundary name="projects">
|
||||
<FeaturesImageBento
|
||||
tag="Projects"
|
||||
title="Featured Roofing Projects"
|
||||
description="See the quality of our craftsmanship in recent successful installations."
|
||||
items={[
|
||||
{
|
||||
title: "Residential Roof",
|
||||
description: "Modern home installation",
|
||||
imageSrc: "https://storage.googleapis.com/webild/users/user_3FS60V67V1yEKVckyy9a9hrOiRz/uploaded-1782055994645-32oihcpx.webp?_wi=2",
|
||||
},
|
||||
{
|
||||
title: "Commercial Steel",
|
||||
description: "Large scale factory build",
|
||||
imageSrc: "https://storage.googleapis.com/webild/users/user_3FS60V67V1yEKVckyy9a9hrOiRz/uploaded-1782055994645-8w430x7z.webp",
|
||||
},
|
||||
{
|
||||
title: "Property Repair",
|
||||
description: "Historical restoration",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-background-new-house-portrait-first-time-buyer-house-owner-apartment-renter-flat-tenant-landlady-moving-day-buying-own-property-concept_493343-29871.jpg",
|
||||
},
|
||||
{
|
||||
title: "Waterproofing",
|
||||
description: "Elite sealing solution",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cropped-image-young-woman-artist-drawing-sketches_171337-14476.jpg",
|
||||
},
|
||||
{
|
||||
title: "Gutter Work",
|
||||
description: "Integrated drainage system",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-roofer-working-with-protection-helmet_23-2149343637.jpg",
|
||||
},
|
||||
{
|
||||
title: "Safety Audit",
|
||||
description: "Full roof inspection",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-asian-technician-man-standing-talking-smartphone-long-rows-photovoltaic-solar-panels-copy-space_1150-57278.jpg",
|
||||
},
|
||||
{
|
||||
title: "Maintenance",
|
||||
description: "Scheduled care program",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/roof-pattern_74190-4523.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Projects"
|
||||
title="Featured Roofing Projects"
|
||||
description="See the quality of our craftsmanship in recent successful installations."
|
||||
items={[
|
||||
{
|
||||
title: "Residential Roof", description: "Modern home installation", imageSrc: "https://storage.googleapis.com/webild/users/user_3FS60V67V1yEKVckyy9a9hrOiRz/uploaded-1782055994645-32oihcpx.webp"},
|
||||
{
|
||||
title: "Commercial Steel", description: "Large scale factory build", imageSrc: "https://storage.googleapis.com/webild/users/user_3FS60V67V1yEKVckyy9a9hrOiRz/uploaded-1782055994645-8w430x7z.webp"},
|
||||
{
|
||||
title: "Property Repair", description: "Historical restoration", imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-background-new-house-portrait-first-time-buyer-house-owner-apartment-renter-flat-tenant-landlady-moving-day-buying-own-property-concept_493343-29871.jpg"},
|
||||
{
|
||||
title: "Waterproofing", description: "Elite sealing solution", imageSrc: "http://img.b2bpic.net/free-photo/cropped-image-young-woman-artist-drawing-sketches_171337-14476.jpg"},
|
||||
{
|
||||
title: "Gutter Work", description: "Integrated drainage system", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-roofer-working-with-protection-helmet_23-2149343637.jpg"},
|
||||
{
|
||||
title: "Safety Audit", description: "Full roof inspection", imageSrc: "http://img.b2bpic.net/free-photo/young-asian-technician-man-standing-talking-smartphone-long-rows-photovoltaic-solar-panels-copy-space_1150-57278.jpg"},
|
||||
{
|
||||
title: "Maintenance", description: "Scheduled care program", imageSrc: "http://img.b2bpic.net/free-photo/roof-pattern_74190-4523.jpg"},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialRatingCards
|
||||
tag="Testimonials"
|
||||
title="What Clients Say"
|
||||
description="Our dedication to quality roofing has earned us trust across the region."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alice T.",
|
||||
role: "Homeowner",
|
||||
quote: "Excellent roofing service, fast and reliable.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-overjoyed-woman-rejoicing-her-success_74855-3513.jpg",
|
||||
},
|
||||
{
|
||||
name: "Bob R.",
|
||||
role: "Developer",
|
||||
quote: "GHAPH delivered beyond expectations on our commercial site.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-working-business-with-computer_482257-20185.jpg",
|
||||
},
|
||||
{
|
||||
name: "Cathy W.",
|
||||
role: "Property Manager",
|
||||
quote: "Best waterproofing solutions in the market.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-2021.jpg",
|
||||
},
|
||||
{
|
||||
name: "David M.",
|
||||
role: "Building Owner",
|
||||
quote: "Responsive and professional. Highly recommend.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-middle-aged-business-leader_1262-4823.jpg",
|
||||
},
|
||||
{
|
||||
name: "Eva G.",
|
||||
role: "Homeowner",
|
||||
quote: "Great gutter repairs, no leaks since!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-cute-girl-looking-away_23-2148436134.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Testimonials"
|
||||
title="What Clients Say"
|
||||
description="Our dedication to quality roofing has earned us trust across the region."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alice T.", role: "Homeowner", quote: "Excellent roofing service, fast and reliable.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-overjoyed-woman-rejoicing-her-success_74855-3513.jpg"},
|
||||
{
|
||||
name: "Bob R.", role: "Developer", quote: "GHAPH delivered beyond expectations on our commercial site.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-working-business-with-computer_482257-20185.jpg"},
|
||||
{
|
||||
name: "Cathy W.", role: "Property Manager", quote: "Best waterproofing solutions in the market.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-2021.jpg"},
|
||||
{
|
||||
name: "David M.", role: "Building Owner", quote: "Responsive and professional. Highly recommend.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-middle-aged-business-leader_1262-4823.jpg"},
|
||||
{
|
||||
name: "Eva G.", role: "Homeowner", quote: "Great gutter repairs, no leaks since!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-cute-girl-looking-away_23-2148436134.jpg"},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<SectionErrorBoundary name="pricing">
|
||||
<div id="pricing" data-section="pricing">
|
||||
<SectionErrorBoundary name="pricing">
|
||||
<PricingSimpleCards
|
||||
tag="Pricing"
|
||||
title="Service Packages"
|
||||
description="Transparent pricing for all your roofing and property needs."
|
||||
plans={[
|
||||
{
|
||||
tag: "Essentials",
|
||||
price: "Custom",
|
||||
description: "Perfect for minor repairs and inspections.",
|
||||
features: [
|
||||
"Roof inspection",
|
||||
"Minor leak patch",
|
||||
"Maintenance report",
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "Professional",
|
||||
price: "Custom",
|
||||
description: "Ideal for residential installation.",
|
||||
features: [
|
||||
"Full installation",
|
||||
"Material warranty",
|
||||
"Emergency service",
|
||||
],
|
||||
},
|
||||
{
|
||||
tag: "Corporate",
|
||||
price: "Custom",
|
||||
description: "Large scale commercial solutions.",
|
||||
features: [
|
||||
"Property management",
|
||||
"Large scale roofing",
|
||||
"Priority support",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Pricing"
|
||||
title="Service Packages"
|
||||
description="Transparent pricing for all your roofing and property needs."
|
||||
plans={[
|
||||
{
|
||||
tag: "Essentials", price: "Custom", description: "Perfect for minor repairs and inspections.", features: [
|
||||
"Roof inspection", "Minor leak patch", "Maintenance report"],
|
||||
},
|
||||
{
|
||||
tag: "Professional", price: "Custom", description: "Ideal for residential installation.", features: [
|
||||
"Full installation", "Material warranty", "Emergency service"],
|
||||
},
|
||||
{
|
||||
tag: "Corporate", price: "Custom", description: "Large scale commercial solutions.", features: [
|
||||
"Property management", "Large scale roofing", "Priority support"],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsSimpleCards
|
||||
tag="Performance"
|
||||
title="Proven Success"
|
||||
description="Our numbers speak for themselves."
|
||||
metrics={[
|
||||
{
|
||||
value: "500+",
|
||||
description: "Projects Completed",
|
||||
},
|
||||
{
|
||||
value: "15+",
|
||||
description: "Years Experience",
|
||||
},
|
||||
{
|
||||
value: "99%",
|
||||
description: "Client Satisfaction",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Performance"
|
||||
title="Proven Success"
|
||||
description="Our numbers speak for themselves."
|
||||
metrics={[
|
||||
{
|
||||
value: "500+", description: "Projects Completed"},
|
||||
{
|
||||
value: "15+", description: "Years Experience"},
|
||||
{
|
||||
value: "99%", description: "Client Satisfaction"},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTwoColumn
|
||||
tag="FAQ"
|
||||
title="Common Questions"
|
||||
description="Answers to the most frequently asked questions."
|
||||
items={[
|
||||
{
|
||||
question: "Do you provide emergency services?",
|
||||
answer: "Yes, we are available for emergency roof repairs.",
|
||||
},
|
||||
{
|
||||
question: "Are your materials warranted?",
|
||||
answer: "All our materials come with industry-standard warranties.",
|
||||
},
|
||||
{
|
||||
question: "Can you handle commercial projects?",
|
||||
answer: "Yes, we are equipped for large-scale commercial property works.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="FAQ"
|
||||
title="Common Questions"
|
||||
description="Answers to the most frequently asked questions."
|
||||
items={[
|
||||
{
|
||||
question: "Do you provide emergency services?", answer: "Yes, we are available for emergency roof repairs."},
|
||||
{
|
||||
question: "Are your materials warranted?", answer: "All our materials come with industry-standard warranties."},
|
||||
{
|
||||
question: "Can you handle commercial projects?", answer: "Yes, we are equipped for large-scale commercial property works."},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Contact Us"
|
||||
text="Ready to secure your roof? Get a free quote today."
|
||||
primaryButton={{
|
||||
text: "Request Free Quote",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "WhatsApp Support",
|
||||
href: "https://wa.me/yournumber",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Contact Us"
|
||||
text="Ready to secure your roof? Get a free quote today."
|
||||
primaryButton={{
|
||||
text: "Request Free Quote", href: "#"}}
|
||||
secondaryButton={{
|
||||
text: "WhatsApp Support", href: "https://wa.me/yournumber"}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user