From 826427d0141d20b2dd12822de078d67f48c8e1f2 Mon Sep 17 00:00:00 2001
From: Bao Dang <baochidangg@gmail.com>
Date: Mon, 21 Apr 2025 15:29:45 -0400
Subject: [PATCH 1/5] fix: title animation

---
 src/routes/+page.svelte | 67 +++++++++++++++++++++++++++--------------
 1 file changed, 44 insertions(+), 23 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 996bed8..a7e3f5b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -5,6 +5,7 @@
     import { gsap } from "gsap";
     import { TextPlugin } from "gsap/TextPlugin";
     import { ScrollTrigger } from "gsap/ScrollTrigger";
+    import { cn } from "$lib/utils";
 
     gsap.registerPlugin(TextPlugin);
     gsap.registerPlugin(ScrollTrigger);
@@ -25,6 +26,7 @@
     import ScrollUpButton from "$components/misc/scroll-up-button.svelte";
 
     let { data }: PageProps = $props();
+    let mounted = $state<boolean>(false);
 
     let img1: HTMLElement;
     let img2: HTMLElement;
@@ -63,29 +65,36 @@
     ];
 
     onMount(() => {
-        if (data.user) {
-            goto("/home");
-        }
-
-        // Text animation
+        mounted = true;
         const tl = gsap.timeline();
-        tl.from(".hero-title", {
-            scale: 0.5,
+        // Use query selectors for the words
+        const titleSelectors = [1, 2, 3, 4].map((i) => `.word-${i}`);
+        tl.from(titleSelectors, {
             opacity: 0,
-            duration: 1,
-            ease: "ease.out"
-        });
-        tl.to(".header-3", {
+            y: 10,
+            filter: "blur(10px)",
             duration: 0.5,
+            ease: "ease.out",
+            stagger: 0.2
+        });
+        tl.from(".word-5", {
+            duration: 0.1,
+            opacity: 0
+        });
+        tl.to(".word-5", {
+            duration: 0.3,
             text: "magic",
             ease: "none"
         });
+
         gsap.from([img1, img2], {
             opacity: 0,
             y: 20,
             duration: 1,
-            ease: "ease.out"
+            ease: "ease.out",
+            delay: 0.3
         });
+
         gsap.from(".feature-card", {
             scrollTrigger: {
                 trigger: ".features-section",
@@ -106,22 +115,34 @@
             Head-to-head coding battle with magic
         </h1>
         <div
-            class="hero-title relative mb-4 flex h-32 flex-col gap-2 text-center
-                 text-5xl font-semibold text-neutral-100 md:mb-0 md:text-6xl"
+            aria-hidden="true"
+            class={cn(
+                mounted ? "" : "opacity-0", // Initially hidden until mounted and animated
+                "hero-title relative mb-4 flex h-32 flex-col gap-2 text-center text-5xl font-semibold text-neutral-100 md:mb-0 md:text-6xl"
+            )}
         >
-            <span class="header-1">Head-to-head coding battle</span>
-            <span class="flex w-full justify-center">
-                <span class="header-2">with</span>
+            <div>
+                <span class="word-1 inline-block">Head-to-head</span>
+                <span class="word-2 inline-block">coding</span>
+                <span class="word-3 inline-block">battle</span>
+            </div>
+            <div class="flex w-full justify-center">
+                <span class="word-4 inline-block">with</span>
                 &nbsp;
                 <span
-                    class="header-3 mt-1 rounded-sm bg-rose/10 px-2 font-mono
-                     text-rose shadow-rose text-shadow-center md:mt-1.5"
+                    class="word-5 mt-1 inline-block rounded-sm bg-rose/10 px-2 font-mono
+                         text-rose shadow-rose text-shadow-center md:mt-1.5"
                 ></span>
-            </span>
+            </div>
         </div>
     </div>
     <Button class="text-md font-medium lg:text-lg" href="/practice">Play now</Button>
-    <div class="relative mt-20 flex w-3/4 max-w-[1280px] justify-center lg:w-1/2">
+    <div
+        class={cn(
+            mounted ? "" : "opacity-0",
+            "relative mt-20 flex w-3/4 max-w-[1280px] justify-center lg:w-1/2"
+        )}
+    >
         <div
             bind:this={img1}
             class="-translate-x-6 rounded-sm border-2 border-neutral shadow-xl lg:-translate-x-12"
@@ -135,11 +156,11 @@
             <enhanced:img src={User2} alt="Gameplay" class="rounded-sm object-contain" />
         </div>
     </div>
-    <GradientBlob class="absolute left-0 top-2/3 -z-20 h-1/2 w-full -translate-y-1/2 opacity-50" />
+    <!-- <GradientBlob class="absolute left-0 top-2/3 -z-20 h-1/2 w-full -translate-y-1/2 opacity-50" />
     <GradientBlob
         class="absolute right-0 top-2/3 -z-20 h-1/2 w-1/2 -translate-y-3/4 opacity-50"
         blobClass="bg-amber-200/80"
-    />
+    /> -->
 </section>
 
 <section class="mb-12 flex flex-col items-center overflow-hidden">

From e787e45f46ffc0dde7668628fc26f0d3c162e9ca Mon Sep 17 00:00:00 2001
From: Bao Dang <baochidangg@gmail.com>
Date: Mon, 21 Apr 2025 15:30:21 -0400
Subject: [PATCH 2/5] add page.server.ts for redirect

---
 src/routes/+page.server.ts | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 src/routes/+page.server.ts

diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
new file mode 100644
index 0000000..e69de29

From f2549a1e7bcfdc128f1f8d100fbee30aeb1a8d27 Mon Sep 17 00:00:00 2001
From: Bao Dang <baochidangg@gmail.com>
Date: Mon, 21 Apr 2025 15:31:13 -0400
Subject: [PATCH 3/5] add redirect

---
 src/routes/+page.server.ts | 8 ++++++++
 src/routes/+page.svelte    | 1 -
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index e69de29..582b3d7 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -0,0 +1,8 @@
+import type { PageServerLoad } from "./$types";
+import { redirect } from "@sveltejs/kit";
+
+export const load: PageServerLoad = async ({ locals }) => {
+    if (locals.user) {
+        redirect(302, "/home");
+    }
+};
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a7e3f5b..49a7630 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import type { PageProps } from "./$types";
-    import { goto } from "$app/navigation";
     import { gsap } from "gsap";
     import { TextPlugin } from "gsap/TextPlugin";
     import { ScrollTrigger } from "gsap/ScrollTrigger";

From 67193c1dadccccdb90d4687f59bcd32fa38b3815 Mon Sep 17 00:00:00 2001
From: Bao Dang <baochidangg@gmail.com>
Date: Mon, 21 Apr 2025 15:33:43 -0400
Subject: [PATCH 4/5] fix lint

---
 src/routes/+page.svelte | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 49a7630..e3fa310 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -21,10 +21,9 @@
     } from "$assets/images/landing";
 
     import { Button } from "$components/ui/button";
-    import GradientBlob from "$components/misc/gradient-blob.svelte";
     import ScrollUpButton from "$components/misc/scroll-up-button.svelte";
 
-    let { data }: PageProps = $props();
+    // let { data }: PageProps = $props();
     let mounted = $state<boolean>(false);
 
     let img1: HTMLElement;
@@ -155,11 +154,6 @@
             <enhanced:img src={User2} alt="Gameplay" class="rounded-sm object-contain" />
         </div>
     </div>
-    <!-- <GradientBlob class="absolute left-0 top-2/3 -z-20 h-1/2 w-full -translate-y-1/2 opacity-50" />
-    <GradientBlob
-        class="absolute right-0 top-2/3 -z-20 h-1/2 w-1/2 -translate-y-3/4 opacity-50"
-        blobClass="bg-amber-200/80"
-    /> -->
 </section>
 
 <section class="mb-12 flex flex-col items-center overflow-hidden">

From 2021dbbb9f00cbce05bede68ec717c28e56c8054 Mon Sep 17 00:00:00 2001
From: Bao Dang <baochidangg@gmail.com>
Date: Mon, 21 Apr 2025 17:30:45 -0400
Subject: [PATCH 5/5] fix lint

---
 src/routes/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e3fa310..adccdb0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from "svelte";
-    import type { PageProps } from "./$types";
+    // import type { PageProps } from "./$types";
     import { gsap } from "gsap";
     import { TextPlugin } from "gsap/TextPlugin";
     import { ScrollTrigger } from "gsap/ScrollTrigger";