<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CUP.Dev - Hacker Ético</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
    <!-- SEO Meta Tags -->
    <meta name="description" content="CUP.Dev - Servicios de Hacker Ético, Pentesting y Ciberseguridad para proteger tu entorno digital.">
    <meta name="keywords" content="Hacker Ético, Pentesting, Ciberseguridad, Seguridad Informática, Bug Bounty">
    <meta name="author" content="CUP.Dev">
</head>
<body>
    <!-- Header -->
    <header>
        <div class="container header-container">
            <div class="logo" aria-label="CUP.Dev Logo">
                <span>&lt;/</span>CUP<span>.DEV&gt;</span>
            </div>
            <nav aria-label="Navegación principal">
                <ul class="nav-list">
                    <li><a href="#who">¿Quién soy?</a></li>
                    <li><a href="#services">Servicios</a></li>
                    <li><a href="#tools">Herramientas</a></li>
                    <li><a href="#collaborations">Colaboraciones</a></li>
                    <li><a href="#contact">Contacto</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- Sección de bienvenida -->
    <section id="welcome" class="welcome-section">
        <div class="container">
            <h1>Bienvenido a CUP.Dev</h1>
            <p class="subtitle">Hacker Ético | Pentesting | Ciberseguridad</p>
            <p class="intro">Soy un apasionado de la ciberseguridad, especializado en pruebas de penetración y protección de datos.</p>
        </div>
    </section>

    <!-- ¿Quién soy? -->
    <section id="who" class="section who-section">
        <div class="container">
            <h2>¿Quién soy?</h2>
            <div class="who-content">
                <p>Me dedico a proteger sistemas, aplicaciones y redes frente a amenazas cibernéticas. Mi objetivo es asegurar la integridad de los datos y ayudar a las empresas a crear entornos digitales más seguros.</p>
                <img src="images/cup.dev.png" alt="Foto de CUP.Dev" class="section-image">
            </div>
        </div>
    </section>

    <!-- Servicios -->
    <section id="services" class="section services-section">
        <div class="container">
            <h2>¿Qué ofrezco?</h2>
            <div class="services-container">
                <!-- Servicio 1 -->
                <div class="service-box">
                    <h3>🔍 Pentesting y Auditorías de Seguridad</h3>
                    <p>Pruebas de penetración en aplicaciones web, redes y sistemas para detectar y solucionar vulnerabilidades.</p>
                    <img src="images/pentesting.jpg" alt="Pentesting" class="service-image">
                </div>
                <!-- Servicio 2 -->
                <div class="service-box">
                    <h3>🐞 Bug Bounty y Vulnerability Research</h3>
                    <p>Participación activa en programas de recompensas por errores y búsqueda proactiva de vulnerabilidades.</p>
                    <img src="images/bubounty.jpg" alt="Bug Bounty" class="service-image">
                </div>
                <!-- Servicio 3 -->
                <div class="service-box">
                    <h3>✍️ Write-Ups y Herramientas Personalizadas</h3>
                    <p>Desarrollo de herramientas para automatizar y optimizar las pruebas de seguridad, así como documentación para la comunidad.</p>
                    <img src="images/writeups.png" alt="Write-Ups" class="service-image">
                </div>
            </div>
        </div>
    </section>

    <!-- Herramientas y Tecnologías -->
    <section id="tools" class="section tools-section">
        <div class="container">
            <h2>Herramientas y Tecnologías</h2>
            <div class="tools-container">
                <!-- Herramienta 1 -->
                <div class="tool-card">
                    <div class="tool-icon" aria-hidden="true">🐍</div>
                    <h3>Kali Linux</h3>
                    <p>Experto en pruebas de penetración y auditoría de seguridad.</p>
                </div>
                <!-- Herramienta 2 -->
                <div class="tool-card">
                    <div class="tool-icon" aria-hidden="true">🛠️</div>
                    <h3>Burp Suite</h3>
                    <p>Realizo pruebas de seguridad en aplicaciones web, buscando vulnerabilidades.</p>
                </div>
                <!-- Herramienta 3 -->
                <div class="tool-card">
                    <div class="tool-icon" aria-hidden="true">🌐</div>
                    <h3>Nmap</h3>
                    <p>Escaneo y mapeo de redes para identificar vulnerabilidades de seguridad.</p>
                </div>
                <!-- Herramienta 4 -->
                <div class="tool-card">
                    <div class="tool-icon" aria-hidden="true">💥</div>
                    <h3>Metasploit</h3>
                    <p>Uso Metasploit para realizar pruebas de explotación de vulnerabilidades.</p>
                </div>
                <!-- Herramienta 5 -->
                <div class="tool-card">
                    <div class="tool-icon" aria-hidden="true">🔍</div>
                    <h3>Wireshark</h3>
                    <p>Analizo tráfico de red y detecto posibles amenazas y brechas de seguridad.</p>
                </div>
                <!-- Herramienta 6 -->
                <div class="tool-card">
                    <div class="tool-icon" aria-hidden="true">🛡️</div>
                    <h3>OpenVAS</h3>
                    <p>Realizo auditorías de seguridad para identificar vulnerabilidades en infraestructuras.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Colaboraciones -->
    <section id="collaborations" class="section collaborations-section">
        <div class="container">
            <h2>Colaboraciones</h2>
            <p>He trabajado con personas con sólidos conocimientos informáticos, lo que me ha permitido crecer y contribuir a proyectos importantes en el mundo digital.</p>
            <div class="collaboration-container">
                <!-- Colaboración 1 -->
                <div class="collaboration-card">
                    <a href="https://xenadev.es/" target="_blank" rel="noopener noreferrer">
                        <img src="images/logowhite.png" alt="Logo de XaneDev" class="logo-img">
                    </a>
                </div>
                <!-- Puedes agregar más colaboraciones aquí -->
            </div>
        </div>
    </section>

    <!-- Contacto -->
    <section id="contact" class="section contact-section">
        <div class="container">
            <h1>¡Contáctame!</h1>
            <h2>¿Listo para proteger tu entorno digital? Contáctame hoy y asegurémonos de tu futuro digital.</h2>
            <form id="contact-form" action="https://formspree.io/f/xgvebavz" method="POST" aria-label="Formulario de contacto">
                <div class="form-group">
                    <label for="name" class="visually-hidden">Nombre</label>
                    <input type="text" id="name" name="name" placeholder="Nombre" required>
                </div>
                <div class="form-group">
                    <label for="email" class="visually-hidden">Correo</label>
                    <input type="email" id="email" name="_replyto" placeholder="Correo" required>
                </div>
                <div class="form-group">
                    <label for="message" class="visually-hidden">Mensaje</label>
                    <textarea id="message" name="message" placeholder="Mensaje" required></textarea>
                </div>
                <button>
                    <div class="svg-wrapper-1">
                      <div class="svg-wrapper">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 24 24"
                          width="24"
                          height="24"
                        >
                          <path fill="none" d="M0 0h24v24H0z"></path>
                          <path
                            fill="currentColor"
                            d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"
                          ></path>
                        </svg>
                      </div>
                    </div>
                    <span>Send</span>
                  </button>
                  
                
            </form>
            <img src="images/cup.dev (1).png" alt="Ilustración de contacto" class="section-image">
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container footer-container">
            <p>&copy; 2024 CUP.Dev | Todos los derechos reservados</p>
            <nav aria-label="Navegación del pie de página">
                
            </nav>
        </div>
    </footer>

    <!-- Scripts -->
    <script src="script.js" defer></script>
</body>
</html>
