Tutorial feature implementation

src/components/DaySelect/time_select_component/time_select_component.tsx

@@ -55,7 +55,7 @@ export const TimeSelectComponent = (props: any) => {
 
   return (
     <div
-      className={`time-select-container absolute z-50 ${props.paddingClass} flex flex-row items-center justify-center flex-wrap gap-2`}
+      className={`time-select-container absolute z-[49] ${props.paddingClass} flex flex-row items-center justify-center flex-wrap gap-2`}
     >
       <div className="grid items-center">
         <p className="text-right dark:text-text-dark font-normal m-0 text-xs sm:text-base">

src/components/Home/HomePage.tsx

@@ -7,6 +7,7 @@ import graphic from './calendargraphic.png';
 import LoginPopup from '../utils/components/LoginPopup';
 import Footer from '../utils/components/Footer';
 import Button from '../utils/components/Button';
+import TutorialModal from '../utils/components/TutorialModal/TutorialModal';
 
 // import { SiGooglecalendar } from 'react-icons/si';
 // import { FaLock } from 'react-icons/fa';
@@ -72,10 +73,19 @@ export default function HomePage() {
     }
   };
 
+  const [showTutorial, setTutorial] = React.useState<boolean>(false);
+
   return (
     <div className="flex flex-col min-h-screen">
       <div className="h-1 md:h-8"></div>
 
+      {showTutorial && (
+        <TutorialModal
+          isOpen={!!showTutorial}
+          onClose={() => setTutorial(false)}
+        />
+      )}
+
       <div className="flex-grow w-full overflow-auto px-8 sm:p-14 pt-0 md:px-16 md:pt-14 lg:px-40 xl:px-60 mb-3">
         <div className="flex-col-reverse justify-center md:flex-row flex md:h-1/2 mb-10">
           <div className="justify-center self-center space-y-5 md:space-y-12 max-w-full mb-4 min-w-[70%] md:w-[90%]">
@@ -127,6 +137,16 @@ export default function HomePage() {
                 View My Events
               </Button>
             </div>
+
+            <h1 className="text-text dark:text-text-dark">
+              <b>New to ymeets? →  </b>
+              <span 
+              className='cursor-pointer hover:text-primary transition'
+              onClick={() => setTutorial(true)}>
+                <u>Click here for a quick walkthrough!</u>
+              </span>
+            </h1>
+
           </div>
 
           <div className="flex md:w-[40%] justify-center pb-1 md:pb-4 sm:pb-7 md:pb-0 md:pl-0">

src/components/navbar/NavBar.tsx

@@ -5,6 +5,7 @@ import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { onAuthStateChanged } from 'firebase/auth';
 import { auth } from '../../backend/firebase';
+import TutorialModal from '../utils/components/TutorialModal/TutorialModal';
 
 import {
   IconMenu2,
@@ -19,6 +20,7 @@ import {
   IconMoonFilled,
   IconMoon,
   IconSun,
+  IconBook,
 } from '@tabler/icons-react';
 import { useAuth } from '../../backend/authContext';
 import { useTheme } from '../../contexts/ThemeContext';
@@ -34,6 +36,8 @@ export default function NavBar() {
 
   const { login, logout, currentUser } = useAuth();
 
+  const [showTutorial, setTutorial] = useState(false);
+
   const handleMouseLeave = () => {
     setIsOpen(false);
   };
@@ -82,6 +86,13 @@ export default function NavBar() {
 
   return (
     <>
+    {showTutorial && (
+      <TutorialModal
+        isOpen={!!showTutorial}
+        onClose={() => setTutorial(false)}
+      />
+    )}
+
       <div className="flex flex-col w-full pt-6 justify-center z-40 items-center">
         <div className="flex bg-secondary_background dark:bg-secondary_background-dark rounded-xl h-16 w-[94%] px-5 sm:px-8 items-center justify-between shadow-lg">
           <NavLogo />
@@ -148,6 +159,20 @@ export default function NavBar() {
                     aria-orientation="vertical"
                     aria-labelledby="options-menu"
                   >
+                    <a
+                      href="#"
+                      className="flex items-center justify-start px-4 py-2 text-sm text-gray-700 dark:text-text-dark hover:bg-primary hover:text-white transition-colors duration-200"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        setTutorial(true);
+                        setMenuState('closed');
+                      }}
+                    >
+                      <IconBook className="mr-2" size={17} /> Tutorial
+                    </a>
+
+                    <div className="border-t border-gray-200"></div>
+
                     <a
                       href="#"
                       className="flex items-center justify-start px-4 py-2 text-sm text-gray-700 dark:text-text-dark hover:bg-primary hover:text-white transition-colors duration-200"