Safari Fix and Landing Page

src/lib/components/recal/Left.svelte

@@ -5,7 +5,7 @@
     import Events from "./left/Events.svelte";
 </script>
 
-<div class="w-full flex flex-col max-h-full overflow-y-hidden">
+<div class="w-full flex flex-col h-full overflow-y-hidden">
     <div>
         <SearchBar />
     </div>
@@ -44,7 +44,7 @@
     }
 
     section > div {
-        height: fit-content;
+        /* height: fit-content; */
         max-height: 100%;
         @apply overflow-y-hidden flex flex-col;
     }

src/routes/(landing)/(info)/contact/+page.svelte

@@ -2,7 +2,7 @@
     <title>TigerJunction | Contact</title>
 </svelte:head>
 
-<div class="h-fit w-full px-4 pb-8 pt-4 max-w-7xl text-center">
+<div class="h-fit w-full px-4 pb-8 pt-4 max-w-7xl mt-16 text-center">
     <h1 class="text-3xl mb-2 font-bold">Contact Us</h1>
 
     <p class="mb-2">

src/routes/(landing)/(info)/privacy/+page.svelte

@@ -2,7 +2,7 @@
     <title>TigerJunction | Privacy Policy</title>
 </svelte:head>
 
-<div class="text-left h-fit w-full px-4 pb-8 pt-4 max-w-7xl">
+<div class="text-left h-fit w-full px-4 pb-8 mt-16 pt-4 max-w-7xl">
     <h1 class="text-3xl mb-2 font-bold">Privacy Policy</h1>
 
     <p>

src/routes/(landing)/(info)/tos/+page.svelte

@@ -2,7 +2,7 @@
     <title>TigerJunction | Terms of Service</title>
 </svelte:head>
 
-<div class="text-left h-fit w-full px-4 pb-8 pt-4 max-w-7xl">
+<div class="text-left h-fit w-full px-4 pb-8 pt-4 mt-16 max-w-7xl">
     <h1 class="text-3xl mb-2 font-bold">Terms of Service</h1>
 
     <p>

src/routes/(landing)/LandingFooter.svelte

@@ -2,7 +2,7 @@
     <div
         class="text-center text-zinc-500 text-sm
     flex items-center justify-center gap-4">
-        <div>© 2024 TigerJunction</div>
+        <div>© 2024 TigerApps</div>
         <a
             href="https://github.com/TigerAppsOrg/tiger-junction"
             target="_blank">

src/routes/(landing)/LandingHeader.svelte

@@ -1,50 +1,107 @@
 <script lang="ts">
     import { handleLogin } from "$lib/scripts/supabase";
     import type { SupabaseClient } from "@supabase/supabase-js";
+    import { page } from "$app/stores";
+    import { goto } from "$app/navigation";
 
     export let supabase: SupabaseClient;
 </script>
 
-<div class="max-w-7xl px-4 sm:px-6 lg:px-8 w-full">
-    <nav class="flex items-center justify-between flex-wrap">
-        <a href="/" class="flex items-center flex-shrink-0 text-black mr-6">
+<div
+    class="max-w-7xl mx-4 px-4 py-2 w-11/12 bg-white rounded-2xl
+    fixed shadow-md z-50">
+    <nav class="grid grid-cols-3">
+        <a
+            href="/"
+            on:click|preventDefault={() => {
+                if ($page.url.pathname === "/") {
+                    document.getElementById("main")?.scrollIntoView({
+                        behavior: "smooth"
+                    });
+                } else {
+                    goto("/");
+                }
+            }}
+            class="flex items-center flex-shrink-0 gap-1 text-black mr-6">
             <img
                 src="/tjlogonew.png"
                 alt="Tiger Junction logo"
-                class="w-12 h-12" />
+                class="w-10 h-10" />
             <span class="font-semibold text-xl tracking-tight"
                 >TigerJunction</span>
         </a>
-        <div class="flex-grow flex items-center w-auto">
-            <div class="text-sm flex-grow">
-                <!-- <a href="/about" class="link">
-                About
-            </a>
-            <a href="/developer" class="link">
-                API
-            </a>
-            <a href="/blog" class="link">
-                Blog
-            </a>
-            <a href="/contact" class="link">
-                Contact
-            </a> -->
-            </div>
-            <div>
-                <button
-                    on:click={() => handleLogin(supabase)}
-                    class="inline-block text-sm px-4 py-2 leading-none border rounded
-             text-black border-black hover:text-zinc-600
-            hover:border-zinc-600">
-                    Login
-                </button>
-            </div>
+        <div
+            class="items-center justify-center lg:gap-8 gap-4 flex invisible sm:visible">
+            {#if $page.url.pathname === "/"}
+                <a
+                    href="/#about"
+                    on:click|preventDefault={() => {
+                        document.getElementById("about")?.scrollIntoView({
+                            behavior: "smooth"
+                        });
+                    }}
+                    class="nav-link">
+                    About
+                </a>
+                <a
+                    href="/#features"
+                    on:click|preventDefault={() => {
+                        document.getElementById("features")?.scrollIntoView({
+                            behavior: "smooth"
+                        });
+                    }}
+                    class="nav-link">
+                    Features
+                </a>
+                <!-- <a
+                    href="/#contact"
+                    on:click|preventDefault={() => {
+                        document.getElementById("contact")?.scrollIntoView({
+                            behavior: "smooth"
+                        });
+                    }}
+                    class="nav-link">
+                    Contact
+                </a> -->
+            {/if}
+        </div>
+        <div class="flex items-center justify-end">
+            <button
+                on:click={() => handleLogin(supabase)}
+                class="bg-indigo-600 hover:bg-indigo-500 text-white
+                    text-center px-4 py-2 rounded-lg font-bold
+                     duration-100">
+                Log In
+            </button>
         </div>
     </nav>
 </div>
 
 <style lang="postcss">
-    /* .link {
-        @apply inline-block mt-0 text-black hover:text-zinc-600 mr-4;
-    } */
+    nav {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+
+    .nav-link {
+        position: relative;
+        text-decoration: none;
+    }
+
+    .nav-link::after {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 2px;
+        bottom: 0;
+        left: 0;
+        transform: scaleX(0);
+        transform-origin: bottom right;
+        transition: transform 0.3s ease-out;
+        @apply bg-indigo-600;
+    }
+
+    .nav-link:hover::after {
+        transform: scaleX(1);
+        transform-origin: bottom left;
+    }
 </style>