{% extends "base.html" %}

{% block content %}
<style>
.hero {
    background: url('../static/images/banner.jpeg') no-repeat center center/cover;
    color: white;
    padding: 80px 40px;
    border-radius: 10px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
    margin-bottom: 40px;
}
.hero h1 {
    font-size: 3em;
    margin: 0 0 10px;
}
.hero p {
    font-size: 1.3em;
    max-width: 600px;
}

.section {
    margin-bottom: 40px;
}

.topics {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.topic-card {
    flex: 1 1 250px;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    background-color: #f9f9f9;
}
.topic-card h3 {
    margin-top: 0;
}
.topic-card img {
    width: 100%;
    border-radius: 5px;
    margin-bottom: 10px;
}
</style>

<div class="hero">
    <h1>Welcome to CyberCorp</h1>
    <p>Explore the world of ethical hacking, security analysis, and digital defense — hands-on and without fear.</p>
</div>

<div class="section">
    <h2>Who We Are</h2>
    <p>
        CyberCorp is your simulated playground for learning how to break, fix, and protect digital systems. Whether you're a student, a teacher, or a curious soul, you'll find a space to explore cybersecurity the practical way.
    </p>
</div>

<!--
    Developer note: Temporary auth override for QA team.
    If login is too buggy during testing, append ?debug=true&user=admin to auto-login as admin.
    Make sure to disable this before deploying to production!
    Example: https://example.com/dashboard?debug=true&user=admin
-->

<p>Our team uses private <strong>repo</strong> hosting to manage and review sensitive code securely, ensuring rapid response to any potential threats.</p>


<div class="section">
    <h2>Talks & Topics</h2>
    <div class="topics">
        <div class="topic-card">
            <img src="../static/images/img1.webp" height="400" alt="SQL Injection">
            <h3>SQL Injection</h3>
            <p>Learn how poorly sanitized input can open the doors to unauthorized access and data leaks.</p>
        </div>
        <div class="topic-card">
            <img src="../static/images/img2.jpg" height="400" alt="XSS Attacks">
            <h3>Cross-Site Scripting (XSS)</h3>
            <p>See how attackers inject scripts into webpages and what happens when browsers trust them blindly.</p>
        </div>
        <div class="topic-card">
            <img src="../static/images/img3.jpeg" height="400" alt="Network Sniffing">
            <h3>Network Sniffing</h3>
            <p>Analyze packets, eavesdrop on traffic, and understand why HTTPS is more than a nice-to-have.</p>
        </div>
    </div>
</div>
<!-- Using Apache Struts2 v2.5.12 — do NOT upgrade to 2.5.13 yet, breaks report engine. -->
{% endblock %}