From 59a722f633a488713fac3692c44b0a826c56c27e Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 3 Jun 2026 21:13:48 +0000
Subject: [PATCH] Update src/app/contact/page.tsx

---
 src/app/contact/page.tsx | 209 ++++++++++++++++++++++++++++++---------
 1 file changed, 160 insertions(+), 49 deletions(-)

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 0b04cc3..ff129dd 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,13 +1,34 @@
 "use client";
 
+import React, { useState } from 'react';
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import ContactForm from "@/components/form/ContactForm";
-import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
-import { MessageCircle } from "lucide-react";
+import Input from '@/components/form/Input';
+import { MapPin, Phone, Globe } from 'lucide-react';
+
+export const metadata = {
+  title: "Contact Us & Get a Quote - GomezGil",  description: "Reach out to GomezGil for your project quotes. Find our address, phone number 947 22 97 50, website gomezgil.com, and send us an inquiry directly.",  openGraph: {
+    title: "Contact Us & Get a Quote - GomezGil",    description: "Reach out to GomezGil for your project quotes. Find our address, phone number 947 22 97 50, website gomezgil.com, and send us an inquiry directly.",    url: "https://gomezgil.com/contact",    siteName: "GomezGil",    type: "website"
+  }
+};
 
 export default function ContactPage() {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [budget, setBudget] = useState('');
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log({ name, email, budget, message });
+    alert('Thank you for your inquiry! We will get back to you shortly.');
+    setName('');
+    setEmail('');
+    setBudget('');
+    setMessage('');
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="text-stagger"
@@ -25,57 +46,147 @@ export default function ContactPage() {
         <NavbarLayoutFloatingOverlay
           brandName="Webild"
           navItems={[
-            { name: "Home", id: "/" },
-            { name: "Services", id: "/services" },
-            { name: "Work", id: "/work" },
-            { name: "About", id: "/about" }
+            { name: "Work", id: "/#work" },
+            { name: "Services", id: "/#services" },
+            { name: "About", id: "/#about" },
+            { name: "Contact", id: "/contact" }
           ]}
           button={{ text: "Get Started", href: "/contact" }}
         />
 
-        <ContactForm
-          title="Let's Build Something Great"
-          description="Tell us about your project or simply say hello. We're excited to hear from you!"
-          tag="Get in Touch"
-          tagIcon={MessageCircle}
-          useInvertedBackground={false}
-          inputPlaceholder="Your email address"
-          buttonText="Send Message"
-          termsText="By sending a message, you're confirming that you agree with our Privacy Policy."
-          centered={true}
-        />
+        <div className="relative py-24 sm:py-32 lg:py-40 bg-background text-foreground">
+          <div className="mx-auto max-w-7xl px-6 lg:px-8">
+            <div className="mb-16 text-center">
+              <h1 className="text-5xl font-bold tracking-tight sm:text-6xl mb-4">
+                Get a Quote & Contact Us
+              </h1>
+              <p className="mt-4 text-lg leading-8 text-foreground-secondary">
+                Ready to start your project? Fill out the form below or reach out directly.
+              </p>
+            </div>
 
-        <FooterBaseCard
-          logoText="Webild"
-          copyrightText="© 2026 | Webild"
-          columns={[
-            {
-              title: "Company",              items: [
-                { label: "About", href: "/about" },
-                { label: "Services", href: "/services" },
-                { label: "Work", href: "/work" },
-                { label: "Contact", href: "/contact" }
-              ],
-            },
-            {
-              title: "Services",              items: [
-                { label: "Web Development", href: "/services" },
-                { label: "SEO", href: "/services" },
-                { label: "Branding", href: "/services" },
-                { label: "UI/UX Design", href: "/services" },
-              ],
-            },
-            {
-              title: "Connect",              items: [
-                { label: "Twitter", href: "#" },
-                { label: "LinkedIn", href: "#" },
-                { label: "Instagram", href: "#" },
-                { label: "Dribbble", href: "#" },
-              ],
-            },
-          ]}
-        />
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-16">
+              {/* Contact Information */}
+              <div>
+                <h2 className="text-3xl font-bold tracking-tight mb-6">Our Information</h2>
+                <div className="space-y-4 text-lg">
+                  <div className="flex items-center space-x-3">
+                    <MapPin className="h-6 w-6 text-primary-cta" />
+                    <span>Address: [Your Business Address Here]</span>
+                  </div>
+                  <div className="flex items-center space-x-3">
+                    <Phone className="h-6 w-6 text-primary-cta" />
+                    <span>Phone: 947 22 97 50</span>
+                  </div>
+                  <div className="flex items-center space-x-3">
+                    <Globe className="h-6 w-6 text-primary-cta" />
+                    <a href="https://gomezgil.com" target="_blank" rel="noopener noreferrer" className="text-primary-cta hover:underline">
+                      Website: gomezgil.com
+                    </a>
+                  </div>
+                </div>
+
+                {/* Map Integration Placeholder */}
+                <div className="mt-12">
+                  <h2 className="text-3xl font-bold tracking-tight mb-6">Find Us on the Map</h2>
+                  <div className="relative h-64 w-full overflow-hidden rounded-lg shadow-lg bg-gray-200 dark:bg-gray-800">
+                    <iframe
+                      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2902.937667232258!2d-2.93510208451867!3d43.256860079136915!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd4e5088d2f7e7f7%3A0x8f7f7f7f7f7f7f7f!2sBilbao!5e0!3m2!1sen!2ses!4v1678901234567!5m2!1sen!2ses"
+                      width="100%"
+                      height="100%"
+                      style={{ border: 0 }}
+                      allowFullScreen={false}
+                      loading="lazy"
+                      referrerPolicy="no-referrer-when-downgrade"
+                      title="Company Location Map"
+                      aria-label="Map showing company location"
+                    ></iframe>
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent flex items-end p-4 text-white text-sm">
+                      *Map functionality is illustrative. Actual integration requires an API key and library.
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Inquiry Form */}
+              <div className="bg-card p-8 rounded-lg shadow-lg">
+                <h2 className="text-3xl font-bold tracking-tight mb-6">Send Us a Message</h2>
+                <form onSubmit={handleSubmit} className="space-y-6">
+                  <div>
+                    <label htmlFor="name" className="block text-sm font-medium leading-6 text-foreground">
+                      Full Name
+                    </label>
+                    <div className="mt-2">
+                      <Input
+                        id="name"
+                        value={name}
+                        onChange={setName}
+                        type="text"
+                        placeholder="John Doe"
+                        required
+                        className="block w-full rounded-md border-0 py-1.5 px-3 text-foreground shadow-sm ring-1 ring-inset ring-card-border placeholder:text-foreground-secondary focus:ring-2 focus:ring-inset focus:ring-primary-cta sm:text-sm sm:leading-6"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <label htmlFor="email" className="block text-sm font-medium leading-6 text-foreground">
+                      Email Address
+                    </label>
+                    <div className="mt-2">
+                      <Input
+                        id="email"
+                        value={email}
+                        onChange={setEmail}
+                        type="email"
+                        placeholder="john.doe@example.com"
+                        required
+                        className="block w-full rounded-md border-0 py-1.5 px-3 text-foreground shadow-sm ring-1 ring-inset ring-card-border placeholder:text-foreground-secondary focus:ring-2 focus:ring-inset focus:ring-primary-cta sm:text-sm sm:leading-6"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <label htmlFor="budget" className="block text-sm font-medium leading-6 text-foreground">
+                      Project Budget (Optional)
+                    </label>
+                    <div className="mt-2">
+                      <Input
+                        id="budget"
+                        value={budget}
+                        onChange={setBudget}
+                        type="text"
+                        placeholder="E.g., $5,000 - $10,000"
+                        className="block w-full rounded-md border-0 py-1.5 px-3 text-foreground shadow-sm ring-1 ring-inset ring-card-border placeholder:text-foreground-secondary focus:ring-2 focus:ring-inset focus:ring-primary-cta sm:text-sm sm:leading-6"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <label htmlFor="message" className="block text-sm font-medium leading-6 text-foreground">
+                      Your Message
+                    </label>
+                    <div className="mt-2">
+                      <textarea
+                        id="message"
+                        value={message}
+                        onChange={(e) => setMessage(e.target.value)}
+                        rows={4}
+                        placeholder="Tell us about your project..."
+                        required
+                        className="block w-full rounded-md border-0 py-1.5 px-3 text-foreground shadow-sm ring-1 ring-inset ring-card-border placeholder:text-foreground-secondary focus:ring-2 focus:ring-inset focus:ring-primary-cta sm:text-sm sm:leading-6"
+                      ></textarea>
+                    </div>
+                  </div>
+                  <button
+                    type="submit"
+                    className="flex w-full justify-center rounded-md bg-primary-cta px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-cta/90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-cta"
+                  >
+                    Send Message
+                  </button>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file