Add Scholarship page (#1819)

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

common/constants/navigation.js

@@ -70,14 +70,19 @@ const sponsorship = {
   href: '/sponsorship',
 };
 
+const scholarship = {
+  name: 'Scholarship',
+  href: '/scholarship',
+};
+
 const projectRebuild = {
   name: 'Project Rebuild',
   href: '/project_rebuild',
 };
 
 const servicesGroup = {
   ...services,
-  sublinks: [podcast, projectRebuild],
+  sublinks: [podcast, scholarship, projectRebuild],
 };
 
 const aboutUsGroup = {
@@ -104,7 +109,7 @@ export const mobileNavItems = flattenDepth(
 // MARK: Footer items
 export const footerItems = {
   column1: [about, contact, faq, services],
-  column2: [chapters, jobs],
+  column2: [chapters, scholarship, jobs],
   column3: [getInvolved, podcast, history, donate],
   column4: [
     {

common/styles/globals.css

@@ -72,15 +72,22 @@ h6 {
   letter-spacing: 3px;
   margin: 0;
   padding: 0;
+  text-wrap: initial;
+  text-wrap: balance;
 }
 
 a {
-  color: currentcolor;
+  color: var(--burntOrange500);
+  text-decoration: none;
 }
 
 nav a,
 footer a {
-  text-decoration: none;
+  color: currentcolor;
+}
+
+a:hover {
+  text-decoration: underline;
 }
 
 p {

common/styles/themeMap.js

@@ -2,6 +2,7 @@ export const primary = "#3ed6f0";
 export const secondary = "#252e3e";
 export const gray = "#e2e2e2";
 export const white = "#f7f7f7";
+export const burntOrange500 = "hsl(14, 55%, 45%, 1)";
 export const rgbValuesPrimary = "62, 214, 240";
 export const rgbValuesSecondary = "37, 46, 62";
 export const success = "hsla(134, 41%, 88%, 0.6)";
@@ -19,5 +20,4 @@ export const extraLargeViewportWidth = "1200px";
 export const borderRadius = "3px";
 export const navBarHeight = "65px";
 export const navBarTopGutterHeight = "20px";
-export const typicalMaxWidth = "700px";
-export const widthUpToButtonInAccordion = "90%";
+export const typicalMaxWidth = "65ch";

common/styles/variables.css

@@ -5,18 +5,19 @@
   --secondary: #252e3e; /* navy */
   --gray: #e2e2e2; /* gainsboro */
   --white: #f7f7f7; /* offwhite */
+  --burntOrange500: hsl(14, 55%, 45%, 1);
 
   /* Colors as RGB values for rgba() usage */
   --rgbValuesPrimary: 62, 214, 240;
   --rgbValuesSecondary: 37, 46, 62;
 
   /* Bootstrap "state" colors */
-  --success: hsla(134, 41%, 88%, 0.6);
-  --successDeep: hsl(132, 60%, 25%);
-  --warning: hsla(46, 100%, 90%, 0.6);
-  --warningDeep: hsl(39, 76%, 44%);
-  --error: hsla(355, 70%, 91%, 0.6);
-  --errorDeep: hsl(355, 63%, 36%);
+  --success: hsl(134, 41%, 88%, 0.6);
+  --successDeep: hsl(132, 60%, 25%, 1);
+  --warning: hsl(46, 100%, 90%, 0.6);
+  --warningDeep: hsl(39, 76%, 44%, 1);
+  --error: hsl(355, 70%, 91%, 0.6);
+  --errorDeep: hsl(355, 63%, 36%, 1);
 
   /* Fonts */
   --primaryFontFamily: "DIN Condensed Bold";
@@ -35,5 +36,5 @@
   --borderRadius: 3px;
   --navBarHeight: 65px;
   --navBarTopGutterHeight: 20px;
-  --typicalMaxWidth: 70ch;
+  --typicalMaxWidth: 65ch; /* TODO: Remove for max-w-prose */
 }

components/Cards/ResourceCard/ResourceCard.module.css

@@ -14,6 +14,10 @@
   flex: 1;
 }
 
+.link {
+  color: var(--secondary);
+}
+
 .link svg {
   top: 0;
   left: 0.5rem;

components/Container/Container.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { getDataAttributes } from 'common/utils/prop-utils';
 import styles from './Container.module.css';
 
-export type ContainerPropsType = {
+export interface ContainerPropsType {
   /**
    * Sets the path for an optional background image.
    */
@@ -29,7 +29,7 @@ export type ContainerPropsType = {
    * @default secondary
    */
   theme?: 'gray' | 'secondary' | 'white';
-};
+}
 
 function Container(props: ContainerPropsType) {
   const {
@@ -41,7 +41,7 @@ function Container(props: ContainerPropsType) {
     theme = 'secondary',
   } = props;
   // See https://css-tricks.com/tinted-images-multiple-backgrounds/ for explanation
-  const darkOverlay = 'linear-gradient(rgba(33, 48, 69, 0.65),rgba(33, 48, 69, 0.65))';
+  const darkOverlay = 'linear-gradient(hsl(215, 30%, 10%, 0.7),hsl(215, 30%, 10%, 0.7))';
   const dynamicBackgroundImage = backgroundImageSource
     ? {
         backgroundImage: `${darkOverlay}, url(${backgroundImageSource})`,

components/Container/__tests__/__snapshots__/Container.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Container > should render with many props assigned 1`] = `
   className="test-class Container white fullViewportHeight"
   style={
     {
-      "backgroundImage": "linear-gradient(rgba(33, 48, 69, 0.65),rgba(33, 48, 69, 0.65)), url(https://operation-code-assets.s3.us-east-2.amazonaws.com/heroBanner/stock_family-2.jpg)",
+      "backgroundImage": "linear-gradient(hsl(215, 30%, 10%, 0.7),hsl(215, 30%, 10%, 0.7)), url(https://operation-code-assets.s3.us-east-2.amazonaws.com/heroBanner/stock_family-2.jpg)",
     }
   }
 >

components/ErrorDisplay/ErrorDisplay.tsx

@@ -1,11 +1,11 @@
 import Head from 'components/head';
 
-export type ErrorDisplayPropsType = {
+export interface ErrorDisplayPropsType {
   /**
    * Displasy a status code instead of 'Error'.
    */
   statusCode?: number;
-};
+}
 
 function ErrorDisplay({ statusCode }: ErrorDisplayPropsType) {
   return (

components/Footer/__tests__/__snapshots__/Footer.test.tsx.snap

@@ -111,6 +111,15 @@ exports[`Footer > should render with no props passed 1`] = `
               </a>
             </ForwardRef(LinkComponent)>
           </li>
+          <li>
+            <ForwardRef(LinkComponent)
+              href="/scholarship"
+            >
+              <a>
+                Scholarship
+              </a>
+            </ForwardRef(LinkComponent)>
+          </li>
           <li>
             <ForwardRef(LinkComponent)
               href="/jobs"

components/HeroBanner/__tests__/__snapshots__/HeroBanner.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`HeroBanner > should render with many props assigned 1`] = `
   className="test pt-20 min-h-[60vh] text-shadow-[0_0_15px_#111111] Container secondary fullViewportHeight"
   style={
     {
-      "backgroundImage": "linear-gradient(rgba(33, 48, 69, 0.65),rgba(33, 48, 69, 0.65)), url(https://operation-code-assets.s3.us-east-2.amazonaws.com/heroBanner/stock_family-2.jpg)",
+      "backgroundImage": "linear-gradient(hsl(215, 30%, 10%, 0.7),hsl(215, 30%, 10%, 0.7)), url(https://operation-code-assets.s3.us-east-2.amazonaws.com/heroBanner/stock_family-2.jpg)",
     }
   }
 >

components/Nav/Nav.module.css

@@ -25,6 +25,7 @@
 }
 
 .NavDesktop nav a {
+  text-decoration: none;
   font-weight: bolder;
 }
 

components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap

@@ -19,6 +19,10 @@ exports[`Nav > should render with no props passed 1`] = `
           "href": "/podcast",
           "name": "Podcast",
         },
+        {
+          "href": "/scholarship",
+          "name": "Scholarship",
+        },
         {
           "href": "/project_rebuild",
           "name": "Project Rebuild",
@@ -114,6 +118,10 @@ exports[`Nav > should render with no props passed 1`] = `
                   "href": "/podcast",
                   "name": "Podcast",
                 },
+                {
+                  "href": "/scholarship",
+                  "name": "Scholarship",
+                },
                 {
                   "href": "/project_rebuild",
                   "name": "Project Rebuild",

components/Timeline/Timeline.tsx

@@ -1,7 +1,7 @@
+import { objectKeys } from 'utils/types';
 import historyData from './historyData';
 import styles from './Timeline.module.css';
 import TimelineEvent from './TimelineEvent/TimelineEvent';
-import { objectKeys } from 'utils/types';
 
 function Timeline() {
   return (

pages/scholarship.tsx

@@ -0,0 +1,119 @@
+import Head from 'components/head';
+import Container from 'components/Container/Container';
+import HeroBanner from 'components/HeroBanner/HeroBanner';
+import OutboundLink from 'components/OutboundLink/OutboundLink';
+import { s3 } from 'common/constants/urls';
+import Link from 'next/link';
+import Card from 'components/Cards/Card/Card';
+import Image from 'next/image';
+
+const pageTitle = 'Scholarships Program';
+
+interface ScholarshipOption {
+  title: string;
+  logoSrc: string;
+  body: string;
+}
+
+const scholarshipOptions: ScholarshipOption[] = [
+  {
+    title: 'Code Platoon X Operation Code',
+    logoSrc: `${s3}partnerLogos/code_platoon.png`,
+    body: 'Apply to attend a full ride scholarship to one of the Code Platoon’s coding bootcamp cohorts.',
+  },
+  {
+    title: 'Coursera - Google Certifications',
+    logoSrc: `${s3}partnerLogos/coursera.png`,
+    body: 'Get certified with Google and prepare for in-demand jobs in Cybersecurity, Digital Marketing & Analytics, Data Analytics, IT Support, Project Management, & UX Design.',
+  },
+  {
+    title: 'CompTIA Certifications Training & Exam',
+    logoSrc: `${s3}partnerLogos/comptia.png`,
+    body: 'With more than 2 million IT certifications issued worldwide, CompTIA is dedicated to helping IT professionals lead the charge in our digitally connected world.',
+  },
+  {
+    title: 'Secure Code Warrior',
+    logoSrc: `${s3}partnerLogos/secure_code_warrior.png`,
+    body: 'Are you interested in using one of our licenses with Secure Code Warrior? Sign up today and beef up your appsec skills while gaming!',
+  },
+  {
+    title: 'Treehouse',
+    logoSrc: `${s3}partnerLogos/treehouse.png`,
+    body: 'Start your journey into coding, programming, and design. Perfect for beginners, intermediate and advanced learners.',
+  },
+  {
+    title: 'Udemy',
+    logoSrc: `${s3}partnerLogos/udemy.png`,
+    body: 'Skill up to success! Udemy offers over 185,000 courses and has 49 million students. Learn programming, marketing, data science and more.',
+  },
+];
+
+export default function ScholarshipsPage() {
+  return (
+    <>
+      <Head title={pageTitle} />
+      <HeroBanner
+        title={pageTitle}
+        backgroundImageSource={`${s3}heroBanners/scholarships_hero.jpeg`}
+      />
+      <Container theme="white" className="pb-8">
+        <p>
+          Our <span className="font-bold">Scholarships Program</span> is a competitive benefit that
+          contributes directly to the professional development andnd career growth of our service
+          members, Veterans and military family members.
+        </p>
+
+        <div className="text-left my-3 flex flex-col gap-3">
+          <div className="max-w-prose self-center">
+            <p>To qualify, you must:</p>
+
+            <ul className="list-disc flex flex-col gap-3 mb-3 ml-4">
+              <li>
+                Be an active member of our Operation Code community (
+                <Link href="/join">
+                  <a>join here</a>
+                </Link>
+                ), a U.S. active duty, Reserves or National Guard military service member, Veteran
+                or military dependent.
+              </li>
+              <li>
+                Abide by the{' '}
+                <OutboundLink
+                  href="https://docs.google.com/document/d/1KsdkKB1RyEuI7tBspuabxqJ-7n_PhL3B4vdHkBp_-7U/edit?usp=sharing"
+                  analyticsEventLabel="Scholarship Abidement Policy"
+                >
+                  Operation Code Scholarships Policy
+                </OutboundLink>
+                .
+              </li>
+            </ul>
+
+            <p>We provide learning licenses and access to the below platforms:</p>
+          </div>
+
+          <ul className="flex flex-wrap w-full self-center gap-4">
+            {scholarshipOptions.map(option => (
+              <li key={option.title} className="max-w-sm w-full h-96">
+                <OutboundLink
+                  className="w-full h-full hover:no-underline"
+                  href="https://airtable.com/appeXPiUS5GQwC7Vi/shr5CuF4IJGks7Wfp"
+                  analyticsEventLabel={`Scholarship Option Click [${option.title}]`}
+                  hasIcon={false}
+                >
+                  <Card className="w-full h-full" hasAnimationOnHover>
+                    <h5 className="-mb-16 text-center ">{option.title}</h5>
+                    <div className="relative w-48 h-48 -mb-16">
+                      <Image src={option.logoSrc} alt="" layout="fill" className="object-contain" />
+                    </div>
+                    <p>{option.body}</p>
+                    <p>Press to apply!</p>
+                  </Card>
+                </OutboundLink>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </Container>
+    </>
+  );
+}

tailwind.config.js

@@ -23,6 +23,7 @@ module.exports = {
         themeSecondary: '#252e3e',
         themeGray200: '#121212',
         themeGray800: '#e2e2e2',
+        burntOrange500: 'hsl(14, 55%, 45%, 1)',
         white: '#f7f7f7',
       },
       maxWidth: {

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "baseUrl": ".",
+    "baseUrl": "./",
     "target": "esnext",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
@@ -36,6 +36,6 @@
     },
     "types": ["vitest/globals", "@testing-library/jest-dom"]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "vitest.config.mts", "**/*.js"],
+  "include": ["next-env.d.ts", "**/*.js", "**/*.ts", "**/*.tsx", "vitest.config.mts"],
   "exclude": ["node_modules"]
 }