Merge version_2_1782164898164 into main #1
@@ -1,196 +1,34 @@
|
||||
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';
|
||||
|
||||
|
||||
import SplashSection from './HomePage/sections/Splash';
|
||||
import ReviewSubmissionSection from './HomePage/sections/ReviewSubmission';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 />
|
||||
<ReviewSubmissionSection />
|
||||
|
||||
<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 />
|
||||
<SplashSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
46
src/pages/HomePage/sections/Metrics.tsx
Normal file
46
src/pages/HomePage/sections/Metrics.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
// 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";
|
||||
|
||||
export default function MetricsSection(): React.JSX.Element {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
74
src/pages/HomePage/sections/ReviewSubmission.tsx
Normal file
74
src/pages/HomePage/sections/ReviewSubmission.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import React, { useState } from 'react';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Input from '@/components/ui/Input';
|
||||
import Label from '@/components/ui/Label';
|
||||
import Textarea from '@/components/ui/Textarea';
|
||||
import ScrollReveal from '@/components/ui/ScrollReveal';
|
||||
import TextAnimation from '@/components/ui/TextAnimation';
|
||||
import Tag from '@/components/ui/Tag';
|
||||
import ImageOrVideo from '@/components/ui/ImageOrVideo';
|
||||
|
||||
export default function ReviewSubmissionSection() {
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSubmitted(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<section data-webild-section="review-submission" className="relative w-full py-24 bg-background">
|
||||
<div className="w-content-width mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<ScrollReveal variant="slide-up">
|
||||
<div className="space-y-6">
|
||||
<Tag text="Feedback" />
|
||||
<TextAnimation
|
||||
text="Leave a Review"
|
||||
variant="slide-up"
|
||||
gradientText={false}
|
||||
tag="h2"
|
||||
className="text-4xl md:text-5xl font-bold text-foreground"
|
||||
/>
|
||||
<p className="text-lg text-accent">
|
||||
We value your feedback! Let us know how we did on your recent plumbing, electrical, or maintenance service.
|
||||
</p>
|
||||
|
||||
{submitted ? (
|
||||
<div className="p-6 card rounded-lg border border-border bg-card text-center">
|
||||
<h3 className="text-2xl font-semibold text-foreground mb-2">Thank You!</h3>
|
||||
<p className="text-accent">Your review has been submitted successfully.</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Your Name</Label>
|
||||
<Input id="name" required placeholder="John Doe" className="w-full" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="rating">Rating (1-5)</Label>
|
||||
<Input id="rating" type="number" min="1" max="5" required placeholder="5" className="w-full" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="review">Review</Label>
|
||||
<Textarea id="review" required rows={4} placeholder="Write your review here..." className="w-full" />
|
||||
</div>
|
||||
<Button text="Submit Review" variant="primary" className="w-full" />
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<ScrollReveal variant="fade-blur" delay={0.2}>
|
||||
<div className="relative aspect-square md:aspect-[4/3] lg:aspect-square rounded-lg overflow-hidden">
|
||||
<ImageOrVideo
|
||||
imageSrc="https://images.unsplash.com/photo-1581094288338-2314dddb7ece?auto=format&fit=crop&q=80"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
39
src/pages/HomePage/sections/Services.tsx
Normal file
39
src/pages/HomePage/sections/Services.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 "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";
|
||||
|
||||
export default function ServicesSection(): React.JSX.Element {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
51
src/pages/HomePage/sections/Splash.tsx
Normal file
51
src/pages/HomePage/sections/Splash.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Button from '@/components/ui/Button';
|
||||
|
||||
export default function SplashSection() {
|
||||
const [isVisible, setIsVisible] = useState(true);
|
||||
const [isSplashing, setIsSplashing] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (isVisible) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = 'unset';
|
||||
}
|
||||
return () => {
|
||||
document.body.style.overflow = 'unset';
|
||||
};
|
||||
}, [isVisible]);
|
||||
|
||||
if (!isVisible) return null;
|
||||
|
||||
const handleEnter = () => {
|
||||
setIsSplashing(true);
|
||||
setTimeout(() => {
|
||||
setIsVisible(false);
|
||||
}, 1200);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
data-webild-section="splash"
|
||||
className={`fixed inset-0 z-[100] flex flex-col items-center justify-center bg-background overflow-hidden transition-opacity duration-500 ${isSplashing ? 'opacity-0 delay-700' : 'opacity-100'}`}
|
||||
>
|
||||
<div className={`relative z-10 text-center px-4 transition-all duration-300 ${isSplashing ? 'opacity-0 scale-90' : 'opacity-100 scale-100'}`}>
|
||||
<h1 className="text-4xl md:text-6xl font-bold text-foreground mb-8">
|
||||
AS Plumbing, Electrical & Maintenance
|
||||
</h1>
|
||||
<Button
|
||||
text="Enter the New Era of Plumbing"
|
||||
onClick={handleEnter}
|
||||
variant="primary"
|
||||
className="text-lg md:text-xl px-8 py-4"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={`absolute inset-0 bg-blue-500 z-20 flex items-center justify-center transition-all duration-1000 ease-in-out ${isSplashing ? 'translate-y-[-20%] rounded-t-none' : 'translate-y-full rounded-t-[50%]'}`}
|
||||
>
|
||||
<div className="w-full h-full opacity-30 bg-[url('https://images.unsplash.com/photo-1527066236129-8bf29eb3c05a?auto=format&fit=crop&q=80')] bg-cover bg-center mix-blend-overlay" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
52
src/pages/HomePage/sections/Testimonials.tsx
Normal file
52
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
// 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";
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user