{% extends 'base.html' %}
{% load static %}

{% block title %}Welcome to the #1 Notes Sharing Platform{% endblock %}

{% block head %}
<style>
  .hero-section {
    background: linear-gradient(45deg, #0a2540, #007bff);
    color: #ffffff;
  }
  .how-it-works {
      background-color: #f6f9fc;
  }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
  <div class="row hero-section align-items-center">
    <div class="col-md-10 offset-md-1 text-center">
      <h1 class="display-3">The Best Place for Your Study Notes</h1>
      <p class="lead">Upload, share, and discover study materials from students at your university. Say goodbye to scattered files and hello to collaborative learning.</p>
      <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
        <a href="{% url 'signup' %}" class="btn btn-primary btn-lg px-4 gap-3">Get Started</a>
        <a href="#" class="btn btn-outline-light btn-lg px-4">Browse Notes</a>
      </div>
    </div>
  </div>

  <div class="row how-it-works">
    <div class="col-12">
      <h2 class="text-center mb-5">How It Works</h2>
    </div>
    <div class="col-md-3">
      <div class="step">
        <div class="step-icon">1</div>
        <h3>Sign Up</h3>
        <p>Create your free account in seconds.</p>
      </div>
    </div>
    <div class="col-md-3">
      <div class="step">
        <div class="step-icon">2</div>
        <h3>Upload</h3>
        <p>Share your notes, ppts, and assignments.</p>
      </div>
    </div>
    <div class="col-md-3">
      <div class="step">
        <div class="step-icon">3</div>
        <h3>Share</h3>
        <p>Help other students by making your notes public.</p>
      </div>
    </div>
    <div class="col-md-3">
      <div class="step">
        <div class="step-icon">4</div>
        <h3>Download</h3>
        <p>Access quality notes from your peers.</p>
      </div>
    </div>
  </div>
</div>
{% endblock %}
