Feature: New Website Notice

src/components/HomePage.jsx

@@ -15,6 +15,14 @@ import {
   HomePageSubTitle,
   HomePageTitle,
 } from '../data/TextContent';
+import { ReactComponent as GlobeSVG } from '../data/svg/globe.svg';
+
+const newWebsiteURL = () => {
+  const url = new URL(window.location.href)
+  url.hostname = 'whatstherush.earth'
+  url.port = ''
+  return url
+}
 
 export default function HomePage() {
   return (
@@ -37,7 +45,7 @@ export default function HomePage() {
       >
         <Box
           bgColor='white'
-          borderRadius='xl'
+          borderRadius='32px'
           marginTop='1.5rem'
           marginBottom={{base: '21.5rem', md: '1.5rem'}}
           marginStart='0.5rem'
@@ -89,6 +97,37 @@ export default function HomePage() {
               </Button>
             </Link>
           </Flex>
+          <Box
+            direction='column'
+            gap='2'
+            marginTop='1'
+            marginBottom='4'
+            padding='4'
+            borderRadius='xl'
+            backgroundColor='orange.200'
+            color='gray.700'
+            fontWeight='bold'
+          >
+            <p>
+              <GlobeSVG
+                height='5rem'
+                width='5rem'
+                style={{ 
+                  float: 'right',
+                  marginLeft: '10px'
+                }}
+              />
+              {"RUSH is moving to the next stage of our development, come check out the improvements we've made at: "}
+              <Link
+                href={newWebsiteURL()}
+                style={{
+                  textDecoration: 'underline',
+                  color: '#3182CE',
+                }}
+              >whatstherush.earth</Link>
+            </p>
+            <p style={{ marginTop: '.75rem'}}>This website will soon permenantly redirect to the new website, but don't worry, all your links and QR codes will still work.</p>
+          </Box>
         </Box>
         <Box
           position='absolute'

src/components/NavBar.jsx

@@ -1,22 +1,31 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Link as ReactLink } from 'react-router-dom';
 import {
   Box,
   Button,
   ButtonGroup,
+  Divider,
   Link,
   Menu,
   MenuButton,
   MenuItem,
   MenuList,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
   Spacer,
   useBreakpointValue,
+  useDisclosure,
   useMediaQuery,
   useMultiStyleConfig,
 } from '@chakra-ui/react';
 import { FiInstagram, FiMessageSquare, FiHelpCircle, FiMap, FiMenu } from 'react-icons/fi';
 //import LandingModalButton from './LandingModalButton';
 import ShareModalButton from './ShareModalButton';
+import { ReactComponent as GlobeSVG } from '../data/svg/globe.svg';
 
 export default function NavBar(props) {
 
@@ -90,10 +99,91 @@ export default function NavBar(props) {
     />
   );
 
+  const newWebsiteURL = () => {
+    const oldURL = new URL(getShareURL())
+    const path = oldURL.pathname.split('/')
+    const geo = {
+      latLng: path.at(-1),
+      zoom: path.at(-2),
+      question: path.at(-3),
+    }
+    console.log(path)
+    console.log(geo)
+
+    const url = new URL(oldURL)
+    url.hostname = 'whatstherush.earth'
+    url.port = ''
+    if (geo.question === 'undefined' || geo.question === undefined) {
+      url.pathname = path.includes('app') ? 'app' : ''
+      url.search = ''
+    } else {
+      url.pathname = `/app/${geo.question}`
+      url.search = new URLSearchParams({
+        zoom: geo.zoom,
+        lat: geo.latLng.split(',')[0],
+        lng: geo.latLng.split(',')[1]
+      }).toString()
+    }
+    return url
+  }
+
+  const NewWebsiteButton = () => {
+    const { isOpen, onOpen, onClose } = useDisclosure()
+    const [ newURL, setNewURL ] = useState('https://whatstherush.earth/')
+    return (
+      <>
+        <Button
+          leftIcon={<GlobeSVG width='16px' height='16px' />}
+          fontWeight='inherit'
+          onClick={() => {
+            onOpen()
+            setNewURL(newWebsiteURL())
+          }}
+        >
+          New
+        </Button>
+        <Modal isOpen={isOpen} onClose={onClose}>
+          <ModalOverlay />
+          <ModalContent backgroundColor='orange.200' borderRadius='xl' paddingBottom='2'>
+            <ModalHeader>New Website</ModalHeader>
+            <ModalCloseButton />
+            <ModalBody>
+              <p>
+                <GlobeSVG
+                  height='5rem'
+                  width='5rem'
+                  style={{ 
+                    float: 'right',
+                    marginLeft: '10px'
+                  }}
+                />
+                {"RUSH is moving to the next stage of our development, come check out the improvements we've made at: "}
+              </p>
+              <Box padding='3'>
+                <Link
+                  href={newURL}
+                  style={{
+                    fontWeight: 'bold',
+                    textDecoration: 'underline',
+                    color: '#3182CE',
+                  }}
+                >whatstherush.earth</Link>
+              </Box>
+              <p style={{ marginTop: '.25rem'}}>This website will soon permenantly redirect to the new website, but don't worry, all your links and QR codes will still work.</p>
+            </ModalBody>
+          </ModalContent>
+        </Modal>
+      </>
+    )
+  }
+
   const menuBurgerButtons = useBreakpointValue({
     base: (
       // smallest mobile phones contain all buttons + menu that spans the entire screen.
       <MenuList h='100vh' w="100vw">
+        <MenuItem>
+          <NewWebsiteButton />
+        </MenuItem>
         <MenuItem>
           {mapButton}
         </MenuItem>
@@ -165,12 +255,16 @@ export default function NavBar(props) {
     ),
     sm: (
       <ButtonGroup id='navbar-buttons' variant='nav' spacing='-2'>
-        {mapButton}{aboutButton}{menuBurger}
+        {<NewWebsiteButton />}{mapButton}{aboutButton}{menuBurger}
       </ButtonGroup>
     ),
     lg: (
       <ButtonGroup id='navbar-buttons' variant='nav' spacing='-2'>
-        {mapButton}{aboutButton}{feedbackButton}{instagramButton}{shareButton}
+        {<NewWebsiteButton />}{
+          <Box padding='2' height='2.5rem'>
+            <Divider orientation='vertical' borderColor='gray.300' />
+          </Box>
+        }{mapButton}{aboutButton}{feedbackButton}{instagramButton}{shareButton}
       </ButtonGroup>
     ),
   },{ssr:false});