
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8">
  {/* Webchat Styler */}
  <div className="group relative">
    <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-pink-500 to-violet-500 opacity-20 blur transition duration-1000 group-hover:opacity-30 group-hover:duration-200"></div>
    <div className="relative rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 ring-1 ring-slate-900/5 dark:ring-white/10">
      <div className="space-y-4">
        <div className="flex items-center space-x-3">
         
          <h3 className="text-xl font-semibold text-slate-900 dark:text-white">
            🎨 Webchat Styler
          </h3>
        </div>
        <p className="text-slate-600 dark:text-slate-400">
          A visual tool for customizing Botpress webchat appearance. Design and export your custom styles instantly.
        </p>
        <div className="pt-4 flex items-center space-x-4">
          <a 
            href="https://styler.botpress.app/"
            className="inline-flex items-center justify-center px-4 py-2 rounded-lg bg-slate-900 dark:bg-slate-800 text-white text-sm font-medium hover:bg-slate-800 dark:hover:bg-slate-700 transition-colors"
          >
            Try it Live
          </a>
        </div>
      </div>
    </div>
  </div>

  {/* Webchat Playground */}
  <div className="group relative">
    <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-cyan-500 to-blue-500 opacity-20 blur transition duration-1000 group-hover:opacity-30 group-hover:duration-200"></div>
    <div className="relative rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 ring-1 ring-slate-900/5 dark:ring-white/10">
      <div className="space-y-4">
        <div className="flex items-center space-x-3">
       
          <h3 className="text-xl font-semibold text-slate-900 dark:text-white">
            🎮 Webchat Playground
          </h3>
        </div>
        <p className="text-slate-600 dark:text-slate-400">
          Interactive environment for testing and experimenting with Botpress webchat features and configurations.
        </p>
        <div className="pt-4 flex items-center space-x-4">
          <a 
            href="https://learn.botpress.com/webchat-playground"
            className="inline-flex items-center justify-center px-4 py-2 rounded-lg bg-slate-900 dark:bg-slate-800 text-white text-sm font-medium hover:bg-slate-800 dark:hover:bg-slate-700 transition-colors"
          >
            Open Playground
          </a>
        </div>
      </div>
    </div>
  </div>

  {/* Learning Center */}
  <div className="group relative">
    <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-emerald-500 to-green-500 opacity-20 blur transition duration-1000 group-hover:opacity-30 group-hover:duration-200"></div>
    <div className="relative rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 ring-1 ring-slate-900/5 dark:ring-white/10">
      <div className="space-y-4">
        <div className="flex items-center space-x-3">
          <h3 className="text-xl font-semibold text-slate-900 dark:text-white">
            📚 Learning Center
          </h3>
        </div>
        <p className="text-slate-600 dark:text-slate-400">
          Comprehensive educational platform for Botpress, featuring tutorials, guides, and interactive learning materials.
        </p>
        <div className="pt-4 flex items-center space-x-4">
          <a 
            href="https://learn.botpress.com/"
            className="inline-flex items-center justify-center px-4 py-2 rounded-lg bg-slate-900 dark:bg-slate-800 text-white text-sm font-medium hover:bg-slate-800 dark:hover:bg-slate-700 transition-colors"
          >
            Start Learning
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<div className="mt-12 text-sm text-slate-500 dark:text-slate-400">
  <p>These tools are built to help developers and users get the most out of Botpress.</p>
</div>