diff --git a/batamanta-landing b/batamanta-landing deleted file mode 160000 index 0b7e6b4..0000000 --- a/batamanta-landing +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 0b7e6b48dbd016f8031ae1699ed3ffacb1ad119f diff --git a/demo/Dockerfile b/demo/Dockerfile new file mode 100644 index 0000000..05cfcf0 --- /dev/null +++ b/demo/Dockerfile @@ -0,0 +1,4 @@ +# Use official Nginx image +FROM nginx:alpine +COPY . /usr/share/nginx/html +EXPOSE 80 \ No newline at end of file diff --git a/demo/README.md b/demo/README.md new file mode 100644 index 0000000..cd7eba9 --- /dev/null +++ b/demo/README.md @@ -0,0 +1,48 @@ +# Batamanta Inteligente Landing Page + +La landing page oficial para la Batamanta Inteligente, la batamanta más avanzada del mundo. Inspirada en el diseño de la página de Google Pixel 9a. + +## Características +- Diseño moderno, limpio y responsivo +- SEO optimizado (meta tags, Open Graph, JSON-LD) +- Secciones: Hero, Características, Galería, Precio, FAQ, Compra y Footer +- Accesibilidad y buenas prácticas web +- Dockerfile para despliegue sencillo + +## Estructura del Proyecto +- `index.html`: Página principal +- `assets/css/style.css`: Estilos principales +- `assets/img/`: Imágenes y recursos +- `Dockerfile`: Para servir el sitio estático +- `README.md`: Este archivo + +## Cómo ejecutar localmente + +### Opción 1: Servidor local simple + +```bash +cd demo +python3 -m http.server 8080 +``` + +Abre [http://localhost:8080](http://localhost:8080) en tu navegador. + +### Opción 2: Usando Docker + +```bash +docker build -t batamanta-landing . +docker run -d -p 8080:80 batamanta-landing +``` + +Abre [http://localhost:8080](http://localhost:8080) en tu navegador. + +## SEO Destacado +- Meta tags para título, descripción y palabras clave +- Open Graph y Twitter Card para compartir en redes sociales +- Datos estructurados JSON-LD para producto +- Imágenes con atributos alt +- Estructura semántica y accesible + +--- + +© 2024 Batamanta. Todos los derechos reservados. \ No newline at end of file diff --git a/demo/assets/css/style.css b/demo/assets/css/style.css new file mode 100644 index 0000000..fdd4624 --- /dev/null +++ b/demo/assets/css/style.css @@ -0,0 +1,323 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); + +:root { + --primary: #3c4043; + --accent: #4285f4; + --background: #fff; + --text: #202124; + --muted: #5f6368; + --cta: #1a73e8; + --cta-hover: #1765c1; + --border: #e0e0e0; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: 'Roboto', Arial, sans-serif; + background: var(--background); + color: var(--text); + line-height: 1.6; +} + +header { + background: var(--background); + border-bottom: 1px solid var(--border); + position: sticky; + top: 0; + z-index: 100; +} +nav { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1200px; + margin: 0 auto; + padding: 1rem 2rem; +} +.logo { + font-size: 1.8rem; + font-weight: 700; + color: var(--accent); +} +nav ul { + list-style: none; + display: flex; + gap: 2rem; +} +nav a { + text-decoration: none; + color: var(--primary); + font-weight: 500; + transition: color 0.2s; +} +nav a.cta { + background: var(--cta); + color: #fff; + padding: 0.5rem 1.2rem; + border-radius: 24px; + font-weight: 700; + transition: background 0.2s; +} +nav a.cta:hover { + background: var(--cta-hover); +} +nav a:hover { + color: var(--accent); +} + +.hero { + background: linear-gradient(90deg, #e3f2fd 0%, #fff 100%); + text-align: center; + padding: 4rem 2rem 3rem 2rem; +} +.hero h1 { + font-size: 2.8rem; + font-weight: 700; + margin-bottom: 1rem; +} +.hero p { + font-size: 1.3rem; + color: var(--muted); + margin-bottom: 2rem; +} +.hero .cta { + font-size: 1.1rem; + padding: 0.8rem 2.2rem; + border-radius: 30px; + background: var(--cta); + color: #fff; + font-weight: 700; + border: none; + cursor: pointer; + transition: background 0.2s; + text-decoration: none; +} +.hero .cta:hover { + background: var(--cta-hover); +} + +.features { + max-width: 1200px; + margin: 3rem auto; + padding: 0 2rem; +} +.features h2 { + text-align: center; + font-size: 2rem; + margin-bottom: 2rem; +} +.features-list { + display: flex; + gap: 2rem; + justify-content: center; + flex-wrap: wrap; +} +.feature-item { + background: #f8f9fa; + border-radius: 16px; + padding: 2rem 1.5rem; + text-align: center; + flex: 1 1 250px; + max-width: 320px; + box-shadow: 0 2px 8px rgba(60,64,67,0.06); +} +.feature-item img { + width: 64px; + height: 64px; + margin-bottom: 1rem; +} +.feature-item h3 { + font-size: 1.2rem; + margin-bottom: 0.5rem; +} +.feature-item p { + color: var(--muted); +} + +.gallery { + background: #f1f3f4; + padding: 3rem 2rem; +} +.gallery h2 { + text-align: center; + font-size: 2rem; + margin-bottom: 2rem; +} +.gallery-slider { + display: flex; + gap: 1.5rem; + justify-content: center; + flex-wrap: wrap; +} +.gallery-slider img { + width: 320px; + height: 220px; + object-fit: cover; + border-radius: 12px; + box-shadow: 0 2px 8px rgba(60,64,67,0.08); +} + +.pricing { + max-width: 600px; + margin: 3rem auto; + text-align: center; +} +.pricing h2 { + font-size: 2rem; + margin-bottom: 1.5rem; +} +.price-box { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + margin-bottom: 1rem; +} +.price { + font-size: 2.2rem; + font-weight: 700; + color: var(--cta); +} +.old-price { + font-size: 1.2rem; + color: #b0b0b0; + text-decoration: line-through; +} +.pricing .cta { + margin-left: 1.5rem; + font-size: 1.1rem; + padding: 0.7rem 2rem; + border-radius: 30px; + background: var(--cta); + color: #fff; + font-weight: 700; + border: none; + cursor: pointer; + transition: background 0.2s; + text-decoration: none; +} +.pricing .cta:hover { + background: var(--cta-hover); +} +.pricing p { + color: var(--muted); + margin-top: 0.5rem; +} + +.faq { + max-width: 800px; + margin: 3rem auto; + padding: 0 2rem; +} +.faq h2 { + text-align: center; + font-size: 2rem; + margin-bottom: 2rem; +} +.faq-list { + display: flex; + flex-direction: column; + gap: 1.5rem; +} +.faq-item h3 { + font-size: 1.1rem; + color: var(--primary); + margin-bottom: 0.3rem; +} +.faq-item p { + color: var(--muted); +} + +.buy { + max-width: 500px; + margin: 3rem auto; + padding: 2rem; + background: #f8f9fa; + border-radius: 16px; + box-shadow: 0 2px 8px rgba(60,64,67,0.06); + text-align: center; +} +.buy h2 { + font-size: 1.5rem; + margin-bottom: 1.5rem; +} +.buy-form { + display: flex; + flex-direction: column; + gap: 1rem; +} +.buy-form input { + padding: 0.8rem 1rem; + border: 1px solid var(--border); + border-radius: 8px; + font-size: 1rem; +} +.buy-form button.cta { + font-size: 1.1rem; + padding: 0.8rem 2rem; + border-radius: 30px; + background: var(--cta); + color: #fff; + font-weight: 700; + border: none; + cursor: pointer; + transition: background 0.2s; +} +.buy-form button.cta:hover { + background: var(--cta-hover); +} + +footer { + background: var(--background); + border-top: 1px solid var(--border); + padding: 2rem 0; + margin-top: 3rem; +} +.footer-content { + max-width: 1200px; + margin: 0 auto; + text-align: center; + color: var(--muted); +} +.social-links a { + color: var(--accent); + text-decoration: none; + margin: 0 0.5rem; + transition: color 0.2s; +} +.social-links a:hover { + color: var(--cta); +} + +@media (max-width: 900px) { + .features-list, .gallery-slider { + flex-direction: column; + align-items: center; + } + nav ul { + gap: 1rem; + } +} + +@media (max-width: 600px) { + nav { + flex-direction: column; + gap: 1rem; + padding: 1rem; + } + .hero { + padding: 2rem 1rem 2rem 1rem; + } + .features, .faq, .gallery, .pricing, .buy { + padding: 1rem; + } + .gallery-slider img { + width: 100%; + height: 180px; + } +} \ No newline at end of file diff --git a/demo/assets/img/.keep b/demo/assets/img/.keep new file mode 100644 index 0000000..4a0561f --- /dev/null +++ b/demo/assets/img/.keep @@ -0,0 +1 @@ +# This file ensures the img directory exists for image assets and version control. \ No newline at end of file diff --git a/demo/docker-compose.yml b/demo/docker-compose.yml new file mode 100644 index 0000000..c04280e --- /dev/null +++ b/demo/docker-compose.yml @@ -0,0 +1,8 @@ +version: '3.8' +services: + web: + build: . + ports: + - "8080:80" + container_name: batamanta-landing + restart: unless-stopped \ No newline at end of file diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..6a216a1 --- /dev/null +++ b/demo/index.html @@ -0,0 +1,135 @@ + + + + + + Batamanta Inteligente - La Mejor Batamanta del Mundo + + + + + + + + + + + + + + + + +
+ +
+
+
+

Batamanta Inteligente

+

La batamanta más avanzada del mundo. Comodidad, tecnología y estilo en uno.

+ ¡Cómprala ahora! +
+
+

Características Destacadas

+
+
+ Tecnología Smart +

Tecnología Smart

+

Controla la temperatura y funciones desde tu móvil.

+
+
+ Ultra Comodidad +

Ultra Comodidad

+

Materiales premium para el máximo confort.

+
+
+ Diseño Moderno +

Diseño Moderno

+

Estilo elegante que se adapta a cualquier hogar.

+
+
+
+ +
+

Precio y Oferta

+
+ 79,99 € + 99,99 € + Comprar ahora +
+

Envío gratis y devolución en 15 días.

+
+
+

Preguntas Frecuentes

+
+
+

¿Qué hace inteligente a la Batamanta?

+

Incluye sensores y conectividad para ajustar la temperatura y otras funciones desde tu smartphone.

+
+
+

¿Qué tallas hay disponibles?

+

Una talla única, adaptable a todas las personas.

+
+
+

¿Cómo se lava?

+

Es lavable a máquina, siguiendo las instrucciones incluidas.

+
+
+
+
+

Compra tu Batamanta Inteligente

+
+ + + +
+
+
+ + + \ No newline at end of file