Gradient Hero Section with CTA Buttons

<section class="relative">
      <div class="max-w-7xl sm:px-6 lg:px-8 mr-auto ml-auto pr-4 pb-8 pl-4">
        <div class="grid gap-10 pt-4 md:grid-cols-12 md:gap-8 md:pt-8">
          <div class="md:col-span-7 lg:col-span-8">
            <h2 class="leading-tight sm:text-6xl lg:text-7xl text-5xl font-semibold text-white tracking-tight">
              <span class="block bg-clip-text font-light text-transparent font-bricolage bg-gradient-to-r from-violet-400 to-indigo-600 pb-2" style="">Say it. Share it.</span>
              <span class="block bg-clip-text text-transparent bg-gradient-to-r from-violet-400 to-indigo-600 pb-2 font-bricolage font-light" style="">Ship it.</span>
            </h2>
            <div class="mt-6 flex items-center gap-4 text-sm text-slate-300">
              <div class="flex items-center gap-2 font-sans" style="">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5 text-violet-300"><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>
                Realtime
              </div>
              <div class="h-px w-24 bg-white/10"></div>
              <div class="flex items-center gap-2 font-sans" style="">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5 text-violet-300"><rect x="3" y="11" width="18" height="11" rx="2" class=""></rect><path d="M7 11V7a5 5 0 0 1 10 0v4" class=""></path></svg>
                Private by default
              </div>
            </div>
          </div>
          <div class="md:col-span-5 lg:col-span-4">
            <p class="text-base leading-relaxed text-slate-300 font-sans" style="">Start chatting with your team in minutes. Invite, create channels, share files, and let AI keep everyone aligned.</p>
            <div class="mt-6 flex items-center gap-3">
              <button class="inline-flex items-center gap-2 shadow-violet-900/25 text-sm font-semibold text-white bg-gradient-to-br from-violet-500 to-indigo-600 rounded-full pt-2.5 pr-5 pb-2.5 pl-5 shadow-lg transform-gpu transition-all duration-300 ease-out hover:-translate-y-0.5 hover:shadow-[0_12px_24px_-6px_rgba(139,92,246,0.4)] hover:scale-[1.02] active:scale-[0.98] active:duration-75 font-sans" style="">
                Create workspace
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
              </button>
              <button class="inline-flex items-center gap-2 rounded-full px-5 py-2.5 text-sm font-medium text-zinc-200 hover:bg-white/5 border border-white/10 font-sans" style="">
                Compare plans
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><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>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>