<header class="hero py-16 bg-primary">
  <div class="hero-content">
    <div class="max-w-xl text-center">
      <span class="badge badge-secondary mb-2 max-sm:hidden">
        Start crafting your future today
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-move-up-right stroke-secondary-content">
          <path d="M13 5H19V11" />
          <path d="M19 5L5 19" />
        </svg>
      </span>

      <h1 class="text-2xl sm:text-5xl text-primary-content font-semibold text-center sm:leading-14">
        Empower your business <br>
        with our services
      </h1>

      <p class="text-base sm:text-xl text-center text-primary-content/80 my-8">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et velit dolor nam totam voluptatum sint voluptate
        eos..
      </p>

      <div class="flex max-sm:flex-col justify-center gap-4">
        <button class="btn btn-soft">
          Get started
        </button>

        <button class="btn btn-secondary">
          Learn more
        </button>
      </div>
    </div>
  </div>
</header>

<header class="hero">
  <div class="hero-content w-full py-16 px-4 sm:px-12">
    <div class=" max-w-2xl mx-auto w-full">
      <h1 class="text-2xl sm:text-5xl text-primary font-semibold sm:leading-14">
        Empower your business <br>
        with our services
      </h1>

      <p class="sm:text-xl text-base-content/80 my-8 max-w-sm w-full">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et velit dolor nam totam voluptatum sint voluptate
        eos..
      </p>

      <div class="flex max-sm:flex-col gap-4">
        <button class="btn btn-soft max-sm:btn-sm">
          Get started
        </button>

        <button class="btn btn-secondary max-sm:btn-sm">
          Learn more
        </button>
      </div>
    </div>
  </div>

  <div
    class="flex justify-end row-start-2 w-full max-w-2xl mx-auto gap-4 sm:-mt-80 max-sm:flex-col max-sm:items-center">
    <img src="https://picsum.photos/500?grayscale" alt="Random image"
      class="w-32 h-48 object-cover sm:mt-64 rounded-box">
    <div class="sm:mt-32 space-y-4">
      <img src="https://picsum.photos/500?grayscale" alt="Random image" class="w-32 h-48 object-cover rounded-box">
      <img src="https://picsum.photos/500?grayscale" alt="Random image" class="w-32 h-48 object-cover rounded-box">
    </div>
    <div class="space-y-4">
      <img src="https://picsum.photos/500?grayscale" alt="Random image" class="w-32 h-48 object-cover rounded-box">
      <img src="https://picsum.photos/500?grayscale" alt="Random image" class="w-32 h-48 object-cover rounded-box">
    </div>
  </div>
</header>

<header class="hero sm:grid-cols-2">
  <div class="hero-content py-16 px-4 sm:px-12">
    <div class="max-w-xl">
      <h1 class="text-2xl sm:text-5xl text-primary font-semibold sm:leading-14">
        Empower your business <br>
        with our services
      </h1>

      <p class="sm:text-xl text-base-content/80 my-8">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et velit dolor nam totam voluptatum sint voluptate
        eos..
      </p>

      <div class="flex max-sm:flex-col gap-4">
        <button class="btn btn-soft">
          Get started
        </button>

        <button class="btn btn-secondary">
          Learn more
        </button>
      </div>
    </div>
  </div>

  <div class="sm:col-start-2 max-sm:row-start-2 relative h-full w-full max-sm:min-h-64">
    <img src="https://picsum.photos/500?grayscale" alt="Random image"
      class="h-full w-full object-cover absolute inset-0">
  </div>
</header>

<header class="hero py-16 bg-primary">
  <div class="hero-content">
    <div class="max-w-xl">
      <h1 class="text-2xl sm:text-5xl text-primary-content font-semibold text-center sm:leading-14">
        Empower your business <br>
        with our services
      </h1>

      <p class="sm:text-xl text-center text-primary-content/80 my-8">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et velit dolor nam totam voluptatum sint voluptate
        eos..
      </p>

      <div class="flex max-sm:flex-col justify-center gap-4">
        <button class="btn btn-soft">
          Get started
        </button>

        <button class="btn btn-secondary">
          Learn more
        </button>
      </div>
    </div>
  </div>
</header>