Prompt Composer with Toolbar and Send Button

<div
  class="md:col-span-7 lg:col-span-8 entrance-animate entrance-animate-delay-3 flex flex-col max-w-3xl text-center h-full pt-16 pr-8 pb-16 pl-8 items-center justify-center"
  style="">
  <h1 class="leading-tight sm:text-7xl lg:text-[96px] text-5xl font-semibold tracking-tight">Design Smarter with
    Sora</h1>

  <p class="sm:text-base text-xl font-normal text-gray-600 max-w-2xl mx-auto py-6">Generate stunning layouts
    instantly and customize them with powerful edits.</p>


  <!-- Prompt Composer -->
  <div class="w-full max-w-2xl mt-8">
    <div class="relative rounded-2xl border border-gray-200 bg-white shadow-sm">
      <textarea class="w-full resize-none border-0 outline-none focus:ring-0 bg-transparent text-base sm:text-lg leading-relaxed text-gray-800 placeholder-gray-400 rounded-2xl p-4 sm:p-6 pr-16 pb-20 min-h-[140px]" placeholder="Create something beautiful..." aria-label="Prompt input"></textarea>

      <!-- Toolbar -->
      <div class="absolute left-4 sm:left-6 bottom-4 sm:bottom-6 flex flex-wrap items-center gap-2 sm:gap-3">
        <button class="inline-flex items-center gap-2 rounded-2xl border border-gray-200 bg-white px-3.5 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50">
          <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 w-4 h-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>
          Prompt Builder
        </button>
        <button class="inline-flex items-center gap-2 rounded-2xl border border-gray-200 bg-white px-3.5 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50">
          <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 w-4 h-4"><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>
          GPT-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="chevron-down" class="lucide lucide-chevron-down w-4 h-4"><path d="m6 9 6 6 6-6" class=""></path></svg>
        </button>
        <button class="inline-flex items-center gap-2 rounded-2xl border border-gray-200 bg-white px-3.5 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50">
          <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="paperclip" class="lucide lucide-paperclip w-4 h-4"><path d="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" class=""></path></svg>
          Attach
        </button>
        <button class="inline-flex items-center justify-center rounded-2xl border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50">
          <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="figma" class="lucide lucide-figma w-4 h-4"><path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z" class=""></path><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z" class=""></path><path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z" class=""></path><path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z" class=""></path><path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z" class=""></path></svg>
        </button>
      </div>

      <!-- Send -->
      <button class="absolute right-4 sm:right-6 bottom-4 sm:bottom-6 h-10 w-10 rounded-full border border-gray-200 bg-white shadow-sm hover:bg-gray-50 text-gray-700 flex items-center justify-center">
        <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="arrow-up" class="lucide lucide-arrow-up w-4 h-4"><path d="m5 12 7-7 7 7" class=""></path><path d="M12 19V5" class=""></path></svg>
      </button>
    </div>
  </div>
</div>