chore: cursor

Signed-off-by: Innei <[email protected]>

src/app.config.ts

@@ -40,6 +40,12 @@ export const appConfig = {
           class:
             'font-medium mx-2 text-3xl rounded p-1 bg-gray-200 dark:bg-gray-800/0 hover:dark:bg-gray-800/100 bg-opacity-0 hover:bg-opacity-100 transition-background duration-200',
         },
+        {
+          type: 'span',
+          // cursor
+          class:
+            'inline-block w-[1px] h-8 -bottom-2 relative bg-gray-800/80 dark:bg-gray-200/80 opacity-0 group-hover:opacity-100 transition-opacity duration-200 group-hover:animation-blink',
+        },
       ],
     },
     description: `An independent developer coding with love.`,

src/app/(home)/page.tsx

@@ -88,7 +88,7 @@ const TwoColumnLayout = ({
   rightContainerClassName?: string
 }) => {
   return (
-    <div className="relative flex h-full w-full flex-col flex-wrap items-center lg:flex-row">
+    <div className="group relative flex h-full w-full flex-col flex-wrap items-center lg:flex-row">
       {children.slice(0, 2).map((child, i) => {
         return (
           <div
@@ -99,7 +99,7 @@ const TwoColumnLayout = ({
               i === 0 ? leftContainerClassName : rightContainerClassName,
             )}
           >
-            <div className="relative max-w-full lg:max-w-xl ">{child}</div>
+            <div className="relative max-w-full lg:max-w-xl">{child}</div>
           </div>
         )
       })}

src/styles/theme.css

@@ -91,4 +91,20 @@
   .group:hover .mask-cover {
     opacity: 0.5;
   }
+
+  .animation-blink {
+    animation: blink 1s ease-in-out infinite alternate;
+  }
+
+  @keyframes blink {
+    0% {
+      opacity: 0;
+    }
+    30% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
 }