{% extends "base.html" %}

{% block title %}Pricing – Workforce{% endblock %}

{% block content %}

<style>

body{
    background:#f8fafc;
}


/* Hero */

.pricing-header{

    padding:70px 20px 50px;

    text-align:center;

}


.pricing-header h1{

    font-size:3rem;

    font-weight:800;

}


.pricing-header p{

    font-size:1.2rem;

}


/* Cards */

.pricing-card{

    border:none;

    border-radius:25px;

    background:white;

    overflow:hidden;

    height:100%;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.3s;

}



.pricing-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.15);

}



/* Header */

.plan-header{

    padding:30px;

    text-align:center;

    color:white;

}



.free{

    background:linear-gradient(135deg,#198754,#20c997);

}


.basic{

    background:linear-gradient(135deg,#0d6efd,#3b82f6);

}


.professional{

    background:linear-gradient(135deg,#6f42c1,#9333ea);

}


.premium{

    background:linear-gradient(135deg,#f59e0b,#f97316);

}



.price{

    font-size:3rem;

    font-weight:800;

}



.price small{

    font-size:1rem;

    font-weight:400;

}



/* Popular */

.popular{

    position:absolute;

    top:20px;

    right:-35px;

    background:#dc3545;

    color:white;

    padding:8px 45px;

    transform:rotate(45deg);

    font-size:.85rem;

}



/* Features */

.feature-list{

    list-style:none;

    padding:0;

}


.feature-list li{

    margin-bottom:15px;

}


.feature-list i{

    width:22px;

}



/* Buttons */


.plan-btn{

    border-radius:12px;

    padding:14px;

    font-weight:600;

}



</style>




<div class="container py-5">



<div class="pricing-header">


<h1>

Simple Pricing That Grows With You

</h1>


<p class="text-muted">

Whether you are looking for your next opportunity or building your team,
Workforce has a plan for you.

</p>


</div>





<div class="row g-4">





<!-- JOB SEEKER -->


<div class="col-lg-3 col-md-6">


<div class="pricing-card">


<div class="plan-header free">

<i class="fas fa-user fa-3x mb-3"></i>

<h3>Job Seeker</h3>

<div class="price">

Free

</div>

<small>Forever</small>

</div>



<div class="p-4">


<ul class="feature-list">


<li>
<i class="fas fa-check text-success"></i>
Create professional profile
</li>


<li>
<i class="fas fa-check text-success"></i>
Apply for unlimited jobs
</li>


<li>
<i class="fas fa-check text-success"></i>
Upload CV & certificates
</li>


<li>
<i class="fas fa-check text-success"></i>
Receive job alerts
</li>


<li>
<i class="fas fa-check text-success"></i>
Track applications
</li>


</ul>


<a href="{{ url_for('register') }}"
class="btn btn-outline-success w-100 plan-btn">

Create Free Account

</a>


</div>

</div>

</div>







<!-- BASIC -->


<div class="col-lg-3 col-md-6">


<div class="pricing-card">


<div class="plan-header basic">

<i class="fas fa-bullhorn fa-3x mb-3"></i>


<h3>Basic</h3>


<div class="price">

E550

</div>


<small>per job post</small>


</div>



<div class="p-4">


<ul class="feature-list">


<li>
<i class="fas fa-check text-success"></i>
Post one vacancy
</li>


<li>
<i class="fas fa-check text-success"></i>
Receive applications
</li>


<li>
<i class="fas fa-check text-success"></i>
Basic job visibility
</li>


<li>
<i class="fas fa-times text-danger"></i>
Candidate database access
</li>


<li>
<i class="fas fa-times text-danger"></i>
Advanced filtering
</li>


</ul>


<a href="{{ url_for('employer_login_page') }}"
class="btn btn-outline-primary w-100 plan-btn">

Post A Job

</a>


</div>


</div>


</div>







<!-- PROFESSIONAL -->


<div class="col-lg-3 col-md-6">


<div class="pricing-card position-relative">


<div class="popular">

POPULAR

</div>


<div class="plan-header professional">


<i class="fas fa-building fa-3x mb-3"></i>


<h3>Professional</h3>


<div class="price">

E2000

</div>


<small>per month</small>


</div>




<div class="p-4">


<ul class="feature-list">


<li>
<i class="fas fa-check text-success"></i>
Unlimited job posts
</li>


<li>
<i class="fas fa-check text-success"></i>
Applicant management dashboard
</li>


<li>
<i class="fas fa-check text-success"></i>
Download candidate CVs
</li>


<li>
<i class="fas fa-check text-success"></i>
Candidate filtering
</li>


<li>
<i class="fas fa-check text-success"></i>
Priority support
</li>


</ul>



<a href="{{ url_for('employer_login_page') }}"
class="btn btn-primary w-100 plan-btn">

Start Hiring

</a>


</div>


</div>


</div>







<!-- PREMIUM -->


<div class="col-lg-3 col-md-6">


<div class="pricing-card">


<div class="plan-header premium">


<i class="fas fa-crown fa-3x mb-3"></i>


<h3>Premium</h3>


<div class="price">

E5000

</div>


<small>per year</small>


</div>



<div class="p-4">


<ul class="feature-list">


<li>
<i class="fas fa-check text-success"></i>
Everything Professional
</li>


<li>
<i class="fas fa-check text-success"></i>
Access talent pool
</li>


<li>
<i class="fas fa-check text-success"></i>
Advanced candidate search
</li>


<li>
<i class="fas fa-check text-success"></i>
Dedicated account support
</li>


<li>
<i class="fas fa-check text-success"></i>
Best value for companies
</li>


</ul>



<a href="{{ url_for('contact') }}"
class="btn btn-warning w-100 plan-btn">

Contact Sales

</a>


</div>


</div>


</div>




</div>





<!-- Support -->


<div class="text-center mt-5">


<h3 class="fw-bold">

Need help choosing?

</h3>


<p class="text-muted">

Our team can help you select the right recruitment solution.

</p>



<a href="{{ url_for('contact') }}"
class="btn btn-dark btn-lg px-5">

<i class="fas fa-envelope me-2"></i>

Contact Us

</a>


</div>



</div>


{% endblock %}