From d76f54b2b1d181137086630bfe82ace1a9a75c47 Mon Sep 17 00:00:00 2001
From: Zoe <7711zoe@gmail.com>
Date: Sat, 18 Jan 2025 00:24:32 +0800
Subject: [PATCH] BLOG-5 feat: mobile home page first view

---
 frontend/src/app/globals.css      |  5 ++++-
 frontend/src/app/page.tsx         | 34 ++++++++++++++++++++++++++++++-
 frontend/src/ui/layout/navbar.tsx |  2 +-
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 7502d79..034d269 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -3,5 +3,8 @@
 @tailwind utilities;
 
 body {
-  @apply bg-white text-gray-600;
+  @apply bg-white text-base font-normal text-gray-600;
+
+  --tool-bar-height: 4rem;
+  --content-height: calc(100vh - var(--tool-bar-height));
 }
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 66e7168..d68c76d 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,5 +1,37 @@
 export default function HomePage() {
   return (
-    <div></div>
+    <div className="flex min-h-[--content-height] flex-col justify-center gap-y-2.5 px-4">
+      <h2 className="text-3xl font-bold text-gray-800">Hello 大家好！</h2>
+      <h1 className="flex flex-row items-center gap-x-2 text-4xl font-bold text-gray-800">
+        <span>我是</span>
+        <div className="rounded-lg bg-blue-600 px-1.5 py-1">
+          <span className="text-white">Squid</span>
+        </div>
+        <span>魷魚</span>
+      </h1>
+      <div className="relative">
+        <div className="absolute inset-0 bg-gradient-to-r from-transparent via-transparent via-60% to-white" />
+        <div className="flex flex-row items-center gap-x-2 overflow-hidden">
+          <Hashtag tag="React" />
+          <Hashtag tag="React" />
+          <Hashtag tag="React" />
+          <Hashtag tag="React" />
+          <Hashtag tag="React" />
+          <Hashtag tag="React" />
+          <Hashtag tag="React" />
+          <Hashtag tag="React" />
+          <Hashtag tag="React" />
+          <Hashtag tag="React" />
+          <Hashtag tag="React" />
+          <Hashtag tag="React" />
+          <Hashtag tag="React" />
+          <Hashtag tag="React" />
+        </div>
+      </div>
+    </div>
   );
 }
+
+function Hashtag(props: { tag: string }) {
+  return <span className="text-nowrap text-gray-400"># {props.tag}</span>;
+}
diff --git a/frontend/src/ui/layout/navbar.tsx b/frontend/src/ui/layout/navbar.tsx
index 49893fe..040610c 100644
--- a/frontend/src/ui/layout/navbar.tsx
+++ b/frontend/src/ui/layout/navbar.tsx
@@ -5,7 +5,7 @@ type Props = {};
 export default function Navbar({}: Props) {
   return (
     <div className="border-b border-gray-300">
-      <div className="mx-auto flex h-16 max-w-screen-xl flex-row items-center justify-between px-4 md:px-6">
+      <div className="mx-auto flex h-[--tool-bar-height] max-w-screen-xl flex-row items-center justify-between px-4 md:px-6">
         <a className="text-2xl font-black text-gray-800" href="/">
           魚之魷魂
         </a>