<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><%= title %></title>
  <link rel="stylesheet" href="/css/tailwind/style.css" />
  <link rel="stylesheet" href="/css/main.css" />
  <link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/express/express-original.svg" type="image/x-icon">
  <script src="https://unpkg.com/@phosphor-icons/web"></script>
</head>

<body class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white min-h-screen flex items-center justify-center px-4">

  <div class="text-center max-w-2xl">
    <!-- Logo Express -->
    <div class="flex justify-center mb-6">
      <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/express/express-original.svg" alt="Express Logo" class="h-16 grayscale invert" />
    </div>

    <h1 class="text-5xl md:text-6xl font-bold mb-4 animate-fade-in">
      <%= title %>
    </h1>

    <p class="text-lg md:text-xl text-gray-300 mb-2 animate-fade-in delay-100">
      Welcome to Express, an Express.js MVC Starter - stylish, fast, and modern.
    </p>
    <p class="text-sm text-gray-400 mb-6 animate-fade-in delay-100">
      Inspired by Laravel and CodeIgniter.
    </p>
    
    <!-- CTA Button -->
    <div class="mt-6">
      <a href="/docs" class="inline-block px-6 py-3 animate-fade-in delay-100 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-xl transition">
        Get Started
      </a>
    </div>

    <!-- Creator Credit -->
    <p class="mt-6 text-sm text-gray-400">Crafted by <span class="font-semibold text-white">Haydar Hilmy A.</span></p>

    <!-- Footer Note -->
    <p class="mt-10 text-xs text-gray-500">Powered by Express.js & TailwindCSS</p>

  </div>

</body>

</html>