SaaS Hero Section

<div class="bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 py-20 px-6">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); * { font-family: 'Inter', 'Helvetica Neue', sans-serif; }</style>
  <div class="max-w-7xl mx-auto text-center">
    <h1 class="text-5xl md:text-6xl font-bold text-gray-900 mb-6 leading-tight">
      <br />
      <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">Faster Than Ever</span>
    </h1>
    <p class="text-xl text-gray-600 mb-8 max-w-3xl mx-auto leading-relaxed">Streamline your workflow with our powerful SaaS platform. Collaborate seamlessly, automate processes, and scale your business with confidence.</p>
    <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
      <button class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4
        rounded-lg font-semibold text-lg transition-all duration-200
        transform hover:scale-105 shadow-lg hover:shadow-xl">Start Free Trial</button>
      <button class="bg-white hover:bg-gray-50 text-gray-800 px-8 py-4 rounded-lg
        font-semibold text-lg transition-all duration-200 border
        border-gray-200 shadow-md hover:shadow-lg">Watch Demo</button>
    </div>
  </div>
</div>