Bob AI: Added scroll reveal animations to services, metrics, and tes
This commit is contained in:
kudinDmitriyUp
@@ -1,196 +1,30 @@
|
||||
import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
|
||||
import HeroCenteredLogos from '@/components/sections/hero/HeroCenteredLogos';
|
||||
import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
|
||||
import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
|
||||
import { Wrench, Zap } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
// AUTO-GENERATED shell by per-section-migrate.
|
||||
// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
|
||||
// files directly. Non-block content (wrappers, non-inlinable sections) is
|
||||
// preserved inline; extracted section blocks become <XSection/> refs.
|
||||
|
||||
export default function HomePage() {
|
||||
import React from 'react';
|
||||
import HeroSection from './HomePage/sections/Hero';
|
||||
import ServicesSection from './HomePage/sections/Services';
|
||||
import MetricsSection from './HomePage/sections/Metrics';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroCenteredLogos
|
||||
avatarText="Trusted by hundreds of local customers"
|
||||
title="Professional Plumbing, Electrical, and Maintenance Services"
|
||||
description="One company for all your home and business repairs. Fast, reliable, and available 24/7 across Pretoria."
|
||||
primaryButton={{
|
||||
text: "Call 076 877 8848",
|
||||
href: "tel:0768778848",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Get a Quote",
|
||||
href: "#contact",
|
||||
}}
|
||||
names={[
|
||||
"4.7 Stars",
|
||||
"24 Google Reviews",
|
||||
"24/7 Service",
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/plumber-repair-experienced-attentive-middleaged-man-examining-bottom-kitchen-sink_259150-58266.jpg"
|
||||
avatarsSrc={[
|
||||
"http://img.b2bpic.net/free-photo/man-engaged-household-tasks-scenery_23-2151741196.jpg",
|
||||
"http://img.b2bpic.net/free-photo/male-jeweler-working-shop_23-2150914197.jpg",
|
||||
"http://img.b2bpic.net/free-photo/man-engaged-household-task_23-2151741241.jpg",
|
||||
"http://img.b2bpic.net/free-photo/sanitary-technician-gesturing-thumb-up_23-2147772204.jpg",
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<>
|
||||
<HeroSection />
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<SectionErrorBoundary name="services">
|
||||
<AboutFeaturesSplit
|
||||
tag="Our Services"
|
||||
title="One Company, Three Solutions"
|
||||
description="Stop juggling multiple contractors. We handle your plumbing, electrical, and maintenance needs under one roof with expert workmanship."
|
||||
items={[
|
||||
{
|
||||
icon: Wrench,
|
||||
title: "Plumbing Repairs",
|
||||
description: "Geysers, leak repairs, taps, and drain unblocking.",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Electrical Work",
|
||||
description: "Reliable electrical troubleshooting and repairs.",
|
||||
},
|
||||
{
|
||||
icon: Wrench,
|
||||
title: "General Maintenance",
|
||||
description: "Expert handyman jobs for home and business premises.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/male-plumber-working-fix-problems-client-s-house_23-2150990704.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ServicesSection />
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsFeatureCards
|
||||
tag="Why Choose Us"
|
||||
title="Service Excellence Guaranteed"
|
||||
description="We prioritize transparency and quality in everything we do."
|
||||
metrics={[
|
||||
{
|
||||
value: "4.7/5",
|
||||
title: "Google Rating",
|
||||
features: [
|
||||
"Over 24 reviews",
|
||||
"Trusted local reputation",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "24/7",
|
||||
title: "Availability",
|
||||
features: [
|
||||
"Emergency call-outs",
|
||||
"Always on standby",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "All-in-One",
|
||||
title: "Convenience",
|
||||
features: [
|
||||
"Plumbing, electrical, handyman",
|
||||
"Zero hassle scheduling",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<MetricsSection />
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialColumnMarqueeCards
|
||||
tag="Reviews"
|
||||
title="What Our Customers Say"
|
||||
description="Don't take our word for it—read why your neighbors trust us with their homes."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah",
|
||||
role: "Homeowner",
|
||||
quote: "The team was professional, on time, and fixed the problem properly without cutting corners. Fair pricing with no hidden costs.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-wearing-yellow-bandana_273609-13337.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mark",
|
||||
role: "Business Owner",
|
||||
quote: "My drain was blocked and I couldn't find an affordable plumber—they were quick, effective, and got the job done.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-black-woman-smile-camera_197531-33139.jpg",
|
||||
},
|
||||
{
|
||||
name: "Emily",
|
||||
role: "Homeowner",
|
||||
quote: "Great low pricing and professional. The perfect all-in-one handyman service that saved me from paying three different companies.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/classic-studio-portrait-black-american-male-dressed-suit-grey-vignette-background_613910-9578.jpg",
|
||||
},
|
||||
{
|
||||
name: "David",
|
||||
role: "Customer",
|
||||
quote: "Andre knows his job. Friendly, professional service and worth every cent. Will use them again.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-caucasian-man_641386-12.jpg",
|
||||
},
|
||||
{
|
||||
name: "Jane",
|
||||
role: "Residential",
|
||||
quote: "Fast, reliable, and friendly. Best local service we've used in Pretoria.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-frowny-smiley-faces-with-copy-space_23-2148756225.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<TestimonialsSection />
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTabbedAccordion
|
||||
tag="Support"
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about our services."
|
||||
categories={[
|
||||
{
|
||||
name: "General",
|
||||
items: [
|
||||
{
|
||||
question: "Where are you based?",
|
||||
answer: "We are based at 258 Honeysuckle Road, Magalieskruin, Pretoria.",
|
||||
},
|
||||
{
|
||||
question: "Do you offer emergency services?",
|
||||
answer: "Yes, we are available 24/7 for emergency call-outs.",
|
||||
},
|
||||
{
|
||||
question: "What areas do you serve?",
|
||||
answer: "We serve Magalieskruin and surrounding Pretoria areas.",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FaqSection />
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Contact Us"
|
||||
text="Need a reliable professional for plumbing, electrical, or repairs? Call Andre and the team today."
|
||||
primaryButton={{
|
||||
text: "Call 076 877 8848",
|
||||
href: "tel:0768778848",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Send a WhatsApp",
|
||||
href: "https://wa.me/27768778848",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ContactSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
27
src/pages/HomePage/sections/Contact.tsx
Normal file
27
src/pages/HomePage/sections/Contact.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "contact" section.
|
||||
|
||||
import React from 'react';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ContactSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Contact Us"
|
||||
text="Need a reliable professional for plumbing, electrical, or repairs? Call Andre and the team today."
|
||||
primaryButton={{
|
||||
text: "Call 076 877 8848",
|
||||
href: "tel:0768778848",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Send a WhatsApp",
|
||||
href: "https://wa.me/27768778848",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
39
src/pages/HomePage/sections/Faq.tsx
Normal file
39
src/pages/HomePage/sections/Faq.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "faq" section.
|
||||
|
||||
import React from 'react';
|
||||
import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FaqSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTabbedAccordion
|
||||
tag="Support"
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about our services."
|
||||
categories={[
|
||||
{
|
||||
name: "General",
|
||||
items: [
|
||||
{
|
||||
question: "Where are you based?",
|
||||
answer: "We are based at 258 Honeysuckle Road, Magalieskruin, Pretoria.",
|
||||
},
|
||||
{
|
||||
question: "Do you offer emergency services?",
|
||||
answer: "Yes, we are available 24/7 for emergency call-outs.",
|
||||
},
|
||||
{
|
||||
question: "What areas do you serve?",
|
||||
answer: "We serve Magalieskruin and surrounding Pretoria areas.",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
40
src/pages/HomePage/sections/Hero.tsx
Normal file
40
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "hero" section.
|
||||
|
||||
import React from 'react';
|
||||
import HeroCenteredLogos from '@/components/sections/hero/HeroCenteredLogos';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function HeroSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroCenteredLogos
|
||||
avatarText="Trusted by hundreds of local customers"
|
||||
title="Professional Plumbing, Electrical, and Maintenance Services"
|
||||
description="One company for all your home and business repairs. Fast, reliable, and available 24/7 across Pretoria."
|
||||
primaryButton={{
|
||||
text: "Call 076 877 8848",
|
||||
href: "tel:0768778848",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Get a Quote",
|
||||
href: "#contact",
|
||||
}}
|
||||
names={[
|
||||
"4.7 Stars",
|
||||
"24 Google Reviews",
|
||||
"24/7 Service",
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/plumber-repair-experienced-attentive-middleaged-man-examining-bottom-kitchen-sink_259150-58266.jpg"
|
||||
avatarsSrc={[
|
||||
"http://img.b2bpic.net/free-photo/man-engaged-household-tasks-scenery_23-2151741196.jpg",
|
||||
"http://img.b2bpic.net/free-photo/male-jeweler-working-shop_23-2150914197.jpg",
|
||||
"http://img.b2bpic.net/free-photo/man-engaged-household-task_23-2151741241.jpg",
|
||||
"http://img.b2bpic.net/free-photo/sanitary-technician-gesturing-thumb-up_23-2147772204.jpg",
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
49
src/pages/HomePage/sections/Metrics.tsx
Normal file
49
src/pages/HomePage/sections/Metrics.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "metrics" section.
|
||||
|
||||
import React from 'react';
|
||||
import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
|
||||
export default function MetricsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<ScrollReveal>
|
||||
<MetricsFeatureCards
|
||||
tag="Why Choose Us"
|
||||
title="Service Excellence Guaranteed"
|
||||
description="We prioritize transparency and quality in everything we do."
|
||||
metrics={[
|
||||
{
|
||||
value: "4.7/5",
|
||||
title: "Google Rating",
|
||||
features: [
|
||||
"Over 24 reviews",
|
||||
"Trusted local reputation",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "24/7",
|
||||
title: "Availability",
|
||||
features: [
|
||||
"Emergency call-outs",
|
||||
"Always on standby",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "All-in-One",
|
||||
title: "Convenience",
|
||||
features: [
|
||||
"Plumbing, electrical, handyman",
|
||||
"Zero hassle scheduling",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</ScrollReveal>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
42
src/pages/HomePage/sections/Services.tsx
Normal file
42
src/pages/HomePage/sections/Services.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "services" section.
|
||||
|
||||
import React from 'react';
|
||||
import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
|
||||
import { Wrench, Zap } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
|
||||
export default function ServicesSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="services" data-section="services">
|
||||
<SectionErrorBoundary name="services">
|
||||
<ScrollReveal>
|
||||
<AboutFeaturesSplit
|
||||
tag="Our Services"
|
||||
title="One Company, Three Solutions"
|
||||
description="Stop juggling multiple contractors. We handle your plumbing, electrical, and maintenance needs under one roof with expert workmanship."
|
||||
items={[
|
||||
{
|
||||
icon: Wrench,
|
||||
title: "Plumbing Repairs",
|
||||
description: "Geysers, leak repairs, taps, and drain unblocking.",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Electrical Work",
|
||||
description: "Reliable electrical troubleshooting and repairs.",
|
||||
},
|
||||
{
|
||||
icon: Wrench,
|
||||
title: "General Maintenance",
|
||||
description: "Expert handyman jobs for home and business premises.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/male-plumber-working-fix-problems-client-s-house_23-2150990704.jpg"
|
||||
/>
|
||||
</ScrollReveal>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
55
src/pages/HomePage/sections/Testimonials.tsx
Normal file
55
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "testimonials" section.
|
||||
|
||||
import React from 'react';
|
||||
import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<ScrollReveal>
|
||||
<TestimonialColumnMarqueeCards
|
||||
tag="Reviews"
|
||||
title="What Our Customers Say"
|
||||
description="Don't take our word for it—read why your neighbors trust us with their homes."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah",
|
||||
role: "Homeowner",
|
||||
quote: "The team was professional, on time, and fixed the problem properly without cutting corners. Fair pricing with no hidden costs.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-wearing-yellow-bandana_273609-13337.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mark",
|
||||
role: "Business Owner",
|
||||
quote: "My drain was blocked and I couldn't find an affordable plumber—they were quick, effective, and got the job done.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-black-woman-smile-camera_197531-33139.jpg",
|
||||
},
|
||||
{
|
||||
name: "Emily",
|
||||
role: "Homeowner",
|
||||
quote: "Great low pricing and professional. The perfect all-in-one handyman service that saved me from paying three different companies.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/classic-studio-portrait-black-american-male-dressed-suit-grey-vignette-background_613910-9578.jpg",
|
||||
},
|
||||
{
|
||||
name: "David",
|
||||
role: "Customer",
|
||||
quote: "Andre knows his job. Friendly, professional service and worth every cent. Will use them again.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-caucasian-man_641386-12.jpg",
|
||||
},
|
||||
{
|
||||
name: "Jane",
|
||||
role: "Residential",
|
||||
quote: "Fast, reliable, and friendly. Best local service we've used in Pretoria.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-frowny-smiley-faces-with-copy-space_23-2148756225.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</ScrollReveal>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user