Landing page oficial para VibeCoding by Frutero Club - el bootcamp que enseña desarrollo con IA en 2 semanas intensivas.
Frutero Club: https://x.com/fruteroclub Registro al Bootcamp: https://tally.so/r/gDqk1M
La mayoría de bootcamps enseñan "aprende sintaxis por meses, luego construye algo". VibeCoding invierte esto:
Empieza a construir desde el día 1, deja que la IA maneje la sintaxis.
Todas las apps modernas—desde Netflix hasta tu banco, desde ChatGPT hasta Uber—se construyen con las mismas 5 capas fundamentales:
Capa 5: Deploy (hacerla pública)
Capa 4: Auth (múltiples usuarios)
Capa 3: AI (inteligencia)
Capa 2: Data (persistencia)
Capa 1: UI (interfaz)
Una vez que entiendes estas capas, puedes construir LO QUE SEA.
- Capas, No Recetas — Enseñamos componentes reusables, no proyectos únicos
- Un Proyecto, Mil Aplicaciones — Regenmon es el ejemplo, las capas son la lección
- Aprender Construyendo — App funcional desde sesión 1, no desde mes 3
- Desarrollo Asistido por IA — IA genera el código, tú diriges qué construir
- Deployed = Real — Si no está en vivo, no está terminado
- Sesión 1: Tu Regenmon Nace (UI + Data + Deploy)
- Sesión 2: Tu Regenmon Habla (AI Integration)
- Sesión 3: Tu Regenmon Conoce Otros (Auth + Web3)
- Sesión 4: Tu Regenmon Evoluciona (Vision AI)
- Sesión 5: Tu Regenmon Encuentra Amigos (Social Layer)
Deliverable Final: App completa, deployed, portfolio-ready en 2 semanas.
Este landing page está construido con:
- Vite - Build tool y dev server
- TypeScript - Type safety
- React - UI framework
- shadcn-ui - Component library
- Tailwind CSS - Utility-first styling
- Bun - Fast package manager
| Capa | Herramienta | Por Qué |
|---|---|---|
| UI Generation | v0 by Vercel | Creación rápida de componentes |
| Code Environment | Cursor/Replit | IDEs nativos con IA |
| AI APIs | Claude/OpenAI | Mejor razonamiento + visión |
| Auth | Privy | Onboarding web3 más fácil |
| Deployment | Vercel | Deploy sin configuración |
- Tener Bun instalado → instalar Bun
# Clonar el repositorio
git clone <YOUR_GIT_URL>
# Navegar al directorio
cd vibe101
# Instalar dependencias
bun install
# Iniciar servidor de desarrollo
bun run dev
# Build para producción
bun run build
# Preview del build
bun run previewsrc/
├── components/ # Componentes React
│ ├── Navbar.tsx # Navegación principal con logo
│ ├── Hero.tsx # Hero section con CTA principal
│ ├── Layers.tsx # Las 5 capas del desarrollo
│ ├── ForWho.tsx # Para quién es el bootcamp
│ ├── Journey.tsx # Programa de 2 semanas
│ ├── Pricing.tsx # Precio y CTA de registro
│ ├── FAQ.tsx # Preguntas frecuentes
│ ├── IsForYou.tsx # Señales de que es para ti
│ └── FinalCTA.tsx # CTA final
├── App.tsx # Componente raíz
├── main.tsx # Entry point
└── index.css # Estilos globales + Tailwind
public/
└── logo.png # Logo de VibeCoding (mango naranja)
- 🎨 Glassmorphism effects
- 🌙 Dark theme optimizado
- ✨ Animaciones suaves
- 📱 Completamente responsive
- 🔗 CTA Principal: Link directo a Tally form de registro
- 📊 5 Capas Visualizadas: Sistema interactivo mostrando capas de desarrollo
- 🎯 Multiple CTAs: Estratégicamente posicionados en toda la página
- 🐦 Contacto Directo: Link a @fruteroclub en X/Twitter
- ⚡ Performance: Build optimizado con Vite
- Scroll suave a secciones
- Navbar fijo con logo prominente
- Mobile menu responsive
- Links internos y externos
| Recurso | URL |
|---|---|
| Registro Bootcamp | https://tally.so/r/gDqk1M |
| Frutero Club (X) | https://x.com/fruteroclub |
| Landing Page | [En producción] |
| Comunidad Discord | [Post-registro] |
- Propuesta de valor principal
- CTA de registro inmediato
- Scroll a programa completo
- Visualización de las 5 capas
- Click para expandir detalles
- Iconografía clara por capa
- Programa completo de 2 semanas
- 5 sesiones detalladas
- Deliverables por sesión
- Precio accesible ($50 USD)
- CTA directo a Tally
- Link de contacto para dudas
| Bootcamp Típico | VibeCoding |
|---|---|
| 3-6 meses | 2 semanas intensivas |
| Sintaxis primero | Construir primero |
| Proyectos "Hello World" | Productos portfolio-ready |
| <20% completion | Target 70%+ completion |
| Curriculum pre-IA | IA-native desde día 1 |
| Teoría → práctica | Práctica → entendimiento |
- 🌎 Instrucción en Español — La mayoría son English-only
- 💰 Pricing Accesible — $50 USD vs $5K+ tradicionales
- 👥 Comunidad Probada — Frutero: 1,000+ entrenados, 32.7% completion
- 🎯 Contexto Local — Ejemplos y casos de uso relevantes a LATAM
| Métrica | Target |
|---|---|
| Completion rate | 70%+ |
| Apps deployed | 70% de completers |
| App activa 30 días después | 60%+ |
| NPS (recomendarían) | 8+/10 |
| Segunda app en 60 días | 40%+ |
- ✅ Empleados que quieren automatizar trabajo o crear herramientas internas
- ✅ Freelancers/consultores que quieren ofrecer desarrollo de apps custom
- ✅ Founders que necesitan lanzar MVPs sin contratar developers
- ✅ Side-hustlers lanzando productos digitales
- ✅ Estudiantes/career changers explorando tech sin CS degrees
- ✔️ Alfabetización digital básica
- ✔️ Disposición a usar herramientas de AI coding
- ❌ NO se requiere experiencia en programación
- ❌ NO se requiere conocimiento previo de código
bun run dev # Dev server con hot reload
bun run build # Build de producción
bun run preview # Preview del build
bun run lint # Linter (si configurado)Todos los componentes siguen patrón similar:
- TypeScript con tipos explícitos
- Tailwind para estilos
- shadcn-ui como base de componentes
- Responsive-first approach
- Archivo:
/public/logo.png - Diseño: Mango naranja en círculo
- Uso: Navbar (w-16 h-16 con zoom 250%)
- Ver
tailwind.config.tspara theme completo - Primary: Naranja (brand color)
- Background: Dark theme
- Efectos: Glassmorphism con blur
- System font stack optimizado
- Font weights: 400 (regular), 600 (semibold), 700 (bold)
# Deploy automático con Vercel CLI
vercel
# O conectar repo de GitHub a Vercel
# Auto-deploy en cada push a main- Build command:
bun run build - Output directory:
dist - Install command:
bun install
- Twitter/X: @fruteroclub
- Dudas del Bootcamp: Usa el link de contacto en Pricing section
- Issues técnicos: Contactar a través de X
- Post-registro: Acceso a Discord de Frutero
- Cohort: 30 participantes máximo
- Soporte: Live sessions + async Discord + office hours
VibeCoding Bootcamp - Frutero Club 2024 Landing page construida con React + Vite + Tailwind
"Donde cualquiera puede construir, y la IA maneja el código."
🥭 VibeCoding - De Idea a App en 2 Semanas