Create digital experiences that matter.

<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>