added popup on home page

Author: siddharthd0

public/sneakpeak.svg

@@ -6,12 +6,14 @@ import Courses from "@/components/courses";
 import Finder from "@/components/internship-finder";
 import Features from "@/components/features";
 import Approach from "@/components/approach";
+import Popup from "@/components/popup";
 import { Box } from "@chakra-ui/react";
 
 export default function Home() {
 
   return (
     <Box my={["20px", "130px"]} px={5}>
+      <Popup />
       <HeroHeader />
       <Courses />
       <Features />

src/app/page.js

@@ -63,7 +63,7 @@ function Form({ questions = [], role = "" }) {
       if (response.ok) {
         toast({
           title: 'Congrats!',
-          description: 'We have received your application. We will reach out to you soon!',
+          description: 'We have received your application. We will reach out to you soon! ',
           status: 'success',
           duration: 5000,
           isClosable: true,

src/components/form.jsx

@@ -0,0 +1,57 @@
+import {
+    Box,
+    Button,
+    Image,
+    Modal,
+    ModalOverlay,
+    ModalContent,
+    ModalHeader,
+    ModalCloseButton,
+    Text,
+    ModalBody,
+    ModalFooter,
+    useDisclosure,
+  } from "@chakra-ui/react";
+  import React, { useEffect, useState } from "react";
+  
+  function Popup() {
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const [isFirstTime, setIsFirstTime] = useState(false);
+  
+    useEffect(() => {
+      if (typeof window !== "undefined") {
+        const seenPopup = localStorage.getItem("seenPopup");
+        if (!seenPopup || seenPopup === "false") {
+          setIsFirstTime(true);
+          onOpen();
+          localStorage.setItem("seenPopup", "true");
+        }
+      }
+    }, [onOpen]);
+  
+    return (
+      <Modal isOpen={isFirstTime && isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader color="blackAlpha.900">Check Out Our Dashboard</ModalHeader>
+          
+          <ModalCloseButton color="black" />
+          <ModalBody>
+            <Text color="blackAlpha.900">
+                We have a learning platform where you can learn about various technologies and increase your knowledge for free.
+            </Text>
+            <Image src="/sneakpeak.svg" alt="Dashboard Image" />
+          </ModalBody>
+      
+            <Button colorScheme="blue" my={4} mx={8} as="a" href="https://dashboard.techoptimum.org">
+            Check out 15+ coding courses
+            </Button>
+           
+     
+        </ModalContent>
+      </Modal>
+    );
+  }
+  
+  export default Popup;
+