diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 27e8709..d9d2450 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -2,131 +2,322 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import { useState } from 'react';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import Textarea from '@/components/form/Textarea';
+import ButtonExpandHover from '@/components/button/ButtonExpandHover';
+import { Phone, Mail, MapPin, Clock } from "lucide-react";
+
+export default function ContactPage() {
+  const [fullName, setFullName] = useState('');
+  const [phoneNumber, setPhoneNumber] = useState('');
+  const [emailAddress, setEmailAddress] = useState('');
+  const [propertyLocation, setPropertyLocation] = useState('');
+  const [serviceRequired, setServiceRequired] = useState('');
+  const [preferredDate, setPreferredDate] = useState('');
+  const [preferredTime, setPreferredTime] = useState('');
+  const [additionalDetails, setAdditionalDetails] = useState('');
+  const [submissionSuccess, setSubmissionSuccess] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Here you would typically send the form data to a backend.
+    // For this example, we'll just simulate a successful submission.
+    console.log({
+      fullName,
+      phoneNumber,
+      emailAddress,
+      propertyLocation,
+      serviceRequired,
+      preferredDate,
+      preferredTime,
+      additionalDetails,
+    });
+    setSubmissionSuccess(true);
+    // Optionally reset form fields
+    setFullName('');
+    setPhoneNumber('');
+    setEmailAddress('');
+    setPropertyLocation('');
+    setServiceRequired('');
+    setPreferredDate('');
+    setPreferredTime('');
+    setAdditionalDetails('');
+  };
+
+  const contactInfo = [
+    {
+      icon: Phone,
+      label: "Call Us",      value: "+971 58 931 5357",      href: "tel:+971589315357"},
+    {
+      icon: Mail,
+      label: "Email",      value: "info@techguruuae.com",      href: "mailto:info@techguruuae.com"},
+    {
+      icon: MapPin,
+      label: "Office Address",      value: "Al Moosa Tower 2, Near Emirates Tower Metro Station, Sheikh Zayed Road, Trade Center First, Dubai, United Arab Emirates",      href: "https://www.google.com/maps/search/Al+Moosa+Tower+2,+Sheikh+Zayed+Road,+Dubai"},
+    {
+      icon: Clock,
+      label: "Working Hours",      value: "Monday – Sunday, 8:00 AM – 10:00 PM",      href: "#"},
+  ];
 
-export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="text-stagger"
-        defaultTextAnimation="background-highlight"
-        borderRadius="soft"
-        contentWidth="mediumSmall"
-        sizing="mediumLargeSizeMediumTitles"
-        background="floatingGradient"
-        cardStyle="layered-gradient"
-        primaryButtonStyle="radial-glow"
-        secondaryButtonStyle="layered"
-        headingFontWeight="normal"
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="mediumSmall"
+      sizing="mediumLargeSizeMediumTitles"
+      background="floatingGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        {
-          name: "Home",          id: "/"},
-        {
-          name: "Services",          id: "/services"},
-        {
-          name: "FAQ",          id: "/faq"},
-        {
-          name: "Blog",          id: "/blog"},
-        {
-          name: "Contact",          id: "/contact"},
-      ]}
-      logoSrc="http://img.b2bpic.net/free-vector/flat-design-mechanical-engineering-logo_23-2150028712.jpg"
-      logoAlt="Tech Guru Logo"
-      brandName="Tech Guru Technical Services Co"
-      button={{
-        text: "Book a Repair",        href: "/contact#appointment-form"}}
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              {
+                name: "Home",                id: "/"},
+              {
+                name: "Services",                id: "/services"},
+              {
+                name: "FAQ",                id: "/faq"},
+              {
+                name: "Blog",                id: "/blog"},
+              {
+                name: "Contact",                id: "/contact"},
+            ]}
+            logoSrc="http://img.b2bpic.net/free-vector/flat-design-mechanical-engineering-logo_23-2150028712.jpg"
+            logoAlt="Tech Guru Logo"
+            brandName="Tech Guru Technical Services Co"
+            button={{
+              text: "Book a Repair",              href: "/contact"}}
+          />
+        </div>
 
