Add login page

frontend/src/components/Landing.tsx

@@ -0,0 +1,83 @@
+/**
+ * Navigation Component
+ *
+ * Wraps the content of the current page with the navbar
+ * Uses the constant in `src/constants` to populate the actual sidebar
+ */
+import { Poppins } from "next/font/google";
+import Image from "next/image";
+import React, { useMemo } from "react";
+
+import { useWindowSize } from "../hooks/useWindowSize";
+import { cn } from "../lib/utils";
+
+const poppins = Poppins({ subsets: ["latin"], weight: "400" });
+
+// the logo and company name component
+const Logo = () => {
+  return (
+    <div className="flex h-full flex-col items-center justify-center">
+      <div className="mb-14 flex flex-col items-center">
+        <h1 className="font-[alternate-gothic] text-6xl text-white max-lg:text-5xl">WELCOME TO</h1>
+        <h1 className="font-[alternate-gothic] text-6xl text-white max-lg:text-5xl">
+          PLANT IT AGAIN!
+        </h1>
+      </div>
+      <div className="flex h-[50%] flex-col items-center">
+        <Image alt="company logo" src="/sidebar/logo.png" width={250} height={250} className="" />
+      </div>
+    </div>
+  );
+};
+
+// Navigation component that wraps the content of the page
+function Landing({ children }: { children: React.ReactNode }) {
+  const { width } = useWindowSize();
+  const isMobile = useMemo(() => width <= 640, [width]);
+
+  return (
+    <main
+      className={cn(
+        "flex h-full w-full bg-pia_primary_light_green max-sm:relative sm:max-lg:flex-col",
+        poppins.className,
+      )}
+    >
+      {/* Login left side */}
+      {!isMobile ? (
+        <div
+          className={cn(
+            "flex h-screen w-full bg-pia_primary_light_green max-sm:relative",
+            poppins.className,
+          )}
+        >
+          <div
+            className={cn(
+              "z-10 flex h-screen w-[50%] flex-col", // Adjust the width based on the isMobile flag
+              "flex-col gap-12 bg-pia_dark_green pt-16 text-pia_accent_green transition-transform",
+            )}
+          >
+            <Logo />
+          </div>
+          <div
+            className={cn(
+              "flex h-screen w-[50%] flex-col", // Adjust the width based on the isMobile flag
+            )}
+          >
+            {children}
+          </div>
+        </div>
+      ) : (
+        <div
+          className={cn(
+            "flex h-screen w-full bg-pia_primary_light_green max-sm:relative",
+            poppins.className,
+          )}
+        >
+          {children}
+        </div>
+      )}
+    </main>
+  );
+}
+
+export default Landing;

frontend/src/pages/_app.tsx

@@ -1,14 +1,20 @@
 import { AppProps } from "next/app";
 
-import Navigation from "../components/Navigation";
+import Landing from "../components/Landing";
+
 import "../styles/global.css";
 import "../styles/globals.css";
 
+// import Navigation from "../components/Navigation";
+
 function App({ Component, pageProps }: AppProps) {
   return (
-    <Navigation>
+    <Landing {...pageProps}>
       <Component {...pageProps} />
-    </Navigation>
+    </Landing>
+    // <Navigation>
+    //   <Component {...pageProps} />
+    // </Navigation>
   );
 }
 export default App;

frontend/src/pages/index.tsx

@@ -1,55 +1,115 @@
+import Image from "next/image";
+import { useMemo } from "react";
 import { FieldValues, SubmitHandler, useForm } from "react-hook-form";
 
