UI Components – Metis Library

<section class="py-5">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-6 col-lg-4 mb-4">
        <div class="d-flex">
          <div class="me-4">
            <span class="d-inline-block p-3 bg-primary rounded-circle text-white">
              <svg width="40" height="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
              </svg>
            </span>
          </div>
          <div>
            <h5 class="fw-bold">Easy to customize</h5>
            <p class="text-muted lh-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4 mb-4">
        <div class="d-flex">
          <div class="me-4">
            <span class="d-inline-block p-3 bg-primary rounded-circle text-white">
              <svg width="40" height="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"></path>

<section class="py-5 bg-light">
  <div class="container">
    <div class="py-5 px-4 bg-primary text-white rounded shadow-sm">
      <div class="row">
        <div class="col-12 col-lg-10 mx-auto">
          <div class="row align-items-center">
            <div class="col-12 col-lg-6 mb-4 text-center text-lg-left">
              <h2 class="mb-3 fs-1 fw-bold">
                <span>Lorem ipsum</span>
                <span class="text-warning">dolor sit</span>
                <span>amet, consectetur adipiscing.</span>
              </h2>
              <p class="mb-0 text-white-50">Integer felis tellus, rhoncus ac pulvinar vitae.</p>
            </div>
            <div class="col-12 col-lg-6">
              <div class="row justify-content-center justify-content-lg-end">
                <div class="col-12 col-md-8 mb-3 mb-md-0">
                  <div class="input-group">
                    <span class="input-group-text bg-light rounded-left px-3">
                      <svg width="24" height="24" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                      </svg>
                    </span>
                    <input class="form-control" type="text" placeholder="Type your e-mail">

<section class="py-5 bg-dark">
  <div class="container">
    <div class="col-12 col-md-8 col-lg-6 mx-auto text-center">
      <h2 class="mb-3 fs-1 fw-bold text-white">
        <span>Lorem ipsum</span>
        <span class="text-primary">dolor sit</span>
        <span>amet, consectetur adipiscing.</span>
      </h2>
      <p class="mb-4 text-light">Integer felis tellus, rhoncus ac pulvinar vitae.</p>
      <div class="row justify-content-center">
        <div class="col-12 col-md-8 mb-3 mb-md-0">
          <div class="input-group">
            <span class="input-group-text px-3 rounded-left">
              <svg width="24" height="24" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
              </svg>
            </span>
            <input class="form-control" type="text" placeholder="Type your e-mail">
          </div>
        </div>
        <div class="col-12 col-md-auto">
          <button class="btn btn-light w-100" type="submit">Sign Up</button>
        </div>
      </div>

<section class="py-5">
  <div class="container">
    <div class="row mx-4">
      <div class="col-12 col-lg-3">
        <span class="badge bg-primary rounded-pill">Lorem Ipsum</span>
        <h2 class="mt-3 fs-1 fw-bold">Lorem ipsum dolor sit amet consectutar domor</h2>
      </div>
      <div class="col-12 offset-lg-1 col-lg-7 px-4">
        <div class="row">
          <div class="col-12 col-md-6 mb-4">
            <div class="p-3">
              <span class="mb-4 d-inline-block p-2 rounded-circle bg-primary text-white">
                <svg width="48" height="48" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
              </span>
              <div>
                <h5 class="mb-3">Easy to customize</h5>
                <p class="text-muted lh-lg mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-6 mb-4">
            <div class="p-3">

<section class="py-5">
  <div class="container">
    <div class="row mb-5">
      <div class="col-12 col-lg-5 mx-auto text-center">
        <h2 class="fs-1 fw-bold">Lorem ipsum dolor sit amet consectutar domor</h2>
        <p class="text-muted lh-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
      </div>
    </div>
    <div class="row">
      <div class="col-6 p-3 col-lg-3 mb-4 text-center">
        <img class="mb-3 img-fluid" style="max-width: 90px;" src="metis-assets/icons/set2/advertisement.png" alt="">
        <h4 class="fw-bold">Weekly Sales</h4>
      </div>
      <div class="col-6 p-3 col-lg-3 mb-4 text-center">
        <img class="mb-3 img-fluid" style="max-width: 90px;" src="metis-assets/icons/set2/analytics.png" alt="">
        <h4 class="fw-bold">General Analytics</h4>
      </div>
      <div class="col-6 p-3 col-lg-3 mb-4 text-center">
        <img class="mb-3 img-fluid" style="max-width: 90px;" src="metis-assets/icons/set2/hourglass.png" alt="">
        <h4 class="fw-bold">Saving your time</h4>
      </div>
      <div class="col-6 p-3 col-lg-3 mb-4 text-center">
        <img class="mb-3 img-fluid" style="max-width: 90px;" src="metis-assets/icons/set2/calculation.png" alt="">
        <h4 class="fw-bold">Calculations</h4>

