Style Login Page

package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@maany_shr/kernel-planckster-sdk-ts": "^2.0.0-alpha",
-    "@maany_shr/rage-ui-kit": "^1.3.0",
+    "@maany_shr/rage-ui-kit": "1.3.1",
     "@preact/signals-react": "^2.1.0",
     "@tanstack/react-query": "^5.25.0",
     "@tanstack/react-query-devtools": "^5.51.21",

src/app/auth/login/page.tsx

@@ -18,15 +18,14 @@ const LoginPage: React.FC = () => {
   };
 
   return (
-    <div className="flex h-screen items-center justify-center">
-      <div className="flex flex-col items-center"></div>
-      <h1 className="mb-8 text-4xl  font-bold"> SDA Planckster </h1>
-      <h5 className="10s mb-8 animate-pulse text-sm  font-bold">alpha</h5>
-      <div className="w-10"></div>
-      <div className="animate-fade-in mt-8 transform rounded-md border border-gray-300 p-6 shadow-md transition-all duration-300 hover:scale-105 hover:shadow-lg">
+    <div className="flex w-full items-center justify-center">
+      <div className="flex flex-col md:flex-row items-center justify-center gap-4">
+      <h1 className="mb-8 text-4xl font-bold animate-pulseGrow"> SkyPulse </h1>
+        <div className="animate-fade-in transform rounded-md border border-gray-300 p-6 shadow-md transition-all duration-300 hover:scale-105 hover:shadow-lg">
         {loggedOut && <div className="mb-4 rounded bg-green-500 p-4 text-white">Successfully logged out.</div>}
         <h2 className="mb-4 text-2xl font-bold">Login</h2>
         <LoginCard buttonAction={handleSubmit} />
+        </div>
       </div>
     </div>
   );

tailwind.config.ts

@@ -33,12 +33,17 @@ export default {
           "0%": { opacity: "0" },
           "100%": { opacity: "1" },
         },
+        pulseGrow: {
+          '0%, 100%': { transform: 'scale(1)' },
+          '50%': { transform: 'scale(1.05)' },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
         "slide-down": "slide-down 0.5s ease-out",
         opacity: "opacity 2s ease-in-out",
+        pulseGrow: 'pulseGrow 1.5s ease-in-out infinite',
       },
       colors: {
         black: "#000",