src/app/page.tsx

@@ -10,8 +10,15 @@ import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCa
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import { Award, CheckCircle, Clock, MessageSquare, Phone, Shield, Sparkles, Star, Wrench } from 'lucide-react';
+import { useRouter } from 'next/navigation';
 
 export default function LandingPage() {
+  const router = useRouter();
+
+  const handleFreeInspection = () => {
+    router.push('/signup');
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -50,7 +57,7 @@ export default function LandingPage() {
           tagIcon={Shield}
           tagAnimation="slide-up"
           buttons={[
-            { text: "Get a Free Inspection", href: "#contact" },
+            { text: "Get a Free Inspection", onClick: handleFreeInspection },
             { text: "Call Now: (770) 710-9007", href: "tel:+17707109007" }
           ]}
           buttonAnimation="slide-up"
@@ -247,7 +254,7 @@ export default function LandingPage() {
           title="Get Your Roof Done Right — Without the Stress"
           description="Stop worrying about leaks, damage, or unreliable contractors. AmeriPro Roofing delivers results you can trust. Schedule your free inspection today and discover why Atlanta homeowners choose precision."
           buttons={[
-            { text: "Schedule Your Free Inspection", href: "#contact" },
+            { text: "Schedule Your Free Inspection", onClick: handleFreeInspection },
             { text: "Call Now: (770) 710-9007", href: "tel:+17707109007" }
           ]}
           buttonAnimation="slide-up"

src/app/signup/page.tsx

@@ -0,0 +1,276 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { Phone, Mail, CheckCircle } from 'lucide-react';
+
+export default function SignupPage() {
+  const router = useRouter();
+  const [formData, setFormData] = useState({
+    fullName: '',
+    email: '',
+    phone: '',
+    address: '',
+    roofType: '',
+    issue: '',
+    preferredContact: 'phone'
+  });
+
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Here you would typically send the form data to your backend
+    setSubmitted(true);
+    setTimeout(() => {
+      router.push('/');
+    }, 3000);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="compact"
+      sizing="largeSmallSizeLargeTitles"
+      background="floatingGradient"
+      cardStyle="inset"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="AmeriPro Roofing"
+          navItems={[
+            { name: "Home", id: "home" },
+            { name: "Services", id: "services" },
+            { name: "Why Us", id: "differentiators" },
+            { name: "Testimonials", id: "testimonials" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{
+            text: "Call Now: (770) 710-9007",            href: "tel:+17707109007"
+          }}
+        />
+      </div>
+
+      <div className="min-h-screen flex items-center justify-center px-4 py-20">
+        <div className="w-full max-w-2xl">
+          {!submitted ? (
+            <div className="bg-white rounded-lg shadow-lg p-8 md:p-12">
+              <div className="mb-8">
+                <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
+                  Free Roof Inspection Sign-Up
+                </h1>
+                <p className="text-lg text-gray-600">
+                  Join thousands of Atlanta homeowners who trust AmeriPro Roofing. Get your free inspection scheduled today.
+                </p>
+              </div>
+
+              <form onSubmit={handleSubmit} className="space-y-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div>
+                    <label htmlFor="fullName" className="block text-sm font-medium text-gray-700 mb-2">
+                      Full Name *
+                    </label>
+                    <input
+                      type="text"
+                      id="fullName"
+                      name="fullName"
+                      value={formData.fullName}
+                      onChange={handleChange}
+                      required
+                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      placeholder="John Doe"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
+                      Email Address *
+                    </label>
+                    <input
+                      type="email"
+                      id="email"
+                      name="email"
+                      value={formData.email}
+                      onChange={handleChange}
+                      required
+                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      placeholder="john@example.com"
+                    />
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div>
+                    <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-2">
+                      Phone Number *
+                    </label>
+                    <input
+                      type="tel"
+                      id="phone"
+                      name="phone"
+                      value={formData.phone}
+                      onChange={handleChange}
+                      required
+                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      placeholder="(770) 123-4567"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="address" className="block text-sm font-medium text-gray-700 mb-2">
+                      Address *
+                    </label>
+                    <input
+                      type="text"
+                      id="address"
+                      name="address"
+                      value={formData.address}
+                      onChange={handleChange}
+                      required
+                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                      placeholder="123 Main St, Atlanta, GA"
+                    />
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div>
+                    <label htmlFor="roofType" className="block text-sm font-medium text-gray-700 mb-2">
+                      Roof Type *
+                    </label>
+                    <select
+                      id="roofType"
+                      name="roofType"
+                      value={formData.roofType}
+                      onChange={handleChange}
+                      required
+                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    >
+                      <option value="">Select roof type</option>
+                      <option value="asphalt-shingle">Asphalt Shingle</option>
+                      <option value="metal">Metal</option>
+                      <option value="tile">Tile</option>
+                      <option value="slate">Slate</option>
+                      <option value="flat">Flat Roof</option>
+                      <option value="unknown">Not Sure</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label htmlFor="preferredContact" className="block text-sm font-medium text-gray-700 mb-2">
+                      Preferred Contact Method
+                    </label>
+                    <select
+                      id="preferredContact"
+                      name="preferredContact"
+                      value={formData.preferredContact}
+                      onChange={handleChange}
+                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    >
+                      <option value="phone">Phone</option>
+                      <option value="email">Email</option>
+                      <option value="text">Text</option>
+                    </select>
+                  </div>
+                </div>
+
+                <div>
+                  <label htmlFor="issue" className="block text-sm font-medium text-gray-700 mb-2">
+                    Roof Issue or Concern (Optional)
+                  </label>
+                  <textarea
+                    id="issue"
+                    name="issue"
+                    value={formData.issue}
+                    onChange={handleChange}
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    placeholder="Describe any visible damage, leaks, or concerns..."
+                    rows={4}
+                  />
+                </div>
+
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <p className="text-sm text-gray-600">
+                    By submitting this form, you agree to our Terms and Conditions. We respect your privacy and will only use your information to schedule your free inspection.
+                  </p>
+                </div>
+
+                <button
+                  type="submit"
+                  className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors"
+                >
+                  Schedule Free Inspection
+                </button>
+              </form>
+            </div>
+          ) : (
+            <div className="bg-white rounded-lg shadow-lg p-8 md:p-12 text-center">
+              <CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-6" />
+              <h2 className="text-3xl font-bold text-gray-900 mb-4">
+                Thank You!
+              </h2>
+              <p className="text-lg text-gray-600 mb-2">
+                Your inspection request has been received.
+              </p>
+              <p className="text-lg text-gray-600 mb-8">
+                Our team will contact you shortly at {formData.phone || formData.email}.
+              </p>
+              <div className="space-y-4">
+                <p className="text-gray-700 font-semibold">
+                  Prefer to speak with someone immediately?
+                </p>
+                <a
+                  href="tel:+17707109007"
+                  className="inline-flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-8 rounded-lg transition-colors"
+                >
+                  <Phone className="w-5 h-5" />
+                  Call Now: (770) 710-9007
+                </a>
+              </div>
+              <p className="text-sm text-gray-500 mt-8">
+                Redirecting to homepage in 3 seconds...
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Company",              items: [
+                { label: "Home", href: "/" },
+                { label: "Services", href: "/#services" },
+                { label: "Contact", href: "/#contact" }
+              ]
+            },
+            {
+              title: "Contact Info",              items: [
+                { label: "Phone: (770) 710-9007", href: "tel:+17707109007" },
+                { label: "Powder Springs, GA", href: "#" },
+                { label: "Licensed & Insured", href: "#" }
+              ]
+            }
+          ]}
+          bottomLeftText="© 2024 AmeriPro Roofing. All rights reserved."
+          bottomRightText="Serving Powder Springs & Greater Atlanta"
+          ariaLabel="Site footer"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}