Hero About Section

<section class="pt-10 md:pt-20 text-white">
  <div class="flex flex-col lg:flex-row items-start justify-between gap-8 px-6 md:px-16 lg:px-24">
    <h1 class="text-[60px] md:text-[96px] lg:text-[120px] leading-none font-semibold tracking-tight text-white">About</h1>
    <div class="max-w-sm">
      <p class="text-sm md:text-base leading-relaxed opacity-80 mb-6 text-white">Story, education, experience, awards, recognitions, and the creative journey that defines my work.</p>
      <div class="flex items-center space-x-4">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 opacity-60 text-white">
          <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path>
          <circle cx="12" cy="10" r="3"></circle>
        </svg>
        <span class="text-sm opacity-80 text-white">Barcelona, Spain</span>
      </div>
    </div>
  </div>
  <div class="border-t border-white/20 mt-12 lg:mt-16 mx-6 md:mx-16 lg:mx-24"></div>
</section>