bender/eae7b260-8e90-45d3-af4c-9e4a751d45c9
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_3_1782179172075 into main #3

Merged
bender merged 1 commits from version_3_1782179172075 into main 2026-06-23 01:49:01 +00:00
Conversation 0 Commits 1 Files Changed 1 +72 -11
1 changed files with 72 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/pages/HomePage/sections/Hero.tsx
View File

@@ -1,23 +1,84 @@
// 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 React, { useState, useEffect } from 'react';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
import Input from "@/components/ui/Input";
import Textarea from "@/components/ui/Textarea";
export default function HeroSection(): React.JSX.Element {
const [isModalOpen, setIsModalOpen] = useState(false);
useEffect(() => {
const handleClick = (e: MouseEvent) => {
const target = e.target as HTMLElement;
const link = target.closest('a');
if (link && link.getAttribute('href') === '#quote') {
e.preventDefault();
setIsModalOpen(true);
}
};
document.addEventListener('click', handleClick);
return () => document.removeEventListener('click', handleClick);
}, []);
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
const formData = new FormData(e.target as HTMLFormElement);
const name = formData.get('name');
const phone = formData.get('phone');
const details = formData.get('details');
const message = `New Quote Request:%0A- Name: ${name}%0A- Phone: ${phone}%0A- Details: ${details}`;
window.open(`https://wa.me/15551234567?text=${message}`, '_blank');
setIsModalOpen(false);
};
return (
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroSplit
tag="AquaFlow Plumbing Services"
title="Elite Plumbing Excellence in Your Home"
description="Experience professional plumbing care with 24/7 emergency support. We provide luxury service and rapid response for all your residential and commercial needs."
primaryButton={{ text: "Get Free Quote", href: "#contact" }}
secondaryButton={{ text: "Call Now", href: "tel:+15551234567" }}
imageSrc="http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721552.jpg"
/>
</SectionErrorBoundary>
<SectionErrorBoundary name="hero">
<HeroSplit
tag="AquaFlow Plumbing Services"
title="Elite Plumbing Excellence in Your Home"
description="Experience professional plumbing care with 24/7 emergency support. We provide luxury service and rapid response for all your residential and commercial needs."
primaryButton={{ text: "Get Free Quote", href: "#quote" }}
secondaryButton={{ text: "Call Now", href: "tel:+15551234567" }}
imageSrc="http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721552.jpg"
/>
{isModalOpen && (
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm">
<div className="bg-card w-full max-w-md p-6 rounded-lg relative shadow-xl border border-white/10">
<button
onClick={() => setIsModalOpen(false)}
className="absolute top-4 right-4 text-accent hover:text-foreground transition-colors"
aria-label="Close"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</button>
<h3 className="text-2xl font-bold text-foreground mb-2">Get a Free Quote</h3>
<p className="text-accent mb-6">Fill out the details below and we'll get back to you via WhatsApp.</p>
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
<div>
<label className="block text-sm font-medium text-foreground mb-1">Name</label>
<Input name="name" placeholder="Your Name" required className="w-full" />
</div>
<div>
<label className="block text-sm font-medium text-foreground mb-1">Phone Number</label>
<Input name="phone" type="tel" placeholder="Your Phone Number" required className="w-full" />
</div>
<div>
<label className="block text-sm font-medium text-foreground mb-1">Issue Details</label>
<Textarea name="details" placeholder="Describe your plumbing issue..." required className="w-full min-h-[100px]" />
</div>
<button type="submit" className="primary-button w-full mt-2 py-3 rounded font-medium">
Send via WhatsApp
</button>
</form>
</div>
</div>
)}
</SectionErrorBoundary>
</div>
);
}