frontend: added login page (vechain#2)

* frontend: added routes * frontend: added tailwind + package.json fix * frontend: added login page
Tapple214 · Sep 14, 2024 · 2e96f4d · 2e96f4d
1 parent f85cf85
commit 2e96f4d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/apps/frontend/src/App.tsx b/apps/frontend/src/App.tsx
@@ -27,7 +27,7 @@ function App() {
           nodeUrl="https://testnet.vechain.org/"
           logLevel={"DEBUG"}
         >
-          <div className="">
+          <div className="bg-emerald-700">
             <Navbar />
             <div className="min-h-[80vh] relative">
               <Routes>

diff --git a/apps/frontend/src/routes/login.tsx b/apps/frontend/src/routes/login.tsx
@@ -10,8 +10,25 @@ export default function Login() {
         navigate('/')
     }
     return <div className="absolute inset-0 h-full grid place-items-center text-xl font-bold md:font-extrabold">
-        <div>
-            Login page.
+        <div className=" " data-x="bg-emerald-500 px-5 md:px-24 shadow-lg rounded-2xl">
+            <div className="max-w-xl bg-white p-8 rounded-2xl px-10">
+                <h2 className="text-3xl font-bold text-green-800 mb-2">SG Odyssey</h2>
+                <p className="text-green-700 mb-6 text-sm">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                    exercitation ullamco laboris nisi ut aliquip.
+                </p>
+                <form className="space-y-4">
+                    <input type="text" placeholder="Username" className="w-full px-4 py-3 rounded-full border-green-300 border" />
+                    <input type="password" placeholder="Password" className="w-full px-4 py-3 rounded-full border-green-300 border" />
+                    <button className="w-full bg-green-800 text-white rounded-full py-3 hover:bg-green-700 transition-colors">
+                        Login
+                    </button>
+                </form>
+                <div className="mt-6 text-right">
+                    <span className="inline-block transform rotate-45 text-orange-400 text-2xl">👣</span>
+                </div>
+            </div>
         </div>
     </div>
 }