Link in Bio Base

<div class="ws-link-in-bio flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-100 to-slate-200 p-6 dark:from-slate-900 dark:to-slate-800">
  <div class="w-full max-w-sm rounded-2xl bg-[var(--ws-color-surface)] p-8 text-center shadow-xl">
    <!-- Avatar -->
    <div class="mx-auto h-20 w-20 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 shadow-lg"></div>
    <h1 class="mt-4 text-lg font-bold text-slate-900">@brandname</h1>
    <p class="mt-1 text-sm text-slate-500">Designer, Developer & Creator. Building tools for the modern web.</p>

    <!-- Links -->
    <div class="mt-6 space-y-3">
      <a href="#" class="block rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] py-3 text-sm font-medium text-slate-900 transition hover:bg-slate-50 hover:shadow-sm dark:hover:bg-slate-700">
        🚀 Latest Project
      </a>
      <a href="#" class="block rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] py-3 text-sm font-medium text-slate-900 transition hover:bg-slate-50 hover:shadow-sm dark:hover:bg-slate-700">
        📝 Read the Blog
      </a>
      <a href="#" class="block rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] py-3 text-sm font-medium text-slate-900 transition hover:bg-slate-50 hover:shadow-sm dark:hover:bg-slate-700">
        🎨 Design Portfolio
      </a>
      <a href="#" class="block rounded-xl bg-slate-900 py-3 text-sm font-semibold text-white transition hover:bg-slate-800 dark:hover:bg-slate-100"> <!-- ws-ok: CTA button -->
        💼 Hire Me
      </a>
    </div>

    <!-- Social -->
    <div class="mt-6 flex justify-center gap-4">
      <a href="#" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors" aria-label="Twitter">
        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
      </a>
      <a href="#" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors" aria-label="Instagram">
        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
      </a>
      <a href="#" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors" aria-label="GitHub">
        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
      </a>
    </div>
  </div>
</div>