Profile Card with Social Links and CTA

<section
  class="relative shadow-[0_10px_40px_-10px_rgba(0,0,0,0.5)] overflow-hidden border-white/10 border rounded-3xl backdrop-blur-lg">
  <div class="p-3 sm:p-4">
    <div class="relative rounded-2xl overflow-hidden bg-neutral-900 ring-1 ring-white/10">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/aee7c414-1804-47c8-ae06-d2543a148ad7_800w.jpg" alt="Portrait" class="h-64 sm:h-80 w-full object-cover">
      <div
        class="absolute bottom-3 left-3 flex items-center gap-2 rounded-full bg-black/60 px-2.5 py-1.5 ring-1 ring-white/10 backdrop-blur">
        <span class="h-2.5 w-2.5 rounded-full bg-emerald-400"></span>
        <span class="text-[12px] text-neutral-200 font-geist">Available for work</span>
      </div>
    </div>
    <div class="px-2 sm:px-1">
      <h2 class="mt-4 text-2xl text-neutral-100 font-geist tracking-tighter">
        Hello I am
        <span class="bg-clip-text text-transparent bg-gradient-to-r from-neutral-100 to-neutral-400 font-geist tracking-tighter">Johan Beker</span>
      </h2>
      <p class="mt-1 text-sm text-neutral-400 font-geist">UI/UX Interaction Designer based in Berlin.</p>
      <div class="mt-4 flex items-center gap-2.5">
        <a href="#"
          class="group inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/[0.03] hover:bg-white/[0.06] transition">
          <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="h-4 w-4 text-neutral-300 group-hover:text-white">
            <path
              d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z">
            </path>
          </svg>
        </a>
        <a href="#"
          class="group inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/[0.03] hover:bg-white/[0.06] transition">
          <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="h-4 w-4 text-neutral-300 group-hover:text-white">
            <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
            <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
            <line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
          </svg>
        </a>
        <a href="#"
          class="group inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/[0.03] hover:bg-white/[0.06] transition">
          <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="h-4 w-4 text-neutral-300 group-hover:text-white">
            <circle cx="12" cy="12" r="10"></circle>
            <path d="M19.13 5.09C15.22 9.14 10 10.44 2.25 10.94"></path>
            <path d="M21.75 12.84c-6.62-1.41-12.14 1-16.38 6.32"></path>
            <path d="M8.56 2.75c4.37 6 6 9.42 8 17.72"></path>
          </svg>
        </a>
        <a href="#"
          class="group inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/[0.03] hover:bg-white/[0.06] transition">
          <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="h-4 w-4 text-neutral-300 group-hover:text-white">
            <path
              d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4">
            </path>
            <path d="M9 18c-4.51 2-5-2-7-2"></path>
          </svg>
        </a>
      </div>
      <div class="my-5 h-px bg-gradient-to-r from-white/10 via-white/5 to-transparent"></div>
      <div class="mb-2">
        <a href="#contact"
          class="inline-flex items-center gap-2 rounded-full bg-white text-black px-4 py-2.5 text-sm font-medium shadow hover:shadow-lg transition font-geist">
          Connect with me
          <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="h-4 w-4">
            <path
              d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z">
            </path>
            <path d="m21.854 2.147-10.94 10.939"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</section>