BLOG-5 feat: mobile home page first view

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));
 }

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>;
+}

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>