templates/index.html

{% extends "base.html" %}
{% block title %}Home{% endblock %}

{% block content %}
<!-- HERO -->
<div class="gradient-bg rounded-3xl p-12 mb-10 text-center relative overflow-hidden">
  <div class="absolute inset-0 opacity-10" style="background-image:radial-gradient(circle at 20% 50%, #fff 1px, transparent 1px),radial-gradient(circle at 80% 20%, #fff 1px, transparent 1px);background-size:30px 30px;"></div>
  <div class="relative z-10">
    <div class="inline-flex items-center gap-2 bg-white bg-opacity-20 text-white text-sm px-4 py-1.5 rounded-full mb-5 font-medium">
      ✨ AI-Powered Recruitment Automation
    </div>
    <h1 class="text-white text-5xl font-extrabold leading-tight mb-4">
      Hire Smarter.<br/>
      <span class="text-indigo-200">Not Harder.</span>
    </h1>
    <p class="text-indigo-100 text-lg max-w-2xl mx-auto mb-8">
      TalentIQ uses Google Gemini AI to screen resumes, score candidates, and automate interview scheduling — all in one click.
    </p>
    <div class="flex items-center justify-center gap-4">
      <a href="/upload" class="bg-white text-indigo-600 hover:bg-indigo-50 font-bold px-8 py-3 rounded-xl shadow-lg transition text-base">
        🚀 Start Screening
      </a>
      <a href="/dashboard" class="border border-white border-opacity-40 text-white hover:bg-white hover:bg-opacity-10 font-medium px-8 py-3 rounded-xl transition text-base">
        View Dashboard →
      </a>
    </div>
  </div>
</div>

<!-- FEATURES -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
  {% set features = [
    ("🤖", "AI Resume Scoring", "Gemini AI scores every resume 0–100 against your JD — instantly.", "indigo"),
    ("⚡", "Bulk Upload", "Upload dozens of PDFs at once. Process entire applicant pools in seconds.", "violet"),
    ("📧", "Auto Email", "Shortlisted? Interview invite sent. Rejected? Polished email dispatched. All automated.", "purple"),
  ] %}
  {% for icon, title, desc, color in features %}
  <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 card-hover">
    <div class="w-12 h-12 bg-{{color}}-100 rounded-xl flex items-center justify-center text-2xl mb-4">{{icon}}</div>
    <h3 class="font-bold text-gray-900 text-lg mb-2">{{title}}</h3>
    <p class="text-gray-500 text-sm leading-relaxed">{{desc}}</p>
  </div>
  {% endfor %}
</div>

<!-- HOW IT WORKS -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 mb-10">
  <h2 class="text-2xl font-bold text-gray-900 mb-8 text-center">How It Works</h2>
  <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
    {% set steps = [
      ("1", "📄", "Upload Resumes", "Drop one or many PDF resumes"),
      ("2", "📝", "Add Job Description", "Paste your JD & set score threshold"),
      ("3", "🧠", "AI Analyzes", "Gemini scores each candidate 0–100"),
      ("4", "📬", "Emails Sent", "Interview or rejection emails go out automatically"),
    ] %}
    {% for num, icon, title, desc in steps %}
    <div class="text-center relative">
      <div class="w-14 h-14 gradient-bg rounded-2xl flex items-center justify-center text-2xl mx-auto mb-3 shadow">{{icon}}</div>
      <span class="absolute top-0 right-1/4 bg-indigo-600 text-white text-xs font-bold w-5 h-5 rounded-full flex items-center justify-center">{{num}}</span>
      <h4 class="font-semibold text-gray-800 mb-1">{{title}}</h4>
      <p class="text-gray-500 text-xs">{{desc}}</p>
    </div>
    {% endfor %}
  </div>
</div>

<!-- STATS -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
  {% set stats = [
    ("90%", "Time Saved", "vs manual screening"),
    ("< 30s", "Per Resume", "AI analysis speed"),
    ("0", "Manual Emails", "fully automated"),
    ("100%", "Audit Trail", "every decision logged"),
  ] %}
  {% for val, label, sub in stats %}
  <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 text-center card-hover">
    <div class="text-3xl font-extrabold text-indigo-600 mb-1">{{val}}</div>
    <div class="text-gray-800 font-semibold text-sm">{{label}}</div>
    <div class="text-gray-400 text-xs mt-0.5">{{sub}}</div>
  </div>
  {% endfor %}
</div>
{% endblock %}