<div class="relative min-h-screen flex flex-col md:flex-row bg-slate-900 text-white overflow-hidden font-sans w-full">

<!-- Left Content -->

<div class="w-full md:w-1/2 flex items-center justify-center p-8 md:p-16 lg:p-24 z-10" style="animation: slideInLeft 1s ease-out forwards;">

  <div class="max-w-xl">

    <div class="inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-400 text-sm font-medium mb-6">

      <span class="w-2 h-2 rounded-full bg-indigo-500 animate-pulse"></span>

      <span>New Version 2.0 Released</span>

    </div>

    <h1 class="text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight leading-[1.1] mb-6">

      Create <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400">digital experiences</span> that matter.

    </h1>

    <p class="text-lg md:text-xl text-slate-400 mb-8 leading-relaxed">

      Elevate your brand with our cutting-edge design system. Build faster, scale easier, and deliver unparalleled user experiences.

    </p>

    <div class="flex flex-col sm:flex-row gap-4">

      <button class="px-8 py-4 rounded-full bg-white text-slate-900 font-bold text-lg hover:bg-slate-100 transition-transform hover:-translate-y-1 hover:shadow-xl hover:shadow-white/10 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-slate-900">

        Get Started Free

      </button>

      <button class="px-8 py-4 rounded-full bg-slate-800 text-white font-bold text-lg border border-slate-700 hover:bg-slate-700 hover:border-slate-600 transition-all focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 focus:ring-offset-slate-900 flex items-center justify-center gap-2">

        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>

        Watch Demo

      </button>

    </div>

    

    <div class="mt-12 flex items-center gap-6 text-slate-500 text-sm">

      <div class="flex -space-x-3">

        <img class="w-10 h-10 rounded-full border-2 border-slate-900" src="https://i.pravatar.cc/100?img=1" alt="User 1" />

        <img class="w-10 h-10 rounded-full border-2 border-slate-900" src="https://i.pravatar.cc/100?img=2" alt="User 2" />

        <img class="w-10 h-10 rounded-full border-2 border-slate-900" src="https://i.pravatar.cc/100?img=3" alt="User 3" />

        <div class="w-10 h-10 rounded-full border-2 border-slate-900 bg-slate-800 flex items-center justify-center text-xs font-bold text-white">+2k</div>

      </div>

      <p>Trusted by over 2,000 forward-thinking teams.</p>

    </div>

  </div>

</div>



<!-- Right Visual -->

<div class="w-full md:w-1/2 relative min-h-[50vh] md:min-h-screen" style="animation: slideInRight 1s ease-out forwards;">

  <div class="absolute inset-0 bg-gradient-to-br from-indigo-600 to-purple-800 overflow-hidden">

    <div class="absolute -top-[20%] -right-[10%] w-[70%] h-[70%] rounded-full bg-gradient-to-tr from-pink-500 to-orange-400 blur-3xl opacity-50 mix-blend-overlay"></div>

    <div class="absolute bottom-[10%] -left-[20%] w-[60%] h-[60%] rounded-full bg-gradient-to-tr from-blue-500 to-teal-400 blur-3xl opacity-40 mix-blend-overlay"></div>

    

    <!-- Mockup Window -->

    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[85%] max-w-lg rounded-2xl bg-white/10 backdrop-blur-xl border border-white/20 shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-500">

      <div class="flex items-center px-4 py-3 border-b border-white/10 bg-white/5">

        <div class="flex space-x-2">

          <div class="w-3 h-3 rounded-full bg-red-500"></div>

          <div class="w-3 h-3 rounded-full bg-yellow-500"></div>

          <div class="w-3 h-3 rounded-full bg-green-500"></div>

        </div>

      </div>

      <div class="p-6">

        <div class="h-4 w-1/3 bg-white/20 rounded mb-4"></div>

        <div class="h-8 w-3/4 bg-white/20 rounded mb-6"></div>

        <div class="space-y-3">

          <div class="h-2 w-full bg-white/10 rounded"></div>

          <div class="h-2 w-full bg-white/10 rounded"></div>

          <div class="h-2 w-5/6 bg-white/10 rounded"></div>

        </div>

        <div class="mt-8 flex gap-3">

          <div class="h-10 w-24 bg-indigo-500 rounded-lg"></div>

          <div class="h-10 w-24 bg-white/10 rounded-lg"></div>

        </div>

      </div>

    </div>

  </div>

</div>



<style>
@keyframes slideInLeft {

    from { opacity: 0; transform: translateX(-50px); }

    to { opacity: 1; transform: translateX(0); }

  }

  @keyframes slideInRight {

    from { opacity: 0; transform: translateX(50px); }

    to { opacity: 1; transform: translateX(0); }

  }
</style>

</div>