home

AceJobAgency.client/src/components/NavigationBar.tsx

@@ -0,0 +1,55 @@
+import {
+  Button,
+  Link,
+  Navbar,
+  NavbarBrand,
+  NavbarContent,
+  NavbarItem,
+} from "@heroui/react";
+import { useNavigate } from "react-router-dom";
+
+export default function NavigationBar() {
+  const navigate = useNavigate();
+
+  return (
+    <Navbar className="border-b-[1px] border-neutral-500/25">
+      <NavbarBrand>
+        <Link
+          color="foreground"
+          onPress={() => {
+            navigate("/");
+          }}
+        >
+          <img
+            src="/aja.svg"
+            alt="aja logo"
+            width={100}
+            className="dark:invert"
+          />
+        </Link>
+      </NavbarBrand>
+      <NavbarContent justify="end">
+        <NavbarItem className="hidden lg:flex">
+          <Button
+            onPress={() => {
+              navigate("/login");
+            }}
+            variant="light"
+          >
+            Login
+          </Button>
+        </NavbarItem>
+        <NavbarItem>
+          <Button
+            onPress={() => {
+              navigate("/signup");
+            }}
+            variant="bordered"
+          >
+            Sign Up
+          </Button>
+        </NavbarItem>
+      </NavbarContent>
+    </Navbar>
+  );
+}

AceJobAgency.client/src/layouts/DefaultLayout.tsx

@@ -1,18 +1,20 @@
 import { Outlet } from "react-router-dom";
+import NavigationBar from "../components/NavigationBar";
 
 export default function DefaultLayout() {
   return (
     <div className="relative flex flex-col justify-between">
       <div className="flex flex-col min-h-screen">
         <div className="flex-grow">
+          <NavigationBar />
           <Outlet />
         </div>
       </div>
 
       {/*
-      A div that becomes black in dark mode to cover white color parts
+			A div that becomes black in dark mode to cover white color parts
-      of the website when scrolling past the window's original view.
+			of the website when scrolling past the window's original view.
-      */}
+			*/}
       <div className="fixed -z-50 dark:bg-black inset-0 w-full h-full"></div>
     </div>
   );

AceJobAgency.client/src/pages/HomePage.tsx

@@ -1,7 +1,28 @@
+import { Button, Card, Input } from "@heroui/react";
+
 export default function HomePage() {
   return (
-    <div className="absolute inset-0 w-full h-full">
+    <div className="absolute inset-0 w-full h-full flex flex-col justify-center bg-indigo-500/10 dark:bg-indigo-500/20">
-      <p className="p-8 pt-12 text-3xl">Ace Job Agency</p>
+      <div className="relative m-auto w-max h-max flex flex-col gap-10 justify-center text-center *:mx-auto">
+        <div className="flex flex-col gap-6 w-full text-wrap">
+          <p className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-bold">
+            Where the best employees get
+            <br />
+            matched with the best employers.
+          </p>
+          <p className="text-xl">
+            Join the world’s most widely adopted job search platform.
+          </p>
+        </div>
+        <div>
+          <Card className="flex flex-row gap-2 p-2">
+            <Input placeholder="Enter your email" size="lg" />
+            <Button color="primary" size="lg">
+              Sign up
+            </Button>
+          </Card>
+        </div>
+      </div>
     </div>
   );
 }