Added About Us

Added About Us modal Fixes : #100
shivansh-bhatnagar18 · Jun 14, 2024 · 98b867a · 98b867a
1 parent 9e336d9
commit 98b867a
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 16 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,13 +1,20 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+            integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vite + React + TS</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
 </html>
diff --git a/frontend/src/Navbar.tsx b/frontend/src/Navbar.tsx
@@ -4,10 +4,12 @@ import './index.css';
 import { useLocation, useNavigate } from 'react-router-dom';
 import RulesModal from './library/rulesModal';
 import { useAuth } from './contexts/AuthContext';
+import AboutUsModal from './library/aboutUsModal';
 
 const Navbar: React.FC = () => {
     const [sidebarOpen, setSidebarOpen] = useState(false);
     const [showRulesModal, setShowRulesModal] = useState(false);
+    const [showAboutUsModal, setShowAboutUsModal] = useState(false);
     const auth = useAuth();
     const navigate = useNavigate();
     const location = useLocation();
@@ -109,7 +111,8 @@ const Navbar: React.FC = () => {
                                 buttonSize="w-[170px] h-12"
                                 px="px-0"
                                 onClick={() => {
-                                    navigate('/about');
+                                    setShowAboutUsModal(true);
+                                    setSidebarOpen(false);
                                 }}
                             />
                         </div>
@@ -136,6 +139,9 @@ const Navbar: React.FC = () => {
             {showRulesModal && (
                 <RulesModal onClose={() => setShowRulesModal(false)} />
             )}
+            {showAboutUsModal && (
+                <AboutUsModal onClose={() => setShowAboutUsModal(false)} />
+            )}
         </div>
     );
 };

diff --git a/frontend/src/library/aboutUsModal.tsx b/frontend/src/library/aboutUsModal.tsx
@@ -0,0 +1,71 @@
+import { useRef } from 'react';
+
+interface ModalProps {
+    onClose: () => void;
+}
+
+const AboutUsModal: React.FC<ModalProps> = ({ onClose }) => {
+    const modalRef = useRef<HTMLDivElement>(null);
+
+    const closeModal = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        if (modalRef.current === e.target) {
+            onClose();
+        }
+    };
+
+    return (
+        <div
+            ref={modalRef}
+            onClick={closeModal}
+            className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm flex items-center justify-center z-10"
+        >
+            <div className="bg-[rgb(222,209,209)] p-5 rounded-xl border-4 border-black shadow-md flex flex-col gap-10 w-1/2 h-1/2 items-center justify-center">
+                <div className="relative flex flex-col h-full overflow-y-auto">
+                    <h1 className="font-normal font-[Kavoon] text-[30px] leading-[30px] text-black text-center">
+                        About Us
+                    </h1>
+                    <div className="text-left font-[Kavoon] px-4">
+                        <br />
+                        Welcome to our Multiplayer UNO Game website where our
+                        aim is to bring the joy of UNO to the digital realm,
+                        allowing friends and families to connect and play this
+                        beloved card game from anywhere in the world. It is a
+                        passion project developed under the CSOC’24 (COPS Summer
+                        of Code) initiative by COPS. <br />
+                        CSOC is one of our flagship programs, designed to
+                        provide students with hands-on coding experience during
+                        the summer break. Participants engage in a variety of
+                        projects, ranging from web development to machine
+                        learning, all while being mentored by experienced
+                        members of the COPS community. This Multiplayer UNO Game
+                        is one of the exciting outcomes of CSOC, showcasing the
+                        talent and dedication of our participants. COPS is an
+                        enthusiastic community of developers and programmers
+                        dedicated to fostering a culture of coding and
+                        innovation. It provides a collaborative environment
+                        where students can enhance their programming skills,
+                        work on real-world projects, and contribute to
+                        open-source initiatives. <br /> We invite you to join us
+                        in this exciting journey. Whether you are here to play
+                        UNO, provide feedback, or become a part of our vibrant
+                        community, we welcome you with open arms. Let's connect,
+                        code, and create together! For more information about
+                        COPS and our initiatives, visit our{' '}
+                        <a
+                            className=" text-blue-700"
+                            href="https://www.copsiitbhu.co.in/"
+                        >
+                            {' '}
+                            official website &nbsp;
+                            <i className="fa-solid fa-arrow-up-right-from-square"></i>
+                        </a>
+                        . Thank you for visiting, and we hope you enjoy your
+                        time playing UNO!
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default AboutUsModal;
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
@@ -4,12 +4,10 @@ import Button from '../library/button';
 import Navbar from '../Navbar';
 import Modal from '../library/modal';
 import '../index.css';
-import RulesModal from '../library/rulesModal';
 
 const Home: React.FC = () => {
     const navigate = useNavigate();
     const [showModal, setShowModal] = useState(false);
-    const [showRulesModal, setShowRulesModal] = useState(false);
     const CreateGame = () => {
         // Logic to create a game
         console.log('Create Game');
@@ -53,9 +51,6 @@ const Home: React.FC = () => {
                 />
             </div>
             {showModal && <Modal onClose={() => setShowModal(false)} />}
-            {showRulesModal && (
-                <RulesModal onClose={() => setShowRulesModal(false)} />
-            )}
         </div>
     );
 };