Add LICENSE, README, and Docs tab to Mission Control

app/page.tsx

@@ -18,6 +18,13 @@ const fadeUp = {
 
 type Language = "es" | "en";
 
+type LeadFormData = {
+  name: string;
+  phone: string;
+  business: string;
+  type: string;
+};
+
 const contentByLang = {
   es: {
     nav: {
@@ -718,6 +725,8 @@ const servicesByLang = {
 export default function HomePage() {
   const [lang, setLang] = useState<Language>("es");
   const [contactOpen, setContactOpen] = useState(false);
+  const [leadForm, setLeadForm] = useState<LeadFormData>({ name: "", phone: "", business: "", type: "restaurant" });
+  const [leadSubmitted, setLeadSubmitted] = useState(false);
   const content = useMemo(() => contentByLang[lang], [lang]);
   const heroSlides = useMemo<HeroSlide[]>(
     () => [
@@ -891,6 +900,91 @@ export default function HomePage() {
             ))}
           </motion.div>
 
+          {/* Lead Capture Form */}
+          {!leadSubmitted && (
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.5 }}
+              className="mt-12 max-w-md mx-auto"
+            >
+              <div className="bg-white/10 backdrop-blur rounded-xl p-6 border border-white/20">
+                <h3 className="text-lg font-bold mb-4 text-center">🚀 Pruébalo Ahora - Es Gratis</h3>
+                <p className="text-sm text-white/70 mb-4 text-center">Completa y te mostraremos tu AI en acción</p>
+                <form
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    setLeadSubmitted(true);
+                    // Here we'll connect to GHL later
+                  }}
+                  className="space-y-3"
+                >
+                  <input
+                    type="text"
+                    placeholder="Tu nombre"
+                    required
+                    value={leadForm.name}
+                    onChange={(e) => setLeadForm({ ...leadForm, name: e.target.value })}
+                    className="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2 text-white placeholder-white/50"
+                  />
+                  <input
+                    type="tel"
+                    placeholder="Tu teléfono"
+                    required
+                    value={leadForm.phone}
+                    onChange={(e) => setLeadForm({ ...leadForm, phone: e.target.value })}
+                    className="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2 text-white placeholder-white/50"
+                  />
+                  <input
+                    type="text"
+                    placeholder="Nombre de tu negocio"
+                    required
+                    value={leadForm.business}
+                    onChange={(e) => setLeadForm({ ...leadForm, business: e.target.value })}
+                    className="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2 text-white placeholder-white/50"
+                  />
+                  <select
+                    value={leadForm.type}
+                    onChange={(e) => setLeadForm({ ...leadForm, type: e.target.value })}
+                    className="w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2 text-white"
+                  >
+                    <option value="restaurant" className="text-black">🍽️ Restaurante</option>
+                    <option value="real-estate" className="text-black">🏠 Inmobiliaria</option>
+                    <option value="clinic" className="text-black">🏥 Clínica</option>
+                    <option value="car-rental" className="text-black">🚗 Alquiler de coches</option>
+                    <option value="other" className="text-black">📌 Otro</option>
+                  </select>
+                  <button
+                    type="submit"
+                    className="w-full bg-brand-pink hover:bg-[#ff7bc0] text-white font-bold py-3 rounded-lg transition"
+                  >
+                    Ver Demo AI Ahora →
+                  </button>
+                </form>
+              </div>
+            </motion.div>
+          )}
+
+          {leadSubmitted && (
+            <motion.div
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              className="mt-12 max-w-md mx-auto text-center"
+            >
+              <div className="bg-green-500/20 backdrop-blur rounded-xl p-8 border border-green-500/30">
+                <div className="text-5xl mb-4">🎉</div>
+                <h3 className="text-2xl font-bold mb-2">Perfecto, {leadForm.name}!</h3>
+                <p className="text-white/70 mb-4">Preparando tu demo personalizada...</p>
+                <a
+                  href={`/demos?type=${leadForm.type}&name=${encodeURIComponent(leadForm.business)}`}
+                  className="inline-block bg-brand-pink hover:bg-[#ff7bc0] text-white font-bold px-8 py-3 rounded-lg transition"
+                >
+                  🚀 Entrar a Demo AI
+                </a>
+              </div>
+            </motion.div>
+          )}
+
         </section>
       </header>