add routes

src/components/Logo.tsx

@@ -9,7 +9,7 @@ const LogoHolder = ({ size = "large" }: LogoProps) => {
     "w-[95px] h-[95px]": size === "large",
     "w-[50px] h-[50px]": size === "small",
   });
-  return <div className={logoClass}></div>;
+  return <div className={logoClass} />;
 };
 
 export default LogoHolder;

src/pages/Home.tsx → src/pages/HomePage.tsx

@@ -1,12 +1,12 @@
 import { useNavigate } from "react-router-dom";
 import Button from "../components/Button";
 
-const Home = () => {
+const HomePage = () => {
   const navigate = useNavigate();
 
   return (
-    <main className="flex flex-col gap-y-2 items-center justify-center w-full h-screen bg-gradient-to-r from-purple-500 to-pink-500">
-      <h1 className="text-white text-3xl text-medium">Choose an option</h1>
+    <main className="flex flex-col items-center justify-center w-full h-screen gap-y-2 bg-gradient-to-r from-purple-500 to-pink-500">
+      <h1 className="text-3xl text-white text-medium">Choose an option</h1>
       <div className="flex gap-2 max-w-[400px] w-full">
         <Button onClick={() => navigate("/normal")}>Normal</Button>
         <Button onClick={() => navigate("/formik")}>Formik</Button>
@@ -15,4 +15,4 @@ const Home = () => {
   );
 };
 
-export default Home;
+export default HomePage;

src/pages/Login.tsx → src/pages/LoginPage.tsx

@@ -6,7 +6,7 @@ import LoginFormikForm from "../forms/LoginFormikForm";
 import { ILoginForm } from "../types";
 import { LoginSchema } from "../utils/schemas";
 
-const Login = () => {
+const LoginPage = () => {
   const { setActiveTab } = useContext(TabsContext);
   const location = useLocation();
   const navigate = useNavigate();
@@ -20,7 +20,7 @@ const Login = () => {
   function handleSubmit(values: ILoginForm) {
     window.alert(JSON.stringify(values));
 
-    navigate("/dashboard");
+    navigate("/main");
   }
 
   return (
@@ -37,16 +37,16 @@ const Login = () => {
       )}
       <div className="flex items-center justify-center gap-1 mt-auto border-t border-white max-w-[600px] w-full py-10">
         <p className="text-white opacity-50">NEW USER?</p>
-        {/* rome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
-        <p
+        <button
+          type="button"
           onClick={() => setActiveTab("signUp")}
           className="text-white underline cursor-pointer"
         >
           SIGN UP
-        </p>
+        </button>
       </div>
     </section>
   );
 };
 
-export default Login;
+export default LoginPage;

src/pages/Onboarding.tsx

@@ -1,6 +1,6 @@
 import Logo from "../components/Logo";
 import Arrow from "../assets/arrow.svg";
-import Login from "./Login";
+import LoginPage from "./LoginPage";
 import SignUp from "./SignUp";
 import Tabbed from "../components/Tabbed";
 import { TabsContextProvider } from "../context/tabs-context";
@@ -11,14 +11,14 @@ interface OnboardingProps {
 }
 
 const options = [
-  { value: "login", component: <Login /> },
+  { value: "login", component: <LoginPage /> },
   { value: "signUp", component: <SignUp /> },
 ];
 
 const Onboarding = ({ onBack }: OnboardingProps) => {
   return (
-    <main className="w-full h-screen flex flex-col items-center gap-10 bg-gradient-to-r from-purple-500 to-pink-500">
-      <div className="w-full flex justify-center pt-10 relative">
+    <main className="flex flex-col items-center w-full h-screen gap-10 bg-gradient-to-r from-purple-500 to-pink-500">
+      <div className="relative flex justify-center w-full pt-10">
         {/* rome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
         <img
           className="w-[30px] h-[30px] cursor-pointer absolute left-6"

src/pages/SignUp.tsx

@@ -38,13 +38,13 @@ const SignUp = () => {
       )}
       <div className="flex items-center justify-center gap-1 mt-auto border-t border-white max-w-[600px] w-full py-10">
         <p className="text-white opacity-50">ALREADY DID THIS?</p>
-        {/* rome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
-        <p
+        <button
+          type="button"
           onClick={() => setActiveTab("login")}
           className="text-white underline cursor-pointer"
         >
           LOGIN
-        </p>
+        </button>
       </div>
     </section>
   );

src/pages/main/Calendar.tsx

@@ -0,0 +1,9 @@
+function Calendar() {
+  return (
+    <main className="flex-1 w-full bg-[#222] p-10">
+      <h1 className="text-2xl text-white">Welcome to your calendar</h1>
+    </main>
+  );
+}
+
+export default Calendar;

src/pages/main/Dashboard.tsx

@@ -0,0 +1,9 @@
+function Dashboard() {
+  return (
+    <main className="flex-1 w-full bg-[#222] p-10">
+      <h1 className="text-2xl text-white">Welcome to the Dashboard</h1>
+    </main>
+  );
+}
+
+export default Dashboard;

src/pages/main/Home.tsx

@@ -0,0 +1,9 @@
+function Home() {
+  return (
+    <main className="flex-1 w-full bg-[#222] p-10">
+      <h1 className="text-2xl text-white">Welcome Home</h1>
+    </main>
+  );
+}
+
+export default Home;