-import { Checkbox } from "../components/Checkbox";
-import Radio from "../components/Radio";
-import { Textfield } from "../components/Textfield";
+import { Textfield } from "@/components/Textfield";
+import { useWindowSize } from "@/hooks/useWindowSize";
+import { cn } from "@/lib/utils";
 
 export default function Home() {
-  const dietaryList = ["Nuts", "Eggs", "Seafood", "Pollen", "Dairy", "Other"];
-
   const { register, setValue, handleSubmit } = useForm();
 
   const onSubmit: SubmitHandler<FieldValues> = (data) => {
     console.log(data);
   };
-
+  const { width } = useWindowSize();
+  const isMobile = useMemo(() => width <= 640, [width]);
+  const isTablet = useMemo(() => width <= 1300, [width]);
   return (
-    <form
-      onSubmit={handleSubmit(onSubmit)}
-      className="flex flex-col items-center justify-between gap-10 p-12"
-    >
-      <div className="grid gap-5">
-        <Textfield register={register} name={"firstname"} label="First" placeholder="John" />
-        <Textfield
-          register={register}
-          name={"email"}
-          label={"Email"}
-          type="email"
-          placeholder="[email protected]"
-        />
-        <Textfield
-          register={register}
-          setValue={setValue}
-          name={"date"}
-          label="Date"
-          placeholder="00/00/0000"
-          calendar={true}
-        />
-      </div>
+    <main className="flex h-screen w-full items-center justify-center">
+      <div className="flex h-full w-full items-center justify-center">
+        <div
+          className={cn(
+            "flex h-full flex-col",
+            isMobile ? "mt-[20%] w-[80%]" : "mb-[8%] w-[65%] justify-center",
+          )}
+        >
+          {isMobile && (
+            <div className="flex flex-col justify-center">
+              <div className="flex h-full flex-col justify-center">
+                <div className="flex flex-col items-center">
+                  <Image
+                    alt="company logo"
+                    src="/sidebar/logo.png"
+                    width={130}
+                    height={130}
+                    className=""
+                  />
+                </div>
+                <div className="mb-5 mt-5 flex flex-col items-center">
+                  <h1 className="font-[alternate-gothic] text-3xl max-lg:text-3xl">WELCOME TO</h1>
+                  <h1 className="font-[alternate-gothic] text-3xl max-lg:text-3xl">
+                    PLANT IT AGAIN!
+                  </h1>
+                </div>
+              </div>
+            </div>
+          )}
+          {!isMobile && (
+            <div>
+              <h1 className="font-[alternate-gothic] text-5xl text-black max-lg:text-5xl">
+                Sign in to PIA
+              </h1>
+              <h1 className="text-1xl max-lg:text-1xl mb-6 text-black text-pia_accent">
+                Don&lsquo;t have an account?{" "}
+                <a className="text-1xl max-lg:text-1xl text-pia_accent text-pia_dark_green">
+                  Sign up
+                </a>
+              </h1>
+            </div>
+          )}
 
-      <div className="grid w-full sm:w-1/2 ">
-        <h2 className="mb-2 text-pia_accent">Dietary Restrictions</h2>
-        <Checkbox register={register} name="dietary" options={dietaryList} />
+          <div className="grid gap-5">
+            <form
+              onSubmit={handleSubmit(onSubmit)}
+              className="flex w-full flex-col justify-between gap-8"
+            >
+              <div>
+                <h1 className="text-lg font-light text-black text-pia_accent max-lg:text-lg">
+                  Email Address
+                </h1>
+                <Textfield
+                  register={register}
+                  name={"email"}
+                  label={""}
+                  type="email"
+                  placeholder="[email protected]"
+                />
+              </div>
+              <div>
+                <h1 className="text-lg font-light text-pia_accent max-lg:text-lg">Password</h1>
+                <Textfield
+                  register={register}
+                  setValue={setValue}
+                  name={"date"}
+                  label=""
+                  placeholder="Enter Password"
+                />
+                <h1
+                  className={cn(
+                    "mt-1 text-lg font-light text-pia_accent",
+                    isTablet ? "underline" : "text-right text-pia_dark_green",
+                    isMobile ? "text-sm underline max-lg:text-sm" : "text-lg max-lg:text-lg",
+                  )}
+                >
+                  Forgot Password?
+                </h1>
+              </div>
+              <button type="submit" className="rounded-md bg-pia_dark_green px-5 py-3 text-white">
+                Sign In
+              </button>
+              {isMobile && (
+                <div className="flex items-center justify-center">
+                  <h1 className={cn("text-sm text-black text-pia_accent max-lg:text-sm")}>
+                    Don&lsquo;t have an account?{" "}
+                    <a className="text-blue text-sm text-pia_accent max-lg:text-sm">Sign up</a>
+                  </h1>
+                </div>
+              )}
+            </form>
+          </div>
+        </div>
       </div>
-
-      <div className="">
-        <h2 className="mb-5 text-2xl font-bold">Gender</h2>
-        <Radio register={register} name="gender" options={["Male", "Female", "Rather not say"]} />
-      </div>
-
-      <button type="submit" className="rounded-md bg-pia_dark_green px-5 py-3 text-white">
-        Submit
-      </button>
-    </form>
+    </main>
   );
 }