xaviscript/batamanta-landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initial Batamanta landing page structure, SEO, Docker, and assets folders

Browse Source
This commit is contained in:
Javier Sanchez 2025-06-24 11:02:29 +00:00
parent a8654856df
commit 0a6f4c1b20
7 changed files with 519 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
batamanta-landing

@ -1 +0,0 @@
Subproject commit 0b7e6b48dbd016f8031ae1699ed3ffacb1ad119f

4
demo/Dockerfile Normal file
View File

@ -0,0 +1,4 @@
# Use official Nginx image
FROM nginx:alpine
COPY . /usr/share/nginx/html
EXPOSE 80

48
demo/README.md Normal file
View File

@ -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.

323
demo/assets/css/style.css Normal file
View File

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

1
demo/assets/img/.keep Normal file
View File

@ -0,0 +1 @@
# This file ensures the img directory exists for image assets and version control.

8
demo/docker-compose.yml Normal file
View File

@ -0,0 +1,8 @@
version: '3.8'
services:
web:
build: .
ports:
- "8080:80"
container_name: batamanta-landing
restart: unless-stopped

135
demo/index.html Normal file
View File

@ -0,0 +1,135 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Batamanta Inteligente - La Mejor Batamanta del Mundo</title>
<meta name="description" content="Descubre la Batamanta Inteligente: la batamanta más avanzada del mundo. Con tecnología smart, comodidad y estilo. ¡Hazte con la tuya!">
<meta name="keywords" content="batamanta, smart, inteligente, manta, comodidad, tecnología, hogar, invierno, regalo">
<meta property="og:title" content="Batamanta Inteligente - La Mejor Batamanta del Mundo">
<meta property="og:description" content="Descubre la Batamanta Inteligente: la batamanta más avanzada del mundo. Con tecnología smart, comodidad y estilo. ¡Hazte con la tuya!">
<meta property="og:type" content="product">
<meta property="og:url" content="https://batamanta.com">
<meta property="og:image" content="assets/img/batamanta-og.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Batamanta Inteligente - La Mejor Batamanta del Mundo">
<meta name="twitter:description" content="Descubre la Batamanta Inteligente: la batamanta más avanzada del mundo. Con tecnología smart, comodidad y estilo. ¡Hazte con la tuya!">
<meta name="twitter:image" content="assets/img/batamanta-og.jpg">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="icon" href="assets/img/favicon.ico">
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "Batamanta Inteligente",
"image": [
"https://batamanta.com/assets/img/batamanta-og.jpg"
],
"description": "La batamanta más avanzada del mundo, con tecnología smart, comodidad y estilo.",
"brand": {
"@type": "Brand",
"name": "Batamanta"
},
"offers": {
"@type": "Offer",
"priceCurrency": "EUR",
"price": "79.99",
"availability": "https://schema.org/InStock"
}
}
</script>
</head>
<body>
<header>
<nav>
<div class="logo">Batamanta</div>
<ul>
<li><a href="#features">Características</a></li>
<li><a href="#gallery">Galería</a></li>
<li><a href="#pricing">Precio</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#buy" class="cta">Comprar</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero" id="hero">
<h1>Batamanta Inteligente</h1>
<p>La batamanta más avanzada del mundo. Comodidad, tecnología y estilo en uno.</p>
<a href="#buy" class="cta">¡Cómprala ahora!</a>
</section>
<section class="features" id="features">
<h2>Características Destacadas</h2>
<div class="features-list">
<div class="feature-item">
<img src="assets/img/feature1.png" alt="Tecnología Smart">
<h3>Tecnología Smart</h3>
<p>Controla la temperatura y funciones desde tu móvil.</p>
</div>
<div class="feature-item">
<img src="assets/img/feature2.png" alt="Ultra Comodidad">
<h3>Ultra Comodidad</h3>
<p>Materiales premium para el máximo confort.</p>
</div>
<div class="feature-item">
<img src="assets/img/feature3.png" alt="Diseño Moderno">
<h3>Diseño Moderno</h3>
<p>Estilo elegante que se adapta a cualquier hogar.</p>
</div>
</div>
</section>
<section class="gallery" id="gallery">
<h2>Galería</h2>
<div class="gallery-slider">
<img src="assets/img/batamanta1.jpg" alt="Batamanta vista frontal">
<img src="assets/img/batamanta2.jpg" alt="Batamanta en uso">
<img src="assets/img/batamanta3.jpg" alt="Detalle de la Batamanta">
</div>
</section>
<section class="pricing" id="pricing">
<h2>Precio y Oferta</h2>
<div class="price-box">
<span class="price">79,99 €</span>
<span class="old-price">99,99 €</span>
<a href="#buy" class="cta">Comprar ahora</a>
</div>
<p>Envío gratis y devolución en 15 días.</p>
</section>
<section class="faq" id="faq">
<h2>Preguntas Frecuentes</h2>
<div class="faq-list">
<div class="faq-item">
<h3>¿Qué hace inteligente a la Batamanta?</h3>
<p>Incluye sensores y conectividad para ajustar la temperatura y otras funciones desde tu smartphone.</p>
</div>
<div class="faq-item">
<h3>¿Qué tallas hay disponibles?</h3>
<p>Una talla única, adaptable a todas las personas.</p>
</div>
<div class="faq-item">
<h3>¿Cómo se lava?</h3>
<p>Es lavable a máquina, siguiendo las instrucciones incluidas.</p>
</div>
</div>
</section>
<section class="buy" id="buy">
<h2>Compra tu Batamanta Inteligente</h2>
<form class="buy-form">
<input type="text" placeholder="Nombre" required>
<input type="email" placeholder="Correo electrónico" required>
<button type="submit" class="cta">Comprar ahora</button>
</form>
</section>
</main>
<footer>
<div class="footer-content">
<p>&copy; 2024 Batamanta. Todos los derechos reservados.</p>
<div class="social-links">
<a href="#">Instagram</a> |
<a href="#">Twitter</a> |
<a href="#">Facebook</a>
</div>
</div>
</footer>
</body>
</html>