init

lib/components/screens/Landing.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+    import UserPanel from '$lib/components/bio/UserPanel.svelte';
+    import socials from '$lib/socials';
+    import Tooltip from '../common/Tooltip.svelte';
+  
+    export let bio: BioSite | undefined = undefined;
+    export let dim: boolean = false;
+  </script>
+  
+  <img
+    class="bg blur-[10vh] brightness-110"
+    class:opacity-30={dim}
+    src="/assets/landing/background-blur.svg"
+    alt="Background blur" />
+  
+  <img
+    class="bg blur-[3.25vh] brightness-125 z-10"
+    class:opacity-30={dim}
+    src="/assets/landing/background-logo.svg"
+    alt="Background logo" />
+  
+  <div class="relative z-20 w-full h-full flex justify-between 2xl:gap-8 px-6 py-12 xs:p-12 sm:p-16 overflow-x-hidden">
+    <div class="w-full h-full flex flex-col justify-between gap-8">
+      <div class="flex flex-col gap-[50px] 2xl:gap-[60px] 3xl:gap-[120px]">
+        <header>
+          <a class="flex gap-2 items-center box-content" href="/">
+            <div class="w-8 h-8 bg-white img logo" title="YourSitee logo" />
+            <p class="text-white text-2xl font-medium">YourSit.ee</p>
+            <div class="w-6 h-[18px] bg-accent img alpha" title="Alpha" />
+          </a>
+        </header>
+        <main class="flex flex-col gap-10">
+          <slot />
+        </main>
+      </div>
+      <footer>
+        <div class="flex flex-col gap-2">
+          <div class="flex gap-2">
+            {#each socials as social}
+              <a href={social.url} target="_blank" aria-label={social.name} class="group">
+                <div class="p-2 group">
+                  <div
+                    class="w-6 h-6 bg-text-clickable group-hover:bg-text-primary transition-colors img social"
+                    style="--url: url({social.icon})" />
+                  <div
+                    class="relative opacity-0 group-hover:opacity-100 -translate-y-5 group-hover:-translate-y-8 transition-all"
+                    aria-hidden="true">
+                    <Tooltip>{social.name}</Tooltip>
+                  </div>
+                </div>
+              </a>
+            {/each}
+          </div>
+          <div class="flex-col gap-2 inline-flex">
+            <div class="text-text-secondary">© YourSitee {new Date(Date.now()).getFullYear()}</div>
+            <div class="flex gap-4">
+              <a href="/privacy">Privacy Policy</a>
+              <a href="/terms">Terms of Service</a>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+    {#if bio}
+      <div class="hidden lg:flex flex-shrink-0 items-end justify-end">
+        <div class="grid">
+          <div class="user-panel">
+            <UserPanel
+              displayName={bio.displayName}
+              username={bio.username}
+              badges={bio.badges}
+              description={bio.description}
+              socials={{ links: [], texts: [], minimal: false, invert: false }}
+              uid={bio.uid}
+              uniqueId={bio.uniqueId}
+              views={null}
+              align={bio.align}
+              location={bio.location ?? undefined} />
+          </div>
+        </div>
+      </div>
+    {/if}
+  </div>
+  
+  <style lang="postcss">
+    .bg {
+      @apply w-screen h-screen fixed top-0 object-cover;
+    }
+  
+    .img {
+      mask-position: center;
+      mask-size: cover;
+      mask-repeat: no-repeat;
+    }
+  
+    .img.logo {
+      mask-image: url(/assets/brand/icon.svg);
+    }
+  
+    .img.alpha {
+      mask-image: url(/assets/brand/alpha.svg);
+    }
+  
+    .img.social {
+      mask-image: var(--url);
+      mask-size: contain;
+    }
+  
+    .grid > div {
+      @apply col-start-1 row-start-1;
+    }
+  
+    .user-panel {
+      @apply w-[350px] xl:w-[400px];
+    }
+  
+    footer a {
+      @apply !text-text-clickable hover:!text-text-primary transition-colors;
+    }
+  </style>
+