<section class="py-5 bg-dark">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-8 col-lg-6 mx-auto mb-4 text-center text-lg-left">
        <h2 class="mb-3 fs-1 text-white fw-bold">
          <span>Lorem ipsum</span>
          <span class="text-warning">dolor sit</span>
          <span>amet, consectetur adipiscing.</span>
        </h2>
        <p class="text-white-50 mb-0">Integer felis tellus, rhoncus ac pulvinar vitae.</p>
      </div>
      <div class="col-12 col-lg-6 d-flex flex-column justify-content-center">
        <div class="row justify-content-center justify-content-lg-end">
          <div class="col-12 col-md-6 col-lg-8 mb-3 mb-md-0">
            <div class="input-group">
              <span class="input-group-text px-3 bg-light rounded-left">
                <svg width="24" height="24" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                </svg>
              </span>
              <input class="form-control" type="text" placeholder="Type your e-mail">
            </div>
          </div>
          <div class="col-12 col-md-auto">

<section class="py-5">
  <div class="container">
    <div class="px-4 bg-dark text-white rounded shadow-sm">
      <div class="row">
        <div class="col-12 col-md-8 col-lg-6 py-5 mx-auto text-center">
          <h2 class="mb-3 fs-1 fw-bold">
            <span>Lorem ipsum</span>
            <span class="text-primary">dolor sit</span>
            <span>amet, consectetur adipiscing.</span>
          </h2>
          <p class="mb-4 text-light">Integer felis tellus, rhoncus ac pulvinar vitae.</p>
          <div class="row justify-content-center">
            <div class="col-12 col-md-8 mb-3 mb-md-0">
              <div class="input-group">
                <span class="input-group-text bg-light rounded-left px-3">
                  <svg width="24" height="24" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                  </svg>
                </span>
                <input class="form-control" type="text" placeholder="Type your e-mail">
              </div>
            </div>
            <div class="col-12 col-md-auto">
              <button class="btn btn-primary w-100" type="submit">Sign Up</button>

<section class="py-5">
  <div class="container">
    <div class="py-5 px-4 bg-dark text-white rounded shadow-sm">
      <div class="row">
        <div class="col-12 col-lg-10 mx-auto">
          <div class="row align-items-center">
            <div class="col-12 col-lg-6 mb-4 text-center text-lg-left">
              <h2 class="mb-3 fs-1 fw-bold">
                <span>Lorem ipsum</span>
                <span class="text-primary">dolor sit</span>
                <span>amet, consectetur adipiscing.</span>
              </h2>
              <p class="mb-0 text-light">Integer felis tellus, rhoncus ac pulvinar vitae.</p>
            </div>
            <div class="col-12 col-lg-6">
              <div class="row justify-content-center justify-content-lg-end">
                <div class="col-12 col-md-8 mb-3 mb-md-0">
                  <div class="input-group">
                    <span class="input-group-text bg-light rounded-left px-3">
                      <svg width="24" height="24" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                      </svg>
                    </span>
                    <input class="form-control" type="text" placeholder="Type your e-mail">

<section class="xl:bg-contain bg-top bg-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg');" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="flex justify-between items-center py-6">
      <a class="text-3xl font-semibold leading-none" href="#">
        <img class="h-10" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center py-2 px-3 text-blue-600 hover:text-blue-700 rounded border border-blue-200 hover:border-blue-300">
          <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:items-center lg:w-auto lg:space-x-12">
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Product</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Company</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">About Us</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Features</a></li>
      </ul>
      <div class="hidden lg:block"><a class="mr-2 inline-block px-4 py-3 text-xs text-blue-600 hover:text-blue-700 font-semibold leading-none border border-blue-200 hover:border-blue-300 rounded" href="#">Log In</a><a class="inline-block px-4 py-3 text-xs font-semibold leading-none bg-blue-600 hover:bg-blue-700 text-white rounded" href="#">Sign Up</a></div>
    </nav>
    <div class="py-12 text-center">
      <div class="max-w-lg mx-auto mb-8">

