{% extends "base.html" %}

{% block title %}MyWebdav - Pay-As-You-Go Cloud Storage{% endblock %}

{% block description %}Store what you need, only pay for what you use. $5/TB cloud storage with MyWebdav.{% endblock %}

{% block content %}
<div class="hero-section">
    <div class="hero-content">
        <h1 class="hero-title">PAY-AS-YOU-GO<br>CLOUD STORAGE</h1>
        <div class="hero-price">$5/TB</div>
        <p class="hero-subtitle">Store what you need, only pay for what you use</p>
        <div class="hero-actions">
            <a href="/login" class="btn btn-secondary">Login</a>
            <a href="/app" class="btn btn-primary">Sign Up</a>
        </div>
    </div>
    <div class="hero-image">
        <svg class="cloud-icon" viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <linearGradient id="cloudGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" style="stop-color:#b3d9f2;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#7fc4ef;stop-opacity:1" />
                </linearGradient>
            </defs>
            <path d="M150,70 Q170,50 170,70 Q190,70 190,90 Q190,110 170,110 L60,110 Q40,110 40,90 Q40,75 50,65 Q50,45 70,45 Q80,30 100,30 Q120,30 130,45 Q150,50 150,70 Z"
                  fill="url(#cloudGradient)"
                  opacity="0.8"/>
            <polygon points="140,90 160,70 150,90 165,90 145,115 150,95 135,95"
                     fill="#ef5350"
                     opacity="0.9"/>
        </svg>
    </div>
</div>
{% endblock %}