{% 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 %}