Closes #1 Updated landing page UI

Signed-off-by: Akash <[email protected]>

app/Home.module.css

@@ -0,0 +1,19 @@
+/* Home.module.css */
+.hoverEffect {
+  position: relative;
+}
+
+.hoverEffect::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 2px solid transparent; /* Set the initial border */
+  transition: border-color 0.5s ease;
+}
+
+.hoverEffect:hover::before {
+  border-color: #ffd700; /* Set the border color on hover */
+}

app/admin/page.tsx

@@ -25,6 +25,7 @@ const AdminPage = () => {
     onAuthStateChanged(auth, (user) => {
       if (user) {
         if (user.providerData[0].email === '[email protected]' || user.providerData[0].email === '[email protected]') {
+          console.log(user.uid)
           setUser(user);
         } else {
           toast.error("Unauthorized :(");
@@ -185,7 +186,7 @@ const AdminPage = () => {
   };
 
   return (
-    <div className='  flex flex-col items-center justify-center  p-6 text-white min-h-screen my-[100px]'>
+    <div className='  flex flex-col items-center justify-center  px-2 text-white min-h-screen my-[100px]'>
       <h1 className='text-3xl font-bold mb-6'>Admin Page</h1>
       {userData.length > 0 && quizData.length > 0 && (
         <div className="flex flex-wrap">
@@ -194,20 +195,20 @@ const AdminPage = () => {
               <div key={index} className="mr-4 mb-4">
                 <button
                   onClick={() => handleLockUnlockQuiz(quiz)}
-                  className={`bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded mb-4`}
+                  className={`bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 mb-4`}
                 >
                   <FontAwesomeIcon icon={lockStatus[quiz] ? faLock : faUnlock} />
                 </button>
                 <button
                   onClick={() => handleDownloadQuiz(quiz)}
-                  className={`bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mb-4`}
+                  className={`bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 mb-4`}
                 >
                   <FontAwesomeIcon icon={faDownload} className="mr-2" />
                   "{quiz}" Data
                 </button>
                 <button
                   onClick={() => handleDeleteQuiz(quiz)}
-                  className={`bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mb-4`}
+                  className={`bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 mb-4`}
                 >
                   <FontAwesomeIcon icon={faTrash} />
                 </button>

app/components/Signup.tsx

@@ -5,6 +5,7 @@ import { doc , setDoc} from 'firebase/firestore'; // Import Firestore functions
 import { auth, db } from '../firebase';
 import { createUserWithEmailAndPassword, updateProfile } from 'firebase/auth';
 import toast from "react-hot-toast";
+
 function SignUpForm() {
   const router = useRouter();
   const [error, setError] = useState<string | null>(null);
@@ -13,28 +14,43 @@ function SignUpForm() {
     const data = new FormData(event.currentTarget);
     let email = data.get('email') as string;
     let password = data.get('password') as string;
+    let usn = data.get('USN') as string;
+
+    // Validate USN format
+    const usnRegex = /^1DS[A-Z0-9]{7}$/;
+    if (!usnRegex.test(usn)) {
+      setError("USN must be of the form 1DS followed by seven alphanumeric characters.");
+      return;
+    }
+
+    // Validate USN length
+    if (usn.length !== 10) {
+      setError("USN must be 10 digits long.");
+      return;
+    }
 
     try {
       const userCredential = await createUserWithEmailAndPassword(auth, email, password);
       const user = userCredential.user;
-      // const user_id = uuidv4();      
+
       const userData = {
         uid: user.uid,
         email: user.email,
         displayName: data.get('firstName') + ' ' + data.get('lastName'),
-        USN: data.get('USN'),
+        USN: usn,
         quizData: []
       }
+
       // Create a user document in Firestore
       const userDocRef = doc(db, 'users', user.uid);
-          setDoc(userDocRef, userData)
-      .then(() => {
-        // console.log('User document created with UID: ', user.uid);
-      })
-      .catch((error) => {
-        console.error('Error creating user document: ', error);
-        toast.error("Sign up failed");
-      });
+      setDoc(userDocRef, userData)
+        .then(() => {
+          // console.log('User document created with UID: ', user.uid);
+        })
+        .catch((error) => {
+          console.error('Error creating user document: ', error);
+          toast.error("Sign up failed");
+        });
 
       // You can also update the user's profile
       await updateProfile(user, {
@@ -72,29 +88,31 @@ function SignUpForm() {
           />
         </div>
         <input
-        className="bg-customBeige text-black"
+          className="bg-customBeige text-black"
           type="email"
           name="email"
           placeholder="Email"
         />
         <input
-        className="bg-customBeige text-black"
+          className="bg-customBeige text-black"
           type="text"
           name="USN"
+          pattern="1DS[A-Z0-9]{7}"
+          title="USN must be of the form 1DS followed by seven alphanumeric characters."
           placeholder="USN"
         />
         <input
-        className="bg-customBeige text-black"
+          className="bg-customBeige text-black"
           type="password"
           name="password"
           placeholder="Password"
         />
         <button className="loginbutton bg-customViolet">Sign Up</button>
         {error && (
-            <p className="text-red-700 border border-black">
-              {error}
-            </p>
-          )}
+          <p className="text-red-700 border border-black">
+            {error}
+          </p>
+        )}
       </form>
     </div>
   );

app/page.tsx

@@ -1,32 +1,31 @@
 import React from 'react';
+import { FaUserCog, FaUserGraduate } from 'react-icons/fa'; // Import icons from Font Awesome
 import Link from 'next/link';
-
+import styles from './Home.module.css'; // Import CSS file for styling
 
 export default function Home() {
   return (
     <div className="flex flex-col items-center justify-center min-h-screen">
       {/* Cards Section */}
-      <div className="flex flex-wrap justify-center mt-8 md:space-x-[100px]">
+      <div className="flex flex-wrap items-center justify-center mt-8 md:space-x-[100px]">
         {/* Admin Card */}
         <Link href="/admin">
-          <div className="card bg-gradient-to-r from-[#0F4C75] to-[#3282B8] admin-card hover:tilt items-center justify-center lg:h-[500px] lg:w-[500px]  text-white font-semibold px-6 py-4 rounded-md cursor-pointer hover:bg-blue-600 transition-transform duration-300">
+          <div className={`card bg-gray-900 mx-6 admin-card items-center justify-center lg:h-[300px] lg:w-[500px] text-white font-semibold px-6 py-4 rounded-md cursor-pointer transition-transform duration-300 ${styles.hoverEffect}`}>
+            <FaUserCog className="text-4xl mb-4" /> {/* Font Awesome icon */}
             <h1 className="text-2xl mb-2">Admin Dashboard</h1>
             <h1>Manage quizzes and view user data.</h1>
           </div>
         </Link>
 
         {/* Student Card */}
         <Link href="/student">
-          <div className="card bg-gradient-to-l from-[#0F4C75] to-[#3282B8] student-card hover1:tilt  items-center justify-center lg:h-[500px] lg:w-[500px]  bg-green-500 text-white font-semibold px-6 py-4 rounded-md cursor-pointer hover:bg-green-600 transition-transform duration-300">
+          <div className={`card bg-gray-900 mx-6 student-card items-center justify-center lg:h-[300px] lg:w-[500px]  text-white font-semibold px-6 py-4 rounded-md cursor-pointer transition-transform duration-300 ${styles.hoverEffect}`}>
+            <FaUserGraduate className="text-4xl mb-4" /> {/* Font Awesome icon */}
             <h1 className="text-2xl mb-2">Student Dashboard</h1>
             <h1>Take quizzes and track your progress.</h1>
           </div>
         </Link>
       </div>
-
-
     </div>
   );
-
-
 }

package.json

@@ -23,6 +23,7 @@
     "react-dom": "^18",
     "react-dropzone": "^14.2.3",
     "react-hot-toast": "^2.4.1",
+    "react-icons": "^5.2.0",
     "uuid": "^9.0.1",
     "xlsx": "^0.18.5"
   },