feat(landing): add landing page (WIP)

elroygohjy · elroygohjy · commit c22d21db7f1c · 2023-09-12T16:07:43.000+08:00
diff --git a/frontend/public/backdrop.jpg b/frontend/public/backdrop.jpg
diff --git a/frontend/src/app/components/button/Button.tsx b/frontend/src/app/components/button/Button.tsx
@@ -0,0 +1,29 @@
+import React, { ReactNode } from "react";
+
+type ButtonVariant = "primary";
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string;
+  isDisabled?: boolean;
+  isLoading?: boolean;
+  children?: ReactNode;
+  variant?: ButtonVariant;
+}
+
+const Button = ({
+  className = "",
+  isDisabled = false,
+  children,
+  ...props
+}: ButtonProps) => {
+  return (
+    <button
+      className={`btn outline outline-white text-white shadow-sm ${className}`}
+      disabled={isDisabled}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/frontend/src/app/components/navbar/Navbar.tsx b/frontend/src/app/components/navbar/Navbar.tsx
@@ -0,0 +1,21 @@
+import { IoPeopleCircleSharp } from "react-icons/io5";
+import Button from "../button/Button";
+
+const Navbar = () => {
+  return (
+    <nav>
+      <div className="flex justify-between bg-neutral p-2 px-12 items-center">
+        <div className="text-4xl text-white font-bold flex items-center">
+          <IoPeopleCircleSharp className="text-base-100 text-5xl" />
+          PeerPrep
+        </div>
+        <Button
+          className="btn-accent rounded-full btn-sm px-4"
+          children={<span>Login</span>}
+        />
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import "./globals.css";
 import type { Metadata } from "next";
 import { Montserrat } from "next/font/google";
+import Navbar from "./components/navbar/Navbar";
 
 const montserrat = Montserrat({ subsets: ["latin"] });
 
@@ -16,7 +17,10 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" data-theme="myTheme">
-      <body className={montserrat.className}>{children}</body>
+      <body className={montserrat.className}>
+        <Navbar />
+        {children}
+      </body>
     </html>
   );
 }
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -1,7 +1,26 @@
 import Image from "next/image";
+import Button from "./components/button/Button";
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24"></main>
+    <main>
+      <Image
+        src="/backdrop.jpg"
+        alt="backdrop"
+        className="-z-10 opacity-50"
+        fill
+      />
+      <section className="flex flex-col items-center py-36 px-24 gap-4 z-20">
+        <h1 className="text-7xl text-white font-bold">Let's Prep Together!</h1>
+        <h2 className="text-xl text-center text-white font-medium max-w-xl">
+          Collaborative Mock Interviews to Boost Your Confidence and Nail Your
+          Dream Job Interviews
+        </h2>
+        <Button
+          className="btn-accent w-36"
+          children={<span>Get Started!</span>}
+        />
+      </section>
+    </main>
   );
 }