-  <div id="contact-form" data-section="contact-form">
-      <ContactText
-      useInvertedBackground={false}
-      background={{
-        variant: "plain"}}
-      text="Get in Touch with Tech Guru Technical Services Co. \n\nFill out the form below to book a repair or inquire about our services. Our team will contact you shortly to confirm your appointment. \n\n**Name:** [Input Field]\n**Phone:** [Input Field]\n**Email:** [Input Field]\n**Location:** [Input Field]\n**Service Required:** [Dropdown/Input]\n**Preferred Date:** [Date Picker]\n**Preferred Time:** [Time Picker]\n**Message:** [Textarea]\n\n**Thank you. Our technician will contact you shortly.**"
-      buttons={[
-        {
-          text: "Submit Booking",          onClick: () => console.log('Form submission simulated'),
-        },
-      ]}
-    />
-  </div>
+        <div id="contact-booking" data-section="contact-booking" className="relative w-full overflow-hidden py-16 md:py-24 bg-background text-foreground animate-fade-in">
+          <div className="container mx-auto px-4 md:px-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 lg:gap-16 items-start">
+              {/* Left Column: Booking Form */}
+              <div id="appointment-form" className="relative p-6 md:p-10 rounded-[16px] shadow-soft-shadow bg-card h-full flex flex-col justify-between animate-slide-up-initial" style={{ animationDelay: '0.1s' }}>
+                <div>
+                  <h2 className="text-3xl font-semibold mb-2 text-foreground">Book an Appliance Repair</h2>
+                  <p className="text-lg text-foreground-lighter mb-8">Fill out the form below and our technician will contact you shortly to confirm your appointment.</p>
 
-  <div id="contact-details-map" data-section="contact-details-map">
-      <ContactText
-      useInvertedBackground={true}
-      background={{
-        variant: "animated-grid"}}
-      text="Reach Us Anytime:\n\n**Phone:** +971 58 931 5357\n**Email:** info@techguruuae.com\n**Address:** Al Moosa Tower 2, Sheikh Zayed Road, Trade Center First, Dubai, UAE\n**Working Hours:** Open Daily, 8:00 AM – 10:00 PM\n\n\n**Google Map Location:** [Embedded Map Placeholder]"
-      buttons={[
-        {
-          text: "Get Directions",          href: "https://www.google.com/maps/search/Al+Moosa+Tower+2,+Sheikh+Zayed+Road,+Dubai"},
-        {
-          text: "Call Us Directly",          href: "tel:+971589315357"},
-      ]}
-    />
-  </div>
+                  {submissionSuccess ? (
+                    <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-md" role="alert">
+                      <strong className="font-bold">Thank you!</strong>
+                      <span className="block sm:inline"> Your booking has been received. Our technician will contact you shortly to confirm your appointment.</span>
+                    </div>
+                  ) : (
+                    <form onSubmit={handleSubmit} className="space-y-6">
+                      <div>
+                        <label htmlFor="fullName" className="block text-sm font-medium text-foreground-darker mb-2">Full Name</label>
+                        <input
+                          type="text"
+                          id="fullName"
+                          value={fullName}
+                          onChange={(e) => setFullName(e.target.value)}
+                          placeholder="Your full name"
+                          required
+                          className="w-full p-3 rounded-md border border-accent bg-background-light text-foreground focus:ring-primary-cta focus:border-primary-cta transition-colors duration-200"
+                        />
+                      </div>
+                      <div>
+                        <label htmlFor="phoneNumber" className="block text-sm font-medium text-foreground-darker mb-2">Phone Number</label>
+                        <input
+                          type="tel"
+                          id="phoneNumber"
+                          value={phoneNumber}
+                          onChange={(e) => setPhoneNumber(e.target.value)}
+                          placeholder="+971 5X XXX XXXX"
+                          pattern="^\+?[0-9\s\-()]{7,25}$"
+                          required
+                          className="w-full p-3 rounded-md border border-accent bg-background-light text-foreground focus:ring-primary-cta focus:border-primary-cta transition-colors duration-200"
+                        />
+                      </div>
+                      <div>
+                        <label htmlFor="emailAddress" className="block text-sm font-medium text-foreground-darker mb-2">Email Address</label>
+                        <input
+                          type="email"
+                          id="emailAddress"
+                          value={emailAddress}
+                          onChange={(e) => setEmailAddress(e.target.value)}
+                          placeholder="you@example.com"
+                          required
+                          className="w-full p-3 rounded-md border border-accent bg-background-light text-foreground focus:ring-primary-cta focus:border-primary-cta transition-colors duration-200"
+                        />
+                      </div>
+                      <div>
+                        <label htmlFor="propertyLocation" className="block text-sm font-medium text-foreground-darker mb-2">Property Location</label>
+                        <input
+                          type="text"
+                          id="propertyLocation"
+                          value={propertyLocation}
+                          onChange={(e) => setPropertyLocation(e.target.value)}
+                          placeholder="Apartment/Villa No., Street Name, Area"
+                          required
+                          className="w-full p-3 rounded-md border border-accent bg-background-light text-foreground focus:ring-primary-cta focus:border-primary-cta transition-colors duration-200"
+                        />
+                      </div>
+                      <div>
+                        <label htmlFor="serviceRequired" className="block text-sm font-medium text-foreground-darker mb-2">Service Required</label>
+                        <select
+                          id="serviceRequired"
+                          value={serviceRequired}
+                          onChange={(e) => setServiceRequired(e.target.value)}
+                          required
+                          className="w-full p-3 rounded-md border border-accent bg-background-light text-foreground focus:ring-primary-cta focus:border-primary-cta transition-colors duration-200"
+                        >
+                          <option value="" disabled>Select a service</option>
+                          <option value="washing-machine">Washing Machine Repair</option>
+                          <option value="refrigerator">Refrigerator Repair</option>
+                          <option value="dishwasher">Dishwasher Repair</option>
+                          <option value="dryer">Dryer Repair</option>
+                          <option value="oven">Oven Repair</option>
+                          <option value="microwave">Microwave Repair</option>
+                          <option value="other">Other Appliance Repair</option>
+                        </select>
+                      </div>
+                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+                        <div>
+                          <label htmlFor="preferredDate" className="block text-sm font-medium text-foreground-darker mb-2">Preferred Date</label>
+                          <input
+                            type="date"
+                            id="preferredDate"
+                            value={preferredDate}
+                            onChange={(e) => setPreferredDate(e.target.value)}
+                            required
+                            className="w-full p-3 rounded-md border border-accent bg-background-light text-foreground focus:ring-primary-cta focus:border-primary-cta transition-colors duration-200"
+                          />
+                        </div>
+                        <div>
+                          <label htmlFor="preferredTime" className="block text-sm font-medium text-foreground-darker mb-2">Preferred Time</label>
+                          <input
+                            type="time"
+                            id="preferredTime"
+                            value={preferredTime}
+                            onChange={(e) => setPreferredTime(e.target.value)}
+                            required
+                            className="w-full p-3 rounded-md border border-accent bg-background-light text-foreground focus:ring-primary-cta focus:border-primary-cta transition-colors duration-200"
+                          />
+                        </div>
+                      </div>
+                      <div>
+                        <label htmlFor="additionalDetails" className="block text-sm font-medium text-foreground-darker mb-2">Additional Details</label>
+                        <Textarea
+                          id="additionalDetails"
+                          value={additionalDetails}
+                          onChange={setAdditionalDetails}
+                          placeholder="Any specific issues or requests?"
+                          rows={4}
+                          className="w-full p-3 rounded-md border border-accent bg-background-light text-foreground focus:ring-primary-cta focus:border-primary-cta transition-colors duration-200"
+                        />
+                      </div>
+                      <ButtonExpandHover text="Book Appointment" type="submit" className="w-full mt-4" />
+                    </form>
+                  )}
+                </div>
+              </div>
 
