nussucommit · mihirniyogi · Feb 13, 2024 · Feb 13, 2024 · Feb 13, 2024 · Feb 13, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,19 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.0.4"
+    "yarn": "^1.22.21"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.4",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.0.4"
+    "typescript": "^5"
   }
 }
diff --git a/public/images/nussulogo.png b/public/images/nussulogo.png
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,3 +1,5 @@
+
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -18,10 +20,4 @@
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,13 +1,29 @@
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
+
+// Custom fonts
+import { Biryani } from 'next/font/google'
+import { Dosis } from 'next/font/google'
+import { Poppins } from 'next/font/google'
+
 import './globals.css'
+import Login from './login/page'
 
 const inter = Inter({ subsets: ['latin'] })
 
-export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+export const biryani = Biryani({
+  subsets: ['latin'],
+  weight: ['800']
+})
+
+export const dosis = Dosis({
+  subsets: ['latin']
+})
+
+export const poppins = Poppins({
+  subsets: ['latin'],
+  weight: ['400', '700']
+})
 
 export default function RootLayout({
   children,
@@ -16,7 +32,14 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <head>
+        <title>NUSSU Finsec </title>
+        <meta name='description' content='NUSSU Finsec' />
+      </head>
+      <body className={inter.className}>
+
+        {children}
+      </body>
     </html>
   )
 }
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -0,0 +1,39 @@
+import Header from '@/components/Auth/Header'
+import LSNavigation from '@/components/Auth/LSNavigation';
+import Authbox from '@/components/Auth/Authbox';
+import FormField from '@/components/Auth/FormField';
+import Button from '@/components/Auth/Button';
+
+import { biryani } from '../layout';
+import { dosis } from '../layout';
+
+const Login = () => {
+
+  return (
+    <main className='flex flex-row h-screen justify-center'>
+
+      <Header title={"Log In Page"}>
+        <LSNavigation currentPage='login'/>
+      </Header> 
+
+      <Authbox>
+        <h1 className={`${biryani.className} font-extrabold text-4xl text-lightblue mt-24 mb-4`}>Welcome</h1>
+        <FormField label='Email' type='email' placeholder=''/>
+        <FormField label='Password' type='password' placeholder=''/>
+        <button className={`${dosis.className} 
+          font-normal 
+          text-lg 
+          text-lightblue 
+          underline 
+          mt-8 
+          drop-shadow-lg`}>Forgot Password</button>
+
+        <Button label='Log In'/>
+
+      </Authbox>
+
+  </main>
+  )
+}
+
+export default Login;
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,113 +1,7 @@
-import Image from 'next/image'
+import { redirect } from 'next/navigation';
 
-export default function Home() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">src/app/page.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Explore starter templates for Next.js.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
-  )
+const Home = () => {
+  redirect('/login');
 }
+
+export default Home;
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
@@ -0,0 +1,36 @@
+import Header from '@/components/Auth/Header'
+import LSNavigation from '@/components/Auth/LSNavigation';
+import Authbox from '@/components/Auth/Authbox';
+import FormField from '@/components/Auth/FormField';
+import Button from '@/components/Auth/Button';
+
+import { biryani } from '../layout';
+
+const Signup = () => {
+
+  const dropdown = ['Cell #1', 'Cell #2', 'Cell #3', 'Project #4', 'Project #5', 'Committee #6']; 
+
+  return (
+    <main className='flex flex-row h-screen justify-center'>
+
+      <Header title={"Sign Up Page"}>
+        <LSNavigation currentPage='signup'/>
+      </Header> 
+
+      <Authbox>
+        <h1 className={`${biryani.className} font-extrabold text-4xl text-lightblue mt-12 mb-4`}>Welcome</h1>
+        <FormField label='Name' type='text' placeholder='' required/>
+        <FormField label='Cell/Committee/Project' type='select' placeholder='' required options={dropdown}/>
+        <FormField label='Email' type='email' placeholder='' required/>
+        <FormField label='Password' type='password' placeholder='' required/>
+        <FormField label='Confirm Password' type='password' placeholder='' required/>
+
+        <Button label='Sign Up'/>
+
+      </Authbox>
+
+    </main>
+  )
+}
+
+export default Signup;
diff --git a/src/components/Auth/Authbox.tsx b/src/components/Auth/Authbox.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+interface AuthboxProps {
+    children?: React.ReactNode;
+}
+
+
+const Authbox: React.FC<AuthboxProps> = ({ children }) => {
+  return (
+    <div className='flex flex-col mt-24 bg-greyblue bg-opacity-25 w-1/2 items-center'>
+        { children }
+    </div>
+  )
+}
+
+export default Authbox;
diff --git a/src/components/Auth/Button.tsx b/src/components/Auth/Button.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import React from 'react'
+import { dosis } from '@/app/layout'
+
+const Button = ({label} : {label:string}) => {
+  return (
+    <button 
+    className={`${dosis.className} 
+      w-1/4 mt-8 p-2
+      font-semibold 
+        text-lg 
+      text-white 
+      hover:text-lightblue
+      bg-greyblue 
+      rounded-md
+      drop-shadow-lg
+      `} 
+      onClick={() => alert(`${label} Clicked!!`)}>{label}</button>
+  )
+}
+
+export default Button;
diff --git a/src/components/Auth/FormField.tsx b/src/components/Auth/FormField.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import { dosis } from '@/app/layout'
+
+interface FormFieldProps {
+    label: string,
+    type: string,
+    placeholder?: string,
+    required?: boolean,
+    options?: string[]
+} 
+
+const FormField: React.FC<FormFieldProps> = ({ label, type, placeholder, required, options}) => {
+
+  return (
+    <div className='flex flex-col w-1/2 mt-4'>
+        <label className={`${dosis.className} font-semibold text-black text-lg`}>
+            {label} {required && <span className='text-red-500'>*</span>}
+        </label>
+
+        {/* Conditionally make it a dropdown cell, if options string[] is passed in */}
+        {/* Else, its just a normal input text box */}
+
+        {type === 'select' && options 
+            ? 
+            <select className='border border-black h-9 p-1 text-black drop-shadow-lg'>
+                { options.map((option, index) => (
+                    <option key={index} value={option}>{option}</option>
+                ))}
+            </select> 
+            : 
+            <input className='border border-black h-9 p-2 text-black drop-shadow-lg' type={type} placeholder={placeholder} />}
+
+    </div>
+  )
+}
+
+export default FormField;