feat: initial Batamanta landing page structure, SEO, Docker, and assets folders
This commit is contained in:
parent
a8654856df
commit
0a6f4c1b20
@ -1 +0,0 @@
|
|||||||
Subproject commit 0b7e6b48dbd016f8031ae1699ed3ffacb1ad119f
|
|
||||||
4
demo/Dockerfile
Normal file
4
demo/Dockerfile
Normal 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
48
demo/README.md
Normal 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
323
demo/assets/css/style.css
Normal 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
1
demo/assets/img/.keep
Normal file
@ -0,0 +1 @@
|
|||||||
|
# This file ensures the img directory exists for image assets and version control.
|
||||||
8
demo/docker-compose.yml
Normal file
8
demo/docker-compose.yml
Normal 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
135
demo/index.html
Normal 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>© 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>
|
||||||
Loading…
x
Reference in New Issue
Block a user