feat: "add title"

package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tanstack/react-table": "^8.10.7",
+    "animate.css": "^4.1.1",
     "canvas-confetti": "^1.6.0",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.3.2",

src/components/Header/index.tsx

@@ -5,7 +5,7 @@ import { NavLink } from 'react-router-dom'
 
 const Header: React.FC<PropsWithChildren> = ({ children }) => {
   return (
-    <header className="container z-20 mx-auto w-full px-10 py-6">
+    <header className="container  z-20 mx-auto w-full px-10 py-6">
       <div className="flex w-full flex-col items-center justify-between space-y-3 lg:flex-row lg:space-y-0">
         <NavLink
           className="flex items-center text-2xl font-bold text-indigo-500 no-underline hover:no-underline lg:text-4xl"

src/index.css

@@ -162,3 +162,32 @@ body,
     filter: hue-rotate(-1turn);
   }
 }
+
+@keyframes typing {
+  from {
+    width: 0;
+  }
+  to {
+    width: 30em;
+  } /* 调整为字符总数的一半 */
+}
+
+@keyframes blink-caret {
+  from,
+  to {
+    border-color: transparent;
+  }
+  50% {
+    border-color: #f0f0f0;
+  }
+}
+
+.typewriter {
+  width: 30em; /* 调整为字符总数的一半 */
+  margin: 0 auto;
+}
+@keyframes hideCaret {
+  to {
+    border-right-color: transparent;
+  }
+}

src/index.tsx

@@ -4,6 +4,7 @@ import { ErrorBook } from './pages/ErrorBook'
 import MobilePage from './pages/Mobile'
 import TypingPage from './pages/Typing'
 import { isOpenDarkModeAtom } from '@/store'
+import 'animate.css'
 import { useAtomValue } from 'jotai'
 import React, { Suspense, lazy, useEffect, useState } from 'react'
 import 'react-app-polyfill/stable'

src/pages/Mobile/flow.tsx

@@ -6,7 +6,7 @@ const Flow: React.FC = () => {
   }
 
   return (
-    <div className="h-[12rem] w-full">
+    <div className="h-[15rem] w-full">
       <svg className="h-full w-full rotate-180 transform" viewBox="0 24 150 24" preserveAspectRatio="none">
         <defs>
           <path id="wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v60h-352z" />

src/pages/Mobile/index.tsx

@@ -1,10 +1,49 @@
 import Flow from './flow'
+import logo from '@/assets/logo.svg'
 import type React from 'react'
 
 const MobilePage: React.FC = () => {
   return (
-    <div className="flex h-screen w-screen  ">
-      <Flow />
+    <div className="flex h-screen w-screen flex-col">
+      <section className="flex items-center justify-center py-2 shadow-md">
+        <img src={logo} className="mr-3 h-16 w-16" alt="Qwerty Learner Logo" />
+        <h1 className="text-2xl font-bold text-primary">Qwerty Learner</h1>
+      </section>
+
+      <section className="relative">
+        <Flow />
+        <div className="absolute top-10  flex w-full  flex-col items-center justify-center">
+          <h1 className="animate__animated animate__zoomIn bg-gradient-to-b from-white to-[#dee0ff] bg-clip-text text-3xl font-bold text-transparent">
+            为键盘工作者设计的软件
+          </h1>
+          <h2
+            className="animate__animated animate__zoomIn   mt-5 text-[10px] font-bold text-[#f0f0f0]"
+            style={{
+              textShadow: '1px 1px 2px #9c9ea3',
+            }}
+          >
+            简化英语学习与打字技能提升过程，快速建立正确的肌肉记忆
+          </h2>
+          <h2
+            className="typewriter !mt-3 text-[10px] font-bold text-[#f0f0f0]"
+            style={{
+              textShadow: '1px 1px 2px #9c9ea3',
+              overflow: 'hidden',
+              borderRight: '0.15em solid #f0f0f0',
+              whiteSpace: 'nowrap',
+              display: 'inline-block',
+              animation: 'typing 3s steps(50), blink-caret 0.75s step-end 4, hideCaret 0s 3s forwards',
+            }}
+          >
+            单词记忆与键盘输入相结合、音标发音与默写模式、多样化词库选择
+          </h2>
+          <div className="mt-8 flex h-[50px] items-center rounded-[20px] bg-primary px-[15px] text-xl font-bold text-white shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-2px_rgba(0,0,0,0.1)]">
+            电脑端使用
+          </div>
+        </div>
+      </section>
+
+      <section></section>
     </div>
   )
 }

tailwind.config.js

@@ -4,6 +4,9 @@ module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx}', './index.html'],
   theme: {
     extend: {
+      colors: {
+        primary: '#6366f1',
+      },
       keyframes: {
         'accordion-down': {
           from: { height: 0 },

yarn.lock

@@ -2414,6 +2414,11 @@ ajv@^6.10.0, ajv@^6.12.4:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+animate.css@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
+  integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
+
 ansi-escapes@^4.3.0:
   version "4.3.2"
   resolved "https://registry.npmmirror.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz"