Mobile app hero with phone frame

Create an app landing hero with Tailwind CSS in two columns on a neutral-950 background. The left column holds a small pill with a star glyph and a rating line, a large white headline, a light grey paragraph, two store buttons drawn as bordered rounded-xl blocks with a glyph and two lines of text each, and a row of three tiny trust notes with check glyphs. The right column is a phone drawn entirely in CSS: a rounded-[2.5rem] neutral-800 frame with a thin border, a notch bar, and inside a white screen showing a mock app — a header row with an avatar and a bell glyph, a balance card with a large figure and a green delta, three transaction rows with a square glyph tile, name, time and amount, and a bottom tab bar of four small shapes. Add a soft blurred glow behind the phone. Stack to one column below lg with the phone centred.

<section class="overflow-hidden bg-neutral-950 px-6 py-20 text-white">
  <div class="mx-auto grid max-w-6xl items-center gap-16 lg:grid-cols-2">
    <div>
      <span class="inline-flex items-center gap-2 rounded-full border border-neutral-800 px-3 py-1 text-xs text-neutral-300">
        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3Z" fill="currentColor" stroke="none"/></svg> 4.9 average from 12,400 ratings
      </span>
      <h1 class="mt-6 text-5xl font-semibold leading-[1.05] tracking-tight sm:text-6xl">Your money, finally legible</h1>
      <p class="mt-5 max-w-md text-lg leading-relaxed text-neutral-400">
        Every account in one place, categorised the moment a payment lands. No spreadsheets, no manual tagging.
      </p>

      <div class="mt-9 flex flex-wrap gap-3">
        <a href="#" class="flex items-center gap-3 rounded-xl border border-neutral-800 bg-neutral-900 px-5 py-3 transition hover:border-neutral-700">
          <span class="text-xl"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 9 9-9 9-9-9 9-9Z"/><path d="m12 7 5 5-5 5-5-5 5-5Z"/></svg></span>
          <span class="text-left leading-tight">
            <span class="block text-[10px] uppercase tracking-widest text-neutral-500">Download on the</span>
            <span class="block text-sm font-medium">App Store</span>
          </span>
        </a>
        <a href="#" class="flex items-center gap-3 rounded-xl border border-neutral-800 bg-neutral-900 px-5 py-3 transition hover:border-neutral-700">
          <span class="text-xl"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m9 7 9 5-9 5V7Z" fill="currentColor" stroke="none"/></svg></span>
          <span class="text-left leading-tight">
            <span class="block text-[10px] uppercase tracking-widest text-neutral-500">Get it on</span>
            <span class="block text-sm font-medium">Google Play</span>
          </span>
        </a>
      </div>

      <div class="mt-8 flex flex-wrap gap-x-6 gap-y-2 text-xs text-neutral-500">
        <span class="flex items-center gap-1.5"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> No card to start</span>
        <span class="flex items-center gap-1.5"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> Read-only bank access</span>
        <span class="flex items-center gap-1.5"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> Delete your data any time</span>
      </div>
    </div>

    <div class="relative flex justify-center">
      <div class="absolute h-72 w-72 rounded-full bg-green-500/20 blur-3xl"></div>

      <div class="relative w-[300px] rounded-[2.5rem] border border-neutral-700 bg-neutral-800 p-3 shadow-2xl">
        <div class="mx-auto mb-2 h-1.5 w-20 rounded-full bg-neutral-700"></div>
        <div class="overflow-hidden rounded-[1.8rem] bg-white p-5 text-neutral-900">
          <div class="flex items-center justify-between">
            <span class="grid h-9 w-9 place-items-center rounded-full bg-neutral-900 text-xs font-medium text-white">RM</span>
            <span class="text-neutral-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m4 7 8 6 8-6"/></svg></span>
          </div>

          <div class="mt-5 rounded-2xl bg-neutral-900 p-5 text-white">
            <p class="text-[11px] uppercase tracking-widest text-neutral-400">Total balance</p>
            <p class="mt-1 text-3xl font-semibold tracking-tight">£8,412.06</p>
            <p class="mt-1 text-xs text-green-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg> 4.2% this month</p>
          </div>

          <div class="mt-5 space-y-3">
            <div class="flex items-center gap-3">
              <span class="grid h-9 w-9 place-items-center rounded-lg bg-neutral-100 text-neutral-600"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M3 7.5A2.5 2.5 0 0 1 5.5 5H9l2 2h7.5A2.5 2.5 0 0 1 21 9.5v7A2.5 2.5 0 0 1 18.5 19h-13A2.5 2.5 0 0 1 3 16.5v-9Z"/></svg></span>
              <span class="min-w-0 flex-1">
                <span class="block truncate text-sm font-medium">Fern &amp; Fettle</span>
                <span class="block text-xs text-neutral-400">Groceries · 09:14</span>
              </span>
              <span class="text-sm font-medium">−£24.10</span>
            </div>
            <div class="flex items-center gap-3">
              <span class="grid h-9 w-9 place-items-center rounded-lg bg-neutral-100 text-neutral-600"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M14 5c2.4-2.4 5.2-2.1 5.2-2.1s.3 2.8-2.1 5.2l-5.6 5.6-4.2-4.2L14 5Z"/><path d="m9 8-4.5.5L3 10l4 1m5 4 1 4 1.5-1.5.5-4.5M7 17c-1 1-3 1-3 1s0-2 1-3"/></svg></span>
              <span class="min-w-0 flex-1">
                <span class="block truncate text-sm font-medium">Studioform Ltd</span>
                <span class="block text-xs text-neutral-400">Invoice · Yesterday</span>
              </span>
              <span class="text-sm font-medium text-green-600">+£1,850.00</span>
            </div>
            <div class="flex items-center gap-3">
              <span class="grid h-9 w-9 place-items-center rounded-lg bg-neutral-100 text-neutral-600"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><rect x="4" y="3" width="16" height="7" rx="2"/><rect x="4" y="14" width="16" height="7" rx="2"/><path d="M8 6.5h.01M8 17.5h.01M12 6.5h5M12 17.5h5"/></svg></span>
              <span class="min-w-0 flex-1">
                <span class="block truncate text-sm font-medium">Northwind Hosting</span>
                <span class="block text-xs text-neutral-400">Software · Mon</span>
              </span>
              <span class="text-sm font-medium">−£42.00</span>
            </div>
          </div>

          <div class="mt-6 flex items-center justify-around border-t border-neutral-100 pt-4 text-neutral-300">
            <span class="h-1.5 w-6 rounded-full bg-neutral-900"></span>
            <span class="h-1.5 w-6 rounded-full bg-neutral-200"></span>
            <span class="h-1.5 w-6 rounded-full bg-neutral-200"></span>
            <span class="h-1.5 w-6 rounded-full bg-neutral-200"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>