diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
index a380e39..a255267 100644
--- a/src/pages/HomePage/sections/Hero.tsx
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -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>
   );
 }