-  <div id="footer" data-section="footer">
-      <FooterMedia
-      imageSrc="http://img.b2bpic.net/free-photo/holiday-shanghai-street-water-landmark-famous_1417-1178.jpg?_wi=2"
-      imageAlt="Dubai City Skyline"
-      logoSrc="http://img.b2bpic.net/free-vector/gradient-cleaning-service-logo-template_23-2149221053.jpg"
-      logoAlt="Tech Guru Logo"
-      logoText="Tech Guru Technical Services Co"
-      columns={[
-        {
-          title: "Quick Links",          items: [
-            {
-              label: "Home",              href: "/"},
-            {
-              label: "About Us",              href: "/#about"},
-            {
-              label: "FAQs",              href: "/faq"},
-            {
-              label: "Blog",              href: "/blog"},
-          ],
-        },
-        {
-          title: "Services",          items: [
-            {
-              label: "Washing Machine Repair",              href: "/services/washing-machine"},
-            {
-              label: "Refrigerator Repair",              href: "/services/refrigerator"},
-            {
-              label: "Dishwasher Repair",              href: "/services/dishwasher"},
-            {
-              label: "View All Services",              href: "/services"},
-          ],
-        },
-        {
-          title: "Contact Information",          items: [
-            {
-              label: "+971 58 931 5357",              href: "tel:+971589315357"},
-            {
-              label: "info@techguruuae.com",              href: "mailto:info@techguruuae.com"},
-            {
-              label: "Al Moosa Tower 2, Dubai",              href: "https://www.google.com/maps/search/Al+Moosa+Tower+2,+Sheikh+Zayed+Road,+Dubai"},
-          ],
-        },
-        {
-          title: "Business Hours",          items: [
-            {
-              label: "Open Daily",              href: "#"},
-            {
-              label: "8:00 AM – 10:00 PM",              href: "#"},
-          ],
-        },
-      ]}
-      copyrightText="© 2024 Tech Guru Technical Services Co. All rights reserved."
-    />
-  </div>
+              {/* Right Column: Contact Info & Map */}
+              <div className="flex flex-col gap-8 h-full">
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 flex-grow">
+                  {contactInfo.map((item, index) => (
+                    <a
+                      key={index}
+                      href={item.href}
+                      target={item.href.startsWith('http') || item.href.startsWith('tel') || item.href.startsWith('mailto') ? '_blank' : '_self'}
+                      rel={item.href.startsWith('http') ? 'noopener noreferrer' : undefined}
+                      className="flex flex-col items-start p-6 rounded-[16px] shadow-soft-shadow bg-card text-foreground hover:bg-card-hover transition-all duration-300 group animate-slide-up-initial" style={{ animationDelay: `${0.3 + index * 0.1}s` }}
+                    >
+                      <item.icon className="w-8 h-8 text-primary-cta mb-4 group-hover:scale-110 transition-transform duration-300" />
+                      <h3 className="text-lg font-semibold mb-1 text-foreground-darker group-hover:text-primary-cta transition-colors duration-300">{item.label}</h3>
+                      <p className="text-sm text-foreground-lighter group-hover:text-primary-cta-text-hover transition-colors duration-300">{item.value}</p>
+                    </a>
+                  ))}
+                </div>
+
+                <div className="relative w-full rounded-[16px] overflow-hidden shadow-soft-shadow animate-slide-up-initial" style={{ animationDelay: '0.7s' }}>
+                  <iframe
+                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3609.434522923758!2d55.27634358485596!3d25.20379418386408!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e5f4316d8042571%3A0x6a160d5b5b9f7a55!2sAl%20Moosa%20Tower%202%20-%20Sheikh%20Zayed%20Rd%20-%20Trade%20Centre%20First%20-%20Dubai%20-%20United%20Arab%20Emirates!5e0!3m2!1sen!2sus!4v1700000000000!5m2!1sen!2sus"
+                    width="100%"
+                    height="400"
+                    style={{ border: 0 }}
+                    allowFullScreen={false}
+                    loading="lazy"
+                    referrerPolicy="no-referrer-when-downgrade"
+                    aria-label="Google Map showing office location"
+                    className="rounded-[16px]"
+                  ></iframe>
+                </div>
+
+                <div className="flex flex-col sm:flex-row gap-4 mt-4 animate-slide-up-initial" style={{ animationDelay: '0.9s' }}>
+                  <ButtonExpandHover text="Get Directions" href="https://www.google.com/maps/search/Al+Moosa+Tower+2,+Sheikh+Zayed+Road,+Dubai" className="flex-1" />
+                  <ButtonExpandHover text="Call Now" href="tel:+971589315357" className="flex-1" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            imageSrc="http://img.b2bpic.net/free-photo/holiday-shanghai-street-water-landmark-famous_1417-1178.jpg?_wi=2"
+            imageAlt="Dubai City Skyline"
+            logoSrc="http://img.b2bpic.net/free-vector/gradient-cleaning-service-logo-template_23-2149221053.jpg"
+            logoAlt="Tech Guru Logo"
+            logoText="Tech Guru Technical Services Co"
+            columns={[
+              {
+                title: "Quick Links",                items: [
+                  {
+                    label: "Home",                    href: "/"},
+                  {
+                    label: "About Us",                    href: "/#about"},
+                  {
+                    label: "FAQs",                    href: "/faq"},
+                  {
+                    label: "Blog",                    href: "/blog"},
+                ],
+              },
+              {
+                title: "Services",                items: [
+                  {
+                    label: "Washing Machine Repair",                    href: "/services/washing-machine"},
+                  {
+                    label: "Refrigerator Repair",                    href: "/services/refrigerator"},
+                  {
+                    label: "Dishwasher Repair",                    href: "/services/dishwasher"},
+                  {
+                    label: "View All Services",                    href: "/services"},
+                ],
+              },
+              {
+                title: "Contact Information",                items: [
+                  {
+                    label: "+971 58 931 5357",                    href: "tel:+971589315357"},
+                  {
+                    label: "info@techguruuae.com",                    href: "mailto:info@techguruuae.com"},
+                  {
+                    label: "Al Moosa Tower 2, Dubai",                    href: "https://www.google.com/maps/search/Al+Moosa+Tower+2,+Sheikh+Zayed+Road,+Dubai"},
+                ],
+              },
+              {
+                title: "Business Hours",                items: [
+                  {
+                    label: "Open Daily",                    href: "#"},
+                  {
+                    label: "8:00 AM – 10:00 PM",                    href: "#"},
+                ],
+              },
+            ]}
+            copyrightText="© 2024 Tech Guru Technical Services Co. All rights reserved."
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file