Merge version_3 into main

Merge version_3 into main

src/app/page.tsx

@@ -8,9 +8,53 @@ import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen
 import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
+import FaqBase from '@/components/sections/faq/FaqBase';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useState } from 'react';
+import { Star } from 'lucide-react';
+import Input from '@/components/form/Input';
 
 export default function LandingPage() {
+  const [contactFormData, setContactFormData] = useState({
+    name: '',
+    email: '',
+    phone: '',
+    message: ''
+  });
+
+  const [reviewFormData, setReviewFormData] = useState({
+    name: '',
+    email: '',
+    rating: 5,
+    review: ''
+  });
+
+  const handleContactFormChange = (field, value) => {
+    setContactFormData(prev => ({
+      ...prev,
+      [field]: value
+    }));
+  };
+
+  const handleReviewFormChange = (field, value) => {
+    setReviewFormData(prev => ({
+      ...prev,
+      [field]: value
+    }));
+  };
+
+  const handleContactSubmit = () => {
+    console.log('Contact form submitted:', contactFormData);
+    alert('Thank you for your inquiry! We will contact you soon.');
+    setContactFormData({ name: '', email: '', phone: '', message: '' });
+  };
+
+  const handleReviewSubmit = () => {
+    console.log('Review submitted:', reviewFormData);
+    alert('Thank you for your review! We appreciate your feedback.');
+    setReviewFormData({ name: '', email: '', rating: 5, review: '' });
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="shift-hover"
@@ -44,7 +88,7 @@ export default function LandingPage() {
           avatars={[{
             src: "http://img.b2bpic.net/free-photo/professional-cleaning-service-person-cleaning-office_23-2150520603.jpg",            alt: "One Love Cleaning team members"
           }]}
-          avatarText="Trusted by 500+ satisfied clients"
+          avatarText="500+ 5-Star Reviews"
           buttons={[
             { text: "Get Free Quote", href: "#contact" },
             { text: "Learn More", href: "#services" }
@@ -52,6 +96,61 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="hero-form" data-section="hero-form" className="py-20 bg-background">
+        <div className="max-w-2xl mx-auto px-6 md:px-0">
+          <div className="bg-card rounded-lg p-8 md:p-12 shadow-sm">
+            <h2 className="text-4xl md:text-5xl font-bold mb-4 text-foreground">Get Your Free Quote</h2>
+            <p className="text-lg text-foreground/80 mb-8">Fill out the form below and we'll contact you within 24 hours</p>
+            <div className="space-y-6">
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Name</label>
+                <Input
+                  value={contactFormData.name}
+                  onChange={(value) => handleContactFormChange('name', value)}
+                  placeholder="Your name"
+                  required
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Email</label>
+                <Input
+                  value={contactFormData.email}
+                  onChange={(value) => handleContactFormChange('email', value)}
+                  type="email"
+                  placeholder="your@email.com"
+                  required
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Phone</label>
+                <Input
+                  value={contactFormData.phone}
+                  onChange={(value) => handleContactFormChange('phone', value)}
+                  type="tel"
+                  placeholder="(555) 123-4567"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Message</label>
+                <textarea
+                  value={contactFormData.message}
+                  onChange={(e) => handleContactFormChange('message', e.target.value)}
+                  placeholder="Tell us about your cleaning needs"
+                  rows={5}
+                  className="w-full px-4 py-3 rounded-lg bg-secondary-cta text-foreground placeholder:text-foreground/50 border border-accent focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                />
+              </div>
+              <button
+                onClick={handleContactSubmit}
+                className="w-full px-6 py-3 bg-primary-cta text-primary-cta-text rounded-lg font-semibold hover:opacity-90 transition-opacity"
+              >
+                Request Free Quote
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div id="about" data-section="about">
         <TextAbout
           tag="About Us"
@@ -97,7 +196,7 @@ export default function LandingPage() {
               id: "1",              value: "500+",              description: "Happy customers across Independence and surrounding areas"
             },
             {
-              id: "2",              value: "15 years",              description: "Of professional cleaning experience and expertise"
+              id: "2",              value: "98%",              description: "Customer satisfaction rate"
             }
           ]}
           metricsAnimation="slide-up"
@@ -135,13 +234,87 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="reviews" data-section="reviews" className="py-20 bg-card">
+        <div className="max-w-4xl mx-auto px-6 md:px-0">
+          <div className="text-center mb-12">
+            <h2 className="text-4xl md:text-5xl font-bold mb-4 text-foreground">Leave Us a Review</h2>
+            <p className="text-lg text-foreground/80 mb-6">Share your experience with One Love Cleaning and help others discover our services</p>
+            <a
+              href="https://www.google.com/maps/place/One+Love+Cleaning"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center px-6 py-3 bg-primary-cta text-primary-cta-text rounded-lg font-semibold hover:opacity-90 transition-opacity"
+            >
+              Leave a Google Review
+            </a>
+          </div>
+          <div className="bg-background rounded-lg p-8 md:p-12 shadow-sm">
+            <p className="text-foreground/70 mb-6 text-center">Or share your feedback directly with us</p>
+            <div className="space-y-6">
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Name</label>
+                <Input
+                  value={reviewFormData.name}
+                  onChange={(value) => handleReviewFormChange('name', value)}
+                  placeholder="Your name"
+                  required
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Email</label>
+                <Input
+                  value={reviewFormData.email}
+                  onChange={(value) => handleReviewFormChange('email', value)}
+                  type="email"
+                  placeholder="your@email.com"
+                  required
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Rating</label>
+                <div className="flex gap-2">
+                  {[1, 2, 3, 4, 5].map((star) => (
+                    <button
+                      key={star}
+                      onClick={() => handleReviewFormChange('rating', star)}
+                      className="transition-transform hover:scale-110"
+                    >
+                      <Star
+                        size={32}
+                        className={star <= reviewFormData.rating ? 'fill-primary-cta text-primary-cta' : 'text-accent'}
+                      />
+                    </button>
+                  ))}
+                </div>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">Your Review</label>
+                <textarea
+                  value={reviewFormData.review}
+                  onChange={(e) => handleReviewFormChange('review', e.target.value)}
+                  placeholder="Tell us about your experience"
+                  rows={5}
+                  className="w-full px-4 py-3 rounded-lg bg-secondary-cta text-foreground placeholder:text-foreground/50 border border-accent focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                />
+              </div>
+              <button
+                onClick={handleReviewSubmit}
+                className="w-full px-6 py-3 bg-primary-cta text-primary-cta-text rounded-lg font-semibold hover:opacity-90 transition-opacity"
+              >
+                Submit Review
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div id="contact" data-section="contact">
         <ContactCTA
           tag="Get In Touch"
           title="Ready for a Cleaner Space?"
           description="Contact One Love Cleaning today for a free quote. We're located at 1720 S Waubesa Ave, Independence, MO 64052 and ready to serve you."
           buttons={[
-            { text: "Request Quote", href: "#" },
+            { text: "Request Quote", href: "#hero-form" },
             { text: "Call Now", href: "tel:+15551234567" }
           ]}
           background={{ variant: "plain" }}
@@ -179,4 +352,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}