<section class="xl:bg-contain bg-top bg-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg');" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="flex justify-between items-center py-6">
      <a class="text-3xl font-semibold leading-none" href="#">
        <img class="h-10" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center py-2 px-3 text-blue-600 hover:text-blue-700 rounded border border-blue-200 hover:border-blue-300">
          <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:items-center lg:w-auto lg:space-x-12">
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Product</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Company</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">About Us</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Features</a></li>
      </ul>
      <div class="hidden lg:block"><a class="mr-2 inline-block px-4 py-3 text-xs text-blue-600 hover:text-blue-700 font-semibold leading-none border border-blue-200 hover:border-blue-300 rounded" href="#">Log In</a><a class="inline-block px-4 py-3 text-xs font-semibold leading-none bg-blue-600 hover:bg-blue-700 text-white rounded" href="#">Sign Up</a></div>
    </nav>
    <div class="pt-12 text-center">
      <div class="max-w-lg mx-auto mb-8">

<section class="xl:bg-contain bg-top bg-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg');" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="flex justify-between items-center py-6">
      <a class="text-3xl font-semibold leading-none" href="#">
        <img class="h-10" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center py-2 px-3 text-blue-600 hover:text-blue-700 rounded border border-blue-200 hover:border-blue-300">
          <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:items-center lg:w-auto lg:space-x-12">
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Product</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Company</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">About Us</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Features</a></li>
      </ul>
      <div class="hidden lg:block"><a class="mr-2 inline-block px-4 py-3 text-xs text-blue-600 hover:text-blue-700 font-semibold leading-none border border-blue-200 hover:border-blue-300 rounded" href="#">Log In</a><a class="inline-block px-4 py-3 text-xs font-semibold leading-none bg-blue-600 hover:bg-blue-700 text-white rounded" href="#">Sign Up</a></div>
    </nav>
    <div class="pt-12 pb-16 text-center">
      <div class="max-w-lg mx-auto mb-8">

<section class="xl:bg-contain bg-top bg-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg');" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="flex justify-between items-center py-6">
      <a class="text-3xl font-semibold leading-none" href="#">
        <img class="h-10" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center py-2 px-3 text-blue-600 hover:text-blue-700 rounded border border-blue-200 hover:border-blue-300">
          <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:items-center lg:w-auto lg:space-x-12">
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Product</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Company</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">About Us</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Features</a></li>
      </ul>
      <div class="hidden lg:block"><a class="mr-2 inline-block px-4 py-3 text-xs text-blue-600 hover:text-blue-700 font-semibold leading-none border border-blue-200 hover:border-blue-300 rounded" href="#">Log In</a><a class="inline-block px-4 py-3 text-xs font-semibold leading-none bg-blue-600 hover:bg-blue-700 text-white rounded" href="#">Sign Up</a></div>
    </nav>
    <div class="py-12 text-center">
      <div class="max-w-lg mx-auto mb-8">

<section class="xl:bg-contain bg-top bg-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg');" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="flex justify-between items-center py-6">
      <a class="text-3xl font-semibold leading-none" href="#">
        <img class="h-10" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center py-2 px-3 text-blue-600 hover:text-blue-700 rounded border border-blue-200 hover:border-blue-300">
          <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:items-center lg:w-auto lg:space-x-12">
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Product</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Company</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">About Us</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Features</a></li>
      </ul>
      <div class="hidden lg:block"><a class="mr-2 inline-block px-4 py-3 text-xs text-blue-600 hover:text-blue-700 font-semibold leading-none border border-blue-200 hover:border-blue-300 rounded" href="#">Log In</a><a class="inline-block px-4 py-3 text-xs font-semibold leading-none bg-blue-600 hover:bg-blue-700 text-white rounded" href="#">Sign Up</a></div>
    </nav>
    <div class="pt-12 text-center">
      <div class="max-w-lg mx-auto mb-8">

