From 79def1d3d7eeefab3cd0ba6e7a6f78db4cfde060 Mon Sep 17 00:00:00 2001
From: HK-SHAO <hk-shao@foxmail.com>
Date: Thu, 6 Feb 2025 20:26:34 +0800
Subject: [PATCH] Refactor DemoPage and Title components for improved styling
 and responsiveness

---
 src/libs/components/DemoPage.mdx | 4 ++--
 src/libs/components/Title.tsx    | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/libs/components/DemoPage.mdx b/src/libs/components/DemoPage.mdx
index af94541..5e2aa38 100644
--- a/src/libs/components/DemoPage.mdx
+++ b/src/libs/components/DemoPage.mdx
@@ -14,12 +14,12 @@ import { toast } from 'react-toastify';
 
 # <Title/>
 
-<div className="w-full text-center -mt-4 mb-10 p-0">
+<div className="w-full text-center -mt-8 mb-10 p-0">
   <p className='m-0 p-0 text-base/snug text-gray-500 font-bold'>Easy to use async function in React components! 🚀</p>
 </div>
 
 <div className='w-full flex justify-center -mt-4'>
-  <div className="place-items-center grid bg-pink-600 dark:bg-pink-800 rounded-md w-fit font-bold font-stretch-130% text-sm text-white hover:shadow-lg transition-shadow dark:hover:bg-pink-700 hover:bg-pink-500">
+  <div className="place-items-center grid bg-pink-600 dark:bg-pink-800 rounded-md w-fit font-bold text-sm text-white hover:shadow-lg transition-shadow dark:hover:bg-pink-700 hover:bg-pink-500">
     <LatestVersion />
   </div>
 </div>
diff --git a/src/libs/components/Title.tsx b/src/libs/components/Title.tsx
index 665426a..e311e9e 100644
--- a/src/libs/components/Title.tsx
+++ b/src/libs/components/Title.tsx
@@ -3,11 +3,11 @@ const title = 'React Async for Client';
 export default function Title() {
   return (
     <>
-      <div className="relative w-full min-h-[6rem] font-bold scale-120 hover:scale-150 transition-transform">
-        <div className="absolute flex justify-center items-center bg-clip-text blur-2xl py-4 w-full font-stretch-50% text-7xl text-center text-transparent pointer-events-none select-none gradient-bg">
+      <div className="relative w-full h-auto font-bold scale-100 hover:scale-130 transition-transform">
+        <div className="inset-0 flex justify-center items-center bg-clip-text blur-2xl py-4 w-full text-7xl text-center text-transparent pointer-events-none select-none gradient-bg">
           {title}
         </div>
-        <div className="absolute flex justify-center items-center bg-clip-text py-4 w-full font-stretch-50% text-7xl text-center text-transparent select-auto gradient-bg">
+        <div className="absolute inset-0 flex justify-center items-center bg-clip-text py-4 w-full text-7xl text-center text-transparent select-auto gradient-bg">
           {title}
         </div>
       </div>