fix various bugs

Author: SamGu-NRX

.github/workflows/deploy.yml

@@ -3,7 +3,7 @@ name: Deploy to GitHub Pages
 on:
   push:
     branches:
-      - main
+      - master
 
 jobs:
   build:

src/App.css

@@ -85,3 +85,22 @@ code {
 .fadeIn {
   animation: fadeIn 1s ease-out forwards;
 }
+
+.modal-enter-active {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.modal-exit-active {
+  transform: translateY(4);
+  opacity: 0;
+}
+
+/* @keyframes buttonHover {
+    0% {
+      color:lab(from color l a b);
+    }
+    100%{
+      color: lab(from color l+200 a b);
+    }
+} */

src/components/ApplyButton.jsx

@@ -12,7 +12,7 @@ const ApplyButton = () => {
   return (
     <div className="text-center mt-8">
       <button onClick={openModal} className="bg-green-500 text-white py-2 px-4 rounded hover:bg-green-700">
-        Apply Now
+        Apply Now!
       </button>
       <Modal isOpen={isOpen} onClose={closeModal} onConfirm={handleConfirmClick}>
         <p className="mb-4">You are about to leave LuminAI. Do you want to proceed?</p>

src/pages/staff.jsx

@@ -1,9 +1,14 @@
 import React from 'react';
 
 const Staff = () => (
-  <div className="p-4 justify-center text-center">
-    <h2 className="text-2xl font-bold mb-4">Meet Our Staff</h2>
+  <div className="p-4 justify-center text-center"
+  style={{animation: 'textPopIn 0.7s ease-in-out'}}
+  >
+    <h2 className="text-2xl font-bold mb-4">
+      Meet Our Staff
+    </h2>
     <p>Information about our experienced instructors and staff members.</p>
+    
   </div>
 );
 

src/styles/tailwind.css

@@ -3,13 +3,7 @@
 @tailwind utilities;
 
 /* Add this to your tailwind.css or another CSS file */
-.modal-enter-active {
-    transform: translateY(0);
-    opacity: 1;
+.darken-slide {
+    background-image: linear-gradient(to bottom, var(--tw-bg-opacity, 1) var(--tw-bg-opacity, 1) 50%, #3730a3 100%);
+    animation: darkenSlide 1s forwards;
   }
-  
-  .modal-exit-active {
-    transform: translateY(4);
-    opacity: 0;
-  }
-  

src/utils/colorUtils.js

@@ -0,0 +1,23 @@
+// Utility function to convert hex to RGB
+export const hexToRgb = (hex) => {
+    const bigint = parseInt(hex.slice(1), 16);
+    const r = (bigint >> 16) & 255;
+    const g = (bigint >> 8) & 255;
+    const b = bigint & 255;
+    return [r, g, b];
+  };
+  
+  // Utility function to convert RGB to hex
+  export const rgbToHex = (r, g, b) => {
+    return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+  };
+  
+  // Function to darken a color by a percentage
+  export const darkenColor = (hex, percent) => {
+    const [r, g, b] = hexToRgb(hex);
+    const newR = Math.max(0, Math.min(255, Math.floor(r * (1 - percent))));
+    const newG = Math.max(0, Math.min(255, Math.floor(g * (1 - percent))));
+    const newB = Math.max(0, Math.min(255, Math.floor(b * (1 - percent))));
+    return rgbToHex(newR, newG, newB);
+  };
+