<section class="relative" x-data="{ mobileNavOpen: false }">
  <div class="hidden lg:block absolute inset-0 w-1/2 ml-auto bg-blueGray-50 z-0" style="z-index: -1"></div>
  <div class="container px-4 mx-auto">
    <nav class="flex items-center py-6">
      <a class="text-3xl font-semibold leading-none" href="#">
        <img class="h-10" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden ml-auto">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center py-2 px-3 text-blue-600 hover:text-blue-700 rounded border border-blue-200 hover:border-blue-300">
          <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:space-x-10 ml-10">
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Product</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Company</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">About Us</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Features</a></li>
      </ul>
      <div class="hidden lg:block ml-auto"><a class="mr-2 inline-block px-4 py-3 text-xs text-blue-600 hover:text-blue-700 font-semibold leading-none border border-blue-200 hover:border-blue-300 rounded" href="#">Log In</a><a class="inline-block px-4 py-3 text-xs font-semibold leading-none bg-blue-600 hover:bg-blue-700 text-white rounded" href="#">Sign Up</a></div>
    </nav>
    <div class="flex flex-wrap items-center -mx-3">

<section x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="flex justify-between items-center py-6">
      <a class="text-3xl font-semibold leading-none" href="#">
        <img class="h-10 mr-6" src="metis-assets/logos/metis/metis.svg">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center py-2 px-3 text-blue-600 hover:text-blue-700 rounded border border-blue-200 hover:border-blue-300">
          <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:items-center lg:w-auto lg:space-x-12">
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Product</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Company</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">About Us</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Features</a></li>
      </ul>
      <div class="hidden lg:block"><a class="mr-2 inline-block px-4 py-3 text-xs text-blue-600 hover:text-blue-700 font-semibold leading-none border border-blue-200 hover:border-blue-300 rounded" href="#">Log In</a><a class="inline-block px-4 py-3 text-xs font-semibold leading-none bg-blue-600 hover:bg-blue-700 text-white rounded" href="#">Sign Up</a></div>
    </nav>
    <div class="flex flex-wrap items-center -mx-3">
      <div class="w-full lg:w-1/2 px-3">

<section class="relative overflow-x-hidden" x-data="{ mobileNavOpen: false }">
  <div class="hidden md:block absolute top-0 left-0 mt-32 -ml-32 lg:-ml-24">
    <img class="h-64 lg:h-80" src="metis-assets/illustrations/walk-dog.png" alt="">
  </div>
  <div class="hidden md:block absolute top-0 right-0 mt-32 -mr-32 lg:-mr-16">
    <img class="h-64 lg:h-80" src="metis-assets/illustrations/phone-online-shopping.png" alt="">
  </div>
  <div class="container px-4 mx-auto">
    <nav class="flex justify-between items-center py-6">
      <a class="text-3xl font-semibold leading-none" href="#">
        <img class="h-10" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center py-2 px-3 text-blue-600 hover:text-blue-700 rounded border border-blue-200 hover:border-blue-300">
          <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:items-center lg:w-auto lg:space-x-12">
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Product</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">Company</a></li>
        <li><a class="text-sm text-blueGray-400 hover:text-blueGray-500" href="#">About Us</a></li>

<section x-data="{ mobileNavOpen: false }">
  <div class="md:pb-20 bg-top bg-cover bg-no-repeat" style="background-image: url('https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;h=450&amp;q=80&amp;blend=1e293b&amp;sat=30&amp;blend-mode=multiply')">
    <div class="container px-4 mx-auto">
      <nav class="flex justify-between items-center py-6">
        <a class="text-3xl text-white font-semibold leading-none" href="#">
          <img class="h-10" src="metis-assets/logos/metis/metis-light-name.svg" alt="" width="auto">
        </a>
        <div class="lg:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center py-2 px-3 text-blueGray-100 hover:text-blueGray-200 rounded border border-blueGray-200 hover:border-blueGray-300">
            <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <title>Mobile menu</title>
              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
            </svg>
          </button>
        </div>
        <ul class="hidden lg:flex lg:items-center lg:w-auto lg:space-x-12">
          <li><a class="text-sm text-blueGray-100 hover:text-blueGray-200" href="#">Product</a></li>
          <li><a class="text-sm text-blueGray-100 hover:text-blueGray-200" href="#">Company</a></li>
          <li><a class="text-sm text-blueGray-100 hover:text-blueGray-200" href="#">About Us</a></li>
          <li><a class="text-sm text-blueGray-100 hover:text-blueGray-200" href="#">Features</a></li>
        </ul>
        <div class="hidden lg:block"><a class="mr-2 inline-block px-4 py-3 text-xs text-blueGray-100 hover:text-blueGray-200 font-semibold leading-none border border-blueGray-200 hover:border-blueGray-300 rounded" href="#">Log In</a><a class="inline-block px-4 py-3 text-xs font-semibold leading-none bg-blue-600 hover:bg-blue-700 text-white rounded" href="#">Sign Up</a></div>
      </nav>
      <div class="py-12 text-center">

