Animated About Section with Profile & Values Cards

<section
  class="relative z-10 sm:p-8 animate-scaleIn animation-delay-300 bg-zinc-950/10 w-full max-w-7xl border-white/10 border rounded-3xl mt-24 mr-auto ml-auto pt-6 pr-6 pb-6 pl-6 backdrop-blur">
  <!-- Header -->
  <div class="flex gap-6 sm:px-0 pr-1 pl-1 items-center animate-fadeInUp">
    <span class="inline-flex items-center gap-2 text-sm">
      <span class="text-4xl font-medium text-white">My Story</span>
    </span>
    <span aria-hidden="true" role="separator" aria-orientation="vertical" class="w-px h-10 bg-white/10"></span>
    <span class="text-sm text-neutral-300">journey &amp; philosophy</span>
  </div>
  <div class="h-px bg-white/10 mt-4 animate-fadeIn animation-delay-100"></div>

  <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 sm:gap-10 items-start relative z-10 mt-6 sm:mt-8">
    <!-- Left: Profile & Story -->
    <div class="lg:col-span-6 animate-fadeInLeft animation-delay-200">
      <!-- Profile Image -->
      <div class="relative w-full max-w-md mx-auto lg:mx-0 mb-8">
        <div class="aspect-square rounded-3xl overflow-hidden border border-white/10 bg-neutral-900">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fb6b509f-d7d6-4c5a-ab4e-9cc3661e184b_800w.jpg" alt="Alex Chen profile" class="w-full h-full object-cover">
        </div>
        <div
          class="absolute -bottom-4 -right-4 w-24 h-24 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-600/20 blur-xl">
        </div>
      </div>

      <!-- Story Text -->
      <div class="space-y-4 text-neutral-300">
        <p class="text-base leading-relaxed">
          My journey into digital design began over 8 years ago when I discovered the perfect intersection of creativity
          and technology. What started as curiosity quickly evolved into a passionate pursuit of crafting meaningful
          digital experiences.
        </p>
        <p class="text-base leading-relaxed">
          Based in San Francisco, I've had the privilege of working with innovative startups and established brands,
          helping them transform their digital presence through thoughtful design and clean, efficient code.
        </p>
        <p class="text-base leading-relaxed">
          I believe that great design isn't just about aesthetics—it's about solving real problems and creating
          experiences that genuinely improve people's lives.
        </p>
      </div>
    </div>

    <!-- Right: Values & Approach -->
    <div class="lg:col-span-6 animate-fadeInRight animation-delay-300">
      <h2 class="text-3xl sm:text-4xl font-light text-zinc-100 tracking-tighter mb-8">
        My Approach
      </h2>

      <!-- Values Grid -->
      <div class="space-y-6 stagger-animation">
        <div class="bg-zinc-900/60 border border-white/10 rounded-2xl p-6 hover-lift">
          <div class="flex items-start gap-4">
            <div
              class="w-12 h-12 rounded-xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center flex-shrink-0">
              <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="lucide lucide-lightbulb w-6 h-6 text-blue-400" style="stroke-width:1.5">
                <path d="M9 18h6v-3a3 3 0 0 0-6 0v3Z" class=""></path>
                <path d="M15.09 7A6 6 0 1 1 8.91 7" class=""></path>
                <circle cx="12" cy="2" r="1" class=""></circle>
              </svg>
            </div>
            <div>
              <h3 class="text-lg font-medium text-white mb-2">User-Centered Design</h3>
              <p class="text-sm text-neutral-400">Every decision starts with understanding user needs and creating
                solutions that genuinely enhance their experience.</p>
            </div>
          </div>
        </div>

        <div class="bg-zinc-900/60 border border-white/10 rounded-2xl p-6 hover-lift">
          <div class="flex items-start gap-4">
            <div
              class="w-12 h-12 rounded-xl bg-purple-500/10 border border-purple-500/20 flex items-center justify-center flex-shrink-0">
              <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="lucide lucide-code-2 w-6 h-6 text-purple-400" style="stroke-width:1.5">
                <path d="m18 16 4-4-4-4" class=""></path>
                <path d="m6 8-4 4 4 4" class=""></path>
                <path d="m14.5 4-5 16" class=""></path>
              </svg>
            </div>
            <div>
              <h3 class="text-lg font-medium text-white mb-2">Clean Architecture</h3>
              <p class="text-sm text-neutral-400">Building with maintainable, scalable code that stands the test of time
                and evolving requirements.</p>
            </div>
          </div>
        </div>

        <div class="bg-zinc-900/60 border border-white/10 rounded-2xl p-6 hover-lift">
          <div class="flex items-start gap-4">
            <div
              class="w-12 h-12 rounded-xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center flex-shrink-0">
              <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="lucide lucide-heart w-6 h-6 text-emerald-400" style="stroke-width:1.5">
                <path
                  d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z"
                  class=""></path>
              </svg>
            </div>
            <div>
              <h3 class="text-lg font-medium text-white mb-2">Passion-Driven</h3>
              <p class="text-sm text-neutral-400">I pour genuine enthusiasm into every project, treating each challenge
                as an opportunity to create something extraordinary.</p>
            </div>
          </div>
        </div>

        <div class="bg-zinc-900/60 border border-white/10 rounded-2xl p-6 hover-lift">
          <div class="flex items-start gap-4">
            <div
              class="w-12 h-12 rounded-xl bg-amber-500/10 border border-amber-500/20 flex items-center justify-center flex-shrink-0">
              <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="lucide lucide-users w-6 h-6 text-amber-400" style="stroke-width:1.5">
                <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path>
                <circle cx="9" cy="7" r="4" class=""></circle>
                <path d="m22 21-2-2" class=""></path>
                <circle cx="20" cy="16" r="2" class=""></circle>
              </svg>
            </div>
            <div>
              <h3 class="text-lg font-medium text-white mb-2">Collaborative Spirit</h3>
              <p class="text-sm text-neutral-400">Working closely with teams and clients to ensure every voice is heard
                and every goal is achieved.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>