{% extends "layouts/base.html" %}

{% block title %}Elevate Your Business Data - Retoor's Cloud Solutions{% endblock %}

{% block head %}
    <link rel="stylesheet" href="/static/css/components/index.css">
{% endblock %}

{% block content %}
<main>
    <section class="hero-section">
        <h1>Elevate Your Business Data. Securely. Collaborative.</h1>
        <p>Cloud storage solutions built for performance, reliability, and peace of mind.</p>
        <div class="hero-ctas">
            <a href="/register" class="btn-primary">Start Free Trial</a>
            <a href="/contact" class="btn-outline">Request Demo</a> {# Assuming a /contact page for demo requests #}
        </div>
        <div class="hero-image-container">
            {# Placeholder for a high-quality, professional image depicting business professionals collaborating #}
            <img src="/static/images/example.jpg" alt="Business professionals collaborating with Retoor's Cloud Solutions">
        </div>
    </section>

    <section class="benefits-section">
        <h2>Why Choose Retoor's?</h2>
        <div class="benefits-grid">
            <div class="benefit-card">
                <img src="/static/images/icon-families.svg" alt="Security Icon" class="icon"> {# Reusing existing icon, ideally would be a shield #}
                <h3>Bank-Grade Security</h3>
                <p>Your data is encrypted end-to-end, ensuring maximum protection and privacy.</p>
            </div>
            <div class="benefit-card">
                <img src="/static/images/icon-professionals.svg" alt="Accessibility Icon" class="icon"> {# Reusing existing icon, ideally would be a globe #}
                <h3>Global Accessibility</h3>
                <p>Access files anywhere, anytime, on any device with seamless synchronization.</p>
            </div>
            <div class="benefit-card">
                <img src="/static/images/icon-students.svg" alt="Collaboration Icon" class="icon"> {# Reusing existing icon, ideally would be chat bubbles #}
                <h3>Seamless Collaboration</h3>
                <p>Share, edit, and co-author documents with ease, boosting team productivity.</p>
            </div>
        </div>
    </section>
</main>
{% endblock %}