<section class="pb-8 bg-top bg-cover bg-no-repeat" style="background-image: url('https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;h=450&amp;q=80&amp;blend=1e293b&amp;sat=30&amp;blend-mode=multiply')" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="flex justify-between items-center py-6">
      <a class="text-3xl text-white font-semibold leading-none" href="#">
        <img class="h-10" src="metis-assets/logos/metis/metis-light-name.svg" alt="" width="auto">
      </a>
      <div class="lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center py-2 px-3 text-blueGray-100 hover:text-blueGray-200 rounded border border-blueGray-200 hover:border-blueGray-300">
          <svg class="fill-current h-4 w-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex lg:items-center lg:w-auto lg:space-x-12">
        <li><a class="text-sm text-blueGray-100 hover:text-blueGray-200" href="#">Product</a></li>
        <li><a class="text-sm text-blueGray-100 hover:text-blueGray-200" href="#">Company</a></li>
        <li><a class="text-sm text-blueGray-100 hover:text-blueGray-200" href="#">About Us</a></li>
        <li><a class="text-sm text-blueGray-100 hover:text-blueGray-200" href="#">Features</a></li>
      </ul>
      <div class="hidden lg:block"><a class="mr-2 inline-block px-4 py-3 text-xs text-blueGray-100 hover:text-blueGray-200 font-semibold leading-none border border-blueGray-200 hover:border-blueGray-300 rounded" href="#">Log In</a><a class="inline-block px-4 py-3 text-xs font-semibold leading-none bg-blue-600 hover:bg-blue-700 text-white rounded" href="#">Sign Up</a></div>
    </nav>
    <div class="py-12 text-center">
      <div class="max-w-lg mx-auto mb-8">

<section class="py-20" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <h2 class="text-3xl lg:text-4xl mb-8 font-bold font-heading">Our Blog</h2>
    <div class="flex flex-wrap -mx-3">
      <div class="w-full lg:w-1/3 px-3 mb-12">
        <a href="#">
          <img class="h-80 w-full object-cover rounded" src="https://images.unsplash.com/photo-1585441695325-21557ef66366?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          <p class="mt-6 text-sm text-blue-400">
            <span>CATEGORY</span>
            <span class="text-blueGray-400">24 Jan, 2020</span>
          </p>
          <h3 class="my-2 text-2xl font-bold font-heading">Lorem ipsum dolor sit amet.</h3>
          <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
        </a>
      </div>
      <div class="w-full lg:w-2/3 px-3 mb-12">
        <a href="#">
          <img class="h-80 w-full object-cover rounded" src="https://images.unsplash.com/photo-1519017524945-ed31bb7a3786?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          <p class="mt-6 text-sm text-blue-400">
            <span>CATEGORY</span>
            <span class="text-blueGray-400">24 Jan, 2020</span>
          </p>
          <h3 class="my-2 text-2xl font-bold font-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
          <p class="text-blueGray-400 leading-loose">Aenean tempus orci eu est ultrices hendrerit. Fusce suscipit, leo a semper venenatis, felis urna pulvinar nibh, vitae porta erat risus sed mauris. Vestibulum vehicula leo eget libero eleifend.</p>

<section class="py-20 xl:bg-contain bg-top bg-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg');">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-16">
      <h2 class="max-w-lg mx-auto mb-4 text-4xl font-bold font-heading">
        <span>Start saving time today and</span>
        <span class="text-blue-600">choose</span>
        <span>your best plan</span>
      </h2>
      <p class="max-w-sm mx-auto text-lg text-blueGray-400">Best for freelance developers who need to save their time</p>
    </div>
    <div class="flex flex-wrap -mx-3">
      <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6">
        <div class="pt-16 pb-8 px-4 text-center bg-white rounded shadow">
          <img class="h-20 mb-6 mx-auto" src="metis-assets/illustrations/people.png" alt="">
          <h3 class="mb-2 text-4xl font-bold font-heading">Begginer</h3>
          <span class="text-4xl text-blue-600 font-bold font-heading">$32.99</span>
          <p class="mt-2 mb-8 text-blueGray-400">user per month</p>
          <div class="flex flex-col items-center mb-8">
            <ul class="text-blueGray-400">
              <li class="flex mb-3">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>3 Emails</span>