src/app/page.tsx

@@ -11,8 +11,26 @@ import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCar
 import ContactFaq from "@/components/sections/contact/ContactFaq";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 import { Hammer, CheckCircle, Wrench, Droplet, Lightbulb, Drill, PaintBucket, Home, Image, Star, Phone } from "lucide-react";
+import { useState } from "react";
 
 export default function LandingPage() {
+  const [showContactForm, setShowContactForm] = useState(false);
+  const [formData, setFormData] = useState({
+    phone: "",    email: "",    address: ""
+  });
+
+  const handleFormSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Handle form submission here
+    console.log("Form submitted:", formData);
+    setShowContactForm(false);
+    setFormData({ phone: "", email: "", address: "" });
+  };
+
+  const handleHeroButtonClick = () => {
+    setShowContactForm(true);
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="shift-hover"
@@ -39,6 +57,70 @@ export default function LandingPage() {
         />
       </div>
 
+      {showContactForm && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-lg shadow-lg max-w-md w-full p-8">
+            <h2 className="text-2xl font-bold mb-4 text-foreground">Get Your Free Quote</h2>
+            <form onSubmit={handleFormSubmit} className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">
+                  Phone Number
+                </label>
+                <input
+                  type="tel"
+                  required
+                  value={formData.phone}
+                  onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
+                  className="w-full px-4 py-2 border border-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                  placeholder="(123) 456-7890"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">
+                  Email Address
+                </label>
+                <input
+                  type="email"
+                  required
+                  value={formData.email}
+                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                  className="w-full px-4 py-2 border border-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                  placeholder="you@example.com"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">
+                  Address
+                </label>
+                <input
+                  type="text"
+                  required
+                  value={formData.address}
+                  onChange={(e) => setFormData({ ...formData, address: e.target.value })}
+                  className="w-full px-4 py-2 border border-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                  placeholder="123 Main Street, Nampa, ID"
+                />
+              </div>
+              <div className="flex gap-3 pt-4">
+                <button
+                  type="submit"
+                  className="flex-1 bg-primary-cta text-white py-2 rounded-lg font-medium hover:opacity-90 transition"
+                >
+                  Submit
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setShowContactForm(false)}
+                  className="flex-1 bg-secondary-cta text-foreground py-2 rounded-lg font-medium hover:opacity-90 transition border border-accent"
+                >
+                  Cancel
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
       <div id="hero" data-section="hero">
         <HeroBillboardCarousel
           title="Reliable Handyman Services You Can Trust"
@@ -47,7 +129,7 @@ export default function LandingPage() {
           tagIcon={Hammer}
           tagAnimation="slide-up"
           buttons={[
-            { text: "Get a Free Quote", href: "#contact" },
+            { text: "Get a Free Quote", onClick: handleHeroButtonClick },
             { text: "View Our Work", href: "#gallery" }
           ]}
           buttonAnimation="slide-up"