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

{% block title %}Use Cases - Retoor's Cloud Solutions{% endblock %}

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

{% block content %}
<main>
    <section class="use-cases-hero">
        <h1>Cloud Solutions for Every Industry & Challenge</h1>
        <p>Flexible cloud storage tailored to your needs.</p>
    </section>

    <section class="use-cases-grid-section">
        <div class="use-cases-grid">
            <div class="use-case-card">
                <img src="/static/images/icon-families.svg" alt="Secure File Collaboration Icon" class="icon"> {# Placeholder icon #}
                <h3>Secure File Collaboration</h3>
                <p>For marketing and creative teams to share large files and co-edit documents securely.</p>
            </div>
            <div class="use-case-card">
                <img src="/static/images/icon-professionals.svg" alt="Automated Data Backup Icon" class="icon"> {# Placeholder icon #}
                <h3>Automated Data Backup</h3>
                <p>Protect critical business data with automated, daily easy-click recovery.</p>
            </div>
            <div class="use-case-card">
                <img src="/static/images/icon-students.svg" alt="Client & Partner Portals Icon" class="icon"> {# Placeholder icon #}
                <h3>Client & Partner Portals</h3>
                <p>For consulting firms handling sensitive client data, ensure secure access and sharing.</p>
            </div>
            <div class="use-case-card">
                <img src="/static/images/icon-families.svg" alt="Remote Team Access Icon" class="icon"> {# Placeholder icon #}
                <h3>Remote Team Access</h3>
                <p>For businesses with remote workforces needing seamless access to company files from anywhere.</p>
            </div>
            <div class="use-case-card">
                <img src="/static/images/icon-professionals.svg" alt="Centralized Project Storage Icon" class="icon"> {# Placeholder icon #}
                <h3>Centralized Project Storage</h3>
                <p>Streamline project management by centralizing all related documents and assets.</p>
            </div>
            <div class="use-case-card">
                <img src="/static/images/icon-students.svg" alt="Remote Team Archiving Icon" class="icon"> {# Placeholder icon #}
                <h3>Remote Team Archiving</h3>
                <p>Efficiently archive old projects and data, ensuring compliance and easy retrieval.</p>
            </div>
            <div class="use-case-card">
                <img src="/static/images/icon-families.svg" alt="Data Compliance Icon" class="icon"> {# Placeholder icon #}
                <h3>Data Compliance & Governance</h3>
                <p>Meet regulatory requirements with robust data governance and audit trails.</p>
            </div>
            <div class="use-case-card">
                <img src="/static/images/icon-professionals.svg" alt="Disaster Recovery Icon" class="icon"> {# Placeholder icon #}
                <h3>Disaster Recovery Planning</h3>
                <p>Ensure business continuity with comprehensive disaster recovery solutions.</p>
            </div>
        </div>
    </section>

    <section class="cta-bottom">
        <a href="/solutions" class="btn-primary">Find Solutions For Your Team</a>
    </section>
</main>
{% endblock %}