Schema - Copy this React, Tailwind Component to your project

¡Perfecto! Aquí tienes un **prompt optimizado para React + Tailwind CSS** con efectos de scroll (usando librerías como Framer Motion o AOS) y hover effects modernos, específicamente para tu plataforma educativa: ### **Prompt para PuerCode AI (React + Tailwind CSS):** ```markdown **Objetivo:** Genera el código de una landing page en **React (TypeScript opcional) + Tailwind CSS** para una plataforma educativa que corrige exámenes tipo test mediante comparación de imágenes. La página debe incluir: Efectos de scroll suaves (animaciones al aparecer, parallax). Microinteracciones hover (botones, cards). Diseño responsive (mobile first). **Tecnologías:** React 18 + Vite. Tailwind CSS (con plugins: `tailwindcss animate`, `@tailwindcss/forms`). Librerías de animación: **Framer Motion** (para scroll y hover) o **AOS** (Animate On Scroll). Iconos: React Icons (`npm install react icons`). **Secciones y Componentes:** 1. **`<HeroSection />`** **Fondo con efecto parallax**: Usa `useParallax` de Framer Motion o `bg fixed` en Tailwind. **Título principal**: "Corrección de exámenes en segundos con IA". **Botón CTA**: Con efecto hover (gradiente animado). ```jsx <button className="bg gradient to r from blue 600 to green 500 hover:from blue 700 hover:to green 600 transition all duration 300 transform hover:scale 105"> Probar ahora </button> ``` 2. **`<HowItWorks />`** **3 pasos con iconos animados** (ej: `react icons/fa`): Subir examen (efecto hover: sacudida). Procesamiento (barra de progreso animada). Resultado (card que se expande). **Animación al aparecer**: ```jsx <motion.div initial={{ opacity: 0, y: 50 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} > {/* Contenido */} </motion.div> ``` 3. **`<ImageComparator />`** (Demo interactiva): Slider "antes/después" con react compare slider. Efecto hover en imágenes: `hover:scale 110 transition transform`. 4. **`<Testimonials />`** Cards con testimonios que flotan al hover: ```jsx <div className="hover: translate y 2 transition transform duration 300"> <p>"¡La plataforma me salvó la vida!"</p> </div> ``` 5. **`<ContactForm />`** Inputs con bordes animados: ```jsx <input className="border 2 focus:border blue 500 transition all" /> ``` **Efectos Clave:** **Scroll:** Secciones que aparecen con fade in (Framer Motion). Efecto parallax en imágenes de fondo (`background attachment: fixed`). **Hover:** Botones con gradiente dinámico (`group hover` en Tailwind). Cards con sombra animada (`hover:shadow xl`). **Paleta de Colores (Tailwind):** ```js // tailwind.config.js theme: { extend: { colors: { primary: "#2C3E50", // Azul académico secondary: "#27AE60", // Verde de éxito }, }, } ``` **Extras:** **Dark mode** (usando `dark:` de Tailwind). **Botón flotante** (usando `<FixedUploadButton />`). **Ejemplo de Código para Framer Motion:** ```jsx import { motion } from "framer motion"; const AnimatedSection = () => ( <motion.section initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1 }} className="py 12" > {/* Contenido */} </motion.section> ); ``` ### **Para PuerCode AI:** "Crea una landing page en React + Tailwind CSS para una plataforma educativa de corrección de exámenes. Usa Framer Motion para animaciones al scroll (parallax, fade in) y Tailwind para efectos hover (gradientes, escalados). Incluye: 1. Hero con título, subtítulo y CTA. 2. Sección 'Cómo funciona' con 3 pasos animados. 3. Demo interactiva de comparación de imágenes. 4. Testimonios con cards que levitan al hover. 5. Formulario de contacto con validación. Prioriza código limpio y responsive. Usa la paleta de colores azul (#2C3E50) y verde (#27AE60)." ``` ### **Recomendaciones Finales:** **Optimiza imágenes** con `next/image` o `vite plugin image`. **Prueba en móvil**: Usa `md:`, `lg:` de Tailwind. **Accesibilidad**: Añade `aria labels` en botones. ¿Quieres que ajuste algún efecto en concreto? 😊