Responsive iPhone

<div
  class="bg-black rounded-[3rem] pt-3 pr-3 pb-3 pl-3 absolute top-0 right-0 bottom-0 left-0 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]">
  <!-- Notch -->
  <div class="absolute top-3 left-1/2 -translate-x-1/2 w-32 h-7 bg-black rounded-b-3xl z-50"></div>

  <!-- Screen -->
  <div class="w-full h-full bg-white rounded-[2.5rem] overflow-hidden relative">
    <!-- Progressive blur top -->
    <div class="gradient-blur-top">
      <div class=""></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

    <!-- Content -->
    <div class="overflow-y-auto bg-white w-full h-full">
      <!-- Status bar -->
      <div class="flex z-50 pt-4 pr-6 pb-2 pl-6 relative items-center justify-between">
        <span class="text-sm font-medium text-gray-900 font-geist">9:41</span>
        <div class="flex items-center gap-1">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
            <path d="M5 12.55a11 11 0 0 1 14.08 0"></path>
            <path d="M1.42 9a16 16 0 0 1 21.16 0"></path>
            <path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path>
            <circle cx="12" cy="20" r="1"></circle>
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"
            stroke="currentColor" stroke-width="2" class="">
            <rect x="2" y="7" width="16" height="10" rx="2" ry="2" class=""></rect>
            <path d="M22 11v2"></path>
          </svg>
        </div>
      </div>

      <!-- Hero content -->
      <div class="px-6 pt-16 pb-24">
        <!-- Background decorative elements -->
        <div class="absolute top-20 right-0 w-40 h-40 bg-fuchsia-500/20 rounded-full blur-3xl"></div>
        <div class="absolute top-40 left-0 w-40 h-40 bg-indigo-500/20 rounded-full blur-3xl"></div>

        <div class="relative">
          <div
            class="inline-flex text-xs text-gray-700 font-geist bg-white/80 border border-gray-200 rounded-full pt-1 pr-3 pb-1 pl-3 backdrop-blur-md gap-2 items-center mb-4">
            <span class="inline-flex h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
            Real‑time Finance Platform
          </div>

          <h1 class="leading-tight text-4xl tracking-tighter font-geist mb-4">Financial visibility, simplified. </h1>

          <p class="text-sm text-gray-600 font-geist mb-6">
            Understand revenue, costs, and trends instantly—no spreadsheets required.
          </p>

          <div class="flex flex-col gap-3 mb-6">
            <button class="inline-flex gap-3 text-sm font-medium text-white bg-black rounded-full pt-3 pr-6 pb-3 pl-6 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] gap-x-3 gap-y-3 items-center justify-center">
                  <span class="font-geist">Get Started</span>
                  <div class="relative flex items-center justify-center w-5 h-5 bg-white/20 rounded-full">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M5 12h14"></path>
                      <path d="m12 5 7 7-7 7"></path>
                    </svg>
                  </div>
                </button>
            <button class="inline-flex xl:bg-white/10 text-sm font-medium text-gray-900 font-geist bg-gray-100 rounded-full pt-3 pr-6 pb-3 pl-6 shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)] gap-x-2 gap-y-2 items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z"></path><circle cx="12" cy="12" r="10"></circle></svg>
                  View demo
                </button>
          </div>

          <!-- Dashboard preview card -->
          <div class="bg-white/70 ring-1 ring-black/5 rounded-2xl p-3 shadow-xl backdrop-blur-md">
            <div class="flex items-center justify-between mb-3">
              <span class="text-xs font-medium text-gray-700 font-geist">Dashboard Overview</span>
              <span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2 py-1 text-emerald-600 text-[10px] font-geist">
                    <span class="h-1 w-1 rounded-full bg-emerald-500"></span>
              Live
              </span>
            </div>

            <!-- Stats Grid -->
            <div class="grid grid-cols-2 gap-2">
              <div class="bg-white ring-1 ring-black/5 rounded-xl p-3">
                <div class="flex items-center justify-between mb-2">
                  <div
                    class="w-10 h-10 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/ae254670-d172-42d4-8b69-97ab2ade6de8_320w.jpg)] bg-cover rounded-xl shadow-sm">
                  </div>
                  <span class="text-[10px] text-emerald-600 font-medium font-geist">+12%</span>
                </div>
                <p class="text-[10px] text-gray-500 font-geist">Revenue</p>
                <p class="text-base font-semibold text-gray-900 tracking-tight font-geist">$92,310</p>
              </div>

              <div class="bg-white ring-1 ring-black/5 rounded-xl p-3">
                <div class="flex items-center justify-between mb-2">
                  <div
                    class="w-10 h-10 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/b6b83d37-3f6a-4823-a93d-2c633b910edb_320w.jpg)] bg-cover rounded-xl shadow-sm">
                  </div>
                  <span class="text-[10px] text-emerald-600 font-medium font-geist">+8%</span>
                </div>
                <p class="text-[10px] text-gray-500 font-geist">Net Profit</p>
                <p class="text-base font-semibold text-gray-900 tracking-tight font-geist">$30,145</p>
              </div>

              <div class="bg-white ring-1 ring-black/5 rounded-xl p-3">
                <div class="flex items-center justify-between mb-2">
                  <div
                    class="w-10 h-10 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/90ebe0ba-ebce-4718-a047-8f9ae422c646_320w.jpg)] bg-cover rounded-xl shadow-sm">
                  </div>
                  <span class="text-[10px] text-gray-600 font-medium font-geist">+24</span>
                </div>
                <p class="text-[10px] text-gray-500 font-geist">Customers</p>
                <p class="text-base font-semibold text-gray-900 tracking-tight font-geist">1,847</p>
              </div>

              <div class="bg-white ring-1 ring-black/5 rounded-xl p-3">
                <div class="flex items-center justify-between mb-2">
                  <div
                    class="w-10 h-10 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/1f71e922-535f-4aaa-8ec1-be337e3db393_320w.jpg)] bg-cover rounded-xl shadow-sm">
                  </div>
                  <span class="text-[10px] text-emerald-600 font-medium font-geist">+18%</span>
                </div>
                <p class="text-[10px] text-gray-500 font-geist">Growth Rate</p>
                <p class="text-base font-semibold text-gray-900 tracking-tight font-geist">32.4%</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Progressive blur bottom -->
    <div class="gradient-blur-bottom">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

    <!-- Bottom tab bar -->
    <div
      class="absolute bottom-0 left-0 right-0 bg-white/80 backdrop-blur-xl border-t border-gray-200/50 px-6 pb-6 pt-3 z-50">
      <div class="flex items-center justify-around">
        <div class="flex flex-col items-center gap-1">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="w-[24px] h-[24px]" data-icon-replaced="true"
            style="width: 24px; height: 24px; color: rgb(17, 24, 39);">
            <rect width="7" height="9" x="3" y="3" rx="1"></rect>
            <rect width="7" height="5" x="14" y="3" rx="1"></rect>
            <rect width="7" height="9" x="14" y="12" rx="1" class=""></rect>
            <rect width="7" height="5" x="3" y="16" rx="1"></rect>
          </svg>
          <span class="text-[10px] font-medium text-gray-900 font-geist">Home</span>
        </div>
        <div class="flex flex-col items-center gap-1">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="w-[24px] h-[24px]" data-icon-replaced="true"
            style="width: 24px; height: 24px; color: rgb(156, 163, 175);">
            <path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path>
            <path d="m19 9-5 5-4-4-3 3"></path>
          </svg>
          <span class="text-[10px] font-medium text-gray-400 font-geist">Analytics</span>
        </div>
        <div class="flex flex-col items-center gap-1">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="w-[24px] h-[24px]" data-icon-replaced="true"
            style="width: 24px; height: 24px; color: rgb(156, 163, 175);">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" class=""></path>
            <polyline points="14 2 14 8 20 8"></polyline>
            <line x1="12" x2="12" y1="18" y2="12"></line>
            <line x1="9" x2="15" y1="15" y2="15"></line>
          </svg>
          <span class="text-[10px] font-medium text-gray-400 font-geist">Reports</span>
        </div>
        <div class="flex flex-col items-center gap-1">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
            class="w-[24px] h-[24px]" data-icon-replaced="true"
            style="width: 24px; height: 24px; color: rgb(156, 163, 175);">
            <circle cx="12" cy="12" r="10"></circle>
            <circle cx="12" cy="12" r="4"></circle>
            <line x1="21.17" x2="12" y1="8" y2="8"></line>
            <line x1="3.95" x2="8.54" y1="6.06" y2="14"></line>
            <line x1="10.88" x2="15.46" y1="21.94" y2="14"></line>
          </svg>
          <span class="text-[10px] font-medium text-gray-400 font-geist">Settings</span>
        </div>
      </div>
    </div>
  </div>
</div>