Merge branch 'main' into big-button

OperationSpark · Jun 13, 2024 · 0388275 · 0388275
2 parents 0f7836b + 5f83131
commit 0388275
Show file tree

Hide file tree

Showing 13 changed files with 122 additions and 62 deletions.
diff --git a/data/about.json b/data/about.json
@@ -173,17 +173,21 @@
       }
     ],
     "directors": [
+      {
+        "name": "John Fraboni, President & CEO",
+        "role": "Operation Spark, New Orleans"
+      },
       {
         "name": "Max Gaudin, Chair",
         "role": "Head of Growth, Soul Addict"
       },
       {
-        "name": "Brandon Davis",
-        "role": "Partner, Phelps Dunbar"
+        "name": "Grace Clark-Espinoza",
+        "role": "Management Development Analyst, City of New Orleans"
       },
       {
-        "name": "Chris LeBato",
-        "role": "CEO, MC Bank New Orleans"
+        "name": "Rikia Stewart",
+        "role": "Software Developer"
       }
     ]
   },

diff --git a/next.config.js b/next.config.js
@@ -6,13 +6,15 @@ const { validateData } = require('./data/validate');
 const {
   OVERRIDE_NODE_ENV = '',
   FB_PIXEL_ID,
-  HIGHSCHOOL_FORM_ACTIVE = 'false',
+  HIGHSCHOOL_FORM_ACTIVE_UNTIL,
   HIGHSCHOOL_FORM_RESPONSES_NAME = '__TAB_NAME_NOT_SET__',
 } = process.env;
 
-const isHsFormActive = HIGHSCHOOL_FORM_ACTIVE?.toLowerCase() === 'true';
+const hsFormActiveUntil = new Date(HIGHSCHOOL_FORM_ACTIVE_UNTIL);
 
 module.exports = (phase, { defaultConfig }) => {
+  const isHsFormActive = hsFormActiveUntil > new Date();
+
   console.info(color.magentaBright.bold('\nValidating... '));
   if (
     !process.env.GITHUB_ACTION &&
@@ -40,16 +42,19 @@ module.exports = (phase, { defaultConfig }) => {
   /**
    * @type {import('next').NextConfig}
    */
-  return {
+  const config = {
     ...defaultConfig,
     reactStrictMode: true,
     compiler: {
-      styledComponents: true,
+      styledComponents: {
+        pure: true,
+        displayName: true,
+      },
     },
     env: {
       OVERRIDE_NODE_ENV: OVERRIDE_NODE_ENV || '',
       FB_PIXEL_ID,
-      HIGHSCHOOL_FORM_ACTIVE: `${isHsFormActive}`,
+      HIGHSCHOOL_FORM_ACTIVE: isHsFormActive,
       HIGHSCHOOL_FORM_RESPONSES_NAME,
     },
 
@@ -99,6 +104,8 @@ module.exports = (phase, { defaultConfig }) => {
       ].filter(Boolean);
     },
   };
+
+  return config;
 };
 
 function checkEnvVars(requiredVars) {

diff --git a/pages/about/index.tsx b/pages/about/index.tsx
@@ -39,8 +39,8 @@ const About: NextPage<IAbout> = ({ mission, team, history, awards }) => {
               }}
             >
               <Content>
-                <h1 className='dynamic-xl'>Our Mission</h1>
-                <h2 className='dynamic-h3'>{mission.description}</h2>
+                <h1 className='dynamic-xl text-shadow'>Our Mission</h1>
+                <p className='dynamic-txt'>{mission.description}</p>
               </Content>
             </div>
           </BgImg>
@@ -330,6 +330,7 @@ const AboutStyles = styled.div`
         padding: 0;
         font-weight: 300;
         font-size: 0.9rem;
+        color: ${({ theme }) => theme.alpha.fg50};
       }
     }
   }

diff --git a/pages/contact/index.tsx b/pages/contact/index.tsx
@@ -1,16 +1,18 @@
-import dynamic from 'next/dynamic';
 import { GetStaticProps, NextPage } from 'next';
+import dynamic from 'next/dynamic';
 import styled from 'styled-components';
 
-import { IContact } from '@this/data/types/contact';
+import { FiMapPin, FiPhone } from 'react-icons/fi';
+
 import { Section } from '@this/components/layout';
+import { IContact } from '@this/data/types/contact';
 
-import { getStaticAsset } from '@this/pages-api/static/[asset]';
 import Content from '@this/components/layout/Content';
 import Main from '@this/components/layout/Main';
-import Map from '@this/src/components/Elements/Map';
-import { FiPhone, FiMapPin } from 'react-icons/fi';
+import { getStaticAsset } from '@this/pages-api/static/[asset]';
 import { BgImg } from '@this/src/components/Elements';
+import Map from '@this/src/components/Elements/Map';
+
 const ContactForm = dynamic(() => import('@this/src/Forms/Form.Contact'));
 
 const Contact: NextPage<IContact> = ({ address, city, state, zip, phone, gMapUrl }) => {
@@ -31,19 +33,18 @@ const Contact: NextPage<IContact> = ({ address, city, state, zip, phone, gMapUrl
             <Section className='contact-info'>
               <p>
                 <span className='contact-icon'>
-                  <FiMapPin size={28} />
+                  <FiMapPin size={28} className='primary-secondary' />
                 </span>
                 <a className='anchor' href={gMapUrl} target='_blank' rel='noreferrer'>
-                  <span>{address}</span>
-                  <br />
-                  <span>
+                  <div className='text-center'>{address}</div>
+                  <div className='text-center'>
                     {city}, {state} {zip}
-                  </span>
+                  </div>
                 </a>
               </p>
               <p>
                 <span className='contact-icon'>
-                  <FiPhone size={28} />
+                  <FiPhone size={28} className='primary-secondary' />
                 </span>
                 <a className='anchor' href={`tel:${phone}`} target='_blank' rel='noreferrer'>
                   {phone}

diff --git a/src/components/Home/GreatCompanies.tsx b/src/components/Home/GreatCompanies.tsx
@@ -1,10 +1,10 @@
 import styled, { useTheme } from 'styled-components';
 
-import { BgImg } from '@this/components/Elements';
 import LogoCard from '@this/components/Cards/LogoCard';
+import { BgImg } from '@this/components/Elements';
 import NavLink from '@this/components/Navbar/elements/NavLink';
-import { IHome } from '@this/data/types/home';
 import Content from '@this/components/layout/Content';
+import { IHome } from '@this/data/types/home';
 
 const GreatCompanies = ({ title, description }: IHome['greatCompanies']) => {
   const theme = useTheme();
@@ -15,15 +15,15 @@ const GreatCompanies = ({ title, description }: IHome['greatCompanies']) => {
       <GreatCompaniesStyles className='_progress' id='companies'>
         <Content>
           {title.map((text) => (
-            <h1 key={text} className='dynamic-xl'>
+            <h1 key={text} className='dynamic-xl text-shadow'>
               {text}
             </h1>
           ))}
 
           <div className='row-between'>
-            <div className='outcomes-description'>
+            <div className='outcomes-description bg-subtle-dark rounded-card'>
               {description.map((text) => (
-                <p key={text} className='dynamic-txt bg-subtle-dark br-1 p-1'>
+                <p key={text} className='dynamic-txt'>
                   {text}
                 </p>
               ))}
@@ -63,9 +63,12 @@ const GreatCompaniesStyles = styled.div`
     display: flex;
     flex-flow: column;
     align-items: flex-start;
-    justify-content: space-between;
+    justify-content: center;
     color: white;
     width: 40%;
+    height: fit-content;
+    margin-top: auto;
+    margin-bottom: auto;
   }
   .logo-card {
     width: 60%;
@@ -75,6 +78,9 @@ const GreatCompaniesStyles = styled.div`
     .logo-card {
       width: 100%;
     }
+    .outcomes-description {
+      margin-bottom: 1rem;
+    }
     .info {
       margin: 2rem 0;
     }

diff --git a/src/components/Home/ProgramsForAll.tsx b/src/components/Home/ProgramsForAll.tsx
@@ -1,11 +1,11 @@
 import styled from 'styled-components';
 
-import { IProgramsForAll } from '@this/data/types/home';
-import { SlashDivider } from '@this/components/Elements/SlashDivider';
 import IconBtnCard from '@this/components/Cards/IconBtnCard';
 import { BgImg } from '@this/components/Elements';
+import { SlashDivider } from '@this/components/Elements/SlashDivider';
 import CareersForAll from '@this/components/Home/CareerForAll';
 import Content from '@this/components/layout/Content';
+import { IProgramsForAll } from '@this/data/types/home';
 
 const ProgramsForAll = ({
   title,
@@ -23,15 +23,17 @@ const ProgramsForAll = ({
         <Content>
           <div className='top-content'>
             {title.map((text) => (
-              <h1 key={text} className='dynamic-xl title'>
+              <h1 key={text} className='dynamic-xl title text-shadow'>
                 {text}
               </h1>
             ))}
-            {description.map((text) => (
-              <p key={text} className='dynamic-txt bg-subtle-dark br-1 p-1'>
-                {text}
-              </p>
-            ))}
+            <div className='rounded-card bg-subtle-dark'>
+              {description.map((text) => (
+                <p key={text} className='dynamic-txt'>
+                  {text}
+                </p>
+              ))}
+            </div>
           </div>
         </Content>
       </BgImg>

diff --git a/src/components/Home/TeamEffort.tsx b/src/components/Home/TeamEffort.tsx
@@ -1,17 +1,17 @@
 import styled from 'styled-components';
 
-import { IHome } from '@this/data/types/home';
-import { BgImg } from '@this/components/Elements';
 import YellowCard from '@this/components/Cards/LinkCard';
+import { BgImg } from '@this/components/Elements';
 import Content from '@this/components/layout/Content';
+import { IHome } from '@this/data/types/home';
 
 const TeamEffort = ({ title, description, cards }: IHome['teamEffort']) => {
   return (
     <BgImg src='/images/students-working.webp' height='auto'>
       <TeamEffortStyles className='_progress' id='partners'>
         <Content>
           {title.map((text) => (
-            <h1 key={text} className='dynamic-xl'>
+            <h1 key={text} className='dynamic-xl text-shadow'>
               {text}
             </h1>
           ))}

diff --git a/src/components/Home/TopCard.tsx b/src/components/Home/TopCard.tsx
@@ -16,9 +16,9 @@ const TopCard = () => {
         <Content className='top-card-content'>
           <MeetOurGradsButton />
           <div className='row-between'>
-            <div className='secondary'>
-              <h2 className='dynamic-h2'>WE ARE CHANGING LIVES WITH</h2>
-              <h1 className='dynamic-xl'>
+            <div className='secondary header-content'>
+              <h2 className='dynamic-h2 text-shadow'>WE ARE CHANGING LIVES WITH</h2>
+              <h1 className='dynamic-xl text-shadow'>
                 COMPUTER <br /> PROGRAMMING <br /> SKILLS
               </h1>
             </div>

diff --git a/src/components/Navbar/elements/NavAccordion/NavAccordionItem.tsx b/src/components/Navbar/elements/NavAccordion/NavAccordionItem.tsx
@@ -1,8 +1,8 @@
+import { AnimatePresence, motion } from 'framer-motion';
 import { useRouter } from 'next/router';
 import { ReactNode, useState } from 'react';
-import styled from 'styled-components';
-import { motion, AnimatePresence } from 'framer-motion';
 import { FiChevronRight } from 'react-icons/fi';
+import styled from 'styled-components';
 
 const NavAccordionItemStyles = styled(motion.div)`
   box-shadow: 0 -3px 3px rgba(25, 25, 25, 0) inset;
@@ -31,15 +31,21 @@ const NavAccordionItemStyles = styled(motion.div)`
     display: flex;
     justify-content: space-between;
     align-items: center;
-
-    :hover {
+    .accordion-item-title {
+      transition: all 250ms;
+    }
+    :hover .accordion-item-title,
+    :focus-visible .accordion-item-title {
       background: linear-gradient(
         90deg,
         ${({ theme }) => theme.primary[800]} 0%,
         ${({ theme }) => theme.primary[600]} 4%,
         ${({ theme }) => theme.primary[600]} 96%,
         ${({ theme }) => theme.primary[800]} 100%
       );
+      box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset;
+      border-radius: 0.25rem;
+      padding: 0 0.5rem;
     }
   }
   .sub-links {
@@ -80,7 +86,7 @@ export const NavAccordionItem = ({ title, children, href, link }: NavAccordionIt
       aria-label={title}
     >
       <button className='accordion-item'>
-        <div>{title}</div>
+        <div className='accordion-item-title'>{title}</div>
         <motion.div
           animate={{ rotate: isOpen ? 90 : 0 }}
           transition={{ type: 'tween', duration: 0.1 }}

diff --git a/src/components/Navbar/elements/NavAccordion/NavAccordionLink.tsx b/src/components/Navbar/elements/NavAccordion/NavAccordionLink.tsx
@@ -5,6 +5,9 @@ import styled from 'styled-components';
 import { checkActiveSubLink } from '@this/src/helpers/navigation';
 
 const NavAccordionLinkStyles = styled.div`
+  a {
+    all: unset;
+  }
   font-family: 'Red Hat Display', sans-serif;
   font-weight: 500;
   cursor: pointer;
@@ -25,6 +28,22 @@ const NavAccordionLinkStyles = styled.div`
   &.sub-link {
     padding-left: 2.5rem;
   }
+  a {
+    transition: all 250ms;
+  }
+  a:focus-visible,
+  a:hover {
+    background: linear-gradient(
+      90deg,
+      ${({ theme }) => theme.primary[800]} 0%,
+      ${({ theme }) => theme.primary[600]} 4%,
+      ${({ theme }) => theme.primary[600]} 96%,
+      ${({ theme }) => theme.primary[800]} 100%
+    );
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset;
+    border-radius: 0.25rem;
+    padding: 0.25rem 0.5rem;
+  }
 `;
 
 export const NavAccordionLink = ({
@@ -47,18 +66,12 @@ export const NavAccordionLink = ({
     closeMenu();
   };
   return (
-    <a
-      style={{ all: 'unset' }}
-      href={href}
-      title={linkTitle}
-      aria-label={linkTitle}
-      onClick={handleClick}
+    <NavAccordionLinkStyles
+      className={`${checkActiveSubLink(href, pathname) ? 'active' : ''} ${className || ''}`}
     >
-      <NavAccordionLinkStyles
-        className={`${checkActiveSubLink(href, pathname) ? 'active' : ''} ${className || ''}`}
-      >
+      <a href={href} title={linkTitle} aria-label={linkTitle} onClick={handleClick}>
         {children}
-      </NavAccordionLinkStyles>
-    </a>
+      </a>
+    </NavAccordionLinkStyles>
   );
 };
diff --git a/src/components/Navbar/elements/NavLink.tsx b/src/components/Navbar/elements/NavLink.tsx
@@ -73,13 +73,11 @@ export const NavLinkStyles = styled.div.attrs(({ color }: { color?: '' | 'yellow
     :focus {
       background: ${({ theme }) => theme.bgHover};
       color: ${({ theme }) => theme.fg};
-
       box-shadow: 0 0 3px 0px ${({ theme }) => theme.alpha.fg} inset;
-
       z-index: 1;
     }
     :focus-visible {
-      outline: 2px solid ${({ theme }) => theme.secondary[800]};
+      outline: 2px solid ${({ theme }) => theme.secondary[800]} !important;
     }
   }
   &.sub-nav.sub-nav-active {

diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
@@ -31,7 +31,7 @@ const Footer = ({ logos }: FooterProps) => {
       <COEBox />
       {!isInfoSessionPage && !isHighschoolPage ? (
         <InfoSessionStyles>
-          <h2 style={{ paddingBottom: '1rem' }} className='secondary dynamic-h2'>
+          <h2 style={{ paddingBottom: '1rem' }} className='secondary dynamic-h2 text-shadow'>
             ATTEND A FREE INFO SESSION
           </h2>
           <NavLink className='info' href='/infoSession'>