Refactor DemoPage and Title components for improved styling and respo…

…nsiveness
HK-SHAO · Feb 6, 2025 · 79def1d · 79def1d
1 parent d44255a
commit 79def1d
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git 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
@@ -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>