add landing and subscription plans
Signed-off-by: Omar Sánchez Pizarro <omar.sanchez@pistacero.net>
This commit is contained in:
Omar Sánchez Pizarro
23
web/landing/.gitignore
vendored
Normal file
23
web/landing/.gitignore
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
# build output
|
||||
dist/
|
||||
.output/
|
||||
|
||||
# generated types
|
||||
.astro/
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
|
||||
# logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# environment variables
|
||||
.env
|
||||
.env.production
|
||||
|
||||
# macOS-specific files
|
||||
.DS_Store
|
||||
|
||||
27
web/landing/Dockerfile
Normal file
27
web/landing/Dockerfile
Normal file
@@ -0,0 +1,27 @@
|
||||
FROM node:18-alpine AS builder
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Copiar archivos de dependencias
|
||||
COPY package.json package-lock.json* ./
|
||||
|
||||
# Instalar dependencias
|
||||
RUN npm ci
|
||||
|
||||
# Copiar código fuente
|
||||
COPY . .
|
||||
|
||||
# Construir aplicación Astro
|
||||
RUN npm run build
|
||||
|
||||
# Stage de producción - servir con nginx
|
||||
FROM nginx:alpine
|
||||
|
||||
# Copiar archivos construidos
|
||||
COPY --from=builder /app/dist /usr/share/nginx/html/landing
|
||||
|
||||
# Exponer puerto
|
||||
EXPOSE 80
|
||||
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
|
||||
77
web/landing/README.md
Normal file
77
web/landing/README.md
Normal file
@@ -0,0 +1,77 @@
|
||||
# Wallabicher Landing Page
|
||||
|
||||
Landing page moderna y profesional para Wallabicher construida con Astro. Diseño minimalista con modo dark automático basado en las preferencias del sistema.
|
||||
|
||||
## ✨ Características
|
||||
|
||||
- 🎨 **Diseño minimalista y profesional** - Interfaz limpia y moderna
|
||||
- 🌙 **Modo dark automático** - Se adapta automáticamente a las preferencias del sistema
|
||||
- 🎭 **Animaciones suaves** - Transiciones y efectos visuales elegantes
|
||||
- 📱 **Totalmente responsive** - Optimizado para todos los dispositivos
|
||||
- 🎯 **Colores del logo** - Paleta de colores teal/cyan basada en el logo
|
||||
- ⚡ **Rendimiento óptimo** - Construido con Astro para máxima velocidad
|
||||
|
||||
## 🚀 Inicio Rápido
|
||||
|
||||
```bash
|
||||
# Instalar dependencias
|
||||
npm install
|
||||
|
||||
# Iniciar servidor de desarrollo
|
||||
npm run dev
|
||||
|
||||
# Construir para producción
|
||||
npm run build
|
||||
|
||||
# Previsualizar build de producción
|
||||
npm run preview
|
||||
```
|
||||
|
||||
## 📁 Estructura
|
||||
|
||||
```
|
||||
landing/
|
||||
├── public/
|
||||
│ ├── favicon.svg
|
||||
│ └── logo.jpg # Logo de Wallabicher
|
||||
├── src/
|
||||
│ ├── components/
|
||||
│ │ ├── CTA.astro # Sección de llamada a la acción
|
||||
│ │ ├── Features.astro # Características principales
|
||||
│ │ ├── Hero.astro # Sección hero con logo
|
||||
│ │ ├── HowItWorks.astro # Cómo funciona
|
||||
│ │ └── Platforms.astro # Plataformas soportadas
|
||||
│ ├── layouts/
|
||||
│ │ └── Layout.astro # Layout base con modo dark
|
||||
│ └── pages/
|
||||
│ └── index.astro # Página principal
|
||||
├── astro.config.mjs
|
||||
├── package.json
|
||||
└── tailwind.config.mjs # Configuración con colores teal/cyan
|
||||
```
|
||||
|
||||
## 🎨 Tecnologías
|
||||
|
||||
- **Astro** - Framework web moderno y rápido
|
||||
- **Tailwind CSS** - Framework CSS utility-first
|
||||
- **TypeScript** - Tipado estático
|
||||
- **Inter Font** - Tipografía profesional
|
||||
|
||||
## 🎨 Paleta de Colores
|
||||
|
||||
La landing page usa una paleta de colores basada en el logo:
|
||||
- **Primary (Teal/Cyan)**: `#06b6d4` - Color principal
|
||||
- **Teal**: Variaciones de teal para acentos
|
||||
- **Gray**: Escala de grises para texto y fondos
|
||||
- **Modo Dark**: Adaptación automática con colores oscuros
|
||||
|
||||
## 📝 Personalización
|
||||
|
||||
- **Colores**: Modifica `tailwind.config.mjs` para cambiar la paleta
|
||||
- **Componentes**: Edita los archivos en `src/components/`
|
||||
- **Contenido**: Actualiza el texto en cada componente según necesites
|
||||
|
||||
## 🌙 Modo Dark
|
||||
|
||||
El modo dark se detecta automáticamente usando `prefers-color-scheme`. No requiere JavaScript adicional y funciona de forma nativa.
|
||||
|
||||
9
web/landing/astro.config.mjs
Normal file
9
web/landing/astro.config.mjs
Normal file
@@ -0,0 +1,9 @@
|
||||
import { defineConfig } from 'astro/config';
|
||||
import tailwind from '@astrojs/tailwind';
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [tailwind()],
|
||||
output: 'static',
|
||||
});
|
||||
|
||||
6119
web/landing/package-lock.json
generated
Normal file
6119
web/landing/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
18
web/landing/package.json
Normal file
18
web/landing/package.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "wallabicher-landing",
|
||||
"type": "module",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/tailwind": "^5.1.0",
|
||||
"astro": "^4.15.0",
|
||||
"tailwindcss": "^3.4.1"
|
||||
}
|
||||
}
|
||||
|
||||
5
web/landing/public/favicon.svg
Normal file
5
web/landing/public/favicon.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<circle cx="50" cy="50" r="45" fill="#0ea5e9"/>
|
||||
<text x="50" y="70" font-size="60" text-anchor="middle" fill="white">🛎️</text>
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 207 B |
BIN
web/landing/public/logo.jpg
Normal file
BIN
web/landing/public/logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
91
web/landing/src/components/CTA.astro
Normal file
91
web/landing/src/components/CTA.astro
Normal file
@@ -0,0 +1,91 @@
|
||||
---
|
||||
---
|
||||
|
||||
<section id="instalacion" class="py-24 sm:py-32 bg-gradient-to-br from-primary-600 via-teal-600 to-cyan-600 dark:from-primary-800 dark:via-teal-800 dark:to-cyan-800 text-white relative overflow-hidden">
|
||||
<!-- Background decoration -->
|
||||
<div class="absolute inset-0">
|
||||
<div class="absolute top-0 left-0 w-96 h-96 bg-white/10 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-0 right-0 w-96 h-96 bg-white/10 rounded-full blur-3xl"></div>
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-white/5 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center animate-fade-in">
|
||||
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6">
|
||||
¿Listo para empezar?
|
||||
</h2>
|
||||
<p class="text-xl text-primary-100 dark:text-primary-200 mb-12 max-w-2xl mx-auto">
|
||||
Instala Wallabicher en minutos y comienza a recibir notificaciones de los artículos que te interesan.
|
||||
</p>
|
||||
|
||||
<!-- Installation code block -->
|
||||
<div class="mb-12 animate-slide-up" style="animation-delay: 0.2s;">
|
||||
<div class="bg-gray-900/90 dark:bg-gray-950/90 backdrop-blur-sm rounded-2xl p-6 sm:p-8 border border-white/10 shadow-2xl">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<span class="text-sm text-gray-400 font-mono">Terminal</span>
|
||||
</div>
|
||||
<pre class="text-left overflow-x-auto"><code class="text-sm sm:text-base text-gray-100 font-mono"># 1. Instala las dependencias
|
||||
pip3 install -r requirements.txt
|
||||
|
||||
# 2. Configura el proyecto
|
||||
python setup_config.py
|
||||
|
||||
# 3. Edita config.yaml con tus credenciales de Telegram
|
||||
|
||||
# 4. Personaliza workers.json con tus búsquedas
|
||||
|
||||
# 5. Ejecuta Wallabicher
|
||||
python3 wallabicher.py</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA Buttons -->
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center animate-slide-up" style="animation-delay: 0.3s;">
|
||||
<a
|
||||
href="https://github.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="group inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-primary-900 bg-white rounded-xl hover:bg-primary-50 transition-all duration-300 shadow-xl hover:shadow-2xl transform hover:-translate-y-1"
|
||||
>
|
||||
<span>Ver Documentación Completa</span>
|
||||
<svg class="w-5 h-5 ml-2 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-white bg-white/10 backdrop-blur-sm rounded-xl hover:bg-white/20 transition-all duration-300 border-2 border-white/30 hover:border-white/50 shadow-xl hover:shadow-2xl transform hover:-translate-y-1"
|
||||
>
|
||||
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
Descargar en GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="bg-gray-900 dark:bg-gray-950 text-gray-300 dark:text-gray-600 py-12 border-t border-gray-800 dark:border-gray-800">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center">
|
||||
<div class="flex items-center justify-center mb-6">
|
||||
<div class="w-12 h-12 bg-white/10 rounded-xl p-2 mr-3">
|
||||
<img src="/logo.jpg" alt="Wallabicher" class="w-full h-full object-contain" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white dark:text-gray-300">Wallabicher</h3>
|
||||
</div>
|
||||
<p class="text-base mb-4 text-gray-400 dark:text-gray-500">
|
||||
Hecho con <span class="text-red-500">❤️</span> para ayudarte a encontrar las mejores ofertas
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-600">
|
||||
© 2024 Wallabicher. Todos los derechos reservados.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
98
web/landing/src/components/Features.astro
Normal file
98
web/landing/src/components/Features.astro
Normal file
@@ -0,0 +1,98 @@
|
||||
---
|
||||
const features = [
|
||||
{
|
||||
icon: '🔍',
|
||||
title: 'Búsquedas Automatizadas',
|
||||
description: 'Configura tus criterios de búsqueda una vez y deja que Wallabicher monitoree las plataformas 24/7 sin interrupciones.',
|
||||
color: 'from-primary-500 to-primary-600',
|
||||
delay: '0.1s',
|
||||
},
|
||||
{
|
||||
icon: '⚡',
|
||||
title: 'Notificaciones Instantáneas',
|
||||
description: 'Recibe alertas en tiempo real en tu canal o chat de Telegram cuando aparezcan artículos que coincidan con tus filtros.',
|
||||
color: 'from-teal-500 to-teal-600',
|
||||
delay: '0.2s',
|
||||
},
|
||||
{
|
||||
icon: '🎯',
|
||||
title: 'Filtros Avanzados',
|
||||
description: 'Filtra por precio, ubicación, condición, palabras clave y mucho más. Control total sobre lo que quieres ver.',
|
||||
color: 'from-cyan-500 to-cyan-600',
|
||||
delay: '0.3s',
|
||||
},
|
||||
{
|
||||
icon: '📱',
|
||||
title: 'Integración con Telegram',
|
||||
description: 'Recibe notificaciones con imágenes, descripciones y enlaces directos. Incluso organiza por temas en grupos.',
|
||||
color: 'from-primary-500 to-teal-500',
|
||||
delay: '0.4s',
|
||||
},
|
||||
{
|
||||
icon: '⭐',
|
||||
title: 'Sistema de Favoritos',
|
||||
description: 'Guarda tus artículos favoritos con un solo clic y accede a ellos cuando quieras con el comando /favs.',
|
||||
color: 'from-teal-500 to-cyan-500',
|
||||
delay: '0.5s',
|
||||
},
|
||||
{
|
||||
icon: '🌐',
|
||||
title: 'Multi-Plataforma',
|
||||
description: 'Soporta múltiples marketplaces: Wallapop, Vinted y más. Arquitectura extensible para añadir nuevas plataformas fácilmente.',
|
||||
color: 'from-cyan-500 to-primary-500',
|
||||
delay: '0.6s',
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<section id="caracteristicas" class="py-24 sm:py-32 bg-white dark:bg-gray-950 relative overflow-hidden">
|
||||
<!-- Background decoration -->
|
||||
<div class="absolute top-0 left-0 w-full h-full">
|
||||
<div class="absolute top-0 right-0 w-96 h-96 bg-primary-100/30 dark:bg-primary-900/20 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-0 left-0 w-96 h-96 bg-teal-100/30 dark:bg-teal-900/20 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16 animate-fade-in">
|
||||
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-gray-50 mb-4">
|
||||
Características
|
||||
<span class="block text-transparent bg-clip-text bg-gradient-to-r from-primary-600 via-teal-600 to-cyan-600 dark:from-primary-400 dark:via-teal-400 dark:to-cyan-400">
|
||||
Principales
|
||||
</span>
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
Todo lo que necesitas para no perderte ningún artículo interesante
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{features.map((feature, index) => (
|
||||
<div
|
||||
class="group relative p-8 rounded-2xl bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-800 border border-gray-200 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 transition-all duration-300 transform hover:-translate-y-2 hover:shadow-2xl animate-slide-up"
|
||||
style={`animation-delay: ${feature.delay}`}
|
||||
>
|
||||
<!-- Gradient overlay on hover -->
|
||||
<div class={`absolute inset-0 bg-gradient-to-br ${feature.color} opacity-0 group-hover:opacity-5 rounded-2xl transition-opacity duration-300`}></div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<!-- Icon -->
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 rounded-xl bg-gradient-to-br from-primary-500/10 to-teal-500/10 dark:from-primary-500/20 dark:to-teal-500/20 mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||
<span class="text-3xl">{feature.icon}</span>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-50 mb-3 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Decorative corner -->
|
||||
<div class={`absolute top-0 right-0 w-20 h-20 bg-gradient-to-br ${feature.color} opacity-0 group-hover:opacity-10 rounded-bl-full transition-opacity duration-300`}></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
84
web/landing/src/components/Hero.astro
Normal file
84
web/landing/src/components/Hero.astro
Normal file
@@ -0,0 +1,84 @@
|
||||
---
|
||||
---
|
||||
|
||||
<section class="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-primary-50 via-teal-50 to-cyan-50 dark:from-gray-950 dark:via-gray-900 dark:to-primary-950">
|
||||
<!-- Background decorative elements -->
|
||||
<div class="absolute inset-0 overflow-hidden">
|
||||
<div class="absolute top-0 -left-4 w-96 h-96 bg-primary-300/30 dark:bg-primary-800/20 rounded-full blur-3xl animate-float"></div>
|
||||
<div class="absolute bottom-0 -right-4 w-96 h-96 bg-teal-300/30 dark:bg-teal-800/20 rounded-full blur-3xl animate-float" style="animation-delay: 2s;"></div>
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-primary-200/20 dark:bg-primary-900/20 rounded-full blur-3xl animate-float" style="animation-delay: 4s;"></div>
|
||||
</div>
|
||||
|
||||
<!-- Grid pattern overlay -->
|
||||
<div class="absolute inset-0 bg-grid-pattern opacity-[0.03] dark:opacity-[0.05]"></div>
|
||||
|
||||
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 sm:py-32">
|
||||
<div class="text-center animate-fade-in">
|
||||
<!-- Logo -->
|
||||
<div class="flex justify-center mb-8 animate-slide-up">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 bg-primary-500/20 dark:bg-primary-600/30 rounded-2xl blur-xl"></div>
|
||||
<div class="relative w-24 h-24 sm:w-32 sm:h-32 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm rounded-2xl p-3 shadow-2xl ring-2 ring-primary-200/50 dark:ring-primary-800/50">
|
||||
<img
|
||||
src="/logo.jpg"
|
||||
alt="Wallabicher Logo"
|
||||
class="w-full h-full object-contain rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<h1 class="text-5xl sm:text-6xl lg:text-7xl xl:text-8xl font-bold tracking-tight mb-6 animate-slide-up" style="animation-delay: 0.1s;">
|
||||
<span class="bg-gradient-to-r from-primary-600 via-teal-600 to-cyan-600 dark:from-primary-400 dark:via-teal-400 dark:to-cyan-400 bg-clip-text text-transparent">
|
||||
Wallabicher
|
||||
</span>
|
||||
<span class="block text-4xl sm:text-5xl lg:text-6xl mt-2">🛎️</span>
|
||||
</h1>
|
||||
|
||||
<!-- Subtitle -->
|
||||
<p class="text-xl sm:text-2xl lg:text-3xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto mb-4 font-medium animate-slide-up" style="animation-delay: 0.2s;">
|
||||
Automatiza tus búsquedas en marketplaces
|
||||
</p>
|
||||
<p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto mb-12 animate-slide-up" style="animation-delay: 0.3s;">
|
||||
Recibe notificaciones instantáneas en Telegram cuando aparezcan artículos que te interesan
|
||||
</p>
|
||||
|
||||
<!-- CTA Buttons -->
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center animate-slide-up" style="animation-delay: 0.4s;">
|
||||
<a
|
||||
href="#precios"
|
||||
class="group relative inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-white bg-gradient-to-r from-primary-600 to-teal-600 hover:from-primary-700 hover:to-teal-700 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
|
||||
>
|
||||
<span class="relative z-10">Ver Planes</span>
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-primary-700 to-teal-700 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
</a>
|
||||
<a
|
||||
href="#instalacion"
|
||||
class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-gray-900 dark:text-gray-100 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl hover:bg-white dark:hover:bg-gray-800 transition-all duration-300 border-2 border-gray-200 dark:border-gray-700 shadow-lg hover:shadow-xl transform hover:-translate-y-1"
|
||||
>
|
||||
Empezar gratis
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Scroll indicator -->
|
||||
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
|
||||
<svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gradient fade at bottom -->
|
||||
<div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-white dark:from-gray-950 to-transparent"></div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.bg-grid-pattern {
|
||||
background-image:
|
||||
linear-gradient(to right, currentColor 1px, transparent 1px),
|
||||
linear-gradient(to bottom, currentColor 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
</style>
|
||||
103
web/landing/src/components/HowItWorks.astro
Normal file
103
web/landing/src/components/HowItWorks.astro
Normal file
@@ -0,0 +1,103 @@
|
||||
---
|
||||
const steps = [
|
||||
{
|
||||
number: '1',
|
||||
title: 'Configura tus búsquedas',
|
||||
description: 'Define tus criterios: término de búsqueda, rango de precios, ubicación, filtros avanzados y más.',
|
||||
icon: '⚙️',
|
||||
},
|
||||
{
|
||||
number: '2',
|
||||
title: 'Conecta Telegram',
|
||||
description: 'Configura tu token de Telegram y el canal o chat donde quieres recibir las notificaciones.',
|
||||
icon: '📱',
|
||||
},
|
||||
{
|
||||
number: '3',
|
||||
title: 'Ejecuta Wallabicher',
|
||||
description: 'Inicia el monitor y deja que trabaje en segundo plano. Revisará las plataformas automáticamente.',
|
||||
icon: '🚀',
|
||||
},
|
||||
{
|
||||
number: '4',
|
||||
title: 'Recibe notificaciones',
|
||||
description: 'Cuando aparezca un artículo que coincida con tus filtros, recibirás una notificación instantánea con toda la información.',
|
||||
icon: '🔔',
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<section id="como-funciona" class="py-24 sm:py-32 bg-white dark:bg-gray-950 relative overflow-hidden">
|
||||
<!-- Background decoration -->
|
||||
<div class="absolute inset-0">
|
||||
<div class="absolute top-0 left-1/4 w-96 h-96 bg-cyan-100/20 dark:bg-cyan-900/20 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-0 right-1/4 w-96 h-96 bg-primary-100/20 dark:bg-primary-900/20 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16 animate-fade-in">
|
||||
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-gray-50 mb-4">
|
||||
¿Cómo
|
||||
<span class="block text-transparent bg-clip-text bg-gradient-to-r from-primary-600 via-teal-600 to-cyan-600 dark:from-primary-400 dark:via-teal-400 dark:to-cyan-400">
|
||||
Funciona?
|
||||
</span>
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
Configuración simple en 4 pasos
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<!-- Connection line (desktop only) -->
|
||||
<div class="hidden lg:block absolute top-16 left-0 right-0 h-0.5 bg-gradient-to-r from-primary-200 via-teal-200 to-cyan-200 dark:from-primary-800 dark:via-teal-800 dark:to-cyan-800"></div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{steps.map((step, index) => (
|
||||
<div class="relative animate-slide-up" style={`animation-delay: ${0.1 + index * 0.1}s`}>
|
||||
<!-- Step card -->
|
||||
<div class="group relative">
|
||||
<!-- Connection dot (desktop only) -->
|
||||
<div class="hidden lg:block absolute top-16 left-1/2 -translate-x-1/2 w-4 h-4 bg-gradient-to-br from-primary-500 to-teal-500 rounded-full z-10 ring-4 ring-white dark:ring-gray-950"></div>
|
||||
|
||||
<div class="relative pt-20 lg:pt-0">
|
||||
<!-- Icon circle -->
|
||||
<div class="flex justify-center mb-6 lg:mb-8">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-primary-500 to-teal-500 rounded-full blur-xl opacity-50 group-hover:opacity-75 transition-opacity"></div>
|
||||
<div class="relative w-20 h-20 lg:w-24 lg:h-24 rounded-full bg-gradient-to-br from-primary-600 via-teal-600 to-cyan-600 dark:from-primary-500 dark:via-teal-500 dark:to-cyan-500 flex items-center justify-center shadow-xl group-hover:scale-110 transition-transform duration-300">
|
||||
<span class="text-3xl lg:text-4xl">{step.icon}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Number badge -->
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 lg:top-4 lg:left-4 w-12 h-12 rounded-full bg-gradient-to-br from-primary-600 to-teal-600 dark:from-primary-500 dark:to-teal-500 text-white text-xl font-bold flex items-center justify-center shadow-lg ring-4 ring-white dark:ring-gray-950 z-20">
|
||||
{step.number}
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="text-center">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-50 mb-3 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
|
||||
{step.title}
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
{step.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Arrow (desktop only, except last) -->
|
||||
{index < steps.length - 1 && (
|
||||
<div class="hidden lg:block absolute top-16 left-full w-full">
|
||||
<div class="relative h-0.5 bg-gradient-to-r from-primary-200 to-teal-200 dark:from-primary-800 dark:to-teal-800">
|
||||
<div class="absolute right-0 top-1/2 -translate-y-1/2 w-0 h-0 border-l-8 border-l-teal-200 dark:border-l-teal-800 border-t-4 border-t-transparent border-b-4 border-b-transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
103
web/landing/src/components/Platforms.astro
Normal file
103
web/landing/src/components/Platforms.astro
Normal file
@@ -0,0 +1,103 @@
|
||||
---
|
||||
const platforms = [
|
||||
{
|
||||
name: 'Wallapop',
|
||||
status: 'Totalmente funcional',
|
||||
statusColor: 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400',
|
||||
icon: '🟢',
|
||||
description: 'Monitoriza búsquedas en Wallapop con todos los filtros disponibles y notificaciones en tiempo real.',
|
||||
gradient: 'from-primary-500 to-primary-600',
|
||||
},
|
||||
{
|
||||
name: 'Vinted',
|
||||
status: 'Implementado',
|
||||
statusColor: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400',
|
||||
icon: '🟢',
|
||||
description: 'Soporte para múltiples países. Requiere intervalos de búsqueda más largos para evitar bloqueos.',
|
||||
gradient: 'from-teal-500 to-teal-600',
|
||||
},
|
||||
{
|
||||
name: 'Buyee',
|
||||
status: 'Por implementar',
|
||||
statusColor: 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400',
|
||||
icon: '🟡',
|
||||
description: 'Próximamente disponible. Arquitectura extensible lista para nuevas plataformas.',
|
||||
gradient: 'from-gray-400 to-gray-500',
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<section class="py-24 sm:py-32 bg-gradient-to-b from-white via-gray-50 to-white dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 relative overflow-hidden">
|
||||
<!-- Background decoration -->
|
||||
<div class="absolute inset-0">
|
||||
<div class="absolute top-1/4 left-0 w-72 h-72 bg-primary-200/20 dark:bg-primary-900/20 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-1/4 right-0 w-72 h-72 bg-teal-200/20 dark:bg-teal-900/20 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16 animate-fade-in">
|
||||
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-gray-50 mb-4">
|
||||
Plataformas
|
||||
<span class="block text-transparent bg-clip-text bg-gradient-to-r from-primary-600 via-teal-600 to-cyan-600 dark:from-primary-400 dark:via-teal-400 dark:to-cyan-400">
|
||||
Soportadas
|
||||
</span>
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
Arquitectura extensible que permite añadir nuevas plataformas fácilmente
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
|
||||
{platforms.map((platform, index) => (
|
||||
<div
|
||||
class="group relative p-8 rounded-2xl bg-white dark:bg-gray-900 border-2 border-gray-200 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 transition-all duration-300 transform hover:-translate-y-2 hover:shadow-2xl animate-slide-up"
|
||||
style={`animation-delay: ${0.1 + index * 0.1}s`}
|
||||
>
|
||||
<!-- Gradient background on hover -->
|
||||
<div class={`absolute inset-0 bg-gradient-to-br ${platform.gradient} opacity-0 group-hover:opacity-5 rounded-2xl transition-opacity duration-300`}></div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-50">{platform.name}</h3>
|
||||
<span class="text-3xl transform group-hover:scale-110 transition-transform duration-300">{platform.icon}</span>
|
||||
</div>
|
||||
|
||||
<!-- Status badge -->
|
||||
<span class={`inline-block px-3 py-1 rounded-full text-xs font-semibold mb-4 ${platform.statusColor}`}>
|
||||
{platform.status}
|
||||
</span>
|
||||
|
||||
<!-- Description -->
|
||||
<p class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
{platform.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Decorative element -->
|
||||
<div class={`absolute bottom-0 right-0 w-24 h-24 bg-gradient-to-br ${platform.gradient} opacity-0 group-hover:opacity-10 rounded-tl-full transition-opacity duration-300`}></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<div class="text-center animate-fade-in" style="animation-delay: 0.4s;">
|
||||
<div class="inline-block p-8 rounded-2xl bg-gradient-to-br from-primary-50 to-teal-50 dark:from-gray-900 dark:to-gray-800 border border-primary-200 dark:border-primary-800">
|
||||
<p class="text-lg text-gray-700 dark:text-gray-300 mb-4 font-medium">
|
||||
¿Quieres añadir una nueva plataforma?
|
||||
</p>
|
||||
<a
|
||||
href="https://github.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-semibold group"
|
||||
>
|
||||
Consulta la documentación
|
||||
<svg class="w-5 h-5 ml-2 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
231
web/landing/src/components/Pricing.astro
Normal file
231
web/landing/src/components/Pricing.astro
Normal file
@@ -0,0 +1,231 @@
|
||||
---
|
||||
const plans = [
|
||||
{
|
||||
id: 'free',
|
||||
name: 'Gratis',
|
||||
description: 'Perfecto para empezar',
|
||||
price: { monthly: 0, yearly: 0 },
|
||||
popular: false,
|
||||
features: [
|
||||
'Hasta 2 búsquedas simultáneas',
|
||||
'Solo Wallapop',
|
||||
'50 notificaciones por día',
|
||||
'Soporte por email',
|
||||
],
|
||||
limits: {
|
||||
workers: 2,
|
||||
notifications: 50,
|
||||
platforms: ['Wallapop'],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'basic',
|
||||
name: 'Básico',
|
||||
description: 'Para usuarios ocasionales',
|
||||
price: { monthly: 9.99, yearly: 99.99 },
|
||||
popular: true,
|
||||
features: [
|
||||
'Hasta 5 búsquedas simultáneas',
|
||||
'Wallapop y Vinted',
|
||||
'200 notificaciones por día',
|
||||
'Soporte prioritario',
|
||||
'Sin límite de favoritos',
|
||||
],
|
||||
limits: {
|
||||
workers: 5,
|
||||
notifications: 200,
|
||||
platforms: ['Wallapop', 'Vinted'],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'pro',
|
||||
name: 'Pro',
|
||||
description: 'Para usuarios avanzados',
|
||||
price: { monthly: 19.99, yearly: 199.99 },
|
||||
popular: false,
|
||||
features: [
|
||||
'Hasta 15 búsquedas simultáneas',
|
||||
'Todas las plataformas',
|
||||
'1000 notificaciones por día',
|
||||
'Soporte prioritario 24/7',
|
||||
'API access',
|
||||
'Webhooks personalizados',
|
||||
],
|
||||
limits: {
|
||||
workers: 15,
|
||||
notifications: 1000,
|
||||
platforms: ['Wallapop', 'Vinted', 'Buyee'],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'enterprise',
|
||||
name: 'Enterprise',
|
||||
description: 'Para equipos y uso intensivo',
|
||||
price: { monthly: 49.99, yearly: 499.99 },
|
||||
popular: false,
|
||||
features: [
|
||||
'Búsquedas ilimitadas',
|
||||
'Notificaciones ilimitadas',
|
||||
'Todas las plataformas',
|
||||
'Soporte dedicado',
|
||||
'API completa',
|
||||
'Webhooks personalizados',
|
||||
'Gestión de múltiples usuarios',
|
||||
'Estadísticas avanzadas',
|
||||
],
|
||||
limits: {
|
||||
workers: 'Ilimitado',
|
||||
notifications: 'Ilimitado',
|
||||
platforms: ['Todas'],
|
||||
},
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<section id="precios" class="py-24 sm:py-32 bg-gradient-to-b from-white via-gray-50 to-white dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 relative overflow-hidden">
|
||||
<!-- Background decoration -->
|
||||
<div class="absolute inset-0">
|
||||
<div class="absolute top-0 left-1/4 w-96 h-96 bg-primary-200/20 dark:bg-primary-900/20 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-0 right-1/4 w-96 h-96 bg-teal-200/20 dark:bg-teal-900/20 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-16 animate-fade-in">
|
||||
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-gray-50 mb-4">
|
||||
Planes y
|
||||
<span class="block text-transparent bg-clip-text bg-gradient-to-r from-primary-600 via-teal-600 to-cyan-600 dark:from-primary-400 dark:via-teal-400 dark:to-cyan-400">
|
||||
Precios
|
||||
</span>
|
||||
</h2>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
Elige el plan que mejor se adapte a tus necesidades
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Toggle mensual/anual -->
|
||||
<div class="flex justify-center mb-12">
|
||||
<div class="inline-flex items-center bg-gray-100 dark:bg-gray-800 rounded-lg p-1">
|
||||
<button id="billing-monthly" class="px-4 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 shadow-sm transition-all">
|
||||
Mensual
|
||||
</button>
|
||||
<button id="billing-yearly" class="px-4 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 transition-all">
|
||||
Anual
|
||||
<span class="ml-1 text-xs text-primary-600 dark:text-primary-400">-17%</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{plans.map((plan, index) => (
|
||||
<div
|
||||
class={`relative p-8 rounded-2xl bg-white dark:bg-gray-900 border-2 transition-all duration-300 transform hover:-translate-y-2 hover:shadow-2xl animate-slide-up ${
|
||||
plan.popular
|
||||
? 'border-primary-500 dark:border-primary-400 shadow-xl scale-105'
|
||||
: 'border-gray-200 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700'
|
||||
}`}
|
||||
style={`animation-delay: ${0.1 + index * 0.1}s`}
|
||||
>
|
||||
{plan.popular && (
|
||||
<div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-gradient-to-r from-primary-600 to-teal-600 text-white text-sm font-semibold rounded-full">
|
||||
Más Popular
|
||||
</div>
|
||||
)}
|
||||
|
||||
<!-- Header -->
|
||||
<div class="text-center mb-8">
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-50 mb-2">{plan.name}</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6">{plan.description}</p>
|
||||
|
||||
<!-- Precio -->
|
||||
<div class="mb-6">
|
||||
<div class="price-monthly">
|
||||
<span class="text-4xl font-bold text-gray-900 dark:text-gray-50">
|
||||
€{plan.price.monthly.toFixed(2)}
|
||||
</span>
|
||||
<span class="text-gray-600 dark:text-gray-400">/mes</span>
|
||||
</div>
|
||||
<div class="price-yearly hidden">
|
||||
<span class="text-4xl font-bold text-gray-900 dark:text-gray-50">
|
||||
€{plan.price.yearly.toFixed(2)}
|
||||
</span>
|
||||
<span class="text-gray-600 dark:text-gray-400">/año</span>
|
||||
<div class="text-sm text-primary-600 dark:text-primary-400 mt-1">
|
||||
€{(plan.price.yearly / 12).toFixed(2)}/mes
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Features -->
|
||||
<ul class="space-y-4 mb-8">
|
||||
{plan.features.map((feature) => (
|
||||
<li class="flex items-start">
|
||||
<svg class="w-5 h-5 text-primary-600 dark:text-primary-400 mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-gray-700 dark:text-gray-300">{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<!-- CTA Button -->
|
||||
<a
|
||||
href="/dashboard"
|
||||
class={`block w-full text-center px-6 py-3 rounded-xl font-semibold transition-all duration-300 ${
|
||||
plan.popular
|
||||
? 'bg-gradient-to-r from-primary-600 to-teal-600 text-white hover:from-primary-700 hover:to-teal-700 shadow-lg hover:shadow-xl'
|
||||
: plan.id === 'free'
|
||||
? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-700'
|
||||
: 'bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400 hover:bg-primary-100 dark:hover:bg-primary-900/50 border-2 border-primary-200 dark:border-primary-800'
|
||||
}`}
|
||||
>
|
||||
{plan.id === 'free' ? 'Empezar gratis' : 'Elegir plan'}
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<!-- FAQ o nota adicional -->
|
||||
<div class="mt-16 text-center">
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
¿Necesitas un plan personalizado?
|
||||
</p>
|
||||
<a
|
||||
href="mailto:soporte@wallabicher.com"
|
||||
class="inline-flex items-center text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-semibold"
|
||||
>
|
||||
Contacta con nosotros
|
||||
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// Toggle entre mensual y anual
|
||||
const monthlyBtn = document.getElementById('billing-monthly');
|
||||
const yearlyBtn = document.getElementById('billing-yearly');
|
||||
const monthlyPrices = document.querySelectorAll('.price-monthly');
|
||||
const yearlyPrices = document.querySelectorAll('.price-yearly');
|
||||
|
||||
monthlyBtn?.addEventListener('click', () => {
|
||||
monthlyBtn.classList.add('bg-white', 'dark:bg-gray-700', 'shadow-sm');
|
||||
monthlyBtn.classList.remove('text-gray-700', 'dark:text-gray-300');
|
||||
yearlyBtn.classList.remove('bg-white', 'dark:bg-gray-700', 'shadow-sm');
|
||||
yearlyBtn.classList.add('text-gray-700', 'dark:text-gray-300');
|
||||
monthlyPrices.forEach(p => p.classList.remove('hidden'));
|
||||
yearlyPrices.forEach(p => p.classList.add('hidden'));
|
||||
});
|
||||
|
||||
yearlyBtn?.addEventListener('click', () => {
|
||||
yearlyBtn.classList.add('bg-white', 'dark:bg-gray-700', 'shadow-sm');
|
||||
yearlyBtn.classList.remove('text-gray-700', 'dark:text-gray-300');
|
||||
monthlyBtn.classList.remove('bg-white', 'dark:bg-gray-700', 'shadow-sm');
|
||||
monthlyBtn.classList.add('text-gray-700', 'dark:text-gray-300');
|
||||
yearlyPrices.forEach(p => p.classList.remove('hidden'));
|
||||
monthlyPrices.forEach(p => p.classList.add('hidden'));
|
||||
});
|
||||
</script>
|
||||
|
||||
1
web/landing/src/env.d.ts
vendored
Normal file
1
web/landing/src/env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference path="../.astro/types.d.ts" />
|
||||
63
web/landing/src/layouts/Layout.astro
Normal file
63
web/landing/src/layouts/Layout.astro
Normal file
@@ -0,0 +1,63 @@
|
||||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
const { title, description = "Automatiza tus búsquedas en marketplaces (Wallapop, Vinted, etc.) y recibe notificaciones instantáneas en Telegram cuando aparezcan nuevos artículos." } = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content={description} />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<meta name="theme-color" content="#06b6d4" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-50 antialiased transition-colors duration-300">
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style is:global>
|
||||
html {
|
||||
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
* {
|
||||
@apply border-gray-200 dark:border-gray-800;
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
@apply w-2 h-2;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-gray-100 dark:bg-gray-900;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-gray-300 dark:bg-gray-700 rounded-full;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-gray-400 dark:bg-gray-600;
|
||||
}
|
||||
|
||||
/* Smooth transitions */
|
||||
* {
|
||||
transition-property: color, background-color, border-color;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 200ms;
|
||||
}
|
||||
</style>
|
||||
|
||||
19
web/landing/src/pages/index.astro
Normal file
19
web/landing/src/pages/index.astro
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Hero from '../components/Hero.astro';
|
||||
import Features from '../components/Features.astro';
|
||||
import Platforms from '../components/Platforms.astro';
|
||||
import HowItWorks from '../components/HowItWorks.astro';
|
||||
import Pricing from '../components/Pricing.astro';
|
||||
import CTA from '../components/CTA.astro';
|
||||
---
|
||||
|
||||
<Layout title="Wallabicher - Monitoriza Marketplaces Automáticamente">
|
||||
<Hero />
|
||||
<Features />
|
||||
<Platforms />
|
||||
<HowItWorks />
|
||||
<Pricing />
|
||||
<CTA />
|
||||
</Layout>
|
||||
|
||||
88
web/landing/tailwind.config.mjs
Normal file
88
web/landing/tailwind.config.mjs
Normal file
@@ -0,0 +1,88 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||
darkMode: 'media', // Detecta automáticamente las preferencias del sistema
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
// Colores basados en el logo teal/cyan
|
||||
primary: {
|
||||
50: '#ecfeff',
|
||||
100: '#cffafe',
|
||||
200: '#a5f3fc',
|
||||
300: '#67e8f9',
|
||||
400: '#22d3ee',
|
||||
500: '#06b6d4', // Teal principal
|
||||
600: '#0891b2',
|
||||
700: '#0e7490',
|
||||
800: '#155e75',
|
||||
900: '#164e63',
|
||||
950: '#083344',
|
||||
},
|
||||
teal: {
|
||||
50: '#f0fdfa',
|
||||
100: '#ccfbf1',
|
||||
200: '#99f6e4',
|
||||
300: '#5eead4',
|
||||
400: '#2dd4bf',
|
||||
500: '#14b8a6',
|
||||
600: '#0d9488',
|
||||
700: '#0f766e',
|
||||
800: '#115e59',
|
||||
900: '#134e4a',
|
||||
},
|
||||
gray: {
|
||||
50: '#f9fafb',
|
||||
100: '#f3f4f6',
|
||||
200: '#e5e7eb',
|
||||
300: '#d1d5db',
|
||||
400: '#9ca3af',
|
||||
500: '#6b7280',
|
||||
600: '#4b5563',
|
||||
700: '#374151',
|
||||
800: '#1f2937',
|
||||
900: '#111827',
|
||||
950: '#030712',
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
|
||||
},
|
||||
animation: {
|
||||
'fade-in': 'fadeIn 0.6s ease-out',
|
||||
'slide-up': 'slideUp 0.6s ease-out',
|
||||
'slide-in-right': 'slideInRight 0.6s ease-out',
|
||||
'float': 'float 6s ease-in-out infinite',
|
||||
'gradient': 'gradient 15s ease infinite',
|
||||
},
|
||||
keyframes: {
|
||||
fadeIn: {
|
||||
'0%': { opacity: '0' },
|
||||
'100%': { opacity: '1' },
|
||||
},
|
||||
slideUp: {
|
||||
'0%': { transform: 'translateY(20px)', opacity: '0' },
|
||||
'100%': { transform: 'translateY(0)', opacity: '1' },
|
||||
},
|
||||
slideInRight: {
|
||||
'0%': { transform: 'translateX(-20px)', opacity: '0' },
|
||||
'100%': { transform: 'translateX(0)', opacity: '1' },
|
||||
},
|
||||
float: {
|
||||
'0%, 100%': { transform: 'translateY(0px)' },
|
||||
'50%': { transform: 'translateY(-20px)' },
|
||||
},
|
||||
gradient: {
|
||||
'0%, 100%': { backgroundPosition: '0% 50%' },
|
||||
'50%': { backgroundPosition: '100% 50%' },
|
||||
},
|
||||
},
|
||||
backgroundImage: {
|
||||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
8
web/landing/tsconfig.json
Normal file
8
web/landing/tsconfig.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "react"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user