Co-authored-by: Cooperzilla <[email protected]>

Author: SamGu-NRX

.vscode/settings.json

@@ -1 +1,10 @@
-{}
+{
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "**/Thumbs.db": true
+  }
+}

backend/router/login.js

@@ -71,3 +71,4 @@ router.post('/', async (req, res) => {
 });
 
 module.exports = router;
+

frontend/index.html

@@ -6,10 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"
-      rel="stylesheet"
-    />
+    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Bebas+Neue&display=swap" rel="stylesheet">
+
 
     <title>LuminAI</title>
   </head>

frontend/package.json

@@ -14,11 +14,11 @@
     "deploy": "gh-pages -d build"
   },
   "dependencies": {
+    "@emailjs/browser": "^4.3.3",
     "@tanstack/react-router": "^1.40.0",
     "aos": "^2.3.4",
     "axios": "^1.7.2",
     "dotenv": "^16.4.5",
-    "emailjs-com": "^3.2.0",
     "firebase": "^10.12.2",
     "locomotive-aos": "^1.0.7",
     "locomotive-scroll": "^4.1.4",
@@ -31,12 +31,13 @@
   },
   "devDependencies": {
     "@tanstack/router-vite-plugin": "^1.40.3",
+    "@types/aos": "^3.0.7",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.19",
     "babel-plugin-react-compiler": "^0.0.0",
-    "eslint": "^9.5.0",
+    "eslint": "^9.6.0",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-compiler": "0.0.0-experimental-51a85ea-20240601",
     "eslint-plugin-react-hooks": "^4.6.2",

frontend/pnpm-lock.yaml

@@ -1,31 +1,43 @@
+import Aos from 'aos';
+import 'aos/dist/aos.css';
+import { useEffect } from 'react';
+import AOSInit from '../utils/aos';
+
 const ContactSection = () => {
+
+    <AOSInit />
+
     return (
-      <div className="flex flex-col items-start p-4 bg-black text-white space-y-4">
+      <div className="flex flex-col items-start p-4 bg-black text-white space-y-4 shadow-lg">
         <p className="text-lg text-left">
-            We collaborate with all who <br />
-            believes in the education of our next generation. <br />
-            <span className="font-bold"> Let's transform the future of AI together. </span>
+          <span data-aos="fade-up" data-aos-delay="0">We collaborate with all who </span><br /> 
+          <span data-aos="fade-up" data-aos-delay="100">believes in the education of our next generation. </span><br />
+          <span className="font-bold" data-aos="fade-up" data-aos-delay="200"> Let's transform the future of AI together.</span>
         </p>
-        <a href="mailto:[email protected]" className="flex items-center space-x-2 group">
-            <span className="text-lg group-hover:scale=[102%] transition-transform duration-300">
-                [email protected]
-            </span>
-            <svg 
-                className="w-8 h-8 group-hover:translate-x-2 transition-transform duration-300" 
-                xmlns="http://www.w3.org/2000/svg" 
-                viewBox="0 0 24 24" 
-                fill="none" 
-                stroke="currentColor" 
-                strokeWidth="2" 
-                strokeLinecap="round" 
-                strokeLinejoin="round">
-                <line x1="5" y1="12" x2="19" y2="12" />
-                <polyline points="12 5 19 12 12 19" />
-            </svg>
+        <a href="mailto:[email protected]" className="flex items-center space-x-2 group">
+          <span className="text-lg group-hover:scale-105 transition-transform duration-300" data-aos="fade-up" data-aos-delay="300">
+            [email protected]
+          </span>
+          <svg 
+            className="w-8 h-8 group-hover:translate-x-2 transition-transform duration-300" 
+            xmlns="http://www.w3.org/2000/svg" 
+            viewBox="0 0 24 24" 
+            fill="none" 
+            stroke="currentColor" 
+            strokeWidth="2" 
+            strokeLinecap="round" 
+            strokeLinejoin="round"
+            data-aos="fade-up" 
+            data-aos-delay="400"
+          >
+            <line x1="5" y1="12" x2="19" y2="12" />
+            <polyline points="12 5 19 12 12 19" />
+          </svg>
         </a>
         <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-white group-hover:bg-transparent transition-all duration-300"></div>
-    </div>
+      </div>
     );
   };
 
-  export default ContactSection;
+  export default ContactSection;
+  

frontend/src/components/ContactUs.jsx

@@ -19,7 +19,7 @@ const Activities = () => {
   // GridItem Component
 const GridItem = ({ type, title, description }) => {
     return (
-      <div className="grid grid-item" data-type={type}>
+      <div className="custom-grid grid-item" data-type={type}>
         <h3>{title}</h3>
         <p>{description}</p>
       </div>

frontend/src/components/ExploreAI.jsx

@@ -1,7 +1,7 @@
-import '../../styles/App.css';
-import './Header.css';
-import getMode from '../../utils/getMode';
-import { Link } from '@tanstack/react-router';
+import "../../styles/App.css";
+import "./Header.css";
+import getMode from "../../utils/getMode";
+import { Link } from "@tanstack/react-router";
 
 const Header = () => {
   const mode = getMode();
@@ -11,16 +11,31 @@ const Header = () => {
   return (
     <header className={headerClass}>
       <div className="container mx-auto flex justify-between items-center">
-        <h2 className="text-2xl">LuminAI Innovate Scholars</h2>
+        <StyledLink
+          address="/"
+          text={<h2 className="text-2xl font-sans font-semibold">LuminAI Innovate Scholars</h2>}
+        />
         <nav className={navClass}>
-          <Link to="/" className="mx-2">Home</Link>
-          <Link to="/syllabus" className="mx-2">Syllabus</Link>
-          <Link to="/staff" className="mx-2">Meet Our Staff</Link>
-          <Link to="/inquiry" className="mx-2">Inquiry</Link>
+          <StyledLink address="/Syllabus" text="Syllabus" />
+          <StyledLink address="/Staff" text="Meet Our Staff" />
+          <StyledLink address="/Inquiry" text="Inquiry" />
+          <StyledLink address="/Login" text="Login" />
         </nav>
       </div>
     </header>
   );
 };
 
 export default Header;
+
+function StyledLink({ address, text }) {
+  return (
+    <Link
+      to={address}
+      className="relative mx-1 p-2 bg-white overflow-hidden group"
+    >
+      <span className="relative z-10">{text}</span>
+      <div className="absolute rounded-md inset-0 bg-gradient-to-r from-cyan-300 to-purple-300 transition-transform duration-300 transform scale-x-0 group-hover:scale-x-100 origin-left"></div>
+    </Link>
+  );
+}

frontend/src/components/Header/Header.jsx

@@ -13,6 +13,7 @@
 import { Route as rootRoute } from './routes/__root'
 import { Route as SyllabusImport } from './routes/Syllabus'
 import { Route as StaffImport } from './routes/Staff'
+import { Route as LoginImport } from './routes/Login'
 import { Route as InquiryImport } from './routes/Inquiry'
 import { Route as IndexImport } from './routes/index'
 
@@ -28,6 +29,11 @@ const StaffRoute = StaffImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const LoginRoute = LoginImport.update({
+  path: '/Login',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const InquiryRoute = InquiryImport.update({
   path: '/Inquiry',
   getParentRoute: () => rootRoute,
@@ -56,6 +62,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof InquiryImport
       parentRoute: typeof rootRoute
     }
+    '/Login': {
+      id: '/Login'
+      path: '/Login'
+      fullPath: '/Login'
+      preLoaderRoute: typeof LoginImport
+      parentRoute: typeof rootRoute
+    }
     '/Staff': {
       id: '/Staff'
       path: '/Staff'
@@ -78,6 +91,7 @@ declare module '@tanstack/react-router' {
 export const routeTree = rootRoute.addChildren({
   IndexRoute,
   InquiryRoute,
+  LoginRoute,
   StaffRoute,
   SyllabusRoute,
 })
@@ -92,6 +106,7 @@ export const routeTree = rootRoute.addChildren({
       "children": [
         "/",
         "/Inquiry",
+        "/Login",
         "/Staff",
         "/Syllabus"
       ]
@@ -102,6 +117,9 @@ export const routeTree = rootRoute.addChildren({
     "/Inquiry": {
       "filePath": "Inquiry.jsx"
     },
+    "/Login": {
+      "filePath": "Login.jsx"
+    },
     "/Staff": {
       "filePath": "Staff.jsx"
     },

frontend/src/components/Preloader.jsx

@@ -0,0 +1,11 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/Login')({
+    component: Login,
+});
+
+function Login() {
+    return (
+        <p></p>
+    )
+}

frontend/src/routeTree.gen.ts

@@ -17,8 +17,6 @@ export const Route = createFileRoute('/Staff')({
 function Staff() {
   const colorMode = getMode();
 
-
-
   const teamMembers = [
     { 
       name: 'John Doe', 
@@ -62,12 +60,13 @@ function Staff() {
       <Helmet>
         <title>LuminAI - Staff</title>
       </Helmet>
-      <div className="custom-border p-4 justify-center text-center" style={{ animation: 'textPopIn 0.7s ease-in-out' }}>
+      <div className="pt-24 p-4 justify-center text-center">
         <h2 className="text-2xl font-bold mb-4">Meet Our Staff</h2>
         <p>Information about our experienced instructors and staff members.</p>
 
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
           {teamMembers.map((member, index) => (
+            <div style={{ animation: 'textPopIn 0.7s ease-in-out' }}>
             <div
               key={index}
               className="bg-white bg-opacity-80 p-6 rounded-lg text-center relative group"
@@ -77,12 +76,13 @@ function Staff() {
                 <MovingGradient />
               </div>
               <h2 className="text-2xl font-bold ">{member.name}</h2>
-              <div className="transform absolute inset-0 transition hover:scale-105 rounded-md bg-white bg-opacity-90 p-6 flex flex-col justify-center items-center opacity-0 group-hover:opacity-100 ">
+              <div className="transform absolute inset-0 duration-300 transition hover:scale-105 rounded-md bg-white bg-opacity-90 p-6 flex flex-col justify-center items-center opacity-0 group-hover:opacity-100 ">
                 <p className="text-lg">{member.role}</p>
                 <p className="text-sm italic">{member.fact}</p>
                 <p className="text-gray-600">{member.description}</p>
               </div>
             </div>
+            </div>
           ))}
         </div>
       </div>