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

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

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

{% block content %}
<main>
    <section class="solutions-hero">
        <h1>Tailored for Every Business Need</h1>
        <p>Flexible cloud solutions for teams of all sizes.</p>
    </section>

    <section class="solutions-grid-section">
        <div class="solutions-grid">
            <div class="solution-card">
                <img src="/static/images/icon-families.svg" alt="Secure File Sharing Icon" class="icon"> {# Placeholder icon #}
                <h3>Secure File Sharing</h3>
                <p>Collaborate on documents and large files with colleagues and clients securely.</p>
            </div>
            <div class="solution-card">
                <img src="/static/images/icon-professionals.svg" alt="Automated Backup Icon" class="icon"> {# Placeholder icon #}
                <h3>Automated Backup & Recovery</h3>
                <p>Protect critical business data with automated, daily easy-click recovery.</p>
            </div>
            <div class="solution-card">
                <img src="/static/images/icon-students.svg" alt="Team Collaboration Icon" class="icon"> {# Placeholder icon #}
                <h3>Team Collaboration Spaces</h3>
                <p>Organize important work documents, collaborate with teams, and access files from anywhere.</p>
            </div>
            <div class="solution-card">
                <img src="/static/images/icon-families.svg" alt="Enterprise Security Icon" class="icon"> {# Placeholder icon #}
                <h3>Enterprise-Grade Security</h3>
                <p>Benefit from advanced encryption and robust access controls.</p>
            </div>
            <div class="solution-card">
                <img src="/static/images/icon-professionals.svg" alt="Compliance Certifications Icon" class="icon"> {# Placeholder icon #}
                <h3>Compliance Certifications</h3>
                <p>Meet industry standards with compliance certifications and robust access controls.</p>
            </div>
            <div class="solution-card">
                <img src="/static/images/icon-students.svg" alt="Scalable Storage Icon" class="icon"> {# Placeholder icon #}
                <h3>Scalable Storage Plans</h3>
                <p>Easily upgrade and downgrade storage as storage and team needs evolve.</p>
            </div>
        </div>
    </section>

    <section class="cta-bottom">
        <a href="/pricing" class="btn-primary">Find Your Business Plan</a>
    </section>
</main>
{% endblock %}