Update src/app/contact/page.tsx
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user