Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -11,9 +11,26 @@ import TestimonialCardFifteen from '@/components/sections/testimonial/Testimonia
 import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
 import ContactFaq from '@/components/sections/contact/ContactFaq';
 import FooterCard from '@/components/sections/footer/FooterCard';
-import { CheckCircle, Clock, Instagram, Facebook, Linkedin, PhoneCall, Users, Zap } from 'lucide-react';
+import { CheckCircle, Clock, Instagram, Facebook, Linkedin, PhoneCall, Users, Zap, MapPin, Mail } from 'lucide-react';
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [formData, setFormData] = useState({ name: '', email: '', phone: '' });
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleFormSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Handle form submission
+    console.log('Form submitted:', formData);
+    setSubmitted(true);
+    setTimeout(() => setSubmitted(false), 3000);
+    setFormData({ name: '', email: '', phone: '' });
+  };
+
+  const handleMapClick = () => {
+    window.open('https://www.google.com/maps/search/Plaza+San+Antón+de+Armuru+1,+Amurrio,+Álava', '_blank');
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="text-shift"
@@ -35,6 +52,7 @@ export default function LandingPage() {
             { name: "Servicios", id: "services" },
             { name: "Sobre Nosotros", id: "about" },
             { name: "Testimonios", id: "testimonials" },
+            { name: "Ubicación", id: "location" },
             { name: "Contacto", id: "contact" }
           ]}
           button={{ text: "Solicitar Información", href: "contact" }}
@@ -93,7 +111,7 @@ export default function LandingPage() {
           title="En Open Your Mind School, enseñamos inglés para hablar con confianza y naturalidad"
           useInvertedBackground={true}
           buttons={[
-            { text: "Conocer Nuestro Método", href: "#services" }
+            { text: "Conocer Nuestro Método", href: "services" }
           ]}
         />
       </div>
@@ -158,6 +176,111 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="location" data-section="location">
+        <div className="w-full py-20 px-6 md:py-32 bg-gradient-to-b from-transparent to-transparent">
+          <div className="max-w-6xl mx-auto">
+            <div className="text-center mb-12">
+              <h2 className="text-4xl md:text-5xl font-bold mb-4">Nuestra Ubicación</h2>
+              <p className="text-lg text-foreground/75 mb-8">Nos encontramos en el corazón de Amurrio. ¡Ven a visitarnos!</p>
+            </div>
+
+            <div className="grid md:grid-cols-2 gap-8 items-center">
+              {/* Map Section */}
+              <div className="relative h-96 rounded-xl overflow-hidden cursor-pointer shadow-lg hover:shadow-xl transition-shadow" onClick={handleMapClick}>
+                <iframe
+                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2905.5623857245235!2d-2.791888!3d43.162056!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd4f0a0a0a0a0a0a%3A0x0!2sPlaza%20San%20Ant%C3%B3n%20de%20Armuru%201%2C%20Amurrio!5e0!3m2!1ses!2ses!4v1234567890"
+                  width="100%"
+                  height="100%"
+                  style={{ border: 0 }}
+                  allowFullScreen={true}
+                  loading="lazy"
+                  referrerPolicy="no-referrer-when-downgrade"
+                />
+                <div className="absolute inset-0 bg-black/10 hover:bg-black/5 transition-colors flex items-center justify-center">
+                  <button className="bg-primary-cta text-white px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity flex items-center gap-2">
+                    <MapPin size={20} />
+                    Ver en Google Maps
+                  </button>
+                </div>
+              </div>
+
+              {/* Lead Capture Form */}
+              <div className="space-y-6">
+                <div className="bg-card rounded-xl p-8 shadow-md">
+                  <h3 className="text-2xl font-bold mb-2">Ponte en contacto</h3>
+                  <p className="text-foreground/70 mb-6">Rellena este formulario y nos pondremos en contacto contigo en breve.</p>
+
+                  <form onSubmit={handleFormSubmit} className="space-y-4">
+                    <div>
+                      <label className="block text-sm font-medium mb-2">Nombre</label>
+                      <input
+                        type="text"
+                        value={formData.name}
+                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                        placeholder="Tu nombre"
+                        className="w-full px-4 py-2 bg-background border border-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                        required
+                      />
+                    </div>
+
+                    <div>
+                      <label className="block text-sm font-medium mb-2">Email</label>
+                      <input
+                        type="email"
+                        value={formData.email}
+                        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                        placeholder="tu@email.com"
+                        className="w-full px-4 py-2 bg-background border border-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                        required
+                      />
+                    </div>
+
+                    <div>
+                      <label className="block text-sm font-medium mb-2">Teléfono</label>
+                      <input
+                        type="tel"
+                        value={formData.phone}
+                        onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
+                        placeholder="+34 6XX XXX XXX"
+                        className="w-full px-4 py-2 bg-background border border-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                      />
+                    </div>
+
+                    <button
+                      type="submit"
+                      className="w-full bg-primary-cta text-white font-semibold py-3 rounded-lg hover:opacity-90 transition-opacity"
+                    >
+                      Enviar Solicitud
+                    </button>
+
+                    {submitted && (
+                      <div className="bg-green-100 text-green-800 p-3 rounded-lg text-center">
+                        ¡Gracias! Nos pondremos en contacto pronto.
+                      </div>
+                    )}
+                  </form>
+
+                  <div className="mt-6 space-y-3 text-sm">
+                    <div className="flex items-center gap-3">
+                      <PhoneCall size={18} className="text-primary-cta" />
+                      <span>688 90 51 74</span>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <Mail size={18} className="text-primary-cta" />
+                      <span>info@openyourmindschool.com</span>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <MapPin size={18} className="text-primary-cta" />
+                      <span>Plaza San Antón de Armuru 1, Amurrio, Álava</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div id="about" data-section="about">
         <TeamCardEleven
           title="Sobre Open Your Mind School"
@@ -229,4 +352,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}