fix completely broken layout even if things seemingly work

[jarlah]

<div id="flash-group">

  <div id="client-error" phx-click="[[&quot;push&quot;,{&quot;event&quot;:&quot;lv:clear-flash&quot;,&quot;value&quot;:{&quot;key&quot;:&quot;error&quot;}}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#client-error&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;,&quot;translate-y-0&quot;,&quot;sm:scale-100&quot;],[&quot;opacity-0&quot;,&quot;translate-y-4&quot;,&quot;sm:translate-y-0&quot;,&quot;sm:scale-95&quot;]]}]]" role="alert" class="fixed top-2 right-2 mr-2 w-80 sm:w-96 z-50 rounded-lg p-3 ring-1 bg-rose-50 text-rose-900 shadow-md ring-rose-500 fill-rose-900" hidden phx-connected="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#client-error&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;,&quot;translate-y-0&quot;,&quot;sm:scale-100&quot;],[&quot;opacity-0&quot;,&quot;translate-y-4&quot;,&quot;sm:translate-y-0&quot;,&quot;sm:scale-95&quot;]]}]]" phx-disconnected="[[&quot;show&quot;,{&quot;time&quot;:300,&quot;to&quot;:&quot;.phx-client-error #client-error&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-out&quot;,&quot;duration-300&quot;],[&quot;opacity-0&quot;,&quot;translate-y-4&quot;,&quot;sm:translate-y-0&quot;,&quot;sm:scale-95&quot;],[&quot;opacity-100&quot;,&quot;translate-y-0&quot;,&quot;sm:scale-100&quot;]]}]]">
  <p class="flex items-center gap-1.5 text-sm font-semibold leading-6">

    <span class="hero-exclamation-circle-mini h-4 w-4"></span>
    We can&#39;t find the internet
  </p>
  <p class="mt-2 text-sm leading-5">
    Attempting to reconnect
    <span class="hero-arrow-path ml-1 h-3 w-3 animate-spin"></span>
  </p>
  <button type="button" class="group absolute top-1 right-1 p-2" aria-label="close">
    <span class="hero-x-mark-solid h-5 w-5 opacity-40 group-hover:opacity-70"></span>
  </button>
