diff --git a/src/components/stateless/TagCloud/index.jsx b/src/components/stateless/TagCloud/index.jsx
index 0637947d..811d23cc 100644
--- a/src/components/stateless/TagCloud/index.jsx
+++ b/src/components/stateless/TagCloud/index.jsx
@@ -2,31 +2,64 @@ import React from 'react'
 import styles from './index.module.less'
 
 const TagCloud = () => {
-
   return (
-    <div className="relative flex flex-col items-center justify-center overflow-hidden">
-      <div className="not-prose my-5 w-full">
-        <ul className="flex w-full flex-wrap items-center justify-center gap-3">
-          <li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">'use server'</li>
-          <li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">useOptimistic</li>
-          <li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">React Server Components</li>
-          <li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">Concurrent Rendering</li>
-          <li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">useActionState</li>
-          <li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">Improved Hydration</li>
-          <li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">Form Actions</li>
-          <li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">Server Actions</li>
-          <li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">Suspense</li>
-          <li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">'use client'</li>
-          <li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">useTransition</li>
-          <li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">React Compiler</li>
-          <li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">Streaming</li>
-          <li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">useFormStatus</li>
-          <li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">New React Hooks</li>
-          <li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">use()</li>
-          <li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">Automatic Memoization</li>
+    <div className='relative flex flex-col items-center justify-center overflow-hidden'>
+      <div className='not-prose my-5 w-full'>
+        <ul className='flex w-full flex-wrap items-center justify-center gap-3'>
+          <li className='flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg'>
+            'use server'
+          </li>
+          <li className='flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg'>
+            useOptimistic
+          </li>
+          <li className='flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg'>
+            React Server Components
+          </li>
+          <li className='flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg'>
+            Concurrent Rendering
+          </li>
+          <li className='flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg'>
+            useActionState
+          </li>
+          <li className='flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg'>
+            Improved Hydration
+          </li>
+          <li className='flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg'>
+            Form Actions
+          </li>
+          <li className='flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg'>
+            Server Actions
+          </li>
+          <li className='flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg'>
+            Suspense
+          </li>
+          <li className='flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg'>
+            'use client'
+          </li>
+          <li className='flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg'>
+            useTransition
+          </li>
+          <li className='flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg'>
+            React Compiler
+          </li>
+          <li className='flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg'>
+            Streaming
+          </li>
+          <li className='flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg'>
+            useFormStatus
+          </li>
+          <li className='flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg'>
+            New React Hooks
+          </li>
+          <li className='flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg'>
+            use()
+          </li>
+          <li className='flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg'>
+            Automatic Memoization
+          </li>
         </ul>
       </div>
-      <div className={styles.mask}></div>
+      <div className={styles.mask} />
     </div>
   )
 }
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 47e883d9..ac3d6ccc 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -85,8 +85,8 @@ const Home = () => {
       [
         {
           content: text,
-          role: 'user',
-        },
+          role: 'user'
+        }
       ],
       key,
       signal
