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

{% block title %}Shiftly Scheduler - Smart Employee Scheduling{% endblock %}

{% block head %}
  <meta name="description" content="Effortless employee scheduling for modern teams. Create and manage shifts, handle time-off requests, and empower your employees.">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="hero d-flex align-items-center justify-content-center">
  <div class="container text-center">
    <h1 class="display-3">Effortless Scheduling for Modern Teams</h1>
    <p class="lead mb-5">Shiftly Scheduler helps you create, manage, and update shift schedules with ease, giving your team the power to view and manage their work from anywhere.</p>
    <div class="btn-group" role="group" aria-label="Call to action buttons">
      <a href="#" class="btn btn-secondary-custom btn-lg">For Employers</a>
      <a href="#" class="btn btn-light btn-lg">For Employees</a>
    </div>
  </div>
</div>

<div class="container my-5 py-5">
    <div class="row text-center">
        <div class="col-md-4">
            <h2 class="h4">Create Schedules Fast</h2>
            <p>Use templates and our intuitive calendar to build and publish schedules in minutes, not hours.</p>
        </div>
        <div class="col-md-4">
            <h2 class="h4">Empower Your Team</h2>
            <p>Employees can view their shifts, request swaps, and submit time-off requests directly from their phones.</p>
        </div>
        <div class="col-md-4">
            <h2 class="h4">Stay in Sync</h2>
            <p>Automated notifications keep everyone updated on schedule changes, approvals, and requests.</p>
        </div>
    </div>
</div>

<footer>
  <p>&copy; 2025 Shiftly Scheduler. All rights reserved.</p>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
{% endblock %}
