@extends('front.layouts.layout')
@section('content')
    <!-- Page Header Start -->
    <div class="container-fluid page-header py-6 my-6 mt-0 wow fadeIn" data-wow-delay="0.1s">
        <div class="container text-center">
            <h1 class="display-4 text-white animated slideInDown mb-4">Careers</h1>
            <p class="text-white">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis doloremque excepturi, aspernatur totam
                quaerat atque nisi laborum nesciunt tempora autem molestias eligendi. Recusandae deserunt quibusdam
                assumenda vitae illo dolorum facere!</p>
        </div>
    </div>
    <!-- Page Header End -->

    <div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-lg-6">
      <div class="card shadow-lg border-0 rounded-4">
        <div class="card-body p-4">
          <h2 class="text-center mb-4 fw-bold">Join Our Team</h2>
          
          <form>
            <!-- Full Name -->
            <div class="mb-3">
              <label for="fullName" class="form-label fw-semibold">Full Name</label>
              <input type="text" class="form-control" id="fullName" placeholder="Enter your full name" required>
            </div>

            <!-- Email -->
            <div class="mb-3">
              <label for="email" class="form-label fw-semibold">Email</label>
              <input type="email" class="form-control" id="email" placeholder="Enter your email" required>
            </div>

            <!-- Phone -->
            <div class="mb-3">
              <label for="phone" class="form-label fw-semibold">Phone</label>
              <input type="tel" class="form-control" id="phone" placeholder="Enter your phone number" required>
            </div>

            <!-- Position -->
            <div class="mb-3">
              <label for="position" class="form-label fw-semibold">Position Applied For</label>
              <select class="form-select" id="position" required>
                <option selected disabled>Choose a position</option>
                <option value="developer">Web Developer</option>
                <option value="designer">UI/UX Designer</option>
                <option value="manager">Project Manager</option>
              </select>
            </div>

            <!-- Resume -->
            <div class="mb-3">
              <label for="resume" class="form-label fw-semibold">Upload Resume</label>
              <input class="form-control" type="file" id="resume" required>
            </div>

            <!-- Subject -->
            <div class="mb-3">
              <label for="coverLetter" class="form-label fw-semibold">Subject</label>
              <textarea class="form-control" id="coverLetter" rows="4" placeholder="Subject"></textarea>
            </div>

            <!-- Submit -->
            <div class="d-grid">
              <button type="submit" class="btn btn-primary rounded-pill">Submit Application</button>
            </div>
          </form>

        </div>
      </div>
    </div>
  </div>
</div>
@endsection