Add StartPage

src/App.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import { ChakraProvider, Box, theme, Show } from '@chakra-ui/react';
+import React, {useState, useEffect} from 'react';
+import { ChakraProvider, Box, theme, Show, Fade } from '@chakra-ui/react';
 import EventsMobile from './Components/Events/EventsMobile';
 import Events from './Components/Events/events';
 import './App.css';
@@ -8,23 +8,40 @@ import './App.css';
 import Footer from './Components/Footer';
 import Carousel from './Pages/Carousel';
 import MediaPage from './Pages/MediaPage';
+import StartPage from './Pages/StartPage';
 function App() {
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 6900);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+
   return (
     <ChakraProvider theme={theme}>
-      <Box className='app-container' textAlign='center' fontSize='xl'>
-        <div style={{ overflowX: 'hidden' }}>
-          <HomePage />
-        </div>
-        <Show above='750px'>
-          <Events />
-        </Show>
-        <Show below='749px'>
-          <EventsMobile />
-        </Show>
-        <Carousel />
-        <MediaPage />
-        <Footer />
-      </Box>
+      {isLoading ? 
+      <Fade in={isLoading} duration={0.2} transition="ease">
+            <StartPage />
+          </Fade> :
+        ( <Box className='app-container' textAlign='center' fontSize='xl'>
+          <div style={{ overflowX: 'hidden' }}>
+            <HomePage />
+          </div>
+          <Show above='750px'>
+            <Events />
+          </Show>
+          <Show below='749px'>
+            <EventsMobile />
+          </Show>
+          <Carousel />
+          <MediaPage />
+          <Footer />
+        </Box> )
+      }
     </ChakraProvider>
   );
 }

src/Components/ModalDesktop.jsx

@@ -271,7 +271,7 @@ const ModalDesktop = props => {
                     >
                       {CircleCol}
                     </Heading>
-                    {CircleCol == '' ? <Image src={picture} /> : null}
+                    {CircleCol === '' ? <Image src={picture} /> : null}
                   </motion.div>
                 </motion.div>
               </motion.div>

src/Pages/StartPage.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import gif from '../assets/WavesAnimGIF_DevSoc.gif';
+
+export default function StartPage () {
+    return (
+        <div
+        style={{
+          width: '100vw',
+          height: '100vh',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          overflow: 'hidden',
+        }}
+      >
+        <img
+          src={gif}
+          alt="Animated Waves"
+          style={{
+            maxWidth: '100%',
+            maxHeight: '100%',
+            width: 'auto',
+            height: 'auto',
+          }}
+        />
+      </div>
+    );
+};
+
+