{% extends "base.html" %}

{% block title %}How It Works - Workforce{% endblock %}

{% block content %}

<style>

body{
    background:#f8fafc;
}


/* Hero */

.how-hero{

    text-align:center;

    padding:70px 20px 50px;

}


.how-hero h1{

    font-size:3rem;

    font-weight:800;

}



.how-hero p{

    font-size:1.2rem;

    color:#6c757d;

}



/* Section title */

.section-title{

    font-weight:800;

    margin-bottom:40px;

}



/* Steps */

.step-card{

    background:white;

    border:none;

    border-radius:20px;

    padding:35px 25px;

    height:100%;

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

    transition:.3s;

}



.step-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 50px rgba(0,0,0,.12);

}



.step-number{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#0d6efd;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:bold;

    margin:auto auto 20px;

}



/* Employer */

.employer .step-number{

    background:#6f42c1;

}



/* CTA */

.cta-box{

    background:linear-gradient(135deg,#0d6efd,#2f80ed);

    color:white;

    border-radius:25px;

    padding:50px;

}



</style>



<div class="container py-5">



<!-- Hero -->

<div class="how-hero">


<h1>

How Workforce Works

</h1>


<p>

Connecting talented professionals with companies through a smarter hiring experience.

</p>


</div>







<!-- Job Seekers -->

<h2 class="text-center section-title">

For Job Seekers

</h2>



<div class="row g-4 mb-5">



<div class="col-md-4">


<div class="step-card text-center">


<div class="step-number">

1

</div>


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


<h3>

Create Account

</h3>


<p class="text-muted">

Register for free and create your professional Workforce profile.

</p>


</div>


</div>






<div class="col-md-4">


<div class="step-card text-center">


<div class="step-number">

2

</div>


<i class="fas fa-file-alt fa-3x text-primary mb-3"></i>


<h3>

Build Your Profile

</h3>


<p class="text-muted">

Add your education, experience, skills, CV and supporting documents.

</p>


</div>


</div>







<div class="col-md-4">


<div class="step-card text-center">


<div class="step-number">

3

</div>


<i class="fas fa-paper-plane fa-3x text-primary mb-3"></i>


<h3>

Apply For Jobs

</h3>


<p class="text-muted">

Find suitable opportunities and apply instantly with one click.

</p>


</div>


</div>


</div>








<!-- Employers -->


<h2 class="text-center section-title">

For Employers

</h2>



<div class="row g-4 employer mb-5">



<div class="col-md-4">


<div class="step-card text-center">


<div class="step-number">

1

</div>


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


<h3>

Create Company Profile

</h3>


<p class="text-muted">

Register your company and gain access to professional recruitment tools.

</p>


</div>


</div>







<div class="col-md-4">


<div class="step-card text-center">


<div class="step-number">

2

</div>


<i class="fas fa-briefcase fa-3x text-purple mb-3"></i>


<h3>

Post Vacancies

</h3>


<p class="text-muted">

Publish job openings and receive applications from qualified candidates.

</p>


</div>


</div>







<div class="col-md-4">


<div class="step-card text-center">


<div class="step-number">

3

</div>


<i class="fas fa-users fa-3x text-purple mb-3"></i>


<h3>

Find The Right Talent

</h3>


<p class="text-muted">

Review applicants, search candidates and make better hiring decisions.

</p>


</div>


</div>



</div>









<!-- CTA -->


<div class="cta-box text-center">


<h2 class="fw-bold mb-3">

Ready to get started?

</h2>


<p class="mb-4">

Join Workforce today and take the next step in your career or recruitment journey.

</p>



<div class="d-flex justify-content-center gap-3 flex-wrap">


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

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

Find Jobs

</a>




<a href="{{ url_for('employer_login_page') }}"
class="btn btn-outline-light btn-lg px-5">

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

Hire Talent

</a>


</div>


</div>



</div>


{% endblock %}