AI Writing App Hero with 3D Dashboard UI

<section class="lg:pt-40 lg:pb-32 overflow-hidden z-10 pt-32 pb-20 relative">
  <div class="lg:px-8 max-w-7xl mr-auto ml-auto pr-6 pl-6">
    <div class="flex flex-col lg:flex-row gap-16 gap-x-16 gap-y-16 items-center">
      <!-- Hero Content -->
      <div class="flex-1 max-w-2xl">
        <div
          class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-orange-500/20 bg-orange-500/5 text-orange-300 text-xs font-medium mb-8 reveal active">
          <span class="relative flex h-2 w-2">
                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75"></span>
          <span class="relative inline-flex rounded-full h-2 w-2 bg-orange-500"></span>
          </span>
          <span class="">Lexora 2.0 · New drafting engine</span>
        </div>

        <!-- Typing title -->

        <div class="min-h-[7rem] sm:min-h-[8rem] lg:min-h-[9rem]">
          <h1
            class="text-5xl sm:text-6xl lg:text-7xl font-serif tracking-tight leading-[1.1] text-white mb-8 font-normal reveal delay-100 active">
            Write
            <br>
            <span class="text-transparent bg-clip-text bg-gradient-to-r from-neutral-200 via-neutral-400 to-neutral-600">
                  <span id="hero-typing-word" class="inline-block border-r border-orange-400 pr-1 mr-1 min-w-[5ch]">smarte</span>
            with Lexora.
            </span>
          </h1>
        </div>

        <p class="text-lg text-neutral-400 mb-10 max-w-lg leading-relaxed reveal delay-200 active">
          Turn rough ideas into polished copy in seconds. Lexora understands
          your brand voice, keeps context across drafts, and helps you
          publish on schedule instead of staring at a blank page.
        </p>

        <div class="flex flex-wrap items-center gap-4 reveal delay-300 active">
          <button class="group shadow-orange-500/30 hover:shadow-orange-500/50 transition-all duration-300 overflow-hidden font-medium text-orange-900 bg-gradient-to-r from-[#FFEBB1] to-[#FFC438] rounded-xl pt-4 pr-8 pb-4 pl-8 relative shadow-lg" style="box-shadow:0 15px 33px -12px rgba(255,162,42,0.9), inset 0 4px 6.3px rgba(252,220,134,1), inset 0 -5px 6.3px rgba(255,162,38,1); border-radius:9999px">
                        <div class="group-hover:translate-y-0 transition-transform duration-300 bg-white/20 absolute top-0 right-0 bottom-0 left-0 translate-y-full"></div>
                        <span class="relative flex items-center gap-2">
                            Start Free Trial
                            <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" data-lucide="send" class="lucide lucide-send w-4 h-4"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" class=""></path><path d="m21.854 2.147-10.94 10.939" class=""></path></svg>
                        </span>
                    </button>
          <button class="h-12 px-8 rounded-full border border-white/10 bg-white/5 text-white font-medium hover:bg-white/10 transition-all flex items-center gap-2 backdrop-blur-sm">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="">
                  <polygon points="5 3 19 12 5 21 5 3"></polygon>
                </svg>
                Watch demo
              </button>
        </div>

        <div class="mt-12 flex items-center gap-4 text-sm text-neutral-500 reveal delay-500 active">
          <div class="flex -space-x-2">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/90ec73f0-6fd3-4d0c-922c-fcc592c983df_320w.webp" alt="" class="w-8 h-8 rounded-full border-2 border-black grayscale opacity-70 object-cover">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/2dbcdf02-39a2-4c13-95f7-3118cc995fa0_320w.webp" alt="" class="w-8 h-8 rounded-full border-2 border-black grayscale opacity-70 object-cover">
            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3e3e1091-f8e8-4022-a02a-fa37a35c59a5_320w.jpg" alt="" class="w-8 h-8 rounded-full border-2 border-black grayscale opacity-70 object-cover" style="">
          </div>
          <p class="">Trusted by 10,000+ content teams</p>
        </div>
      </div>

      <!-- Hero Visual -->
      <div class="flex-1 delay-200 w-full relative perspective-1000 reveal delay-300 active">
        <!-- Main dashboard card -->
        <div
          class="relative z-10 glass-panel rounded-2xl p-1 shadow-2xl transform rotate-y-12 rotate-x-6 hover:rotate-0 transition-transform duration-700 ease-out">
          <div class="bg-neutral-900 rounded-xl overflow-hidden border border-white/5 flex flex-col h-[480px]">
            <!-- Editor Header -->
            <div
              class="flex bg-black/50 h-10 border-white/5 border-b pr-4 pl-4 items-center justify-between shrink-0 z-20 relative">
              <div class="flex gap-1.5">
                <div class="w-2.5 h-2.5 rounded-full bg-red-500/20 border border-red-500/50"></div>
                <div class="w-2.5 h-2.5 rounded-full bg-yellow-500/20 border border-yellow-500/50"></div>
                <div class="w-2.5 h-2.5 rounded-full bg-green-500/20 border border-green-500/50"></div>
              </div>
              <div class="text-xs font-mono text-neutral-500">
                newsletter_weekly.md
              </div>
              <div class="flex items-center gap-2">
                <div class="w-1.5 h-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.5)]"></div>
                <span class="text-[10px] text-neutral-600 uppercase tracking-widest font-semibold">
                      Saved
                    </span>
              </div>
            </div>

            <!-- Editor Body -->
            <div class="p-8 overflow-y-auto font-mono text-sm leading-loose relative h-full scroll-smooth">
              <div class="absolute top-0 right-0 bottom-0 left-0 pointer-events-none"></div>

              <p class="text-neutral-500 mb-4"># Launching Lexora 2.0</p>
              <p class="text-neutral-300 mb-8">
                Great writing doesn’t start from scratch. With Lexora, your
                past campaigns, tone, and structure all live in one
                intelligent workspace. Every new piece of content feels
                consistent, on-brand, and ready to ship.
              </p>

              <p class="text-neutral-500 mb-4">## The Problem</p>
              <p class="text-neutral-300 mb-8">
                Content teams are drowning in Google Docs, Slack threads,
                and endless revision cycles. We realized that the tool
                shouldn't just be a blank page—it should be a partner that
                knows your context. When you write "Our mission," Lexora
                knows exactly what that means.
              </p>

              <!-- AI Suggestion Popover (Attached to content) -->
              <div
                class="float-right ml-4 mb-4 w-64 glass-panel rounded-lg p-4 border border-orange-500/30 shadow-lg shadow-orange-900/20 relative z-10 bg-neutral-900/90 backdrop-blur-md">
                <div class="flex items-center gap-2 mb-2 text-orange-300 text-xs font-medium uppercase tracking-wider">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path
                      d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z">
                    </path>
                  </svg>
                  Suggestion
                </div>
                <p class="text-xs text-neutral-300 mb-3">
                  Want a sharper hook? Try:
                </p>
                <p class="text-xs text-white bg-white/5 p-2 rounded border border-white/10 mb-3 leading-relaxed">
                  “Your next campaign shouldn’t start from a blank page—it
                  should start from everything that already works.”
                </p>
                <div class="flex gap-2">
                  <button class="flex-1 h-6 rounded bg-orange-500 text-black text-[10px] font-bold hover:bg-orange-400 transition-colors">
                        Accept
                      </button>
                  <button class="flex-1 h-6 rounded bg-white/5 text-white text-[10px] hover:bg-white/10 transition-colors">
                        Dismiss
                      </button>
                </div>
              </div>

              <p class="text-neutral-500 mb-4">## Core Capabilities</p>
              <ul class="text-neutral-300 mb-8 list-none pl-0 space-y-3">
                <li class="flex gap-2">
                  <span class="text-orange-500 font-bold">-</span>
                  <span class="">
                        Instantly references your last 50 campaigns to maintain
                        continuity.
                      </span>
                </li>
                <li class="flex gap-2">
                  <span class="text-orange-500 font-bold">-</span>
                  <span class="">
                        Automatically flags language that drifts from your
                        established style guide.
                      </span>
                </li>
                <li class="flex gap-2">
                  <span class="text-orange-500 font-bold">-</span>
                  <span class="">
                        Edit with your team and AI agents simultaneously in the
                        same doc.
                      </span>
                </li>
              </ul>

              <p class="text-neutral-500 mb-4">## Q4 Roadmap</p>
              <p class="text-neutral-300">
                We are just getting started. Upcoming releases:

                <span class="text-neutral-500 text-xs mt-2 block font-mono">
                      [ ] Enterprise API Access [ ] Mobile App (iOS/Android) [ ]
                      Slack Integration [ ] Custom AI Agents
                    </span>
                <span class="inline-block w-2 h-4 bg-orange-500 ml-1 animate-pulse align-middle mt-2"></span>
              </p>

              <div class="h-12"></div>
              <!-- Spacer for scroll -->
            </div>
          </div>
        </div>

        <!-- Floating cards OUTSIDE the dashboard -->
        <!-- Top-left floating status -->
        <div
          class="-left-10 -top-4 glass-panel shadow-black/60 sm:-left-16 sm:top-4 sm:w-48 [--fx-filter:blur(10px)_liquid-glass(0,10)_saturate(1.25)_noise(0.5,1,0)] bg-black/30 w-40 z-20 pointer-events-none border-white/10 border rounded-xl px-4 py-3 absolute shadow-lg backdrop-blur-md">
          <p class="text-[10px] uppercase tracking-[0.18em] text-neutral-400 mb-1">
            Live workspace
          </p>
          <p class="text-xs text-neutral-100 mb-1">Blog calendar · Q2</p>
          <p class="text-[11px] text-orange-300 flex items-center gap-1">
            <span class="relative flex h-2 w-2">
                  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75"></span>
            <span class="relative inline-flex rounded-full h-2 w-2 bg-orange-500"></span>
            </span>
            3 teammates editing
          </p>
        </div>

        <!-- Bottom-right floating metric -->
        <div
          class="-right-10 glass-panel shadow-orange-900/40 sm:-right-16 sm:bottom-6 sm:w-48 bg-black/30 w-40 z-20 pointer-events-none border-orange-500/30 border rounded-xl px-4 py-3 absolute bottom-4 shadow-lg">
          <p class="text-[10px] uppercase tracking-[0.18em] text-orange-400 mb-1">
            This week
          </p>
          <p class="text-xl font-semibold text-white leading-tight">27</p>
          <p class="text-[11px] text-neutral-400">
            publish-ready pieces shipped with Lexora.
          </p>
        </div>

        <!-- Decorative glow behind -->
        <div
          class="absolute -inset-4 bg-gradient-to-r from-orange-500 to-purple-600 opacity-20 blur-3xl -z-10 rounded-full">
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Typing animation script -->
<script class="">
  (function () {
        const el = document.getElementById('hero-typing-word');
        if (!el) return;

        const words = ['smarter', 'faster', 'clearer', 'on-brand'];
        let wordIndex = 0;
        let charIndex = 0;
        let isDeleting = false;

        function type() {
          const word = words[wordIndex % words.length];

          if (isDeleting) {
            charIndex--;
          } else {
            charIndex++;
          }

          el.textContent = word.substring(0, charIndex);

          let delay = isDeleting ? 60 : 110;

          if (!isDeleting && charIndex === word.length) {
            // pause at full word
            delay = 1400;
            isDeleting = true;
          } else if (isDeleting && charIndex === 0) {
            // move to next word
            isDeleting = false;
            wordIndex++;
            delay = 400;
          }

          setTimeout(type, delay);
        }

        // start with empty text so it types in
        el.textContent = '';
        type();
      })();
</script>