{% extends "layout.html" %}
{% block content %}
<div style="max-width: 680px; margin: 4rem auto; text-align: left;">
    <h1 style="font-size: 3rem; margin-bottom: 2rem; letter-spacing: -0.03em;">OpenTimeTracker</h1>
    
    <div style="font-size: 1.15rem; line-height: 1.8; color: var(--text-primary);">
        <p>
            If you are like me, you often wonder how the day could pass by so quickly. 
            Or maybe, like me, you just need a simple tool to track your time so you don't overwork yourself.
        </p>
        
        <p>
            <strong>OpenTimeTracker is for you.</strong> You can even host it yourself if you like.
        </p>
        
        <p>
            There are no unnecessary collaboration features standing in your way. It is for you, and that should be enough.
        </p>
        
        <br>
        
        <p>
            Happy Tracking,<br>
            <span style="font-weight: 600;">Calvin Erfmann</span>
        </p>

        <p style="margin-top: 2rem; font-size: 0.95rem;">
            <a href="https://git.erfmann.dev/calvin.erfmann/OpenTimeTracker" target="_blank" style="color: var(--text-secondary); text-decoration: underline;">
                View Source Code
            </a>
        </p>
    </div>

    <div style="margin-top: 3rem; display: flex; gap: 15px; align-items: center;">
        <a href="{{ url_for('register') }}" class="btn" style="padding: 12px 24px; font-size: 1rem;">Get Started</a>
        <a href="{{ url_for('login') }}" class="btn" style="background: white; color: var(--text-primary); border: 1px solid var(--border-dim); padding: 12px 24px; font-size: 1rem;">Login</a>
        <a href="{{ url_for('roadmap') }}" style="margin-left: 10px; color: var(--text-secondary); text-decoration: none; font-size: 0.95rem;">Roadmap</a>
    </div>
</div>
{% endblock %}