Prompt para Landingpage · Jose Bazan IA

Prompt para Landingpage

Dejo un pequeño aporte colegas, espero les sea de utilidad. Utilice la terminal de Windows, específicamente con ✅OpenCode - Grok Code Fast 1 y GLM 4.7 las dos son ❇️Free

🔥¡Estamos rompiendo el sistema!🔥

Actúa como un Arquitecto de Software Senior y experto en Seguridad Web. Tu tarea es desarrollar una Landing Page profesional y modular utilizando PHP 8.4, Bootstrap 5.3 y PHPMailer, siguiendo estándares de industria para código limpio y mantenible.

1. ARQUITECTURA DE ARCHIVOS Y CARPETAS

El proyecto debe estar organizado de la siguiente manera para permitir una manipulación granular del contenido:

- / (Raíz): index.php (Punto de entrada).

- /css: custom-styles.css (Variables y estilos personalizados).

- /js: app.js (Interacciones y validaciones).

- /includes: header.php, footer.php, services-data.php (Arrays de contenido).

- /src: mail-handler.php (Lógica de PHPMailer).

- /vendor: (Simular la carga de PHPMailer vía Autoload).

2. ESPECIFICACIONES TÉCNICAS (BACKEND - PHP 8.4)

- Uso de Tipado Estricto (declare(strict_types=1)).

- Separación de lógica y vista: El contenido de servicios y testimonios debe residir en arrays dentro de /includes y renderizarse mediante bucles foreach en el index.

- Integración de PHPMailer: Configurar un controlador en /src/mail-handler.php que gestione el envío SMTP, incluya validación de campos obligatorios, saneamiento de inputs (filter_var) y protección contra Inyección de Cabeceras.

- Manejo de Errores: Implementar un sistema de feedback que devuelva respuestas JSON para ser procesadas por AJAX.

3. ESPECIFICACIONES TÉCNICAS (FRONTEND - UI/UX)

- Framework: Bootstrap 5.3 (utilizando el grid sistema y componentes de utilidad).

- Estilos: Implementar un esquema de color moderno usando Variables CSS (:root). El diseño debe ser "Mobile First" y totalmente responsivo.

- Animaciones: Incorporar scroll suave (Smooth Scroll) y efectos de entrada para las secciones utilizando la API de Intersection Observer en JavaScript nativo.

- Formulario de Contacto: Validación en tiempo real (Client-side) y envío asíncrono mediante Fetch API para evitar la recarga de la página.

4. SECCIONES REQUERIDAS

- Navbar: Sticky con cambio de opacidad al hacer scroll.

- Hero Section: Título de alto impacto, CTA principal y background optimizado.

- Servicios Dinámicos: Generados a partir del archivo de datos PHP.

- Formulario de Contacto: Campos para Nombre, Email, Asunto y Mensaje.

- Footer: Información legal, redes sociales y año dinámico con PHP.

5. ENTREGABLES (CÓDIGO COMPLETO)

Proporciona bloques de código independientes y listos para copiar para:

1. index.php (Lógica de ensamblaje).

2. /includes/services-data.php (Estructura de datos modular).

3. /css/custom-styles.css (Diseño y personalización).