Animated Studio Hero Section with CTA

<section class="max-w-7xl sm:px-6 mt-8 mr-auto mb-8 ml-auto pr-4 pl-4 w-full">
  <div
    class="relative sm:mt-16 shadow-[0_8px_30px_rgba(0,0,0,0.08)] overflow-hidden shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)] bg-white border-white/20 border rounded-[40px] mt-10">
    <div class="absolute inset-0 pointer-events-none">
      <div class="absolute inset-0 bg-gradient-to-b from-white/10 via-white/5 to-transparent"></div>
    </div>

    <div class="relative sm:p-8 pt-6 pr-6 pb-6 pl-6">
      <h1 class="leading-none select-none text-gray-900 tracking-tight">
        <div class="flex items-start gap-8">
          <div class="flex-1">
            <span class="block text-[12vw] sm:text-[10vw] md:text-[8vw] lg:text-[9vw] font-semibold" style="overflow: hidden; letter-spacing: -0.15em;">
        <span style="display: inline-block; animation: 0.8s ease-out 0s 1 normal forwards running letterSlideIn; transform: translateY(-100%); opacity: 0;" class="font-geist tracking-tighter">S</span>
            <span style="display: inline-block; animation: 0.8s ease-out 0.1s 1 normal forwards running letterSlideIn; transform: translateY(-100%); opacity: 0;" class="font-geist tracking-tighter">T</span>
            <span style="display: inline-block; animation: 0.8s ease-out 0.2s 1 normal forwards running letterSlideIn; transform: translateY(-100%); opacity: 0;" class="font-geist tracking-tighter">U</span>
            <span style="display: inline-block; animation: 0.8s ease-out 0.3s 1 normal forwards running letterSlideIn; transform: translateY(-100%); opacity: 0;" class="font-geist tracking-tighter">D</span>
            <span style="display: inline-block; animation: 0.8s ease-out 0.4s 1 normal forwards running letterSlideIn; transform: translateY(-100%); opacity: 0;" class="font-geist tracking-tighter">I</span>
            <span style="display: inline-block; animation: 0.8s ease-out 0.5s 1 normal forwards running letterSlideIn; transform: translateY(-100%); opacity: 0;" class="font-geist tracking-tighter">O</span>
            </span>
          </div>
          <div class="w-80 pt-8 hidden lg:block">
            <div class="space-y-4">
              <div class="flex items-center gap-2 text-sm text-gray-600">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="lucide lucide-map-pin">
                  <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="font-geist">San Francisco, CA</span>
              </div>
              <div class="flex items-center gap-2 text-sm text-gray-600">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="lucide lucide-users">
                  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
                  <circle cx="9" cy="7" r="4"></circle>
                  <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
                  <path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
                </svg>
                <span class="font-geist">12 Team Members</span>
              </div>
              <div class="flex items-center gap-2 text-sm text-gray-600">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="lucide lucide-award">
                  <path
                    d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526">
                  </path>
                  <circle cx="12" cy="8" r="6"></circle>
                </svg>
                <span class="font-geist">200+ Projects Delivered</span>
              </div>
              <div class="flex items-center gap-2 text-sm text-gray-600">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                  class="lucide lucide-calendar">
                  <path d="M8 2v4"></path>
                  <path d="M16 2v4"></path>
                  <rect width="18" height="18" x="3" y="4" rx="2"></rect>
                  <path d="M3 10h18"></path>
                </svg>
                <span class="font-geist">Est. 2016</span>
              </div>
              <div class="border-gray-200 border-t pt-4">
                <p class="text-sm text-gray-500 font-geist leading-relaxed">
                  A creative design studio specializing in brand identity, digital products, and strategic design
                  solutions for forward-thinking companies.
                </p>
              </div>
            </div>
          </div>
        </div>
        <style>
          @keyframes letterSlideIn {
            0% {
              transform: translateY(-100%);
              opacity: 0;
            }

            50% {
              opacity: 0.5;
            }

            100% {
              transform: translateY(0);
              opacity: 1;
            }
          }
        </style>
      </h1>

      <div class="mt-6 sm:mt-10 grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
        <div class="border-black/5 border-t pt-5">
          <div class="flex items-start gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" data-lucide="award"
              class="lucide lucide-award stroke-1.5 mt-0.5 w-[20px] h-[20px]"
              style="width: 20px; height: 20px; color: rgb(212, 212, 212);">
              <path
                d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526">
              </path>
              <circle cx="12" cy="8" r="6"></circle>
            </svg>
            <div class="">
              <p class="text-sm font-medium tracking-tight text-gray-900 font-geist">Based in San Francisco</p>
              <p class="text-xs text-gray-500 mt-1 font-geist">California • Working globally</p>
            </div>
          </div>
        </div>
        <div class="border-black/5 border-t pt-5">
          <div class="flex items-start gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" data-lucide="award"
              class="lucide lucide-award stroke-1.5 mt-0.5 w-[20px] h-[20px]"
              style="width: 20px; height: 20px; color: rgb(212, 212, 212);">
              <path
                d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526">
              </path>
              <circle cx="12" cy="8" r="6"></circle>
            </svg>
            <div class="">
              <p class="text-sm font-medium tracking-tight text-gray-900 font-geist">Full-Service Design Studio</p>
              <p class="text-xs text-gray-500 mt-1 font-geist">Brand • Digital • Strategy</p>
            </div>
          </div>
        </div>
        <div class="border-t border-black/5 pt-5">
          <div class="flex items-start gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" data-lucide="award"
              class="lucide lucide-award stroke-1.5 mt-0.5 w-[20px] h-[20px]"
              style="width: 20px; height: 20px; color: rgb(212, 212, 212);">
              <path
                d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526">
              </path>
              <circle cx="12" cy="8" r="6"></circle>
            </svg>
            <div class="">
              <p class="text-sm font-medium tracking-tight text-gray-900 font-geist">Award-Winning Team</p>
              <p class="text-xs text-gray-500 mt-1 font-geist">15+ industry recognitions</p>
            </div>
          </div>
        </div>
      </div>

      <div class="sm:mt-10 mt-8">
        <div class="relative overflow-hidden bg-white/5 border-white/10 border rounded-2xl">
          <div
            class="absolute inset-0 bg-gradient-to-tr from-blue-500/10 via-transparent to-purple-500/10 pointer-events-none">
          </div>
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/b1c8bd29-43a2-426c-9dd1-916b14f8554d_3840w.jpg" alt="Creative team working on design projects" class="w-full h-[52vh] sm:h-[60vh] object-cover" loading="eager">
          <div
            class="absolute inset-0 bg-gradient-to-t from-gray-900/60 via-transparent to-transparent pointer-events-none">
          </div>

          <div class="absolute inset-0 flex items-end">
            <div class="w-full sm:p-8 pt-6 pr-6 pb-6 pl-6">
              <div class="max-w-3xl">
                <h2 class="text-3xl sm:text-4xl lg:text-7xl text-white font-geist tracking-tighter drop-shadow-lg">
                  Design that moves brands forward</h2>
                <p class="sm:text-lg leading-relaxed text-lg font-normal text-white/90 font-geist mt-3 drop-shadow-sm">
                  We craft brand identities, digital products, and strategic campaigns for ambitious teams. From concept
                  to launch, our studio blends clarity, utility, and aesthetics to create work that performs and
                  endures. Explore a curated reel of recent collaborations and outcomes.
                </p>
                <div class="mt-4">
                  <a href="#showreel"
                    class="inline-flex items-center gap-2 hover:bg-white/15 text-sm font-medium text-white tracking-tight bg-white/8 backdrop-blur-sm rounded-full pt-2 pr-4 pb-2 pl-4 border border-white/15 shadow-sm transition-all duration-300">
                    <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"
                      data-lucide="play" class="lucide lucide-play w-4 h-4 stroke-1.5">
                      <path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z">
                      </path>
                    </svg>
                    <span class="font-geist">Watch Showreel</span>
                  </a>
                </div>
              </div>

              <div class="mt-6 grid grid-cols-2 sm:grid-cols-4 gap-3">
                <div
                  class="rounded-xl bg-white/6 backdrop-blur-sm border border-white/10 p-3 shadow-sm hover:bg-white/10 transition-all duration-300">
                  <div class="text-xl font-semibold tracking-tight text-white font-geist drop-shadow-sm">200+</div>
                  <p class="text-[11px] text-white/80 mt-0.5 font-geist">Projects Delivered</p>
                </div>
                <div
                  class="rounded-xl bg-white/6 backdrop-blur-sm border border-white/10 p-3 shadow-sm hover:bg-white/10 transition-all duration-300">
                  <div class="text-xl font-semibold tracking-tight text-white font-geist drop-shadow-sm">50+</div>
                  <p class="text-[11px] text-white/80 mt-0.5 font-geist">Clients Worldwide</p>
                </div>
                <div
                  class="rounded-xl bg-white/6 backdrop-blur-sm border border-white/10 p-3 shadow-sm hover:bg-white/10 transition-all duration-300">
                  <div class="text-xl font-semibold tracking-tight text-white font-geist drop-shadow-sm">8</div>
                  <p class="text-[11px] text-white/80 mt-0.5 font-geist">Years in Practice</p>
                </div>
                <div
                  class="rounded-xl bg-white/6 backdrop-blur-sm border border-white/10 p-3 shadow-sm hover:bg-white/10 transition-all duration-300">
                  <div class="text-xl font-semibold tracking-tight text-white font-geist drop-shadow-sm">12</div>
                  <p class="text-[11px] text-white/80 mt-0.5 font-geist">Team Members</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>