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

{% block content %}
<div class="page-header page-header-xs" data-parallax="true" style="background-image: url({% static 'img/header.jpg' %});">
  <div class="filter"></div>
</div>
  <!-- Hero Section -->
  <section class="hero-section bg-primary text-white text-center py-5">
    <div class="container">
      <h1 class="display-4">Reclaim What's Yours</h1>
      <p class="lead">Refundom helps you recover your funds after property seizure due to unpaid taxes.</p>
    </div>
  </section>

  <!-- About Us Section -->
  <section id="about" class="about-section py-5">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <h2>About Us</h2>
          <p>Refundom is dedicated to helping individuals recover their funds after their property has been seized due to unpaid taxes. Our team of experts ensures a smooth and hassle-free process.</p>
          <a href="about.html" class="btn btn-primary">Learn More</a>
        </div>
        <div class="col-md-6">
          <img src="https://via.placeholder.com/400" alt="About Us" class="img-fluid rounded">
        </div>
      </div>
    </div>
  </section>

  <!-- Process Timeline Section -->
  <section id="process" class="process-section py-5 bg-light">
    <div class="container">
      <h2 class="text-center mb-5">Our Process</h2>
      <div class="timeline">
        <div class="timeline-step left">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Step 1: Initial Consultation</h5>
              <p class="card-text">We assess your case and provide a detailed plan of action.</p>
            </div>
          </div>
        </div>
        <div class="timeline-step right">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Step 2: Documentation</h5>
              <p class="card-text">We gather all necessary documents to support your claim.</p>
            </div>
          </div>
        </div>
        <div class="timeline-step left">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Step 3: Submission</h5>
              <p class="card-text">We submit your claim to the relevant authorities.</p>
            </div>
          </div>
        </div>
        <div class="timeline-step right">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Step 4: Follow-Up</h5>
              <p class="card-text">We monitor the progress and keep you updated.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Call to Action Section -->
  <section id="contact" class="cta-section py-5 bg-primary text-white text-center">
    <div class="container">
      <h2>Ready to Reclaim Your Funds?</h2>
      <p>Contact us today to get started on your journey to recovery.</p>
      <a href="contact.html" class="btn btn-neutral btn-lg">Contact Us</a>
    </div>
  </section>

  {% endblock %}