Spaces:
Running
Running
Create a website for a Gym company in spanish language. The name of de company is ARMAFITNESS. Direction: Ebibeyin, Equatorial Guinea. Numbers: +240222786801 / +240222245158. with pictures - Follow Up Deployment
15260ce verified | <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ARMAFITNESS - Tu Gimnasio en Ebibeyin</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .hero { | |
| background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1571902943202-507ec2618e8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1075&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .membership-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .trainer-card:hover img { | |
| transform: scale(1.05); | |
| } | |
| .gallery-item { | |
| transition: all 0.3s ease; | |
| } | |
| .gallery-item:hover { | |
| transform: scale(1.03); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: 0; | |
| left: 0; | |
| background-color: #ef4444; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <!-- Header/Navbar --> | |
| <header class="bg-gray-900 text-white sticky top-0 z-50 shadow-lg"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-dumbbell text-red-500 text-3xl mr-3"></i> | |
| <h1 class="text-2xl font-bold">ARMA<span class="text-red-500">FITNESS</span></h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#inicio" class="nav-link">Inicio</a> | |
| <a href="#servicios" class="nav-link">Servicios</a> | |
| <a href="#membresias" class="nav-link">Membresías</a> | |
| <a href="#entrenadores" class="nav-link">Entrenadores</a> | |
| <a href="#galeria" class="nav-link">Galería</a> | |
| <a href="#contacto" class="nav-link">Contacto</a> | |
| </nav> | |
| <button id="mobile-menu-button" class="md:hidden text-white focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-gray-800 px-4 py-2"> | |
| <div class="flex flex-col space-y-3"> | |
| <a href="#inicio" class="block py-2 hover:text-red-400">Inicio</a> | |
| <a href="#servicios" class="block py-2 hover:text-red-400">Servicios</a> | |
| <a href="#membresias" class="block py-2 hover:text-red-400">Membresías</a> | |
| <a href="#entrenadores" class="block py-2 hover:text-red-400">Entrenadores</a> | |
| <a href="#galeria" class="block py-2 hover:text-red-400">Galería</a> | |
| <a href="#contacto" class="block py-2 hover:text-red-400">Contacto</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="inicio" class="hero min-h-screen flex items-center justify-center text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 animate-pulse">TRANSFORMA TU CUERPO <span class="text-red-500">HOY</span></h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">El mejor gimnasio en Ebibeyin con equipos modernos y entrenadores profesionales para ayudarte a alcanzar tus metas fitness.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#membresias" class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">ÚNETE AHORA</a> | |
| <a href="#contacto" class="bg-transparent border-2 border-white hover:bg-white hover:text-gray-900 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">CONTÁCTANOS</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="servicios" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">NUESTROS <span class="text-red-500">SERVICIOS</span></h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="bg-gray-100 p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="text-red-500 text-4xl mb-4"> | |
| <i class="fas fa-dumbbell"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Entrenamiento con Pesas</h3> | |
| <p class="text-gray-700">Zona de pesas completamente equipada con máquinas modernas y mancuernas para todos los niveles.</p> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="bg-gray-100 p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="text-red-500 text-4xl mb-4"> | |
| <i class="fas fa-heartbeat"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Cardio</h3> | |
| <p class="text-gray-700">Máquinas de última generación para ejercicios cardiovasculares: cintas, elípticas y bicicletas.</p> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="bg-gray-100 p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="text-red-500 text-4xl mb-4"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Clases Grupales</h3> | |
| <p class="text-gray-700">Variedad de clases como Zumba, Spinning, CrossFit y Yoga dirigidas por instructores certificados.</p> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="bg-gray-100 p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="text-red-500 text-4xl mb-4"> | |
| <i class="fas fa-user-tie"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Entrenadores Personales</h3> | |
| <p class="text-gray-700">Programas personalizados adaptados a tus objetivos con seguimiento profesional.</p> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="bg-gray-100 p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="text-red-500 text-4xl mb-4"> | |
| <i class="fas fa-utensils"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Asesoría Nutricional</h3> | |
| <p class="text-gray-700">Planes alimenticios personalizados para complementar tu entrenamiento y maximizar resultados.</p> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="bg-gray-100 p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300"> | |
| <div class="text-red-500 text-4xl mb-4"> | |
| <i class="fas fa-spa"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Zona de Recuperación</h3> | |
| <p class="text-gray-700">Área de descanso con sauna y masajes para la recuperación muscular después del entrenamiento.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Membership Section --> | |
| <section id="membresias" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">PLANES DE <span class="text-red-500">MEMBRESÍA</span></h2> | |
| <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Elige el plan que mejor se adapte a tus necesidades y comienza tu transformación hoy mismo.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Basic Plan --> | |
| <div class="membership-card bg-white p-8 rounded-lg shadow-lg transition duration-300"> | |
| <div class="text-center mb-6"> | |
| <h3 class="text-2xl font-bold mb-2">BÁSICO</h3> | |
| <div class="text-red-500 text-4xl font-bold mb-2">15.000 XAF<span class="text-gray-500 text-lg">/mes</span></div> | |
| <p class="text-gray-500">Acceso limitado</p> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Acceso a zona de pesas</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Acceso a máquinas de cardio</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times text-red-400 mr-2"></i> | |
| <span>Clases grupales</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times text-red-400 mr-2"></i> | |
| <span>Entrenador personal</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times text-red-400 mr-2"></i> | |
| <span>Zona de recuperación</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-gray-800 hover:bg-gray-900 text-white font-bold py-3 px-4 rounded-full transition duration-300">SELECCIONAR</button> | |
| </div> | |
| <!-- Premium Plan (Featured) --> | |
| <div class="membership-card bg-red-500 text-white p-8 rounded-lg shadow-xl transform scale-105 transition duration-300"> | |
| <div class="text-center mb-6"> | |
| <div class="bg-white text-red-500 font-bold py-1 px-3 rounded-full inline-block mb-3 text-sm">MÁS POPULAR</div> | |
| <h3 class="text-2xl font-bold mb-2">PREMIUM</h3> | |
| <div class="text-white text-4xl font-bold mb-2">30.000 XAF<span class="text-gray-200 text-lg">/mes</span></div> | |
| <p class="text-gray-200">Acceso completo</p> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-white mr-2"></i> | |
| <span>Acceso ilimitado a todas las áreas</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-white mr-2"></i> | |
| <span>Todas las clases grupales incluidas</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-white mr-2"></i> | |
| <span>1 sesión con entrenador personal/mes</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-white mr-2"></i> | |
| <span>Acceso a zona de recuperación</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-white mr-2"></i> | |
| <span>Asesoría nutricional básica</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-white hover:bg-gray-100 text-red-500 font-bold py-3 px-4 rounded-full transition duration-300">SELECCIONAR</button> | |
| </div> | |
| <!-- VIP Plan --> | |
| <div class="membership-card bg-white p-8 rounded-lg shadow-lg transition duration-300"> | |
| <div class="text-center mb-6"> | |
| <h3 class="text-2xl font-bold mb-2">VIP</h3> | |
| <div class="text-red-500 text-4xl font-bold mb-2">50.000 XAF<span class="text-gray-500 text-lg">/mes</span></div> | |
| <p class="text-gray-500">Experiencia completa</p> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Acceso ilimitado 24/7</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Todas las clases grupales ilimitadas</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>4 sesiones con entrenador personal/mes</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Acceso prioritario a todas las áreas</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Plan nutricional personalizado</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-gray-800 hover:bg-gray-900 text-white font-bold py-3 px-4 rounded-full transition duration-300">SELECCIONAR</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Trainers Section --> | |
| <section id="entrenadores" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">NUESTROS <span class="text-red-500">ENTRENADORES</span></h2> | |
| <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Profesionales certificados que te guiarán en tu camino hacia una vida más saludable.</p> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Trainer 1 --> | |
| <div class="trainer-card bg-gray-100 rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" | |
| alt="Entrenador 1" class="w-full h-64 object-cover transition duration-500"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-1">Juan Mba</h3> | |
| <p class="text-red-500 mb-3">Especialista en Fuerza</p> | |
| <p class="text-gray-600 mb-4">Certificado en entrenamiento funcional y levantamiento de pesas olímpico con más de 8 años de experiencia.</p> | |
| <div class="flex space-x-3"> | |
| <a href="#" class="text-gray-600 hover:text-red-500"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-600 hover:text-red-500"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-600 hover:text-red-500"><i class="fab fa-twitter"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trainer 2 --> | |
| <div class="trainer-card bg-gray-100 rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1120&q=80" | |
| alt="Entrenadora 2" class="w-full h-64 object-cover transition duration-500"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-1">María Nsue</h3> | |
| <p class="text-red-500 mb-3">Instructora de Yoga</p> | |
| <p class="text-gray-600 mb-4">Instructora certificada en Yoga con especialización en yoga terapéutico y meditación.</p> | |
| <div class="flex space-x-3"> | |
| <a href="#" class="text-gray-600 hover:text-red-500"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-600 hover:text-red-500"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-600 hover:text-red-500"><i class="fab fa-twitter"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trainer 3 --> | |
| <div class="trainer-card bg-gray-100 rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1541534741688-6078c6bfb5c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1169&q=80" | |
| alt="Entrenador 3" class="w-full h-64 object-cover transition duration-500"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-1">Carlos Obiang</h3> | |
| <p class="text-red-500 mb-3">Especialista en CrossFit</p> | |
| <p class="text-gray-600 mb-4">Entrenador certificado en CrossFit Level 2 con experiencia en competencias nacionales e internacionales.</p> | |
| <div class="flex space-x-3"> | |
| <a href="#" class="text-gray-600 hover:text-red-500"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-600 hover:text-red-500"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-600 hover:text-red-500"><i class="fab fa-twitter"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trainer 4 --> | |
| <div class="trainer-card bg-gray-100 rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1571019614242-c955ad0a65d8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" | |
| alt="Entrenadora 4" class="w-full h-64 object-cover transition duration-500"> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-1">Ana Bikoro</h3> | |
| <p class="text-red-500 mb-3">Nutricionista Deportiva</p> | |
| <p class="text-gray-600 mb-4">Licenciada en nutrición con especialización en deportes y planes alimenticios para atletas.</p> | |
| <div class="flex space-x-3"> | |
| <a href="#" class="text-gray-600 hover:text-red-500"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-600 hover:text-red-500"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-600 hover:text-red-500"><i class="fab fa-twitter"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gallery Section --> | |
| <section id="galeria" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">GALERÍA DE <span class="text-red-500">ARMAFITNESS</span></h2> | |
| <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Conoce nuestras instalaciones y el ambiente que te espera en nuestro gimnasio.</p> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <!-- Gallery Item 1 --> | |
| <div class="gallery-item rounded-lg overflow-hidden shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1534438327276-14e5300c3a48?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" | |
| alt="Zona de pesas" class="w-full h-64 object-cover"> | |
| <div class="p-4 bg-white"> | |
| <h3 class="font-bold">Zona de Pesas</h3> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 2 --> | |
| <div class="gallery-item rounded-lg overflow-hidden shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1571902943202-507ec2618e8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1075&q=80" | |
| alt="Máquinas de cardio" class="w-full h-64 object-cover"> | |
| <div class="p-4 bg-white"> | |
| <h3 class="font-bold">Área de Cardio</h3> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 3 --> | |
| <div class="gallery-item rounded-lg overflow-hidden shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1545205597-3d9d02c29597?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" | |
| alt="Clase de spinning" class="w-full h-64 object-cover"> | |
| <div class="p-4 bg-white"> | |
| <h3 class="font-bold">Clase de Spinning</h3> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 4 --> | |
| <div class="gallery-item rounded-lg overflow-hidden shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1545389336-0c7d0e1c5bae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" | |
| alt="Zona de entrenamiento funcional" class="w-full h-64 object-cover"> | |
| <div class="p-4 bg-white"> | |
| <h3 class="font-bold">Entrenamiento Funcional</h3> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 5 --> | |
| <div class="gallery-item rounded-lg overflow-hidden shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1120&q=80" | |
| alt="Clase de yoga" class="w-full h-64 object-cover"> | |
| <div class="p-4 bg-white"> | |
| <h3 class="font-bold">Clase de Yoga</h3> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 6 --> | |
| <div class="gallery-item rounded-lg overflow-hidden shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" | |
| alt="Entrenamiento personalizado" class="w-full h-64 object-cover"> | |
| <div class="p-4 bg-white"> | |
| <h3 class="font-bold">Entrenamiento Personalizado</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">OPINIONES DE <span class="text-red-500">NUESTROS CLIENTES</span></h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-100 p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 text-xl"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4">"He estado en varios gimnasios en Ebibeyin y ARMAFITNESS es sin duda el mejor. Los entrenadores son profesionales y las instalaciones están siempre impecables."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Cliente 1" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">José Ndong</h4> | |
| <p class="text-gray-500 text-sm">Miembro desde 2021</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-100 p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 text-xl"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4">"Las clases de Zumba son increíbles! Nunca me había divertido tanto haciendo ejercicio. He perdido 8kg en 3 meses gracias a ARMAFITNESS."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Cliente 2" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Lucía Mbengono</h4> | |
| <p class="text-gray-500 text-sm">Miembro desde 2022</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-gray-100 p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 text-xl"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4">"El entrenador personal me ayudó a diseñar un programa específico para mi lesión de espalda. Ahora me siento mejor que nunca y he ganado mucha fuerza."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Cliente 3" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Antonio Esono</h4> | |
| <p class="text-gray-500 text-sm">Miembro desde 2020</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contacto" class="py-16 bg-gray-900 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">CONTACTA CON <span class="text-red-500">NOSOTROS</span></h2> | |
| <p class="text-center text-gray-300 mb-12 max-w-2xl mx-auto">Estamos aquí para responder todas tus preguntas y ayudarte a comenzar tu viaje fitness.</p> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> | |
| <!-- Contact Info --> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-6">INFORMACIÓN DE CONTACTO</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="text-red-500 text-xl mr-4 mt-1"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">DIRECCIÓN</h4> | |
| <p class="text-gray-300">Avenida de la Independencia, 123<br>Ebibeyin, Guinea Ecuatorial</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-red-500 text-xl mr-4 mt-1"> | |
| <i class="fas fa-phone-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">TELÉFONOS</h4> | |
| <p class="text-gray-300">+240 222 786 801<br>+240 222 245 158</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-red-500 text-xl mr-4 mt-1"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">CORREO ELECTRÓNICO</h4> | |
| <p class="text-gray-300">info@armafitness.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-red-500 text-xl mr-4 mt-1"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">HORARIO</h4> | |
| <p class="text-gray-300">Lunes a Viernes: 6:00 AM - 10:00 PM<br>Sábados: 8:00 AM - 8:00 PM<br>Domingos: 9:00 AM - 2:00 PM</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-bold mb-4">SÍGUENOS EN REDES SOCIALES</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center text-white"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center text-white"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contact Form --> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-6">ENVÍANOS UN MENSAJE</h3> | |
| <form class="space-y-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="name" class="block mb-1">Nombre</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded focus:outline-none focus:border-red-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block mb-1">Correo Electrónico</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded focus:outline-none focus:border-red-500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="subject" class="block mb-1">Asunto</label> | |
| <input type="text" id="subject" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded focus:outline-none focus:border-red-500"> | |
| </div> | |
| <div> | |
| <label for="message" class="block mb-1">Mensaje</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded focus:outline-none focus:border-red-500"></textarea> | |
| </div> | |
| <button type="submit" class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded transition duration-300">ENVIAR MENSAJE</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Map Section --> | |
| <div class="h-96 bg-gray-200"> | |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3979.78512337245!2d11.3233133147629!3d2.151104998410104!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMsKwMDknMDQuMCJOIDExwrAxOScyNy4wIkU!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus" | |
| width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <!-- About --> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">SOBRE ARMAFITNESS</h3> | |
| <p class="text-gray-400">El gimnasio líder en Ebibeyin con equipos de última generación y profesionales certificados para ayudarte a alcanzar tus metas fitness.</p> | |
| </div> | |
| <!-- Quick Links --> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">ENLACES RÁPIDOS</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#inicio" class="text-gray-400 hover:text-red-500 transition">Inicio</a></li> | |
| <li><a href="#servicios" class="text-gray-400 hover:text-red-500 transition">Servicios</a></li> | |
| <li><a href="#membresias" class="text-gray-400 hover:text-red-500 transition">Membresías</a></li> | |
| <li><a href="#entrenadores" class="text-gray-400 hover:text-red-500 transition">Entrenadores</a></li> | |
| <li><a href="#galeria" class="text-gray-400 hover:text-red-500 transition">Galería</a></li> | |
| <li><a href="#contacto" class="text-gray-400 hover:text-red-500 transition">Contacto</a></li> | |
| </ul> | |
| </div> | |
| <!-- Hours --> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">HORARIO</h3> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex justify-between"> | |
| <span>Lunes - Viernes</span> | |
| <span>6:00 AM - 10:00 PM</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <span>Sábados</span> | |
| <span>8:00 AM - 8:00 PM</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <span>Domingos</span> | |
| <span>9:00 AM - 2:00 PM</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Newsletter --> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">NEWSLETTER</h3> | |
| <p class="text-gray-400 mb-4">Suscríbete para recibir promociones y consejos fitness.</p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Tu correo" class="px-4 py-2 w-full rounded-l focus:outline-none text-gray-800"> | |
| <button type="submit" class="bg-red-500 hover:bg-red-600 px-4 py-2 rounded-r"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2025 ARMAFITNESS. Todos los derechos reservados.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-red-500"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-red-500"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-red-500"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-red-500"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <button id="back-to-top" class="fixed bottom-8 right-8 bg-red-500 text-white w-12 h-12 rounded-full shadow-lg hidden"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <script> | |
| // Mobile Menu Toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Back to Top Button | |
| const backToTopButton = document.getElementById('back-to-top'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTopButton.classList.remove('hidden'); | |
| } else { | |
| backToTopButton.classList.add('hidden'); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', () => { | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ArmaGenesis/topodron" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |