[WIP] feat: add new "Stories" page

src/App.jsx

@@ -29,6 +29,7 @@ const PrivacyPolicy = React.lazy(() =>
 )
 const Report = React.lazy(() => import('./components/Pages/Report'))
 const Story = React.lazy(() => import('./components/Pages/Story'))
+const Stories = React.lazy(() => import('./components/Pages/Stories'))
 const Tech = React.lazy(() => import('./components/Pages/Tech'))
 const Time = React.lazy(() => import('./components/Pages/Time'))
 const Trends = React.lazy(() => import('./components/Pages/Trends'))
@@ -85,6 +86,8 @@ export default function App() {
               <Route path="/privacy" component={PrivacyPolicy} />
               <Route path="/learn" component={Learn} exact />
               <Route path="/learn/:topic" component={LearnTopic} exact />
+              <Route path="/stories" component={Stories} exact />
+              <Route path="/stories.html" component={Stories} exact />
               <Route
                 path="/500000"
                 exact

src/components/FastTrackInsights.jsx

@@ -401,7 +401,13 @@ function FastTrackInsights() {
                         <iframe width="100%" height="" src="https://www.youtube.com/embed/pjswdUvwbFE" title="Atlas Stories Overview" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                     </VideoContainer>
                 </Grid>
-            </WrappedContainer>
+
+
+
+
+
+                </WrappedContainer>
+
         </Container>
     )
 }

src/components/Layout/Footer.jsx

@@ -143,11 +143,11 @@ const SignupForm = styled.div`
 `;
 /**
  * Footer component, nothing fancy here.
- * 
+ *
  * @component
  * @category Components/Layout
- * 
- * @param {boolean} signUp - if true, show the signup form 
+ *
+ * @param {boolean} signUp - if true, show the signup form
  * @returns {JSX.Element} - Footer component
  */
 const Footer = ({
@@ -194,7 +194,7 @@ const Footer = ({
                   <NavLink to="/learn">Learn Toolkit</NavLink>
                 </li>
                 <li>
-                  <NavLink to="/archive">Stories</NavLink>
+                  <NavLink to="/stories">Stories</NavLink>
                 </li>
               </ul>
             </span>
@@ -239,7 +239,7 @@ const Footer = ({
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                Healthy Regions &amp; Policies Lab  
+                Healthy Regions &amp; Policies Lab
               </a>
                , at the University of Illinois at Urbana, and the University of Chicago. Funded in part by the{' '}
               <a

src/components/Layout/Navbar.jsx

@@ -275,10 +275,10 @@ const NavHamburger = styled.button`
 `
 /**
  * @typedef {Object} DropdownEntry
- * 
+ *
  * An entry in for dropdown sub-links
- * 
- * @property {string} header - Title for dropdown 
+ *
+ * @property {string} header - Title for dropdown
  * @property {string} desc - Dropdown description
  * @property {string} link - Link for dropdown
  */
@@ -364,6 +364,11 @@ const defaultDropDowns = {
     },
   ],
   STORIES: [
+    {
+      header: 'Overview',
+      desc: 'Read the latest from the Stories Showcase',
+      link: '/stories',
+    },
     {
       header: 'Explore Map',
       desc: 'View stories from across the country on the Atlas map.',
@@ -395,14 +400,14 @@ const defaultDropDowns = {
 }
 
 /**
- * 
+ *
  * @component
  * @category Components/Layout
- * 
- * @param {Object} props 
+ *
+ * @param {Object} props
  * @param {string} props.light - Page theme light or dark
  * @param {DropdownContent} pageDropDowns - Object of dropdowns to render, defaults to defaultDropDowns in src/Components/Layout/Nav.jsx
- * @example 
+ * @example
  * function MyComponent(){
  *  return(
  *   <Nav light />

src/components/Pages/Home.jsx

@@ -999,7 +999,7 @@ function Home() {
           Explore the Atlas
         </ExploreButton>
 
-
+                
         <VideoModal
           open={videoModalInner}
           onClose={() => setVideoModalInner(false)}