🛍️ Ofertas Destacadas (OD)

Una web moderna de productos de afiliado de Amazon, construida con Astro para máximo rendimiento y SEO.

✨ Características

• ⚡ Super rápido - Generación estática con Astro
• 🎯 SEO optimizado - Meta tags, Open Graph, sitemap
• 📱 Responsive - Diseño adaptable a todos los dispositivos
• 🎨 UI moderna - Diseño dark mode con gradientes
• 🔍 Filtros - Por categorías de productos
• 📺 Integración YouTube - Videos embebidos de shorts
• 🛒 Links de afiliado - Integración con Amazon

🚀 Inicio rápido

# Instalar dependencias
npm install

# Iniciar servidor de desarrollo
npm run dev

# Construir para producción
npm run build

# Preview de la build
npm run preview

📁 Estructura del proyecto

/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   ├── Navbar.astro
│   │   ├── Hero.astro
│   │   ├── ProductCard.astro
│   │   ├── CategoryFilter.astro
│   │   └── Footer.astro
│   ├── data/
│   │   └── products.ts        # Base de datos de productos
│   ├── layouts/
│   │   └── BaseLayout.astro
│   ├── pages/
│   │   ├── index.astro
│   │   └── producto/
│   │       └── [id].astro     # Páginas dinámicas
│   └── styles/
│       └── global.css
├── astro.config.mjs
├── package.json
└── tsconfig.json

📦 Añadir nuevos productos

Edita el archivo src/data/products.ts:

{
  id: "mi-producto",           // URL slug
  title: "Nombre del Producto",
  description: "Descripción...",
  price: "29.99€",
  rating: 4.5,
  category: "hogar",           // hogar, cocina, bano, tech, outdoor
  amazonLink: "https://amzn.to/xxx",
  youtubeLink: "https://youtube.com/shorts/xxx",
  youtubeId: "xxx",            // ID del video
  featured: true,              // Opcional: destacar producto
}

🎨 Personalización

Colores

Edita las CSS variables en src/styles/global.css:

:root {
  --color-accent-pink: #ff0080;
  --color-accent-purple: #7928ca;
  --color-accent-orange: #ff9900;
}

Categorías

Edita el array en src/data/products.ts:

export const categories = [
  { id: "todos", name: "Todos", icon: "🏠" },
  { id: "hogar", name: "Hogar", icon: "🛋️" },
  // Añadir más...
];

🌐 Deploy

Vercel (Recomendado)

npm i -g vercel
vercel

Netlify

npm run build
# Subir carpeta `dist/` a Netlify

📄 Licencia

MIT License - Desarrollado por Sergio Cid

---

⭐ Si te gusta el proyecto, ¡dale una estrella en GitHub!