Merge pull request #17 from TusharSin810/main

Made a PopUp

package.json

@@ -16,6 +16,7 @@
     "@testing-library/user-event": "^13.5.0",
     "bootstrap": "^5.3.3",
     "formik": "^2.4.6",
+    "npm": "^10.8.2",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.4",
     "react-dom": "^18.3.1",
@@ -24,6 +25,7 @@
     "react-scripts": "5.0.1",
     "react-slick": "^0.30.2",
     "slick-carousel": "^1.8.1",
+    "start": "^5.1.0",
     "styled-components": "^6.1.12",
     "web-vitals": "^2.1.4"
   },

src/App.css

@@ -0,0 +1,17 @@
+.popup{
+    padding-top: 50px;
+    font-weight: bolder;
+    color: white;
+    text-decoration: none;
+    display: flex;
+    justify-content: center;
+}
+
+.popup-text{
+    color: white;
+    font-size: 22x;
+    font-weight: bolder;
+    display: flex;
+    justify-content: center;
+
+}

src/App.js

@@ -1,11 +1,25 @@
 import "./App.css";
 import Home from "./components/Home/Home";
 import Event from "./components/Events/Event";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route} from "react-router-dom";
 import Join from "./components/Join/join";
-
+import Modal from './components/Modal/Modal';
+import React,{useState,useEffect} from "react";
 
 function App() {
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsModalOpen(true);
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  const closeModal = () => setIsModalOpen(false);
+
   return (
     <div>
       <BrowserRouter>
@@ -15,6 +29,12 @@ function App() {
           <Route path="/join" element={<Join />} />
         </Routes>
       </BrowserRouter>
+
+      <Modal isOpen={isModalOpen} onClose={closeModal}>
+        <h2 className="popup">JOIN US NOW</h2>
+        <p className="popup-text">Be The Part Of A Amazing Community</p>
+      </Modal>
+
     </div>
   );
 }

src/components/Home/Home.jsx

@@ -9,6 +9,7 @@ import image1 from "../../images/image1.jpg";
 import teamData from "../../data/team.json";
 import Footer from "../Footer/Footer";
 
+
 const PrevArrow = ({ onClick }) => {
   return (
     <button className="prev-arrow" onClick={onClick}>

src/components/Modal/Modal.css

@@ -0,0 +1,55 @@
+
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+
+}
+
+
+.modal-content {
+    background: rgb(0, 0, 0) url('../../images/jodcLogoWB.svg') no-repeat center center;
+    background-size: contain;
+    padding: 40px;
+    max-width: 80%;
+    height: 300px;
+    max-height: 90vh;
+    position: relative;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    border-radius: 12px;
+    color: #fff;
+    overflow: hidden;
+    box-sizing: border-box;
+}
+
+
+.modal-close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    color: #fff;
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    font-size: 24px;
+    transition: transform 0.2s ease, color 0.2s ease;
+
+}
+
+.modal-close:hover {
+    transform: scale(1.2);
+    color: #ff5f5f;
+}
+
+
+.modal-close:focus {
+    outline: 3px solid #ff5f5f;
+    outline-offset: 2px;
+}

src/components/Modal/Modal.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import './Modal.css';
+
+const Modal = ({ isOpen, onClose, children }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-content back" onClick={e => e.stopPropagation()}>
+        <button className="modal-close" onClick={onClose}>x</button>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Modal;