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

{% block title %}Welcome to Retoors Storage{% endblock %}

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

{% block content %}
<section class="hero">
    <h1>Solutions for Everyone</h1>
    <p>Securely store and manage your data with HomeBase Storage.</p>
</section>

<section class="features">
    <div class="feature-card" id="families">
        <img src="/static/images/icon-families.svg" alt="Families Icon">
        <h2>For Families</h2>
        <p>Securely backup and share precious photos and videos. Keep memories safe for generations.</p>
    </div>
    <div class="feature-card" id="professionals">
        <img src="/static/images/icon-professionals.svg" alt="Professionals Icon">
        <h2>For Professionals</h2>
        <p>Organize important work documents, collaborate with teams, and access files from anywhere.</p>
    </div>
    <div class="feature-card" id="students">
        <img src="/static/images/icon-students.svg" alt="Students Icon">
        <h2>For Students</h2>
        <p>Store projects, notes, and research papers. Access study materials across your devices.</p>
    </div>
</section>

<section class="cta">
    <a href="/register" class="btn-primary">Find Your Perfect Plan</a>
</section>
{% endblock %}