Merge pull request #3 from CS3219-AY2324S1/FE-landing

Add landing Page (WIP)

Author: elroygohjy

frontend/.eslintignore

@@ -1,8 +1,12 @@
 {
   "semi": true,
-  "trailingComma": "all",
-  "singleQuote": true,
-  "printWidth": 120,
+  "printWidth": 140,
   "tabWidth": 2,
-  "endOfLine": "lf"
-}
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "useTabs": false,
+  "arrowParens": "avoid",
+  "jsxSingleQuote": true,
+  "trailingComma": "all",
+  "endOfLine": "auto"
+}

frontend/.eslintrc.json

@@ -19,19 +19,20 @@
     "daisyui": "^3.7.3",
     "eslint": "8.49.0",
     "eslint-config-next": "13.4.19",
+    "firebase": "^10.3.1",
     "next": "13.4.19",
     "postcss": "8.4.29",
+    "prettier-plugin-tailwindcss": "^0.5.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.11.0",
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.43.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "prettier": "^2.7.1",
+    "prettier": "^3.0.3",
     "typescript": "5.2.2"
   }
 }

frontend/.prettierrc

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('prettier-plugin-tailwindcss')],
+}

frontend/package.json

@@ -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-1 text-white shadow-sm ${className}`}
+      disabled={isDisabled}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;

frontend/prettier.config.js

@@ -0,0 +1,24 @@
+import { IoPeopleCircleSharp } from "react-icons/io5";
+import Button from "../button/Button";
+import Link from "next/link";
+
+const Navbar = () => {
+  return (
+    <nav>
+      <div className="flex justify-between bg-neutral p-2 px-12 items-center">
+        <div className="text-3xl text-white font-bold flex items-center">
+          <Link href="/">
+            <IoPeopleCircleSharp className="text-base-100 text-5xl cursor-pointer" />
+          </Link>
+          PeerPrep
+        </div>
+        <Button
+          className="btn-accent rounded-full btn-sm px-4"
+          children={<span>Login</span>}
+        />
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;

frontend/public/backdrop.jpg

@@ -1,18 +1,43 @@
-import './globals.css';
-import type { Metadata } from 'next';
-import { Montserrat } from 'next/font/google';
+import "./globals.css";
+import type { Metadata } from "next";
+import { Montserrat } from "next/font/google";
+import Navbar from "./components/navbar/Navbar";
+import { initializeApp } from "firebase/app";
+import { getAnalytics } from "firebase/analytics";
 
 const montserrat = Montserrat({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: 'Peerprep',
-  description: 'Practise!',
+  title: "PeerPrep | Streamlining Technical Interview Preparation",
+  description: "Practise!",
 };
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+const firebaseConfig = {
+  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const app = initializeApp(firebaseConfig);
+  if (typeof window !== "undefined") {
+    const analytics = getAnalytics(app);
+  }
+
   return (
     <html lang="en" data-theme="myTheme">
-      <body className={montserrat.className}>{children}</body>
+      <body className={montserrat.className}>
+        <Navbar />
+        {children}
+      </body>
     </html>
   );
-}
+};

frontend/src/app/components/button/Button.tsx

@@ -1,3 +1,28 @@
+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>;
+  return (
+    <main>
+      <Image
+        src="/backdrop.jpg"
+        alt="backdrop"
+        className="-z-10 opacity-50"
+        layout="fill"
+      />
+      <section className="flex flex-col items-center py-24 lg:py-36 px-24 gap-4 z-20">
+        <h1 className="text-5xl text-white font-bold text-center m-5 lg:text-7xl">
+          Streamlining Technical Interview Preparation.
+        </h1>
+        <h2 className="text-xl text-center text-white font-medium">
+          Collaborative mock interviews to boost your confidence and nail your
+          dream job interviews.
+        </h2>
+        <Button
+          className="btn-accent w-36 m-2"
+          children={<span>Get Started!</span>}
+        />
+      </section>
+    </main>
+  );
 }