Merge landing page and login/sign up page interface (#3)

* landing page finished but requires performance optimization * Optimized 3D renders for landing and home page, reducing loading time
RupertJonesSA · Oct 21, 2024 · c201d95 · c201d95
1 parent 2aa08f1
commit c201d95
Show file tree

Hide file tree

Showing 26 changed files with 239 additions and 126 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -9,18 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.13"
+    "@splinetool/react-spline": "^4.0.0",
+    "next": "^14.2.13",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.13",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.13"
+    "typescript": "^5"
   }
 }
diff --git a/client/src/app/favicon.ico b/client/src/app/favicon.ico
diff --git a/client/src/app/fonts/GeistMonoVF.woff b/client/src/app/fonts/GeistMonoVF.woff
diff --git a/client/src/app/fonts/GeistVF.woff b/client/src/app/fonts/GeistVF.woff
diff --git a/client/src/app/fonts/NeueHaasDisplayBlack.ttf b/client/src/app/fonts/NeueHaasDisplayBlack.ttf
diff --git a/client/src/app/fonts/NeueHaasDisplayBlackItalic.ttf b/client/src/app/fonts/NeueHaasDisplayBlackItalic.ttf
diff --git a/client/src/app/fonts/NeueHaasDisplayBold.ttf b/client/src/app/fonts/NeueHaasDisplayBold.ttf
diff --git a/client/src/app/fonts/NeueHaasDisplayBoldItalic.ttf b/client/src/app/fonts/NeueHaasDisplayBoldItalic.ttf
diff --git a/client/src/app/fonts/NeueHaasDisplayLight.ttf b/client/src/app/fonts/NeueHaasDisplayLight.ttf
diff --git a/client/src/app/fonts/NeueHaasDisplayLightItalic.ttf b/client/src/app/fonts/NeueHaasDisplayLightItalic.ttf
diff --git a/client/src/app/fonts/NeueHaasDisplayMediu.ttf b/client/src/app/fonts/NeueHaasDisplayMediu.ttf
diff --git a/client/src/app/fonts/NeueHaasDisplayMediumItalic.ttf b/client/src/app/fonts/NeueHaasDisplayMediumItalic.ttf
diff --git a/client/src/app/fonts/NeueHaasDisplayRoman.ttf b/client/src/app/fonts/NeueHaasDisplayRoman.ttf
diff --git a/client/src/app/fonts/NeueHaasDisplayRomanItalic.ttf b/client/src/app/fonts/NeueHaasDisplayRomanItalic.ttf
diff --git a/client/src/app/fonts/NeueHaasDisplayThin.ttf b/client/src/app/fonts/NeueHaasDisplayThin.ttf
diff --git a/client/src/app/fonts/NeueHaasDisplayThinItalic.ttf b/client/src/app/fonts/NeueHaasDisplayThinItalic.ttf
diff --git a/client/src/app/fonts/NeueHaasDisplayXThin.ttf b/client/src/app/fonts/NeueHaasDisplayXThin.ttf
diff --git a/client/src/app/fonts/NeueHaasDisplayXThinItalic.ttf b/client/src/app/fonts/NeueHaasDisplayXThinItalic.ttf
diff --git a/client/src/app/fonts/NeueHaasDisplayXXThin.ttf b/client/src/app/fonts/NeueHaasDisplayXXThin.ttf
diff --git a/client/src/app/fonts/NeueHaasDisplayXXThinItalic.ttf b/client/src/app/fonts/NeueHaasDisplayXXThinItalic.ttf
diff --git a/client/src/app/globals.css b/client/src/app/globals.css
@@ -25,3 +25,10 @@ body {
     text-wrap: balance;
   }
 }
+
+@font-face {
+  font-family: 'NeueHaas';
+  src: url('./fonts/NeueHaasDisplayMediu.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
@@ -1,22 +1,5 @@
-import type { Metadata } from "next";
-import localFont from "next/font/local";
 import "./globals.css";
-
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
-});
-
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+import Head from "next/head";
 
 export default function RootLayout({
   children,
@@ -25,11 +8,14 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+      <Head>
+        <meta charSet="UTF-8"/>
+        <meta name="viewport" content="width=device-width, intial-scale=1.0"/>
+        <title>Notoria</title>
+      </Head>
+      <body>
         {children}
       </body>
-    </html>
+    </html> 
   );
 }
diff --git a/client/src/app/login/page.tsx b/client/src/app/login/page.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import Spline from "@splinetool/react-spline";
+import { useState } from "react";
+import Head from "next/head";
+import { Suspense } from "react";
+
+const Page = () => {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleSubmit = (e: any) => {
+    e.preventDefault();
+  };
+
+  return (
+    <>
+      <Head>
+        <link
+          rel="preconnect"
+          href="https://prod.spline.design"
+          crossOrigin="anonymous"
+        />
+        <link
+          rel="preload"
+          href="https://draft.spline.design/T7tCI0NsyUBMwcXM/scene.splinecode"
+          as="fetch"
+          crossOrigin="anonymous"
+        />
+      </Head>
+      <div className="bg-black w-screen h-screen">
+        <Spline
+          className="w-screen h-screen fixed"
+          scene="https://draft.spline.design/T7tCI0NsyUBMwcXM/scene.splinecode"
+        />
+
+        <form
+          onSubmit={handleSubmit}
+          className="fixed top-48 left-[525px] max-w-md mx-auto p-4"
+        >
+          <div className="mb-4">
+            <label
+              htmlFor="email"
+              className="block text-sm font-medium text-white font-custom"
+            >
+              Email:
+            </label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              className="mt-1 p-2 block w-fill border border-gray-300 rounded-md shadow-sm text-black font-custom"
+            />
+          </div>
+
+          <div className="mb-4">
+            <label
+              htmlFor="password"
+              className="block text-sm font-medium text-white font-custom"
+            >
+              Password:
+            </label>
+            <input
+              type="password"
+              id="password"
+              name="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              className="mt-1 p-2 block w-full border border-gray-300 rounded-md shadow-sm text-black font-custom"
+            />
+          </div>
+
+          <button
+            type="submit"
+            className="w-full bg-violet-950 text-white p-2 rounded-md hover:bg-purple-300 font-custom"
+          >
+            Submit
+          </button>
+        </form>
+      </div>
+    </>
+  );
+};
+
+export default Page;