From 96a0017f94e66864fa4f22ce95a8b790ce4fb9f0 Mon Sep 17 00:00:00 2001
From: SquidSpirit <squid@squidspirit.com>
Date: Wed, 23 Jul 2025 04:30:26 +0800
Subject: [PATCH] BLOG-58 feat: add Motto and MottoAnimatedMark components,
 update Terminal and page structure

---
 .../src/lib/home/framework/ui/Motto.svelte    | 20 +++++++++
 .../framework/ui/MottoAnimatedMark.svelte     | 42 +++++++++++++++++++
 .../src/lib/home/framework/ui/Terminal.svelte |  2 +-
 frontend-v2/src/routes/+page.svelte           |  2 +
 4 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 frontend-v2/src/lib/home/framework/ui/Motto.svelte
 create mode 100644 frontend-v2/src/lib/home/framework/ui/MottoAnimatedMark.svelte

diff --git a/frontend-v2/src/lib/home/framework/ui/Motto.svelte b/frontend-v2/src/lib/home/framework/ui/Motto.svelte
new file mode 100644
index 0000000..40fbec0
--- /dev/null
+++ b/frontend-v2/src/lib/home/framework/ui/Motto.svelte
@@ -0,0 +1,20 @@
+<script>
+	import MottoAnimatedMark from './MottoAnimatedMark.svelte';
+</script>
+
+<div
+	class="mx-auto flex h-screen max-w-screen-xl flex-col items-center justify-center gap-y-2.5 px-4 md:gap-y-8 md:px-6"
+>
+	<div
+		class="flex w-[19rem] flex-col gap-y-3 text-3xl font-bold text-gray-800 md:w-[38rem] md:gap-y-4 md:text-6xl"
+	>
+		<div class="flex w-full flex-row items-center justify-start gap-x-2.5">
+			<span>Keep</span>
+			<MottoAnimatedMark text="Learning" direction="left" />
+		</div>
+		<div class="flex w-full flex-row items-center justify-end gap-x-2.5 md:gap-x-4">
+			<MottoAnimatedMark text="Keep" direction="right" />
+			<span>Progressing</span>
+		</div>
+	</div>
+</div>
diff --git a/frontend-v2/src/lib/home/framework/ui/MottoAnimatedMark.svelte b/frontend-v2/src/lib/home/framework/ui/MottoAnimatedMark.svelte
new file mode 100644
index 0000000..ea030e5
--- /dev/null
+++ b/frontend-v2/src/lib/home/framework/ui/MottoAnimatedMark.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte';
+
+	const { text, direction }: { text: string; direction: 'left' | 'right' } = $props();
+
+	let isReady: boolean = $state(false);
+	let origin = $derived(direction === 'left' ? 'origin-left' : 'origin-right');
+
+	let element: HTMLSpanElement | null = null;
+	let observer: IntersectionObserver | null = null;
+
+	onMount(() => {
+		if (!element) {
+			return;
+		}
+
+		observer = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry) => {
+					if (entry.isIntersecting) {
+						isReady = true;
+						observer?.disconnect();
+					}
+				});
+			},
+			{ threshold: 1 }
+		);
+
+		observer.observe(element);
+	});
+
+	onDestroy(() => observer?.disconnect());
+</script>
+
+<span
+	bind:this={element}
+	class="rounded-md bg-blue-600 px-1 py-0.5 text-white transition-transform delay-500 duration-1000 md:rounded-lg md:px-2.5 md:py-2 {origin} {isReady
+		? 'scale-x-100'
+		: 'scale-x-0'}"
+>
+	<span class="scale-x-100">{text}</span>
+</span>
diff --git a/frontend-v2/src/lib/home/framework/ui/Terminal.svelte b/frontend-v2/src/lib/home/framework/ui/Terminal.svelte
index bf86753..e941f07 100644
--- a/frontend-v2/src/lib/home/framework/ui/Terminal.svelte
+++ b/frontend-v2/src/lib/home/framework/ui/Terminal.svelte
@@ -21,7 +21,7 @@
 	let observer: IntersectionObserver | null = null;
 
 	onMount(() => {
-		if (element == null) {
+		if (!element) {
 			return;
 		}
 
diff --git a/frontend-v2/src/routes/+page.svelte b/frontend-v2/src/routes/+page.svelte
index 6268b9c..f2d21c9 100644
--- a/frontend-v2/src/routes/+page.svelte
+++ b/frontend-v2/src/routes/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+	import Motto from '$lib/home/framework/ui/Motto.svelte';
 	import Terminal from '$lib/home/framework/ui/Terminal.svelte';
 	import TitleScreen from '$lib/home/framework/ui/TitleScreen.svelte';
 </script>
@@ -6,4 +7,5 @@
 <div>
 	<TitleScreen />
 	<Terminal />
+    <Motto />
 </div>