hero.html

<div class="relative bg-cover bg-center mx-0 my-0" style="background-image: url('{{ url_for('static', path='asset/Dermafy_Loop.gif') }}');">
    <div class="max-w-screen-xl h-screen flex items-center justify-center z-100 mx-auto">
      <!-- Hero content -->
      <div class="text-center bg-transparent">
        <div class="pt-32 pb-12 md:pt-40 md:pb-20">
          <!-- Section header -->
          <h4 class="text-gray-800 text-3xl md:text-5xl font-extrabold leading-tighter tracking-tighter mb-4">
            Welcome To
          </h4>
          <h1 class="text-6xl md:text-9xl font-extrabold tracking-tight mb-4" 
          style="background-clip: text; -webkit-background-clip: text; color: transparent;
          background-image: linear-gradient(to right, #2563eb, #2dd4bf);">
          DERMAFY
        </h1>
          <div class="max-w-3xl mx-auto">
            <p class="text-xl text-gray-600 mb-8 p-1">
              Innovative AI Skin Disease Diagnosis Application
            </p>
            <div class="max-w-xs mx-auto sm:max-w-none sm:flex sm:justify-center">
              <div>
                <a id="startNow" class="bg-blue-500 border-solid border-2 border-transparent hover:border-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-2"
                  href="#content">
                  Start Now
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.getElementById('startNow').addEventListener('click', function(event) {
      window.location.href = "/"; // Redirect to the homepage ("/") when the button is clicked
      window.location.reload(); // Reload the page
      window.location.href = "/#content"; // Redirect to the homepage ("/") when the button is clicked
    });
  </script>