@extends('layouts.app')

@section('title', __('messages.xxx'))

@section('content')
<!-- Hero section -->
<section class="hero">
    <div class="hero-overlay">
        <h1 class="display-4 fw-bold">Our freelancers<br>will take it from here</h1>


        <div class="container" style="max-width:800px">
          <div class="position-relative">
            <div class="input-group input-group-lg" style="background-color: white; border: 2px solid #ffffff; border-radius: 12px;">
              <input
              id="search"
              type="text"
              class="form-control"
              placeholder="Search..." style="background-color: white; border: 2px solid #ffffff; border-radius: 12px;"
              autocomplete="off"
              >
              <button
              id="btn-search"
              class="btn btn-dark" style="background-color: #2e104c !important; border: 2px solid #ffffff; border-radius: 12px;"
              type="button"
              >
              <svg
              xmlns="http://www.w3.org/2000/svg"
              width="1rem" height="1rem"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="bi bi-search"
              >
              <circle cx="11" cy="11" r="8"></circle>
              <path d="M21 21l-4.3-4.3"></path>
          </svg>
      </button>
  </div>

  <div
  id="suggestions"
  class="list-group position-absolute w-100 mt-1"
  style="display: none; z-index:1000;"
  ></div>
</div>
</div>

<div class="tags mt-5">
    <span>website development</span>
    <span>architecture & interior design</span>
    <span>UGC videos</span>
    <span>video editing</span>
</div>
</div>
</section>

<!-- Trusted logos -->
<div class="bg-light py-3 text-center">
    <p class="mb-2 fw-bold">Trusted by the world's top brands</p>
    <img src="/images/logo_davis_shirtliff - Copy.png" height="40" class="mx-3">
    <img src="/images/logo_mtiba.png" height="40" class="mx-3">
    <img src="/images/logo_mogo.png" height="40" class="mx-3">
    <img src="/images/xlogo_hfgroup.png" height="40" class="mx-3">
</div>

<!-- Icon categories -->
<div class="container py-5">
    <div class="row text-center g-4">
        <div class="col-6 col-md-3 col-lg-2">
            <div class="card p-3 border-0 shadow-sm">
                <img src="/images/code.png" class="card-img-top w-50 mx-auto" alt="">
                <div class="card-body p-2">
                    <p class="card-text small">Programming & Tech</p>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3 col-lg-2">
            <div class="card p-3 border-0 shadow-sm">
                <img src="/images/design.png" class="card-img-top w-50 mx-auto" alt="">
                <div class="card-body p-2">
                    <p class="card-text small">Graphics & Design</p>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3 col-lg-2">
            <div class="card p-3 border-0 shadow-sm">
                <img src="/images/marketing.png" class="card-img-top w-50 mx-auto" alt="">
                <div class="card-body p-2">
                    <p class="card-text small">Digital Marketing</p>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3 col-lg-2">
            <div class="card p-3 border-0 shadow-sm">
                <img src="/images/writing.png" class="card-img-top w-50 mx-auto" alt="">
                <div class="card-body p-2">
                    <p class="card-text small">Writing & Translation</p>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3 col-lg-2">
            <div class="card p-3 border-0 shadow-sm">
                <img src="/images/ai.png" class="card-img-top w-50 mx-auto" alt="">
                <div class="card-body p-2">
                    <p class="card-text small">AI Services</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Popular services -->
<div class="container py-5">
    <h2 class="text-center mb-4">Popular services</h2>
    <div class="row g-4">
        <div class="col-6 col-md-4 col-lg-3">
            <div class="card bg-success text-white">
                <img src="/images/website.jpg" class="card-img-top" alt="Website">
                <div class="card-body">
                    <h6 class="card-title">Website Development</h6>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-3">
            <div class="card bg-dark text-white">
                <img src="/images/video.jpg" class="card-img-top" alt="Video">
                <div class="card-body">
                    <h6 class="card-title">Video Editing</h6>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-3">
            <div class="card bg-primary text-white">
                <img src="/images/software.jpg" class="card-img-top" alt="Software">
                <div class="card-body">
                    <h6 class="card-title">Software Development</h6>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-4 col-lg-3">
            <div class="card bg-danger text-white">
                <img src="/images/seo.jpg" class="card-img-top" alt="SEO">
                <div class="card-body">
                    <h6 class="card-title">SEO</h6>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection