<!doctype html>
  <html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <style>
      body {
        font-family: "Arial";
      }
    </style>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark p-4" style="background-color: #0077B6;">
      <a class="navbar-brand" href="#">Fiverr Clone Homepage</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </nav>
    <div class="container-fluid">
      <div class="display-4 text-center mt-4 mb-4">Hello there and welcome to the Fiverr Clone!</div>
      <div class="row">
        <div class="col-md-6">
          <div class="card shadow">
            <div class="card-body">
              <h1>Are you looking for a talent?</h1>
              <img src="https://images.unsplash.com/photo-1549923746-c502d488b3ea?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="img-fluid">
              <p>Content writers create clear, engaging, and informative content that helps businesses communicate their services or products effectively, build brand authority, attract and retain customers, and drive web traffic and conversions.</p>
              <h3><a href="client/login.php">Get started here as client</a></h3>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card shadow">
            <div class="card-body">
              <h1>Are you looking for a job?</h1>
              <img src="https://plus.unsplash.com/premium_photo-1661582394864-ebf82b779eb0?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="img-fluid">
              <p>Admin writers play a key role in content team development. They are the highest-ranking editorial authority responsible for managing the entire editorial process, and aligning all published material with the publication’s overall vision and strategy. </p>
              <h3><a href="freelancer/login.php">Get started here as freelancer</a></h3>
            </div>
          </div>
        </div>
      </div>
      <div class="display-4 text-center mt-4">Testimonials From Users</div>
      <div class="row justify-content-center">
        <!-- Card Template -->
        <div class="col-md-4 mt-4">
          <div class="card h-100 shadow-sm">
            <img src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?auto=format&fit=crop&w=600&q=80" class="card-img-top" alt="User 1" />
            <div class="card-body">
              <h5 class="card-title">Sophia M.</h5>
              <p class="card-text">This talent search app helped me discover amazing job opportunities quickly. The personalized matches made all the difference!</p>
            </div>
          </div>
        </div>

        <div class="col-md-4 mt-4">
          <div class="card h-100 shadow-sm">
            <img src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=600&q=80" class="card-img-top" alt="User 2" />
            <div class="card-body">
              <h5 class="card-title">Liam K.</h5>
              <p class="card-text">Easy to use and very effective. Found a great match for my skills within a week. Highly recommend for job seekers.</p>
            </div>
          </div>
        </div>

        <div class="col-md-4 mt-4">
          <div class="card h-100 shadow-sm">
            <img src="https://images.unsplash.com/photo-1520813792240-56fc4a3765a7?auto=format&fit=crop&w=600&q=80" class="card-img-top" alt="User 3" />
            <div class="card-body">
              <h5 class="card-title">Emma T.</h5>
              <p class="card-text">The app’s user interface is smooth and the application process was seamless. It really boosted my career search experience.</p>
            </div>
          </div>
        </div>

        <div class="col-md-4 mt-4">
          <div class="card h-100 shadow-sm">
            <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=600&q=80" class="card-img-top" alt="User 5" />
            <div class="card-body">
              <h5 class="card-title">Olivia W.</h5>
              <p class="card-text">I love how the app customizes recommendations based on my profile. It truly feels personalized and effective.</p>
            </div>
          </div>
        </div>

        <div class="col-md-4 mt-4">
          <div class="card h-100 shadow-sm">
            <img src="https://images.unsplash.com/photo-1511367461989-f85a21fda167?auto=format&fit=crop&w=600&q=80" class="card-img-top" alt="User 6" />
            <div class="card-body">
              <h5 class="card-title">Ethan L.</h5>
              <p class="card-text">The interview scheduling feature saved me so much time. The app is intuitive and recruiter communication is excellent.</p>
            </div>
          </div>
        </div>

        <div class="col-md-4 mt-4">
          <div class="card h-100 shadow-sm">
            <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?auto=format&fit=crop&w=600&q=80" class="card-img-top" alt="User 7" />
            <div class="card-body">
              <h5 class="card-title">Adam R.</h5>
              <p class="card-text">Found roles that matched my skill set perfectly. The app helped me showcase my talents in the best light. So thankful!</p>
            </div>
          </div>
        </div>

        <div class="col-md-4 mt-4">
          <div class="card h-100 shadow-sm">
            <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?auto=format&fit=crop&w=600&q=80" class="card-img-top" alt="User 9" />
            <div class="card-body">
              <h5 class="card-title">Ava J.</h5>
              <p class="card-text">Quick, efficient, and easy-to-use. This app significantly improved my job search and helped me land my dream position.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>