Merge pull request #10 from isaxk/dev

bouncer

website/package.json

@@ -24,6 +24,7 @@
   "type": "module",
   "dependencies": {
     "@arisbh/marqueeck": "^0.5.0",
+    "lucide-svelte": "^0.437.0",
     "svelte-inview": "^4.0.2"
   }
 }

website/src/lib/Bouncer.svelte

@@ -0,0 +1,25 @@
+<script>
+  import { ChevronDown } from "lucide-svelte";
+
+</script>
+<div
+  class="absolute bottom-0 left-0 right-0 flex h-10 items-center justify-center"
+>
+  <div class="bounce text-xl"><ChevronDown class="drop-shadow-xl"/></div>
+</div>
+
+<style lang="postcss">
+    .bounce {
+        animation: bouncy 0.5s infinite alternate ease-in-out;
+    }
+
+    @keyframes bouncy {
+        from {
+            transform: translateY(-14px);
+        }
+        to {
+            transform: translateY(0px);
+        }
+    }
+</style>
+

website/src/lib/ThemeMarquee.svelte

@@ -3,36 +3,47 @@
   import { fade, fly } from "svelte/transition";
 
   let images = ["theme1.png", "theme2.png", "theme3.png"];
+
+  export let visible = false;
 </script>
 
 <section
-  class="relative m-auto flex h-96 max-w-screen-lg items-center"
+  class="relative m-auto flex h-96 max-w-screen-md items-center"
   in:fade={{ duration: 200, delay: 0 }}
 >
   <Marqueeck>
     {#each images as image}
-      <img src={image} alt="Theme" class="w-96" />
+      <img
+        src={image}
+        alt="Theme"
+        class="w-96 transition-all duration-500 {visible ? 'opacity-100' : 'opacity-0'}"
+      />
     {/each}
   </Marqueeck>
   <div class="absolute inset-0 flex items-center justify-center">
     <div class="">
-      <div class="flex w-80 flex-col text-6xl font-bold text-white">
-        <div class="shadow-black [text-shadow:_2px_2px_10px_rgb(0_0_0_/_80%)]" in:fly={{duration: 400, x: 50, delay: 200}}>
-          Custom
-        </div>
-        <div
-        in:fly={{duration: 400, x: -50, delay: 300}}
-          class="w-full text-right shadow-black [text-shadow:_2px_2px_10px_rgb(0_0_0_/_80%)]"
-        >
-          Theming
+      {#if visible}
+        <div class="flex w-80 flex-col text-6xl font-bold text-white">
+          <div
+            class="shadow-black [text-shadow:_2px_2px_10px_rgb(0_0_0_/_80%)]"
+            in:fly={{ duration: 400, x: 50, delay: 250 }}
+          >
+            Custom
+          </div>
+          <div
+            in:fly={{ duration: 400, x: -50, delay: 350 }}
+            class="w-full text-right shadow-black [text-shadow:_2px_2px_10px_rgb(0_0_0_/_80%)]"
+          >
+            Theming
+          </div>
         </div>
-      </div>
+      {/if}
     </div>
   </div>
   <div
-    class="absolute -left-6 bottom-0 top-0 w-24 bg-gradient-to-l from-transparent via-20% via-transparent to-neutral-900"
+    class="absolute -left-6 bottom-0 top-0 w-24 bg-gradient-to-l from-transparent via-transparent via-20% to-neutral-900"
   ></div>
   <div
-    class="absolute -right-6 bottom-0 top-0 w-24 bg-gradient-to-r from-transparent via-20% via-transparent to-neutral-900"
+    class="absolute -right-6 bottom-0 top-0 w-24 bg-gradient-to-r from-transparent via-transparent via-20% to-neutral-900"
   ></div>
 </section>

website/src/routes/+layout.svelte

@@ -3,3 +3,4 @@
 </script>
 
 <slot></slot>
+

website/src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Bouncer from "$lib/Bouncer.svelte";
   import ThemeMarquee from "$lib/ThemeMarquee.svelte";
   import { inview } from "svelte-inview";
   import { fly } from "svelte/transition";
@@ -9,7 +10,7 @@
 </script>
 
 <header
-  class="relative flex h-screen items-center justify-center overflow-y-hidden bg-gradient-to-tr from-slate-950 to-emerald-950 text-white"
+  class="relative flex h-screen items-center justify-center overflow-x-hidden overflow-y-hidden bg-gradient-to-tr from-slate-950 to-emerald-950 text-white"
 >
   <div class="w-screen-2xl absolute z-0 m-auto flex flex-col items-end gap-32">
     <img
@@ -34,10 +35,14 @@
       class="rounded bg-white/30 px-6 py-2.5 text-white">Download</a
     >
   </div>
+  <div
+    class="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-b from-transparent via-neutral-900/95 via-80% to-neutral-900"
+  ></div>
+  <Bouncer />
 </header>
 
 <section
-  class="m-auto mt-20 box-content flex h-[240px] max-w-screen-sm flex-col justify-center gap-10 px-10 sm:flex-row sm:gap-20"
+  class="m-auto mt-40 box-content flex h-[240px] max-w-screen-sm flex-col justify-center gap-10 px-10 sm:mt-20 sm:flex-row sm:gap-20"
 >
   {#if sectionVisibility[0]}
     <!-- svelte-ignore a11y-media-has-caption -->
@@ -70,7 +75,7 @@
 ></div>
 
 <section
-  class="m-auto mb-10 mt-40 box-content flex h-[240px] max-w-screen-sm flex-col-reverse justify-center gap-10 px-10 sm:mt-20 sm:flex-row sm:gap-20"
+  class="m-auto mb-10 mt-80 box-content flex h-[240px] max-w-screen-sm flex-col-reverse justify-center gap-10 px-10 sm:mt-32 sm:flex-row sm:gap-20"
 >
   <!-- svelte-ignore a11y-media-has-caption -->
 
@@ -101,10 +106,8 @@
   }}
 ></div>
 
-<div class="h-96">
-  {#if sectionVisibility[2]}
-    <ThemeMarquee />
-  {/if}
+<div class="mt-40 h-96 sm:mt-0">
+  <ThemeMarquee visible={sectionVisibility[2]} />
 </div>
 <div
   use:inview
@@ -115,6 +118,6 @@
 
 <style lang="postcss">
   :global(body) {
-    @apply bg-neutral-900 text-zinc-200;
+    @apply overflow-x-hidden bg-neutral-900 text-zinc-200;
   }
 </style>