<!doctype html>
<html lang="en">
<head>
    
    <link rel="stylesheet" href="/static/unicons.css">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/htmx.org@1.9.12"
            integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2"
            crossorigin="anonymous"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* Unicons font fallback */
        @font-face {
            font-family: 'unicons-line';
            src: url('/fonts/unicons-line.woff2') format('woff2');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }
    </style>
    <title>Fitbutlr</title>

</head>

<body class="bg-gradient-to-br from-slate-50 to-blue-50 min-h-screen">
<!-- Hero Banner sa Unicons -->
<div id="banner"
     class="flex items-center gap-4 bg-gradient-to-r from-blue-500 to-indigo-600 px-6 py-4 sm:px-8 lg:px-12 shadow-2xl mb-12">
    <!-- Wrap the content in an anchor tag -->
    <a href="/" class="flex items-center gap-4 w-full">
        <i class="uil uil-dumbbell text-2xl text-orange-400"></i>
        <div class="flex-1">
            <h2 class="text-white font-bold text-lg sm:text-xl">My FitButlr™ App</h2>
            <p class="text-blue-100 text-sm">AI Smart Fitness Towel</p>
        </div>
        <i class="uil uil-chart-line-up text-xl text-orange-300"></i>
    </a>
</div>

<main class="grid min-h-full place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8">
    <div class="text-center">
        <!-- Subtext -->
        <p class="mt-6 text-base leading-7 text-gray-600">
            Oops. Something went wrong!
        </p>
        <!-- Status Code -->
        <p class="text-base font-semibold text-indigo-600">500 INTERNAL_SERVER_ERROR</p>
        <!-- Main Heading -->
        <h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">
            Internal error, contact our support!
        </h1>
    </div>
</main>

</body>
</html>