</div>

  <div id="server-error" phx-click="[[&quot;push&quot;,{&quot;event&quot;:&quot;lv:clear-flash&quot;,&quot;value&quot;:{&quot;key&quot;:&quot;error&quot;}}],[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#server-error&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;,&quot;translate-y-0&quot;,&quot;sm:scale-100&quot;],[&quot;opacity-0&quot;,&quot;translate-y-4&quot;,&quot;sm:translate-y-0&quot;,&quot;sm:scale-95&quot;]]}]]" role="alert" class="fixed top-2 right-2 mr-2 w-80 sm:w-96 z-50 rounded-lg p-3 ring-1 bg-rose-50 text-rose-900 shadow-md ring-rose-500 fill-rose-900" hidden phx-connected="[[&quot;hide&quot;,{&quot;time&quot;:200,&quot;to&quot;:&quot;#server-error&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-in&quot;,&quot;duration-200&quot;],[&quot;opacity-100&quot;,&quot;translate-y-0&quot;,&quot;sm:scale-100&quot;],[&quot;opacity-0&quot;,&quot;translate-y-4&quot;,&quot;sm:translate-y-0&quot;,&quot;sm:scale-95&quot;]]}]]" phx-disconnected="[[&quot;show&quot;,{&quot;time&quot;:300,&quot;to&quot;:&quot;.phx-server-error #server-error&quot;,&quot;transition&quot;:[[&quot;transition-all&quot;,&quot;transform&quot;,&quot;ease-out&quot;,&quot;duration-300&quot;],[&quot;opacity-0&quot;,&quot;translate-y-4&quot;,&quot;sm:translate-y-0&quot;,&quot;sm:scale-95&quot;],[&quot;opacity-100&quot;,&quot;translate-y-0&quot;,&quot;sm:scale-100&quot;]]}]]">
  <p class="flex items-center gap-1.5 text-sm font-semibold leading-6">

    <span class="hero-exclamation-circle-mini h-4 w-4"></span>
    Something went wrong!
  </p>
  <p class="mt-2 text-sm leading-5">
    Hang in there while we get back on track
    <span class="hero-arrow-path ml-1 h-3 w-3 animate-spin"></span>
  </p>
  <button type="button" class="group absolute top-1 right-1 p-2" aria-label="close">
    <span class="hero-x-mark-solid h-5 w-5 opacity-40 group-hover:opacity-70"><[/](view-source:https://journiplan.fly.dev/)span>
  </button>
</div>
</div>

<header class="header">
  <nav class="nav-container">
    <div class="logo">
      <a href="/" class="text-black no-underline">JourniPlan</a>
    </div>
    <ul class="nav-links">
      <li><a href="[#features](view-source:https://journiplan.fly.dev/#features)">Features</a></li>
      <li><a href="[#pricing](view-source:https://journiplan.fly.dev/#pricing)">Pricing</a></li>
      <li><a href="[#about](view-source:https://journiplan.fly.dev/#about)">About</a></li>
      <li><a href="[#contact](view-source:https://journiplan.fly.dev/#contact)">Contact</a></li>

        <!-- Guest User Options -->
        <li>
          <a href="[/users/register](view-source:https://journiplan.fly.dev/users/register)" class="nav-links-a">
            Register
          </a>
        </li>
        <li>
          <a href="[/users/log_in](view-source:https://journiplan.fly.dev/users/log_in)" class="nav-links-a">
            Log in
          </a>
        </li>

    </ul>
  </nav>
</header>
<!DOCTYPE html>
<html lang="en" class="[scrollbar-gutter:stable]">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="Bz1YF3MIFD01JDoCOCQJTwAAEwITMz0MXYiY6q-XvkuOkVHvvCDMwgT9">
    <title data-suffix=" · Phoenix Framework">
JourniPlan
     · Phoenix Framework</title>
    <link phx-track-static rel="stylesheet" href="[/assets/app-dc1839f3b6352d27d3c73428c2df3d5f.css?vsn=d](view-source:https://journiplan.fly.dev/assets/app-dc1839f3b6352d27d3c73428c2df3d5f.css?vsn=d)">
    <script defer phx-track-static type="text/javascript" src="[/assets/app-f016f8e6984cdb0287c9669d44444c1f.js?vsn=d](view-source:https://journiplan.fly.dev/assets/app-f016f8e6984cdb0287c9669d44444c1f.js?vsn=d)">
    </script>
  </head>
  <body class="bg-white">
<div class="min-h-screen bg-gray-50 py-10">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h1 class="text-3xl font-bold text-center text-gray-900 mb-8">
      Your Itineraries
    </h1>

      <div class="bg-white shadow-lg rounded-lg p-6 max-w-md mx-auto text-center">
        <h2 class="text-xl font-semibold text-gray-900 mb-4">
          Welcome to JourniPlan!
        </h2>
        <p class="text-gray-700 mb-4">
          Please log in to view your itineraries and make the most of your travel planning.
        </p>
        <a href="[/users/log_in](view-source:https://journiplan.fly.dev/users/log_in)" class="inline-block bg-indigo-600 text-white font-medium py-2 px-4 rounded hover:bg-indigo-700">
          Log In
        </a>
      </div>

  </div>
</div>
  </body>
</html>

<footer class="footer">
  <div class="container">
    <p>&copy; 2024 JourniPlan. All rights reserved.</p>
    <ul class="footer-links">
      <li><a href="[/privacy-policy](view-source:https://journiplan.fly.dev/privacy-policy)">Privacy Policy</a></li>
      <li><a href="[/terms-of-service](view-source:https://journiplan.fly.dev/terms-of-service)">Terms of Service</a></li>
      <li><a href="[https://twitter.com/journi_plan](view-source:https://twitter.com/journi_plan)">Twitter</a></li>
      <li><a href="[https://facebook.com/journi_plan](view-source:https://facebook.com/journi_plan)">Facebook</a></li>
    </ul>
  </div>
</footer>

[jarlah]

i guess we have just placed the contents in the wrong layout file or sumtin ... ;O)

[Mian-Ahmed-Raza]

you want that is should be displayed correctly means to apply css on it ?

[jarlah]

ah sorry, i was too fast :) But im done for now. had a rage of prs and commits to fix a couple of things

[jarlah]

There are other issues to work on, take a look. Now we can showcase it with the fly link 💪