bender/eab6b930-daef-4358-ab5a-d52d786689a8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_3 into main

Browse Source 
Merge version_3 into main
This commit was merged in pull request #5.
This commit is contained in:
bender
2026-06-03 21:13:54 +00:00
parent c58252fe3e 191fc94686
commit 224d126034
2 changed files with 197 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
src/app/contact/page.tsx
View File

@@ -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>
);
}
}

74
src/app/page.tsx
View File

@@ -33,8 +33,8 @@ export default function WebAgency2Page() {
<NavbarLayoutFloatingOverlay
brandName="Webild"
navItems={[
{ name: "Work", id: "/#work" },
{ name: "Services", id: "/#services" },
{ name: "Services", id: "/services" },
{ name: "Portfolio", id: "/portfolio" },
{ name: "About", id: "/#about" },
{ name: "Contact", id: "/contact" }
]}
@@ -49,7 +49,7 @@ export default function WebAgency2Page() {
background={{ variant: "canvas-reveal" }}
buttons={[
{ text: "Start Project", href: "/#contact" },
{ text: "View Work", href: "/#work" },
{ text: "View Portfolio", href: "/portfolio" }
]}
buttonAnimation="slide-up"
carouselPosition="right"
@@ -58,13 +58,13 @@ export default function WebAgency2Page() {
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp", imageAlt: "UI UX Design - SaaS platform" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-6.webp", imageAlt: "UI UX Design - Luminé skincare" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-7.webp", imageAlt: "UI UX Design - Online courses" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-9.webp", imageAlt: "UI UX Design - Business coach" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-9.webp", imageAlt: "UI UX Design - Business coach" }
]}
rightCarouselItems={[
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp", imageAlt: "UI UX Design - Luxuria travel" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-5.webp", imageAlt: "UI UX Design - Dental practice" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp", imageAlt: "UI UX Design - AI product builder" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-8.webp", imageAlt: "UI UX Design - AI automation" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-8.webp", imageAlt: "UI UX Design - AI automation" }
]}
carouselItemClassName="!aspect-[4/5]"
/>
@@ -74,27 +74,27 @@ export default function WebAgency2Page() {
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
buttons={[{ text: "All Services", href: "/#services" }]}
buttons={[{ text: "All Services", href: "/services" }]}
buttonAnimation="slide-up"
features={[
{
title: "SEO", description: "We optimize your website to rank higher on search engines and drive organic traffic.", bentoComponent: "marquee", centerIcon: Search,
variant: "text", texts: ["Keywords", "Backlinks", "Meta Tags", "Organic Traffic", "Rankings", "Analytics", "SERP", "Indexing"],
variant: "text", texts: ["Keywords", "Backlinks", "Meta Tags", "Organic Traffic", "Rankings", "Analytics", "SERP", "Indexing"]
},
{
title: "Web Development", description: "Custom-built websites that are fast, responsive, and designed to convert.", bentoComponent: "media-stack", items: [
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-2.webp", imageAlt: "Web project - AgentFlow AI platform" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-1.webp", imageAlt: "Web project - Architecture studio" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-3.webp", imageAlt: "Web project - Summit Roofing" },
],
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-3.webp", imageAlt: "Web project - Summit Roofing" }
]
},
{
title: "Branding", description: "Build a memorable brand identity that resonates with your audience.", bentoComponent: "media-stack", items: [
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", imageAlt: "Brand project 1" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp", imageAlt: "Brand project 2" },
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp", imageAlt: "Brand project 3" },
],
},
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp", imageAlt: "Brand project 3" }
]
}
]}
/>
<FeatureCardTwentySix
@@ -102,7 +102,7 @@ export default function WebAgency2Page() {
description="A selection of projects we've crafted for clients across industries."
textboxLayout="default"
useInvertedBackground={false}
buttons={[{ text: "View All Work", href: "/#work" }]}
buttons={[{ text: "View All Portfolio", href: "/portfolio" }]}
buttonAnimation="slide-up"
cardClassName="!h-auto aspect-video"
features={[
@@ -120,7 +120,7 @@ export default function WebAgency2Page() {
buttonHref: "#"},
{
title: "Dubai Real Estate", description: "Luxury property listings", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/project-5.webp", imageAlt: "Dubai Real Estate website", buttonIcon: ArrowUpRight,
buttonHref: "#"},
buttonHref: "#"}
]}
/>
<FeatureBento
@@ -141,17 +141,17 @@ export default function WebAgency2Page() {
{ name: "Camera", icon: Camera },
{ name: "Music", icon: Music },
{ name: "Settings", icon: Settings },
{ name: "Chat", icon: MessageCircle },
],
{ name: "Chat", icon: MessageCircle }
]
},
{
title: "Secure Hosting", description: "Enterprise-grade security and 99.9% uptime for your website.", bentoComponent: "reveal-icon", icon: Shield,
title: "Secure Hosting", description: "Enterprise-grade security and 99.9% uptime for your website.", bentoComponent: "reveal-icon", icon: Shield
},
{
title: "Fast Turnaround", description: "From concept to launch in record time without sacrificing quality.", bentoComponent: "timeline", heading: "Project Launch", subheading: "Week 1", items: [
{ label: "Discovery & wireframes", detail: "Day 1-3" },
{ label: "Design & development", detail: "Day 4-10" },
{ label: "Testing & deployment", detail: "Day 11-14" },
{ label: "Testing & deployment", detail: "Day 11-14" }
],
completedLabel: "Live"},
{
@@ -160,11 +160,11 @@ export default function WebAgency2Page() {
{ icon: Shield },
{ icon: Monitor },
{ icon: Zap },
{ icon: TrendingUp },
],
{ icon: TrendingUp }
]
},
{
title: "Growth Trends", description: "Data-driven insights to optimize your search presence and drive traffic.", bentoComponent: "line-chart"},
title: "Growth Trends", description: "Data-driven insights to optimize your search presence and drive traffic.", bentoComponent: "line-chart"}
]}
/>
<TestimonialCardFifteen
@@ -172,7 +172,7 @@ export default function WebAgency2Page() {
rating={5}
author="— Maria Santos, CEO at Luxuria Travel"
avatars={[
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp", alt: "Client" },
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp", alt: "Client" }
]}
ratingAnimation="slide-up"
avatarsAnimation="slide-up"
@@ -188,7 +188,7 @@ export default function WebAgency2Page() {
metrics={[
{ id: "projects", value: "100+", title: "Projects", description: "Successfully delivered across all industries", icon: Award },
{ id: "satisfaction", value: "99%", title: "Satisfaction", description: "Client satisfaction rate and counting", icon: Users },
{ id: "years", value: "8+", title: "Years", description: "Of crafting exceptional digital experiences", icon: TrendingUp },
{ id: "years", value: "8+", title: "Years", description: "Of crafting exceptional digital experiences", icon: TrendingUp }
]}
/>
<FeatureCardSixteen
@@ -199,11 +199,11 @@ export default function WebAgency2Page() {
animationType="slide-up"
negativeCard={{
items: [
"Generic templates with no personality", "Slow load times and poor performance", "No SEO strategy or search visibility", "Outdated design that hurts credibility", "No ongoing support after launch"],
"Generic templates with no personality", "Slow load times and poor performance", "No SEO strategy or search visibility", "Outdated design that hurts credibility", "No ongoing support after launch"]
}}
positiveCard={{
items: [
"Custom designs tailored to your brand", "Lightning-fast performance on all devices", "Built-in SEO to drive organic traffic", "Modern design that builds trust", "Dedicated support and maintenance"],
"Custom designs tailored to your brand", "Lightning-fast performance on all devices", "Built-in SEO to drive organic traffic", "Modern design that builds trust", "Dedicated support and maintenance"]
}}
/>
<TeamCardFive
@@ -216,7 +216,7 @@ export default function WebAgency2Page() {
team={[
{ id: "1", name: "Sarah Miller", role: "Lead Developer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp", imageAlt: "Sarah Miller" },
{ id: "2", name: "Valentina Reyes", role: "Creative Director", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp", imageAlt: "Valentina Reyes" },
{ id: "3", name: "Carlos Mendoza", role: "UX Designer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp", imageAlt: "Carlos Mendoza" },
{ id: "3", name: "Carlos Mendoza", role: "UX Designer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp", imageAlt: "Carlos Mendoza" }
]}
/>
<FaqBase
@@ -230,7 +230,7 @@ export default function WebAgency2Page() {
{ id: "2", title: "What is your pricing structure?", content: "We offer project-based pricing tailored to your needs. Every project includes design, development, SEO optimization, and post-launch support." },
{ id: "3", title: "Do you offer ongoing maintenance?", content: "Yes! We provide ongoing support and maintenance packages to keep your website updated, secure, and performing at its best." },
{ id: "4", title: "Can you redesign my existing website?", content: "Absolutely. We specialize in website redesigns that modernize your brand while preserving your existing content and SEO rankings." },
{ id: "5", title: "What technologies do you use?", content: "We build with modern technologies including Next.js, React, and Tailwind CSS to ensure fast, scalable, and maintainable websites." },
{ id: "5", title: "What technologies do you use?", content: "We build with modern technologies including Next.js, React, and Tailwind CSS to ensure fast, scalable, and maintainable websites." }
]}
/>
<ContactCTA
@@ -240,7 +240,7 @@ export default function WebAgency2Page() {
background={{ variant: "rotated-rays-animated" }}
buttons={[
{ text: "Start Your Project", href: "/contact" },
{ text: "View Our Work", href: "/#work" },
{ text: "View Our Portfolio", href: "/portfolio" }
]}
buttonAnimation="slide-up"
useInvertedBackground={false}
@@ -252,30 +252,30 @@ export default function WebAgency2Page() {
{
title: "Company", items: [
{ label: "About", href: "/#about" },
{ label: "Services", href: "/#services" },
{ label: "Work", href: "/#work" },
{ label: "Services", href: "/services" },
{ label: "Portfolio", href: "/portfolio" },
{ label: "Contact", href: "/contact" }
],
]
},
{
title: "Services", items: [
{ label: "Web Development", href: "#" },
{ label: "SEO", href: "#" },
{ label: "Branding", href: "#" },
{ label: "UI/UX Design", href: "#" },
],
{ label: "UI/UX Design", href: "#" }
]
},
{
title: "Connect", items: [
{ label: "Twitter", href: "#" },
{ label: "LinkedIn", href: "#" },
{ label: "Instagram", href: "#" },
{ label: "Dribbble", href: "#" },
],
},
{ label: "Dribbble", href: "#" }
]
}
]}
/>
</ReactLenis>
</ThemeProvider>
);
}
}