feat(Login screen)

.vscode/settings.json

@@ -7,7 +7,9 @@
     { "pattern": "apps/*/" },
     { "pattern": "packages/*/" }
   ],
-  "tailwindCSS.experimental.configFile": "./packages/config/tailwind/index.ts",
+  "editor.quickSuggestions": {
+    "strings": true
+  },
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "typescript.tsdk": "node_modules/typescript/lib",
   "[properties]": {

apps/mobile/src/app/index.tsx

@@ -7,7 +7,7 @@ export default function HomeScreen() {
       className="flex flex-1 items-center justify-center px-4"
       edges={["top"]}
     >
-      <Text className="text-6xl text-gray-300">👋 Hello!</Text>
+      <Text className="text-6xl text-gray-300">👋 Hello</Text>
     </SafeAreaView>
   );
 }

apps/web/src/app/page.tsx

@@ -1,7 +1,18 @@
 export default function HomePage() {
   return (
     <main className="flex h-screen flex-1 flex-col items-center justify-center bg-gray-800">
-      <h1 className="text-7xl text-gray-300">👋 Hello!</h1>
+      <div className="flex w-full max-w-xl flex-col items-center justify-center sm:flex-row">
+        <div className="flex-column mb-10 flex w-full justify-center sm:mb-0 sm:mr-10 sm:w-1/2">
+          <h1 className="px-46 px ju bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-5xl font-extrabold text-transparent">
+            The Bank
+          </h1>
+        </div>
+        <div className="flex-column flex w-full justify-center sm:w-1/2">
+          <button className="rounded border border-gray-400 bg-white px-4 py-2 font-semibold text-gray-800 shadow hover:bg-gray-100">
+            Zaloguj się
+          </button>
+        </div>
+      </div>
     </main>
   );
 }

apps/web/src/styles/globals.css

@@ -54,6 +54,16 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-white;
   }
 }
+
+.btn {
+  @apply rounded px-4 py-2 font-bold;
+}
+.btn-blue {
+  @apply bg-blue-500 text-white;
+}
+.btn-blue:hover {
+  @apply bg-blue-700;
+}