From 883aad920315b2a5f9fabf2714c0f6afed3e294e Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 19 Mar 2026 19:52:15 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 179 +++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 159 insertions(+), 20 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index ed2a6f3..f37b12b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,9 +9,14 @@ import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import { Camera, CheckCircle, Clock, Heart, Phone, Scissors, Sparkles, Star, User, Zap, Users } from 'lucide-react';
+import { Camera, CheckCircle, Clock, Heart, Phone, Scissors, Sparkles, Star, User, Zap, Users, MapPin, Mail } from 'lucide-react';
 
 export default function LandingPage() {
+  const handleFormSubmit = (formData: { name: string; phone: string; message: string }) => {
+    console.log('Form submitted:', formData);
+    // Handle form submission (send to backend, email, etc.)
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="text-stagger"
@@ -68,7 +73,7 @@ export default function LandingPage() {
           description="With years of professional barbering experience, I'm dedicated to delivering clean, precise cuts and exceptional service every single time. Your comfort and satisfaction are my top priorities."
           subdescription="Specializing in fades, tapers, classic cuts, and kids' haircuts. Every client leaves feeling confident and looking sharp. Clean workspace, professional demeanor, welcoming atmosphere."
           icon={Scissors}
-          imageSrc="http://img.b2bpic.net/free-photo/professional-bearded-barber-man-apron-smiling-cheerfully-showing-victory-sing-standing-white-wall_141793-48512.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/professional-bearded-barber-man-apron-smiling-cheerfully-showing-victory-sign-standing-white-wall_141793-48512.jpg"
           imageAlt="Professional barber portrait"
           mediaAnimation="slide-up"
           useInvertedBackground={true}
@@ -136,22 +141,156 @@ export default function LandingPage() {
       </div>
 
       <div id="contact" data-section="contact">
-        <ContactCTA
-          tag="Get in Touch"
-          tagIcon={Phone}
-          tagAnimation="blur-reveal"
-          title="Ready for Your Perfect Cut?"
-          description="Contact us today to schedule your appointment. Call, text, or visit us in Rowlett. We're here to serve you."
-          buttons={[
-            { text: "Call (469) 922-4190", href: "tel:(469)922-4190" },
-            { text: "Text Us", href: "sms:(469)922-4190" },
-            { text: "Visit Us", href: "https://maps.google.com/?q=5701+President+George+Bush+Hwy+Suite+102+Rowlett+TX+75089" }
-          ]}
-          buttonAnimation="slide-up"
-          background={{ variant: "radial-gradient" }}
-          useInvertedBackground={false}
-          ariaLabel="Contact section - Call to action"
-        />
+        <div className="relative w-full py-16 md:py-24">
+          <div className="container mx-auto px-4 max-w-6xl">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
+              {/* Left Column - Contact Info & Hours */}
+              <div className="flex flex-col gap-8">
+                {/* Tap-to-Call Button */}
+                <div className="bg-gradient-to-r from-primary-cta to-accent p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
+                  <p className="text-sm font-semibold text-foreground/80 mb-3">Call Us Directly</p>
+                  <a
+                    href="tel:(469)922-4190"
+                    className="flex items-center gap-3 text-lg md:text-xl font-bold text-white hover:scale-105 transition-transform"
+                  >
+                    <Phone className="w-6 h-6" />
+                    (469) 922-4190
+                  </a>
+                  <p className="text-xs text-foreground/70 mt-2">Tap to call • Fast service • Professional consultation</p>
+                </div>
+
+                {/* Hours Display */}
+                <div className="bg-card border border-primary-cta/20 p-6 rounded-lg">
+                  <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
+                    <Clock className="w-5 h-5 text-primary-cta" />
+                    Business Hours
+                  </h3>
+                  <div className="space-y-2 text-sm">
+                    <div className="flex justify-between items-center">
+                      <span className="text-foreground/80">Monday - Friday</span>
+                      <span className="font-semibold text-foreground">9:00 AM - 7:00 PM</span>
+                    </div>
+                    <div className="flex justify-between items-center">
+                      <span className="text-foreground/80">Saturday</span>
+                      <span className="font-semibold text-foreground">8:00 AM - 6:00 PM</span>
+                    </div>
+                    <div className="flex justify-between items-center">
+                      <span className="text-foreground/80">Sunday</span>
+                      <span className="font-semibold text-accent">Closed</span>
+                    </div>
+                  </div>
+                  <div className="mt-4 p-3 bg-primary-cta/10 rounded flex items-center gap-2 text-sm font-semibold text-primary-cta">
+                    <CheckCircle className="w-4 h-4" />
+                    Open Now – Closes 7 PM
+                  </div>
+                </div>
+
+                {/* Address & Location */}
+                <div className="bg-card border border-accent/20 p-6 rounded-lg">
+                  <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
+                    <MapPin className="w-5 h-5 text-accent" />
+                    Visit Us
+                  </h3>
+                  <p className="text-sm text-foreground/80 mb-3">5701 President George Bush Hwy, Suite 102</p>
+                  <p className="text-sm text-foreground/80 mb-4">Rowlett, TX 75089</p>
+                  <a
+                    href="https://maps.google.com/?q=5701+President+George+Bush+Hwy+Suite+102+Rowlett+TX+75089"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-block bg-accent text-background px-4 py-2 rounded font-semibold hover:bg-accent/80 transition-colors"
+                  >
+                    Get Directions
+                  </a>
+                </div>
+              </div>
+
+              {/* Right Column - Contact Form */}
+              <div className="bg-card border border-primary-cta/10 p-8 rounded-lg shadow-lg">
+                <h3 className="text-2xl font-bold text-foreground mb-2">Send us a Message</h3>
+                <p className="text-foreground/70 text-sm mb-6">Fill out the form below and we'll get back to you shortly.</p>
+                <form
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    const formData = new FormData(e.currentTarget);
+                    handleFormSubmit({
+                      name: formData.get('name') as string,
+                      phone: formData.get('phone') as string,
+                      message: formData.get('message') as string
+                    });
+                    (e.target as HTMLFormElement).reset();
+                  }}
+                  className="space-y-4"
+                >
+                  {/* Name Field */}
+                  <div>
+                    <label htmlFor="name" className="block text-sm font-semibold text-foreground mb-2">
+                      Full Name
+                    </label>
+                    <input
+                      type="text"
+                      id="name"
+                      name="name"
+                      placeholder="Your full name"
+                      required
+                      className="w-full px-4 py-2 bg-background border border-foreground/20 rounded text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta focus:border-transparent"
+                    />
+                  </div>
+
+                  {/* Phone Field */}
+                  <div>
+                    <label htmlFor="phone" className="block text-sm font-semibold text-foreground mb-2">
+                      Phone Number
+                    </label>
+                    <input
+                      type="tel"
+                      id="phone"
+                      name="phone"
+                      placeholder="(XXX) XXX-XXXX"
+                      required
+                      className="w-full px-4 py-2 bg-background border border-foreground/20 rounded text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta focus:border-transparent"
+                    />
+                  </div>
+
+                  {/* Message Field */}
+                  <div>
+                    <label htmlFor="message" className="block text-sm font-semibold text-foreground mb-2">
+                      Message
+                    </label>
+                    <textarea
+                      id="message"
+                      name="message"
+                      placeholder="Tell us about your service needs..."
+                      rows={4}
+                      required
+                      className="w-full px-4 py-2 bg-background border border-foreground/20 rounded text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta focus:border-transparent resize-none"
+                    />
+                  </div>
+
+                  {/* Submit Button */}
+                  <button
+                    type="submit"
+                    className="w-full bg-gradient-to-r from-primary-cta to-accent text-white font-semibold py-3 rounded hover:shadow-lg transition-shadow"
+                  >
+                    Send Message
+                  </button>
+                </form>
+              </div>
+            </div>
+
+            {/* Google Maps Embed */}
+            <div className="mt-12 rounded-lg overflow-hidden shadow-lg border border-primary-cta/10">
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3342.8269385639093!2d-96.4719!3d32.8313!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x864c1d3e0000000b%3A0x0!2sRowlett%2C%20TX!5e0!3m2!1sen!2sus!4v1234567890"
+                width="100%"
+                height="400"
+                style={{ border: 0 }}
+                allowFullScreen={true}
+                loading="lazy"
+                referrerPolicy="no-referrer-when-downgrade"
+              />
+            </div>
+          </div>
+        </div>
       </div>
 
       <div id="footer" data-section="footer">
@@ -170,7 +309,7 @@ export default function LandingPage() {
                 { label: "Call (469) 922-4190", href: "tel:(469)922-4190" },
                 { label: "Text Us", href: "sms:(469)922-4190" },
                 { label: "Address", href: "https://maps.google.com/?q=5701+President+George+Bush+Hwy+Suite+102+Rowlett+TX+75089" },
-                { label: "Hours", href: "#" }
+                { label: "Hours", href: "#contact" }
               ]
             },
             {
@@ -188,4 +327,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
-- 
2.49.1