{% extends 'base.html' %}
{% load static %}
{% load i18n %}
{% block title %}
    About Us
{% endblock %}

{% block content %}
    <section class="bg-light-gray">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <h1 class="heading">About <span class="accent">Us</span></h1>
                    <p class="lead text-center">Your trusted partner in job search and career growth</p>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="box">
                        <div class="row">
                            <div class="col-md-8">
                                <h4>Our Mission</h4>
                                <p>We are dedicated to connecting talented professionals with their dream careers. Our platform serves as a bridge between job seekers and employers, making the hiring process seamless and efficient.</p>
                                
                                <h4 class="mt-5">What We Offer</h4>
                                <ul class="list-unstyled">
                                    <li><i class="fa fa-check text-primary mr-2"></i> Easy job search and application process</li>
                                    <li><i class="fa fa-check text-primary mr-2"></i> Professional resume builder</li>
                                    <li><i class="fa fa-check text-primary mr-2"></i> Direct communication with employers</li>
                                    <li><i class="fa fa-check text-primary mr-2"></i> Career growth resources</li>
                                </ul>
                            </div>
                            <div class="col-md-4">
                                <img src="{% static 'img/company-1.png' %}" alt="About Us" class="img-fluid rounded">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section-divider">
        <div class="overlay"></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <p>Ready to start your career journey?</p>
                    <p><a href="{% url 'jobs:jobs' %}" class="btn btn-outline-light">Browse Jobs</a></p>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