@@ -173,36 +173,32 @@ const Home = () => {
         I love coding in <AlternatingText alternateText={['javascript', 'typescript', 'rect', 'vue']} />.
       </section>
       <section style={{ marginBottom: 40 }}>
-        <AutoLink text="foo bar baz http://example.org bar https://github.com/wkylin/pro-react-admin" />
+        <AutoLink text='foo bar baz http://example.org bar https://github.com/wkylin/pro-react-admin' />
       </section>
-      <section className={styles.line}></section>
+      <section className={styles.line} />
       <section>
-        <AvatarCard avatar="https://picsum.photos/seed/picsum/300/160" text="Hi, I'm a developer." />
+        <AvatarCard avatar='https://picsum.photos/seed/picsum/300/160' text="Hi, I'm a developer." />
       </section>
       <section>
-        <IsometricCard text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti repellat, consequuntur doloribus voluptate esse iure?" />
+        <IsometricCard text='Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti repellat, consequuntur doloribus voluptate esse iure?' />
       </section>
       <StarRating value={2} />
-      <LineBordered text="A line bordered text." />
+      <LineBordered text='A line bordered text.' />
       <section style={{ display: 'flex', alignItems: 'center', marginTop: 10, marginBottom: 40 }}>
         <Atom /> <Merge /> <GitMerge /> <GitPullRequestArrow />
       </section>
       <section style={{ marginBottom: 40 }}>
         <ScrollAnimation>
-          <LazyLoadImage src="https://picsum.photos/seed/picsum/300/160" alt="Strawberries" />
+          <LazyLoadImage src='https://picsum.photos/seed/picsum/300/160' alt='Strawberries' />
         </ScrollAnimation>
       </section>
       <section style={{ marginBottom: 40, fontSize: 36 }}>
         <Typewriter
           options={{
-            strings: [
-              "Software Developer.",
-              "Full Stack Developer.",
-              "Open Source Contributor.",
-            ],
+            strings: ['Software Developer.', 'Full Stack Developer.', 'Open Source Contributor.'],
             autoStart: true,
             loop: true,
-            deleteSpeed: 50,
+            deleteSpeed: 50
           }}
         />
       </section>
@@ -228,26 +224,25 @@ const Home = () => {
       </section>
       <section style={{ marginBottom: 40 }}>
         <AnimateOnScreen.FadeIn>
-          <AvatarCard avatar="https://picsum.photos/seed/picsum/300/160" text="Hi, I'm a developer." />
+          <AvatarCard avatar='https://picsum.photos/seed/picsum/300/160' text="Hi, I'm a developer." />
         </AnimateOnScreen.FadeIn>
       </section>
       <section style={{ marginBottom: 40 }}>
         <AnimateOnScreen.FadeUp>
-          <img src="https://picsum.photos/360/200.jpg" alt="" />
+          <img src='https://picsum.photos/360/200.jpg' alt='' />
         </AnimateOnScreen.FadeUp>
       </section>
       <section style={{ marginBottom: 40, width: 360, height: 200 }}>
         <AnimateOnScreen.ScaleIn>
           <>
-            <img src="https://picsum.photos/360/200/?blur=2" alt="" />
+            <img src='https://picsum.photos/360/200/?blur=2' alt='' />
             <section className={styles['blend-me']}>Mix Blend Mode</section>
           </>
         </AnimateOnScreen.ScaleIn>
       </section>
       <section style={{ marginBottom: 40, width: 360, height: 200 }}>
-        <Spotlight className="w-full h-full group mx-auto grid max-w-sm items-start gap-6">
-          <div className="relative w-full h-full overflow-hidden rounded-2xl bg-gray-800 p-px before:pointer-events-none before:absolute before:-left-40 before:-top-40 before:z-10 before:h-80 before:w-80 before:translate-x-[var(--mouse-x)] before:translate-y-[var(--mouse-y)] before:rounded-full before:bg-indigo-900/90 before:opacity-0 before:blur-3xl before:transition-opacity before:duration-500 after:pointer-events-none after:absolute after:-left-48 after:-top-48 after:z-30 after:h-64 after:w-64 after:translate-x-[var(--mouse-x)] after:translate-y-[var(--mouse-y)] after:rounded-full after:bg-indigo-500 after:opacity-0 after:blur-3xl after:transition-opacity after:duration-500 after:hover:opacity-20 before:group-hover:opacity-100">
-          </div>
+        <Spotlight className='w-full h-full group mx-auto grid max-w-sm items-start gap-6'>
+          <div className='relative w-full h-full overflow-hidden rounded-2xl bg-gray-800 p-px before:pointer-events-none before:absolute before:-left-40 before:-top-40 before:z-10 before:h-80 before:w-80 before:translate-x-[var(--mouse-x)] before:translate-y-[var(--mouse-y)] before:rounded-full before:bg-indigo-900/90 before:opacity-0 before:blur-3xl before:transition-opacity before:duration-500 after:pointer-events-none after:absolute after:-left-48 after:-top-48 after:z-30 after:h-64 after:w-64 after:translate-x-[var(--mouse-x)] after:translate-y-[var(--mouse-y)] after:rounded-full after:bg-indigo-500 after:opacity-0 after:blur-3xl after:transition-opacity after:duration-500 after:hover:opacity-20 before:group-hover:opacity-100' />
         </Spotlight>
       </section>
       <section style={{ marginBottom: 40, height: 200, width: 360, overflow: 'hidden' }}>
@@ -264,16 +259,16 @@ const Home = () => {
         mask
       </section>
       <section style={{ marginBottom: 40 }}>
-        <button className={styles['button']}>
+        <button className={styles.button}>
           <span className={styles['button-label']}>Click Me</span>
         </button>
       </section>
 
       <section style={{ position: 'relative', margin: '80px 0 160px 100px' }}>
-        <div className={styles['circle-1']}></div>
-        <div className={styles['circle-2']}></div>
-        <div className={styles['circle-3']}></div>
-        <div className={styles['circle-4']}></div>
+        <div className={styles['circle-1']} />
+        <div className={styles['circle-2']} />
+        <div className={styles['circle-3']} />
+        <div className={styles['circle-4']} />
       </section>
 
       <section style={{ margin: 20 }} className={styles.eHElAY}>
@@ -290,13 +285,7 @@ const Home = () => {
         </div>
       </section>
       <section style={{ margin: 20, fontSize: 40 }}>
-        <CountUp
-          start={20}
-          end={10000}
-          duration={10}
-          enableScrollSpy
-          scrollSpyDelay={1000}
-        />
+        <CountUp start={20} end={10000} duration={10} enableScrollSpy scrollSpyDelay={1000} />
       </section>
       <section style={{ margin: 20 }}>
         <Masonry />
@@ -306,13 +295,13 @@ const Home = () => {
       </section>
 
       <section style={{ width: 600, margin: '30px 0' }}>
-        <Input defaultValue={apiKey} placeholder="api key" onChange={changeApiKey} style={{ marginBottom: 20 }} />
-        <Flex align="center">
+        <Input defaultValue={apiKey} placeholder='api key' onChange={changeApiKey} style={{ marginBottom: 20 }} />
+        <Flex align='center'>
           {/* <LinearWrap> */}
           <Input.TextArea
             ref={textareaRef}
             defaultValue={chatText}
-            placeholder="来，说点什么呗...Meta + Enter发送"
+            placeholder='来，说点什么呗...Meta + Enter发送'
             onChange={changeChatText}
             onKeyDown={onInputKeyDown}
             autoSize
@@ -322,13 +311,13 @@ const Home = () => {
           <Button
             style={{ margin: '0 10px' }}
             icon={<SendOutlined rotate={-60} />}
-            type="primary"
+            type='primary'
             disabled={isStream}
             onClick={onSubmit}
           >
             发送
           </Button>
-          <Button icon={<SendOutlined rotate={-60} />} type="primary" disabled={!isStream} onClick={onStop}>
+          <Button icon={<SendOutlined rotate={-60} />} type='primary' disabled={!isStream} onClick={onStop}>
             停止
           </Button>
         </Flex>