scaffolding for dashboard page (vechain#12)

* frontend: added routes

* frontend: added tailwind + package.json fix

* frontend: added login page

* frontend: login page fix

* profile page

* nav bar visible on /profile

* test pr

* scaffolding for dashboard page

apps/frontend/src/App.tsx

@@ -10,6 +10,7 @@ import Login from "./routes/login";
 import Form from "./routes/form";
 import Milestones from "./routes/milestones";
 import Profile from "./routes/profile";
+import Dashboard from "./routes/dashboard";
 
 function App() {
   // const path = location.pathname;
@@ -26,7 +27,6 @@ function App() {
         >
           <div className="bg-[#506c4c]">
             <Navbar />
-
             <div className="min-h-screen relative">
               <Routes>
                 <Route path="/" element={<Home />} />
@@ -37,6 +37,7 @@ function App() {
                 <Route path="/login" element={<Login />} />
                 <Route path="/milestones" element={<Milestones />} />
                 <Route path="/profile" element={<Profile />} />
+                <Route path="/dashboard" element={<Dashboard />} />
               </Routes>
             </div>
 

apps/frontend/src/routes/dashboard.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from "react";
+import { useWalletModal } from "@vechain/dapp-kit-react";
+import { useWallet } from "@vechain/dapp-kit-react";
+
+export default function Protected() {
+    const { account } = useWallet();
+
+
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 py-10 text-white">
+            <div className="px-4 hidden md:block">
+                <h2 className=" font-bold text-3xl">Fun Facts</h2>
+                <div className="h-[30vh] bg-white/40 my-4 rounded-xl"></div>
+                <div className="h-[30vh] bg-white/40 my-4 rounded-xl"></div>
+            </div>
+            <div className="px-4">
+                <h2 className=" text-left text-3xl font-bold">View Posts</h2>
+                <div className="h-[20vh] bg-white/40 my-4 rounded-xl"></div>
+                <div className="h-[20vh] bg-white/40 my-4 rounded-xl"></div>
+                <div className="h-[20vh] bg-white/40 my-4 rounded-xl"></div>
+                <div className="h-[20vh] bg-white/40 my-4 rounded-xl"></div>
+                <div className="h-[20vh] bg-white/40 my-4 rounded-xl"></div>
+                <div className="h-[20vh] bg-white/40 my-4 rounded-xl"></div>
+                <div className="h-[20vh] bg-white/40 my-4 rounded-xl"></div>
+            </div>
+            <div className="px-4 hidden lg:block">
+                <h2 className=" font-bold text-3xl">Badges</h2>
+                <div className="h-[15vh] bg-white/40 my-4 rounded-xl"></div>
+                <div className="h-[15vh] bg-white/40 my-4 rounded-xl"></div>
+                <div className="h-[15vh] bg-white/40 my-4 rounded-xl"></div>
+                <div className="h-[15vh] bg-white/40 my-4 rounded-xl"></div>
+                <div className="h-[15vh] bg-white/40 my-4 rounded-xl"></div>
+                <div className="h-[15vh] bg-white/40 my-4 rounded-xl"></div>
+            </div>
+        </div>
+    );
+}

apps/frontend/src/routes/settings.tsx

@@ -6,7 +6,7 @@ export default function Settings() {
 
     if (!account) {
         return <div className="absolute inset-0 h-full grid place-items-center ">
-            <div className="flex flex-col place-content-center place-items-center text-slate-500">
+            <div className="flex flex-col place-content-center place-items-center text-white">
 
                 <span className="mb-4">
                     <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lock"><rect width="18" height="11" x="3" y="11" rx="2" ry="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg>