Marketing Hero Section with Animated Gradient CTA

<section class="relative z-10">
      <div class="mx-auto max-w-7xl px-4 pt-10 pb-8 md:px-6 md:pt-16">
        <div class="max-w-3xl text-center mr-auto ml-auto">
          <p class="mb-4 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-medium text-slate-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="sparkles" class="lucide lucide-sparkles h-4 w-4 text-sky-400"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
            New: Instant publish with atomic deploys
          </p>
          <h1 class="sm:text-5xl md:text-7xl text-4xl font-semibold tracking-tight">
            Ship websites at lightspeed
          </h1>
          <p class="mt-5 text-base md:text-lg text-slate-300">
            Nebula is a visual builder that lets you design, collaborate, and publish in one place. No code required—unless you want it.
          </p>

          <div class="flex flex-col gap-3 sm:flex-row mt-8 items-center justify-center">
            <button type="button" class="button">
  <div class="points_wrapper">
    <i class="point"></i>
    <i class="point"></i>
    <i class="point"></i>
    <i class="point"></i>
    <i class="point"></i>
    <i class="point"></i>
    <i class="point"></i>
    <i class="point"></i>
    <i class="point"></i>
    <i class="point"></i>
  </div>

  <span class="inner">Try for free<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
      <path d="M5 12h14" class=""></path>
      <path d="m12 5 7 7-7 7" class=""></path>
    </svg></span>
  <style>
    .button {
      cursor: pointer;
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      transition: all 0.25s ease;
      background: radial-gradient(65.28% 65.28% at 50% 100%,
          rgba(34, 211, 238, 0.8) 0%,
          rgba(34, 211, 238, 0) 100%),
        linear-gradient(0deg, #2563eb, #2563eb);
      border-radius: 0.75rem;
      border: none;
      outline: none;
      padding: 12px 18px;
      min-height: 48px;
      min-width: 102px;
    }
  
    .button::before,
    .button::after {
      content: "";
      position: absolute;
      transition: all 0.5s ease-in-out;
      z-index: 0;
    }
  
    .button::before {
      inset: 1px;
      background: linear-gradient(177.95deg,
          rgba(255, 255, 255, 0.19) 0%,
          rgba(255, 255, 255, 0) 100%);
      border-radius: calc(0.75rem - 1px);
    }
  
    .button::after {
      inset: 2px;
      background: radial-gradient(65.28% 65.28% at 50% 100%,
          rgba(34, 211, 238, 0.8) 0%,
          rgba(34, 211, 238, 0) 100%),
        linear-gradient(0deg, #2563eb, #2563eb);
      border-radius: calc(0.75rem - 2px);
    }
  
    .button:active {
      transform: scale(0.95);
    }
  
    .points_wrapper {
      overflow: hidden;
      width: 100%;
      height: 100%;
      pointer-events: none;
      position: absolute;
      z-index: 1;
    }
  
    .points_wrapper .point {
      bottom: -10px;
      position: absolute;
      animation: floating-points infinite ease-in-out;
      pointer-events: none;
      width: 2px;
      height: 2px;
      background-color: #fff;
      border-radius: 9999px;
    }
  
    @keyframes floating-points {
      0% {
        transform: translateY(0);
      }
  
      85% {
        opacity: 0;
      }
  
      100% {
        transform: translateY(-55px);
        opacity: 0;
      }
    }
  
    .points_wrapper .point:nth-child(1) {
      left: 10%;
      opacity: 1;
      animation-duration: 2.35s;
      animation-delay: 0.2s;
    }
  
    .points_wrapper .point:nth-child(2) {
      left: 30%;
      opacity: 0.7;
      animation-duration: 2.5s;
      animation-delay: 0.5s;
    }
  
    .points_wrapper .point:nth-child(3) {
      left: 25%;
      opacity: 0.8;
      animation-duration: 2.2s;
      animation-delay: 0.1s;
    }
  
    .points_wrapper .point:nth-child(4) {
      left: 44%;
      opacity: 0.6;
      animation-duration: 2.05s;
    }
  
    .points_wrapper .point:nth-child(5) {
      left: 50%;
      opacity: 1;
      animation-duration: 1.9s;
    }
  
    .points_wrapper .point:nth-child(6) {
      left: 75%;
      opacity: 0.5;
      animation-duration: 1.5s;
      animation-delay: 1.5s;
    }
  
    .points_wrapper .point:nth-child(7) {
      left: 88%;
      opacity: 0.9;
      animation-duration: 2.2s;
      animation-delay: 0.2s;
    }
  
    .points_wrapper .point:nth-child(8) {
      left: 58%;
      opacity: 0.8;
      animation-duration: 2.25s;
      animation-delay: 0.2s;
    }
  
    .points_wrapper .point:nth-child(9) {
      left: 98%;
      opacity: 0.6;
      animation-duration: 2.6s;
      animation-delay: 0.1s;
    }
  
    .points_wrapper .point:nth-child(10) {
      left: 65%;
      opacity: 1;
      animation-duration: 2.5s;
      animation-delay: 0.2s;
    }
  
    .inner {
      z-index: 2;
      gap: 6px;
      position: relative;
      width: 100%;
      color: white;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
      transition: color 0.2s ease-in-out;
    }
  
    .inner svg.icon {
      width: 18px;
      height: 18px;
      transition: transform 0.3s ease;
      stroke: white;
      fill: none;
    }
  
    .button:hover svg.icon {
      transform: translateX(2px);
    }
  
    .button:hover svg.icon path {
      animation: dash 0.8s linear forwards;
    }
  
    @keyframes dash {
      0% {
        stroke-dasharray: 0, 20;
        stroke-dashoffset: 0;
      }
  
      50% {
        stroke-dasharray: 10, 10;
        stroke-dashoffset: -5;
      }
  
      100% {
        stroke-dasharray: 20, 0;
        stroke-dashoffset: -10;
      }
    }
  </style>
</button>
            <button class="group relative inline-flex items-center justify-center min-w-[120px] cursor-pointer rounded-xl px-[17px] py-[12px] text-white/70 tracking-tight font-semibold transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] hover:-translate-y-[3px] hover:scale-[1.1] hover:text-white" style="box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1);background:radial-gradient(ellipse at bottom,rgba(71,81,92,1) 0%,rgba(0,0,0,1) 100%);">
  <span class="relative z-10 font-normal">Watch demo</span>

  <!-- replaces the old ::before underline -->
  <span aria-hidden="true" class="absolute bottom-0 left-1/2 h-[1px] w-[70%] -translate-x-1/2 opacity-20 transition-all duration-[1000ms] ease-[cubic-bezier(0.15,0.83,0.66,1)] group-hover:opacity-80" style="background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);"></span>
</button>
          </div>

          <div class="mt-6 flex items-center justify-center gap-3 text-sm text-slate-400">
            <div class="flex -space-x-2">
              <img class="h-6 w-6 rounded-full ring-2 ring-black/60 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9c519027-8b76-493a-ae3c-8cf962ccdf04_320w.jpg" alt="">
              <img class="h-6 w-6 rounded-full ring-2 ring-black/60 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8d3cb9d4-adbe-41e5-a351-a4a6c22d6037_800w.jpg" alt="" style="">
              <img class="h-6 w-6 rounded-full ring-2 ring-black/60 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/69c45eba-968b-45e3-aff1-ebab9cb7b543_320w.jpg" alt="" style="">
            </div>
            <span class="">Trusted by modern teams of all sizes</span>
          </div>
        </div>
      </div>

      <!-- Editor preview -->
      <div class="-mb-8 max-w-7xl md:px-6 mr-auto ml-auto pr-4 pl-4">
        <div class="relative w-full overflow-hidden shadow-black/50 bg-gradient-to-b from-white/[0.04] to-white/[0.02] border-white/10 border rounded-2xl mr-auto ml-auto shadow-2xl backdrop-blur-lg">
          <!-- Topbar -->
          <div class="flex items-center justify-between border-b border-white/10 px-3 py-2">
            <div class="flex items-center gap-2">
              <span class="h-3 w-3 rounded-full bg-red-500/80"></span>
              <span class="h-3 w-3 rounded-full bg-yellow-400/80"></span>
              <span class="h-3 w-3 rounded-full bg-green-500/80"></span>
              <div class="ml-3 hidden items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-2 py-1 text-xs text-slate-300 sm:flex">
                <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="layout-panel-left" class="lucide lucide-layout-panel-left h-3.5 w-3.5 text-slate-200"><rect width="7" height="18" x="3" y="3" rx="1" class=""></rect><rect width="7" height="7" x="14" y="3" rx="1" class=""></rect><rect width="7" height="7" x="14" y="14" rx="1" class=""></rect></svg>
                Nebula Studio — Project: Aurora
              </div>
            </div>
            <div class="flex items-center gap-2">
              <button class="hidden rounded-md border border-white/10 bg-white/5 p-1.5 text-slate-200 hover:bg-white/10 sm:inline-flex"><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="share-2" class="lucide lucide-share-2 h-4 w-4"><circle cx="18" cy="5" r="3" class=""></circle><circle cx="6" cy="12" r="3" class=""></circle><circle cx="18" cy="19" r="3" class=""></circle><line x1="8.59" x2="15.42" y1="13.51" y2="17.49" class=""></line><line x1="15.41" x2="8.59" y1="6.51" y2="10.49" class=""></line></svg></button>
              <button class="hidden rounded-md border border-white/10 bg-white/5 p-1.5 text-slate-200 hover:bg-white/10 sm:inline-flex"><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="users" class="lucide lucide-users h-4 w-4"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg></button>
              <button class="rounded-md bg-sky-500/90 px-3 py-1.5 text-xs font-medium text-white hover:bg-sky-500">Publish</button>
            </div>
          </div>

          <!-- Editor body -->
          <div class="grid grid-cols-1 md:grid-cols-12">
            <!-- Left panel -->
            <aside class="hidden md:block md:col-span-3 bg-black/30 border-white/10 border-r pt-3 pr-3 pb-3 pl-3">
              <div class="mb-3 flex items-center justify-between">
                <div class="inline-flex items-center gap-2 rounded-md border border-white/10 bg-white/5 px-2 py-1 text-xs font-medium text-slate-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="panel-left" class="lucide lucide-panel-left h-3.5 w-3.5"><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect><path d="M9 3v18" class=""></path></svg>
                  Outline
                </div>
                <button class="rounded-md border border-white/10 bg-white/5 p-1 text-slate-300 hover:bg-white/10">
                  <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="search" class="lucide lucide-search h-4 w-4"><path d="m21 21-4.34-4.34" class=""></path><circle cx="11" cy="11" r="8" class=""></circle></svg>
                </button>
              </div>

              <div class="space-y-1 text-slate-300">
                <div class="bg-white/5 rounded-lg pt-2 pr-2 pb-2 pl-2 space-y-3">
                  <div class="mb-1 flex items-center justify-between">
                    <div class="flex items-center gap-2">
                      <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="laptop" class="lucide lucide-laptop h-4 w-4 text-sky-400"><path d="M18 5a2 2 0 0 1 2 2v8.526a2 2 0 0 0 .212.897l1.068 2.127a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45l1.068-2.127A2 2 0 0 0 4 15.526V7a2 2 0 0 1 2-2z" class=""></path><path d="M20.054 15.987H3.946" class=""></path></svg>
                      <span class="text-xs font-medium">Desktop — 1200</span>
                    </div>
                    <span class="rounded-md bg-white/5 px-1.5 py-0.5 text-[10px] text-slate-400">Primary</span>
                  </div>
                  <ul class="space-y-1 pl-6 text-xs">
                    <li class="flex items-center gap-2 rounded-md bg-sky-500/10 px-2 py-1">
                      <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="layers" class="lucide lucide-layers h-3.5 w-3.5 text-sky-400"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" class=""></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" class=""></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" class=""></path></svg>
                      Header
                    </li>
                    <li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5">
                      <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="image" class="lucide lucide-image h-3.5 w-3.5 text-purple-400"><rect width="18" height="18" x="3" y="3" rx="2" ry="2" class=""></rect><circle cx="9" cy="9" r="2" class=""></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" class=""></path></svg>
                      Hero
                    </li>
                    <li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5">
                      <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="grid" class="lucide lucide-grid h-3.5 w-3.5 text-emerald-400"><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect><path d="M3 9h18" class=""></path><path d="M3 15h18" class=""></path><path d="M9 3v18" class=""></path><path d="M15 3v18" class=""></path></svg>
                      Features
                    </li>
                    <li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5">
                      <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="credit-card" class="lucide lucide-credit-card h-3.5 w-3.5 text-amber-400"><rect width="20" height="14" x="2" y="5" rx="2" class=""></rect><line x1="2" x2="22" y1="10" y2="10" class=""></line></svg>
                      Pricing
                    </li>
                    <li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5">
                      <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="messages-square" class="lucide lucide-messages-square h-3.5 w-3.5 text-pink-400"><path d="M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" class=""></path><path d="M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1" class=""></path></svg>
                      Testimonials
                    </li>
                  </ul>
                </div>
                <div class="bg-white/5 rounded-lg pt-2 pr-2 pb-2 pl-2 space-y-3">
                  <div class="mb-1 flex items-center gap-2">
                    <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="package" class="lucide lucide-package h-4 w-4 text-indigo-400"><path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z" class=""></path><path d="M12 22V12" class=""></path><polyline points="3.29 7 12 12 20.71 7" class=""></polyline><path d="m7.5 4.27 9 5.15" class=""></path></svg>
                    <span class="text-xs font-medium">Assets</span>
                  </div>
                  <div class="grid grid-cols-3 gap-2">
                    <div class="aspect-video overflow-hidden rounded-md bg-white/5">
                      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/0950426a-fd01-4dc5-a916-33b7c3a94646_320w.jpg" class="h-full w-full object-cover opacity-90" alt="" style="">
                    </div>
                    <div class="aspect-video overflow-hidden rounded-md bg-white/5">
                      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/859fc099-059b-4ec4-b0f1-06e736a8bdf4_320w.jpg" class="h-full w-full object-cover opacity-90" alt="" style="">
                    </div>
                    <div class="aspect-video overflow-hidden rounded-md bg-white/5">
                      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f17ac654-630a-4fb6-ae2e-e2c4a8fe9274_320w.jpg" class="h-full w-full object-cover opacity-90" alt="" style="">
                    </div>
                  </div>
                </div>
              </div>
            </aside>

            <!-- Canvas -->
            <main class="relative md:col-span-6 bg-black/20">
              <div class="flex items-center gap-2 border-b border-white/10 px-3 py-2 text-xs text-slate-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="monitor-smartphone" class="lucide lucide-monitor-smartphone h-4 w-4 text-sky-400"><path d="M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8" class=""></path><path d="M10 19v-3.96 3.15" class=""></path><path d="M7 19h5" class=""></path><rect width="6" height="10" x="16" y="12" rx="2" class=""></rect></svg>
                <span>Breakpoint</span>
                <span class="rounded-md bg-white/5 px-1.5 py-0.5">Desktop</span>
                <span class="text-slate-500">|</span>
                <span>1200</span>
                <div class="ml-auto flex items-center gap-1">
                  <button class="rounded-md border border-white/10 bg-white/5 p-1 hover:bg-white/10"><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="undo-2" class="lucide lucide-undo-2 h-4 w-4"><path d="M9 14 4 9l5-5" class=""></path><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11" class=""></path></svg></button>
                  <button class="rounded-md border border-white/10 bg-white/5 p-1 hover:bg-white/10"><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="redo-2" class="lucide lucide-redo-2 h-4 w-4"><path d="m15 14 5-5-5-5" class=""></path><path d="M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13" class=""></path></svg></button>
                </div>
              </div>

              <div class="sm:p-6 pt-4 pr-4 pb-4 pl-4">
                <div class="relative overflow-hidden rounded-xl border border-white/10 bg-white/5 ring-1 ring-white/10">
                  <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9fb3eba2-d3b1-4a3c-9feb-29a0b47b70c6_1600w.jpg" class="h-[360px] w-full object-cover sm:h-[460px]" alt="">
                  <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-transparent"></div>
                  <div class="absolute bottom-6 left-6 right-6">
                    <div class="max-w-xl rounded-xl border border-white/10 bg-black/40 p-4 backdrop-blur">
                      <h3 class="text-3xl sm:text-4xl font-semibold tracking-tight">Orion Canvas</h3>
                      <p class="mt-1 text-sm text-slate-300">A limitless canvas with modern layout, motion, and type features—ready for production.</p>
                      <div class="mt-3 flex items-center gap-2">
                        <button class="inline-flex items-center gap-2 rounded-md bg-white px-3 py-1.5 text-xs font-medium text-black hover:bg-white/90">
                          <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="wand-2" class="lucide lucide-wand-2 h-4 w-4"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72" class=""></path><path d="m14 7 3 3" class=""></path><path d="M5 6v4" class=""></path><path d="M19 14v4" class=""></path><path d="M10 2v2" class=""></path><path d="M7 8H3" class=""></path><path d="M21 16h-4" class=""></path><path d="M11 3H9" class=""></path></svg>
                          Auto layout
                        </button>
                        <button class="inline-flex items-center gap-2 rounded-md border border-white/10 bg-white/5 px-3 py-1.5 text-xs font-medium text-slate-200 hover:bg-white/10">
                          <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="move" class="lucide lucide-move h-4 w-4"><path d="M12 2v20" class=""></path><path d="m15 19-3 3-3-3" class=""></path><path d="m19 9 3 3-3 3" class=""></path><path d="M2 12h20" class=""></path><path d="m5 9-3 3 3 3" class=""></path><path d="m9 5 3-3 3 3" class=""></path></svg>
                          Drag
                        </button>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Mini device preview -->
                <div class="pointer-events-none absolute -bottom-6 right-4 hidden w-64 rounded-xl border border-white/10 bg-white/5 p-2 backdrop-blur lg:block">
                  <div class="rounded-lg border border-white/10 bg-black/50 p-2">
                    <div class="aspect-[9/16] overflow-hidden rounded-md">
                      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e080ec8d-304b-41cc-a8e7-c2b6efc8ab07_800w.jpg" class="h-full w-full object-cover" alt="">
                    </div>
                    <div class="mt-2 flex items-center justify-between text-[10px] text-slate-400">
                      <span class="inline-flex 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="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="smartphone" class="lucide lucide-smartphone h-3 w-3"><rect width="14" height="20" x="5" y="2" rx="2" ry="2" class=""></rect><path d="M12 18h.01" class=""></path></svg> Mobile 390</span>
                      <span class="rounded bg-white/5 px-1 py-0.5">Preview</span>
                    </div>
                  </div>
                </div>
              </div>
            </main>

            <!-- Right panel -->
            <aside class="hidden md:block md:col-span-3 border-l border-white/10 bg-black/30 p-3">
              <div class="mb-3 flex items-center justify-between">
                <div class="inline-flex items-center gap-2 rounded-md border border-white/10 bg-white/5 px-2 py-1 text-xs font-medium text-slate-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="sliders-horizontal" class="lucide lucide-sliders-horizontal h-3.5 w-3.5"><line x1="21" x2="14" y1="4" y2="4" class=""></line><line x1="10" x2="3" y1="4" y2="4" class=""></line><line x1="21" x2="12" y1="12" y2="12" class=""></line><line x1="8" x2="3" y1="12" y2="12" class=""></line><line x1="21" x2="16" y1="20" y2="20" class=""></line><line x1="12" x2="3" y1="20" y2="20" class=""></line><line x1="14" x2="14" y1="2" y2="6" class=""></line><line x1="8" x2="8" y1="10" y2="14" class=""></line><line x1="16" x2="16" y1="18" y2="22" class=""></line></svg>
                  Properties
                </div>
                <button class="rounded-md border border-white/10 bg-white/5 p-1 text-slate-300 hover:bg-white/10">
                  <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="more-horizontal" class="lucide lucide-more-horizontal h-4 w-4"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg>
                </button>
              </div>

              <div class="space-y-3">
                <div class="bg-white/5 rounded-lg pt-3 pr-3 pb-3 pl-3 space-y-3">
                  <div class="mb-2 flex items-center justify-between text-xs">
                    <span class="text-slate-300">Position</span>
                    <span class="rounded-md bg-white/5 px-2 py-0.5 text-[10px] text-slate-400">Relative</span>
                  </div>
                  <div class="grid grid-cols-3 gap-2 text-[11px]">
                    <button class="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-slate-300 hover:bg-white/10"><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="align-start-vertical" class="lucide lucide-align-start-vertical mr-1 inline h-3.5 w-3.5"><rect width="9" height="6" x="6" y="14" rx="2" class=""></rect><rect width="16" height="6" x="6" y="4" rx="2" class=""></rect><path d="M2 2v20" class=""></path></svg>Top</button>
                    <button class="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-slate-300 hover:bg-white/10"><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="align-center-vertical" class="lucide lucide-align-center-vertical mr-1 inline h-3.5 w-3.5"><path d="M12 2v20" class=""></path><path d="M8 10H4a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2h4" class=""></path><path d="M16 10h4a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-4" class=""></path><path d="M8 20H7a2 2 0 0 1-2-2v-2c0-1.1.9-2 2-2h1" class=""></path><path d="M16 14h1a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-1" class=""></path></svg>Center</button>
                    <button class="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-slate-300 hover:bg-white/10"><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="align-end-vertical" class="lucide lucide-align-end-vertical mr-1 inline h-3.5 w-3.5"><rect width="16" height="6" x="2" y="4" rx="2" class=""></rect><rect width="9" height="6" x="9" y="14" rx="2" class=""></rect><path d="M22 22V2" class=""></path></svg>Bottom</button>
                  </div>
                </div>

                <div class="bg-white/5 rounded-lg pt-3 pr-3 pb-3 pl-3 space-y-3">
  <div class="mb-2 flex items-center justify-between text-xs">
    <span class="text-slate-300 font-medium">Size</span>
    <span class="rounded-md bg-white/5 px-2 py-0.5 text-[10px] text-slate-400">Auto</span>
  </div>
  <div class="grid grid-cols-2 gap-2 text-[11px]">
    <div class="rounded-md border border-white/10 bg-black/40 px-2 py-1 text-slate-300 font-medium text-center">W: 1200</div>
    <div class="rounded-md border border-white/10 bg-black/40 px-2 py-1 text-slate-300 font-medium text-center">H: Auto</div>
  </div>
  <div class="mt-2 grid grid-cols-4 gap-2 text-[11px]">
    <button class="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-slate-300 font-medium hover:bg-white/10 transition focus:ring-2 focus:ring-sky-500 focus:outline-none">Fill</button>
    <button class="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-slate-300 font-medium hover:bg-white/10 transition focus:ring-2 focus:ring-sky-500 focus:outline-none">Fit</button>
    <button class="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-slate-300 font-medium hover:bg-white/10 transition focus:ring-2 focus:ring-sky-500 focus:outline-none">Fixed
    </button><button class="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-slate-300 font-medium hover:bg-white/10 transition focus:ring-2 focus:ring-sky-500 focus:outline-none">Min</button>
  </div>
</div>

                <div class="bg-white/5 rounded-lg pt-3 pr-3 pb-3 pl-3 space-y-3">
                  <div class="mb-2 flex items-center justify-between text-xs">
                    <span class="text-slate-300">Effects</span>
                    <span class="rounded-md bg-white/5 px-2 py-0.5 text-[10px] text-slate-400">3</span>
                  </div>
                  <div class="space-y-2 text-[11px]">
                    <div class="flex items-center justify-between">
                      <span class="inline-flex items-center gap-1 text-slate-300"><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" data-lucide="droplet" class="lucide lucide-droplet w-[14px] h-[14px]" data-icon-replaced="true" style="width: 14px; height: 14px; color: rgb(56, 189, 248);"><path d="M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z" class=""></path></svg>Blur</span>
                      <span class="rounded bg-white/5 px-1.5 py-0.5 text-slate-400">8px</span>
                    </div>
                    <div class="flex items-center justify-between">
                      <span class="inline-flex items-center gap-1 text-slate-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="sun" class="lucide lucide-sun h-3.5 w-3.5 text-amber-400"><circle cx="12" cy="12" r="4" class=""></circle><path d="M12 2v2" class=""></path><path d="M12 20v2" class=""></path><path d="m4.93 4.93 1.41 1.41" class=""></path><path d="m17.66 17.66 1.41 1.41" class=""></path><path d="M2 12h2" class=""></path><path d="M20 12h2" class=""></path><path d="m6.34 17.66-1.41 1.41" class=""></path><path d="m19.07 4.93-1.41 1.41" class=""></path></svg>Glow</span>
                      <span class="rounded bg-white/5 px-1.5 py-0.5 text-slate-400">20%</span>
                    </div>
                    <div class="flex items-center justify-between">
                      <span class="inline-flex items-center gap-1 text-slate-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="layers" class="lucide lucide-layers h-3.5 w-3.5 text-purple-400"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" class=""></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" class=""></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" class=""></path></svg>Blend</span>
                      <span class="rounded bg-white/5 px-1.5 py-0.5 text-slate-400">Overlay</span>
                    </div>
                  </div>
                </div>
              </div>
            </aside>
          </div>
        </div>
      </div>
    </section>