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

{% block title %}Solutions for Everyone - 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>Solutions for Everyone</h1>
        <p>Solutions for Everyone</p>
        <div class="benefits-grid">
            <div class="benefit-card family-card">
                <img src="/static/images/icon-families.svg" alt="Families Icon" class="icon">
                <h3>For Families</h3>
                <p>Securely backup and share precious photos and videos. Keep fond memories safe for generations.</p>
            </div>
            <div class="benefit-card professional-card">
                <img src="/static/images/icon-professionals.svg" alt="Professionals Icon" class="icon">
                <h3>For Professionals</h3>
                <p>Organize important work documents, collaborate in teams, and access files from anywhere.</p>
            </div>
            <div class="benefit-card student-card">
                <img src="/static/images/icon-students.svg" alt="Students Icon" class="icon">
                <h3>For Students</h3>
                <p>Store projects, notes, research papers. Access study materials across your devices.</p>
            </div>
        </div>
        <a href="/solutions" class="btn-primary find-plan-btn">Find Your Perfect Plan</a>
    </section>
</main>
{% endblock %}