style(linktree) : better ui

app/page.tsx

@@ -64,7 +64,7 @@ export default async function Home() {
         <source src="/background/erika.mp4" media="(min-width: 768px)"></source>
         <source src="/background/erika-mb.mp4" media="(max-width: 767px)"></source>
       </video>
-      <Card className="w-full max-w-sm overflow-hidden relative bg-transparent border-0 backdrop-blur-md md:backdrop-blur-none md:bg-card md:border md:max-w-lg" role="article">
+      <Card className="w-full max-w-sm overflow-hidden relative border-0 bg-black/20 md:bg-card md:border md:max-w-lg" role="article">
         <CardHeader className="flex flex-col items-center gap-4 text-center">
           <div className="relative w-24 h-24 overflow-hidden rounded-full">
             <Image 
@@ -77,12 +77,9 @@ export default async function Home() {
             />
           </div>
           <div>
-            <h1 className="text-2xl font-bold bg-linear-to-r from-pink-500 to-yellow-200 bg-clip-text text-transparent">
+            <h1 className="text-2xl font-bold bg-linear-to-r from-pink-400 to-yellow-400 bg-clip-text text-transparent">
               {profileName}
             </h1>
-            <p className="text-sm text-zinc-400 mt-1">
-              {config.profile.desc}
-            </p>
             {visitorCount > 0 && (
               <div className="mt-3 flex justify-center">
                 <Kbd>

components/LinkCard.tsx

@@ -24,7 +24,7 @@ export function LinkCard({ counts, links1, links2 }: { counts: FollowerCounts, l
 
   return (
     <CardContent>
-      <div key={isPage2 ? "p2" : "p1"} className="animate-in fade-in slide-in-from-bottom-2 duration-200">
+      <div key={isPage2 ? "p2" : "p1"} className="animate-in fade-in slide-in-from-bottom-2 duration-150">
         <nav aria-label="ลิ้งค์โซเชียลมีเดีย" className="flex flex-col gap-3">
           {currentLinks.map((item, index) => {
             const IconComponent = iconMap[item.icon];
@@ -35,10 +35,10 @@ export function LinkCard({ counts, links1, links2 }: { counts: FollowerCounts, l
               <Button
                 key={index}
                 variant="outline"
-                className="w-full h-auto p-4 group md:bg-muted bg-black/40 "
+                className="w-full h-16 p-4 group md:bg-muted bg-black/60 "
                 asChild
               >
-                <Link href={item.link} target={item.link.startsWith("/") ? undefined : "_blank"} rel={item.link.startsWith("/") ? undefined : "noopener noreferrer"} className="w-full">
+                <Link href={item.link} target={item.link.startsWith("/") ? undefined : "_blank"} rel={item.link.startsWith("/") ? undefined : "noopener noreferrer"} >
                   <div className="flex items-center justify-between w-full">
                     <div className="flex items-center gap-3">
                       <div className="shrink-0 w-8 h-8 flex items-center justify-center">
@@ -62,12 +62,11 @@ export function LinkCard({ counts, links1, links2 }: { counts: FollowerCounts, l
           })}
         </nav>
       </div>
-      <div className="flex justify-between items-center pt-4 border-t border-zinc-800/50">
+      <div className="flex justify-between items-center pt-4">
         <Button 
           variant="ghost" 
           onClick={() => setIsPage2(false)}
           disabled={!isPage2}
-          className="text-zinc-400 hover:text-white disabled:opacity-50"
           aria-label="หน้าก่อนหน้า"
         >
           <ArrowLeft />
@@ -76,7 +75,6 @@ export function LinkCard({ counts, links1, links2 }: { counts: FollowerCounts, l
           variant="ghost" 
           onClick={() => setIsPage2(true)}
           disabled={isPage2}
-          className="text-zinc-400 hover:text-white disabled:opacity-50"
           aria-label="หน้าถัดไป"
         >
           <ArrowRight />
@@ -84,4 +82,4 @@ export function LinkCard({ counts, links1, links2 }: { counts: FollowerCounts, l
       </div>
     </CardContent>
   );
-}
+}

package.json

@@ -3,7 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "PORT=4000 bun --bun next dev --turbopack",
+    "dev:t": "PORT=4000 bun --bun next dev --turbopack",
+    "dev": "PORT=4000 bun --bun next dev",
     "build": "next build",
     "start": "next start -H $HOSTNAME",
     "lint": "eslint",