Merge branch 'develop' into 'staging'

content update and Nav work, SEO work, titles and descriptions

See merge request !13

gatsby-node.js

@@ -65,13 +65,15 @@ const mdPagesFromTemplate = async (
     return;
   }
   result.data.allMarkdownRemark.edges.forEach(({ node }) => {
-    createPage({
-      path: node.frontmatter.slug,
-      component: pageTemplate,
-      context: {
-        // additional data can be passed via context
-        slug: node.frontmatter.slug,
-      },
-    });
+    if (node.frontmatter.slug) {
+      createPage({
+        path: node.frontmatter.slug,
+        component: pageTemplate,
+        context: {
+          // additional data can be passed via context
+          slug: node.frontmatter.slug,
+        },
+      });
+    }
   });
 };

src/components/app/Header.js

@@ -14,7 +14,7 @@ import theme from '../../styles/theme';
  * color based on fixed state and page type.
  */
 const StyledHeader = styled(GHeader)`
-  z-index: 10;
+  z-index: 25;
   position: absolute;
   top: 0;
   left: 0;
@@ -39,7 +39,7 @@ const Header = ({ transparent }) => {
         <div ref={holderRef} style={{ holderStyles }}>
           <div
             ref={wrapperRef}
-            style={isFixed ? { ...wrapperStyles, ...{ zIndex: 10 } } : {}}
+            style={isFixed ? { ...wrapperStyles, ...{ zIndex: 25 } } : {}}
           >
             <StyledHeader
               sticky={isFixed}

src/components/app/Nav.js

 import React, { useState, useContext } from 'react';
-import {
-  Box,
-  Button,
-  Keyboard,
-  Layer,
-  ThemeContext,
-  ResponsiveContext,
-} from 'grommet';
-import { Menu } from 'grommet-icons';
+import { Box, Button, Text, Keyboard, Layer, ResponsiveContext } from 'grommet';
+import { Menu, FormUp, FormDown } from 'grommet-icons';
 import { Link } from '../core';
 import { MegaMenu, MegaMobileMenu } from '../mega-menu';
 
@@ -29,15 +22,21 @@ const Nav = ({ sticky }) => {
         <Box
           as="nav"
           justify="center"
-          gap="medium"
+          align={sticky ? 'center' : 'end'}
+          gap="small"
           direction={sticky ? 'row' : 'column'}
         >
-          <Box direction="row" justify="end" gap="large">
+          <Box
+            direction="row"
+            justify="end"
+            gap="large"
+            margin={{ right: sticky ? 'medium' : '0' }}
+          >
             <Box justify="center">
               <Link
                 to="/about-us"
                 size="xsmall"
-                color="white"
+                color={sticky ? 'light-1' : 'white'}
                 style={{ textTransform: 'uppercase' }}
               >
                 About Us
@@ -47,27 +46,60 @@ const Nav = ({ sticky }) => {
               <Link
                 to="/other-programs"
                 size="xsmall"
-                color="white"
+                color={sticky ? 'light-1' : 'white'}
                 style={{ textTransform: 'uppercase' }}
               >
                 Our Other Programs
               </Link>
             </Box>
           </Box>
-          <Box direction="row" justify="end" gap="large">
+          {sticky && (
+            <Box
+              height="1em"
+              width="2px"
+              background="light-1"
+              style={{ opacity: '0.4' }}
+            />
+          )}
+          <Box
+            direction="row"
+            justify="end"
+            align="center"
+            gap={sticky ? 'small' : 'small'}
+          >
             <Box justify="center">
-              <ThemeContext.Extend value={{}}>
-                <Button
+              <Box background={menuOpen ? 'white' : 'none'}>
+                <Link
                   onClick={handleToggleMenu}
-                  secondary
                   color={menuOpen ? 'black' : 'white'}
                   style={{ textTransform: 'uppercase' }}
-                  size="small"
-                  label="Available Services"
-                />
-              </ThemeContext.Extend>
+                >
+                  <Box
+                    direction="row"
+                    align="center"
+                    pad={{ vertical: 'xsmall', horizontal: 'medium' }}
+                    gap="small"
+                  >
+                    <Text weight="bold" size="small">
+                      Available Services
+                    </Text>
+                    {menuOpen ? (
+                      <FormUp color="accent-1" />
+                    ) : (
+                      <FormDown color="accent-1" />
+                    )}
+                  </Box>
+                </Link>
+              </Box>
             </Box>
-            <Box justify="center">
+            <Box
+              height="1em"
+              width="2px"
+              background="light-1"
+              style={{ opacity: '0.4' }}
+            />
+
+            <Box justify="center" margin={{ left: 'medium' }}>
               <Link
                 to="/solutions"
                 size="small"

src/components/app/SEO.js

-/**
- * SEO component that queries for data with
- *  Gatsby's useStaticQuery React hook
- *
- * See: https://www.gatsbyjs.com/docs/use-static-query/
- */
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
@@ -41,9 +34,14 @@ function SEO({ description, lang, meta, title, image }) {
           name: `description`,
           content: metaDescription,
         },
+        /**
+         * Home page does not send title, so uses default title. Any other page sends a
+         * title prop which is mixed with titleTemplate for the browser using the tittle Template
+         * prop above. But the same thing here is needed for the share title.
+         */
         {
           property: `og:title`,
-          content: title,
+          content: title ? `${title} - ${defaultTitle}` : defaultTitle,
         },
         {
           property: `og:description`,
@@ -63,7 +61,7 @@ function SEO({ description, lang, meta, title, image }) {
         },
         {
           name: `twitter:title`,
-          content: title,
+          content: title ? `${title} - ${defaultTitle}` : defaultTitle,
         },
         {
           name: `twitter:description`,

src/components/core/CtaLink.js

+import React from 'react';
+import { Box, Text, ThemeContext } from 'grommet';
+import { FormNext } from 'grommet-icons';
+import Link from './Link';
+
+const korolevFont = 'korolev, Helvetica Neue, Helvetica, Arial, sans-serif';
+
+const themeExtend = {
+  text: {
+    font: {
+      family: korolevFont,
+    },
+    extend: () => ({ textTransform: 'uppercase', letterSpacing: '0.05em' }),
+  },
+  anchor: {
+    fontFamily: korolevFont,
+  },
+};
+
+const CtaLink = ({ children, ...rest }) => (
+  <ThemeContext.Extend value={themeExtend}>
+    <Box direction="row" justify="start" align="center">
+      <Link {...rest} color="black">
+        <Box direction="row" justify="start" align="center">
+          <Text size="small" weight="bold">
+            {children}
+          </Text>{' '}
+          <FormNext color="accent-1" />
+        </Box>
+      </Link>
+    </Box>
+  </ThemeContext.Extend>
+);
+
+export default CtaLink;

src/components/core/index.js

 export { default as Link } from './Link';
+export { default as CtaLink } from './CtaLink';
 export { default as Markdown } from './Markdown';
 export { default as PrimaryButton } from './PrimaryButton';
 export { default as SecondaryButton } from './SecondaryButton';

src/components/icons/DtTriad.js

+import React from 'react';
+
+import { StyledIcon } from 'grommet-icons/StyledIcon';
+
+export const DtTriad = (props) => (
+  <StyledIcon viewBox="0 0 24 24" a11yTitle="DtTriad" {...props}>
+    <path
+      fill="none"
+      stroke="#000"
+      strokeWidth={props.strokeWidth || '1'}
+      d="M12,9.2c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5S13.4,9.2,12,9.2z M22.8,17.1
+	c0-1.4-1.1-2.5-2.5-2.5c-1.4,0-2.5,1.1-2.5,2.5s1.1,2.5,2.5,2.5C21.7,19.6,22.8,18.5,22.8,17.1z M5.9,17.1c0-1.4-1.1-2.5-2.5-2.5
+	s-2.5,1.1-2.5,2.5s1.1,2.5,2.5,2.5S5.9,18.5,5.9,17.1z M10.4,8.7L5,15.3 M18.8,15.3l-5.3-6.6"
+    />
+  </StyledIcon>
+);

src/components/icons/index.js

@@ -6,3 +6,4 @@ export * from './DtComputeStore';
 export * from './DtDataAnalysis';
 export * from './DtSquare';
 export * from './DtHex';
+export * from './DtTriad';

src/components/mega-menu/MegaMenu.js

-import React from 'react';
-import { Box, Text, Heading } from 'grommet';
+import React, { useContext } from 'react';
+import { Box, Text, Heading, ResponsiveContext, Layer } from 'grommet';
 import styled from 'styled-components';
 import {
   DtNetConn,
@@ -14,14 +14,14 @@ import { Link } from '../core';
 
 const StyledMenu = styled(Box)`
   position: absolute;
-  top: ${(props) => (props.sticky ? '60px' : '100px')};
+  top: ${(props) => (props.sticky ? '48px' : '93px')};
   left: 20px;
   right: 20px;
 `;
 
 const Divider = ({ ...props }) => (
   <Box
-    margin={{ vertical: 'medium' }}
+    margin={{ top: 'medium', bottom: 'medium', right: 'large' }}
     height="2px"
     background="light-1"
     {...props}
@@ -36,102 +36,122 @@ const GroupHeader = ({ label, icon, overview }) => (
     margin={{ vertical: 'small' }}
   >
     {icon}
-    <Heading level={6} margin="none">
-      {label}
-    </Heading>
-    {overview && (
-      <Link to={overview} size="xsmall">
-        Overview
-      </Link>
-    )}
+    <Box direction="row" align="end" gap="small">
+      <Heading level={6} margin="none">
+        {label}
+      </Heading>
+      {overview && (
+        <Link to={overview} size="xsmall">
+          Overview
+        </Link>
+      )}
+    </Box>
   </Box>
 );
 
-const MegaMenu = ({ sticky }) => (
-  <StyledMenu sticky={sticky}>
-    <Box
-      pad="large"
-      background="white"
-      elevation="small"
-      style={{ zIndex: 20 }}
-    >
-      <Heading level={2} margin="none">
-        Available Services
-      </Heading>
-      <Text>
-        The following services are available to your organization through C3I&N
-      </Text>
-      <Box direction="row" gap="medium">
-        <Box border={{ side: 'right' }} basis="1/2">
-          <GroupHeader
-            label="Networking & Connectivity"
-            icon={<DtNetConn />}
-            overview="/networking-connectivity"
-          />
+const containerPad = {
+  xlarge: 'large',
+  large: 'medium',
+  medium: 'medium',
+};
 
-          <Box direction="row">
-            <Box basis="1/2">
-              <MenuGroup
-                title="Global Connectivity / WAN"
-                category="Global Connectivity / WAN"
-              />
-              <MenuGroup
-                title="Local Connectivity / BAN"
-                category="Local Connectivity / BAN"
-              />
-            </Box>
-            <Box basis="1/2">
-              <MenuGroup title="Cloud Access" category="Cloud Access" />
-              <MenuGroup
-                title="Reference Architectures"
-                category="Reference Architectures"
-              />
-              <MenuGroup
-                title="Virtual Private Connections"
-                category="Virtual Private Connections"
-              />
-            </Box>
-          </Box>
-        </Box>
-        <Box direction="row" basis="1/2">
-          <Box>
-            <Box>
-              <GroupHeader
-                label="Compute & Store"
-                icon={<DtComputeStore />}
-                overview="/hosting-infrastructure"
-              />
-              <MenuGroup category="Compute & Store" />
-            </Box>
-            <Divider />
-            <Box>
-              <GroupHeader
-                label="Software Development & DevSecOps"
-                icon={<DtDevSecOps />}
-              />
-              <MenuGroup category="Software Development & DevSecOps" />
+const MegaMenu = ({ sticky }) => {
+  const size = useContext(ResponsiveContext);
+  const isVert = size === 'medium';
+
+  return (
+    <StyledMenu sticky={sticky}>
+      <Layer />
+      <Box
+        pad={containerPad[size]}
+        background="white"
+        style={{ maxHeight: 'calc(100vh - 120px)' }}
+      >
+        <Heading level={2} margin="none">
+          Available Services
+        </Heading>
+        <Text color="dark-1" size="small">
+          The following services are available to your organization through
+          C3I&N
+        </Text>
+        <Box
+          direction={isVert ? 'column' : 'row'}
+          gap={isVert ? 'small' : 'large'}
+          pad={{ vertical: 'medium' }}
+          style={{ overflowY: 'auto' }}
+        >
+          <Box {...{ border: !isVert && { side: 'right' } }} basis="45%">
+            <GroupHeader
+              label="Networking & Connectivity"
+              icon={<DtNetConn />}
+              overview="/networking-connectivity"
+            />
+
+            <Box direction="row" flex={{ shrink: 0 }}>
+              <Box basis="1/2">
+                <MenuGroup
+                  title="Global Connectivity / WAN"
+                  category="Global Connectivity / WAN"
+                />
+                <MenuGroup
+                  title="Local Connectivity / BAN"
+                  category="Local Connectivity / BAN"
+                />
+              </Box>
+              <Box basis="1/2">
+                <MenuGroup title="Cloud Access" category="Cloud Access" />
+                <MenuGroup
+                  title="Reference Architectures"
+                  category="Reference Architectures"
+                />
+                <MenuGroup
+                  title="Virtual Private Connections"
+                  category="Virtual Private Connections"
+                />
+              </Box>
             </Box>
           </Box>
-          <Box>
-            <Box>
-              <GroupHeader label="Digital Engineering" icon={<DtDigiEng />} />
-              <MenuGroup category="Digital Engineering" />
-            </Box>
-            <Divider />
-            <Box>
-              <GroupHeader label="Communications" icon={<DtComms />} />
-              <MenuGroup category="Communications" />
+          {isVert && <Divider flex={{ grow: 0 }} />}
+          <Box direction="row" basis="55%" gap="large">
+            <Box basis="1/2">
+              <Box>
+                <GroupHeader
+                  label="Compute & Store"
+                  icon={<DtComputeStore />}
+                  overview="/hosting-infrastructure"
+                />
+                <MenuGroup category="Compute & Store" />
+              </Box>
+              <Divider />
+              <Box>
+                <GroupHeader
+                  label="Software Development & DevSecOps"
+                  icon={<DtDevSecOps />}
+                />
+                <MenuGroup category="Software Development & DevSecOps" />
+              </Box>
             </Box>
-            <Divider />
-            <Box>
-              <GroupHeader label="Data Analysis" icon={<DtDataAnalysis />} />
-              <MenuGroup category="Data Analysis" />
+            <Box basis="1/2">
+              <Box flex={{ shrink: 0 }}>
+                <GroupHeader label="Digital Engineering" icon={<DtDigiEng />} />
+                <MenuGroup category="Digital Engineering" />
+              </Box>
+              <Divider />
+              <Box flex={{ shrink: 0 }}>
+                <GroupHeader label="Communications" icon={<DtComms />} />
+                <MenuGroup category="Communications" />
+              </Box>
+              <Divider />
+              <Box flex={{ shrink: 0 }}>
+                <GroupHeader label="Data Analysis" icon={<DtDataAnalysis />} />
+                <MenuGroup category="Data Analysis" />
+              </Box>
             </Box>
           </Box>
         </Box>
       </Box>
-    </Box>
-  </StyledMenu>
-);
+    </StyledMenu>
+  );
+};
 
 export default MegaMenu;

src/components/mega-menu/MenuGroup.js

@@ -42,6 +42,7 @@ const MenuGroup = ({ category, title }) => {
           key={item.id}
           gap="small"
           pad={{ horizontal: 'large' }}
+          flex={{ shrink: 0 }}
         >
           <Link to={item.frontmatter.slug} size="small">
             {item.frontmatter.title}

src/components/pages/home/OfferAccordion.js

-import React, { useState } from 'react';
-import { Accordion, AccordionPanel, Box, Text } from 'grommet';
+import React, { useState, useContext } from 'react';
+import {
+  Accordion,
+  AccordionPanel,
+  Box,
+  Text,
+  ResponsiveContext,
+} from 'grommet';
 import { FormUp, FormDown } from 'grommet-icons';
 import Reference from '../../icons/Reference';
 import { MenuGroup } from '../../mega-menu';
 
-const OfferHeader = ({ title, icon, description, active }) => (
+const OfferHeader = ({ title, icon, description, active, isMobile }) => (
   <Box
     direction="row"
     gap="medium"
-    pad="medium"
+    pad={isMobile ? 'large' : 'medium'}
     background="#eee"
     round="small"
     fill
@@ -16,7 +22,7 @@ const OfferHeader = ({ title, icon, description, active }) => (
     justify="between"
   >
     <Box direction="row" gap="medium">
-      {icon}
+      {!isMobile && <Box>{icon}</Box>}
       <Box>
         <Text>{title}</Text>
         {description && <Text size="small">{description}</Text>}
@@ -27,17 +33,29 @@ const OfferHeader = ({ title, icon, description, active }) => (
   </Box>
 );
 
+const widths = {
+  xsmall: '100%',
+  small: '100%',
+  medium: '100%',
+  large: 'large',
+  xlarge: 'large',
+};
+
 const OfferAcc = () => {
   const [activeList, setActiveList] = useState([]);
+  const size = useContext(ResponsiveContext);
+
+  const isMobile = ['xsmall', 'small'].includes(size);
+
   const handleChange = (list) => {
     setActiveList(list);
   };
 
   return (
-    <Box width="large" pad={{ vertical: 'large' }}>
+    <Box width={widths[size]} pad={{ vertical: 'large' }}>
       <Accordion
         alignSelf="stretch"
-        gap="small"
+        gap={isMobile ? 'large' : 'small'}
         onActive={handleChange}
         a11yTitle="Solutions List"
       >
@@ -47,11 +65,12 @@ const OfferAcc = () => {
               title="Networking & Connectivity"
               icon={<Reference name="Networking & Connectivity" />}
               active={activeList.includes(0)}
+              isMobile={isMobile}
             />
           }
         >
           <Box
-            direction="row"
+            direction={isMobile ? 'column' : 'row'}
             pad={{ horizontal: 'large', vertical: 'medium' }}
             gap="large"
           >
@@ -84,6 +103,7 @@ const OfferAcc = () => {
               title="Compute & Store"
               icon={<Reference name="Compute & Store" />}
               active={activeList.includes(1)}
+              isMobile={isMobile}
             />
           }
         >
@@ -103,6 +123,7 @@ const OfferAcc = () => {
               title="Software Development & DevSecOps"
               icon={<Reference name="Software Development & DevSecOps" />}
               active={activeList.includes(2)}
+              isMobile={isMobile}
             />
           }
         >
@@ -122,6 +143,7 @@ const OfferAcc = () => {
               title="Digital Engineering"
               icon={<Reference name="Digital Engineering" />}
               active={activeList.includes(3)}
+              isMobile={isMobile}
             />
           }
         >
@@ -141,6 +163,7 @@ const OfferAcc = () => {
               title="Communications"
               icon={<Reference name="Communications" />}
               active={activeList.includes(4)}
+              isMobile={isMobile}
             />
           }
         >
@@ -160,6 +183,7 @@ const OfferAcc = () => {
               title="Data Analysis"
               icon={<Reference name="Data Analysis" />}
               active={activeList.includes(5)}
+              isMobile={isMobile}
             />
           }
         >

src/components/pages/home/Solutions.js

-import React from 'react';
+import React, { useContext } from 'react';
 import { useStaticQuery, graphql } from 'gatsby';
-import { Box, Text, Heading, Paragraph } from 'grommet';
-import { DtNetConn } from '../../icons';
+import { Box, Text, Heading, Paragraph, ResponsiveContext } from 'grommet';
+import { DtTriad } from '../../icons';
 import Reference from '../../icons/Reference';
-import { Link, PrimaryButton } from '../../core';
+import { CtaLink, PrimaryButton } from '../../core';
+
+const SolutionGroup = ({ node, basis, isMobile }) => (
+  <Box gap="medium" pad="medium" basis={isMobile ? 'auto' : '1/2'}>
+    <Box basis={isMobile ? 'auto' : '4em'} flex={{ shrink: 0 }}>
+      <Heading level={4} margin="0">
+        {node.frontmatter.useCase}
+      </Heading>
+    </Box>
+
+    <Box gap="medium" pad={{ vertical: 'medium' }} fill>
+      {node.frontmatter.categories.map((item) => (
+        <Box direction="row" gap="medium" key={item}>
+          <Reference name={item} size="20px" />
+          <Text size="small" color="dark-1">
+            {item}
+          </Text>
+        </Box>
+      ))}
+    </Box>
+
+    <CtaLink to={node.frontmatter.slug}>Learn More</CtaLink>
+  </Box>
+);
 
 /**
  * 2 column responsive grid block
@@ -31,14 +54,21 @@ const Solutions = () => {
     }
   `);
 
+  const size = useContext(ResponsiveContext);
+  const isMobile = ['xsmall', 'small'].includes(size);
+
   // Use the first 2 items from the solutions list
   const s1 = allMarkdownRemark.edges[0].node;
   const s2 = allMarkdownRemark.edges[1].node;
 
   return (
-    <Box align="center" pad={{ vertical: 'large' }}>
+    <Box
+      align="center"
+      pad={{ vertical: 'large' }}
+      margin={{ top: isMobile ? '100px' : '0' }}
+    >
       <Box align="center" style={{ position: 'relative' }}>
-        <Box style={{ zIndex: 2 }}>
+        <Box style={{ zIndex: 2 }} align="center">
           <Heading
             level={1}
             as="h2"
@@ -52,41 +82,26 @@ const Solutions = () => {
           </Paragraph>
         </Box>
 
-        <DtNetConn
-          size="300"
+        <DtTriad
+          size="400"
           color="#F5F5F5"
-          style={{ position: 'absolute', top: '0', zIndex: 0 }}
+          strokeWidth="1.5"
+          style={{
+            position: 'absolute',
+            top: '50%',
+            transform: 'translateY(-50%)',
+            zIndex: 0,
+          }}
         />
       </Box>
-      <Box direction="row" width="large" gap="large" style={{ zIndex: 2 }}>
-        <Box gap="medium" basis="1/2">
-          <Text weight="bold" as="p">
-            {s1.frontmatter.useCase}
-          </Text>
-          {s1.frontmatter.categories.map((item) => (
-            <Box direction="row" gap="medium" key={item}>
-              <Reference name={item} size="20px" />
-              <Text size="small" color="dark-1">
-                {item}
-              </Text>
-            </Box>
-          ))}
-          <Link to={s1.frontmatter.slug}>Learn More</Link>
-        </Box>
-        <Box gap="medium" basis="1/2">
-          <Text weight="bold" as="p">
-            {s2.frontmatter.useCase}
-          </Text>
-          {s2.frontmatter.categories.map((item) => (
-            <Box direction="row" gap="medium" key={item}>
-              <Reference name={item} size="20px" />
-              <Text size="small" color="dark-1">
-                {item}
-              </Text>
-            </Box>
-          ))}
-          <Link to={s2.frontmatter.slug}>Learn More</Link>
-        </Box>
+      <Box
+        direction={isMobile ? 'column' : 'row'}
+        width={isMobile ? 'medium' : 'large'}
+        gap="large"
+        style={{ zIndex: 2 }}
+      >
+        <SolutionGroup node={s1} isMobile={isMobile} />
+        <SolutionGroup node={s2} isMobile={isMobile} />
       </Box>
       <Box width="300px" margin="large">
         <PrimaryButton label="SEE MORE SOLUTIONS" />

src/components/pages/service-category/ServiceList.js

@@ -4,7 +4,7 @@ import { Box, Heading, Paragraph, ResponsiveContext } from 'grommet';
 import { useStaticQuery, graphql } from 'gatsby';
 import { DtSquare } from '../../icons';
 import { Container, Column } from '../../layout';
-import { Link } from '../../core';
+import { CtaLink } from '../../core';
 import Classification from '../../Classification';
 
 const listQuery = graphql`
@@ -37,7 +37,7 @@ const ServiceItem = ({ node, pad }) => (
       <Paragraph fill>{node.frontmatter.excerpt || node.excerpt}</Paragraph>
     </Box>
 
-    <Link to={node.frontmatter.slug}>Learn More ></Link>
+    <CtaLink to={node.frontmatter.slug}>Learn More</CtaLink>
   </Box>
 );
 
@@ -45,8 +45,8 @@ const rowPad = {
   xsmall: '0',
   small: '0',
   medium: 'medium',
-  large: 'large',
-  xlarge: 'large',
+  large: 'medium',
+  xlarge: 'medium',
 };
 
 const ServiceList = ({ categories }) => {
@@ -63,7 +63,7 @@ const ServiceList = ({ categories }) => {
   const isMobile = ['xsmall', 'small'].includes(size);
 
   return (
-    <Box pad={{ vertical: 'large' }} background="white">
+    <Box pad={{ vertical: 'large' }} background="white" style={{ zIndex: 5 }}>
       {catGroup.map((group, i) => (
         <Box key={categories[i]} gap="small">
           {categories.length > 1 && (
@@ -94,7 +94,7 @@ const ServiceList = ({ categories }) => {
                       gap="large"
                       key={item1.id}
                     >
-                      {item1 && <ServiceItem node={item1} />}
+                      {item1 && <ServiceItem node={item1} pad={rowPad[size]} />}
                       {item2 && <ServiceItem node={item2} pad={rowPad[size]} />}
                     </Box>
                   );

src/components/pages/solution-detail/SolutionList.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Box, Heading, Paragraph, Text } from 'grommet';
 import { useStaticQuery, graphql } from 'gatsby';
-import { Link } from '../../core';
+import { CtaLink } from '../../core';
 import Classification from '../../Classification';
 
 const listQuery = graphql`
@@ -33,28 +33,32 @@ const ServiceItem = ({ node, pad }) => (
       {node.frontmatter.title}
     </Heading>
     <Box direction="row" gap="medium" margin={{ bottom: 'medium' }}>
-      {node.frontmatter.categories.map((item) => (
-        <Text key={item} color="dark-1" size="small">
-          {item}
-        </Text>
-      ))}
+      {node.frontmatter.categories &&
+        node.frontmatter.categories.map((item) => (
+          <Text key={item} color="dark-1" size="small">
+            {item}
+          </Text>
+        ))}
     </Box>
-    <Classification levels={node.frontmatter.levels} />
+    {node.frontmatter.levels && (
+      <Classification levels={node.frontmatter.levels} />
+    )}
     {/* Undo this "flex" if we don't want learn more to line up */}
     <Box flex="grow" pad={{ vertical: pad }}>
       <Paragraph fill>{node.frontmatter.excerpt || node.excerpt}</Paragraph>
     </Box>
-
-    <Link to={node.frontmatter.slug}>Learn More ></Link>
+    {node.frontmatter.slug && (
+      <CtaLink to={node.frontmatter.slug}>Learn More</CtaLink>
+    )}
   </Box>
 );
 
-const SolutionList = ({ shoppable, nonShoppable }) => {
+const SolutionList = ({ list }) => {
   const {
     allMarkdownRemark: { nodes },
   } = useStaticQuery(listQuery);
 
-  const ordered = shoppable.reduce((acc, curr, i) => {
+  const ordered = list.reduce((acc, curr, i) => {
     const matchingNode = nodes.find((node) => {
       const matchTitle = node.frontmatter.shortTitle || node.frontmatter.title;
       return matchTitle === curr;
@@ -75,21 +79,12 @@ const SolutionList = ({ shoppable, nonShoppable }) => {
           <ServiceItem node={node} key={node.id} />
         )
       )}
-      {nonShoppable &&
-        nonShoppable.map((node) => (
-          <Box pad="medium" key={node}>
-            <Heading level={4} margin={{ vertical: 'xsmall' }}>
-              {node}
-            </Heading>
-          </Box>
-        ))}
     </Box>
   );
 };
 
 SolutionList.propTypes = {
-  shoppable: PropTypes.array.isRequired,
-  nonShoppable: PropTypes.array,
+  list: PropTypes.array.isRequired,
 };
 
 export default SolutionList;

src/content/service-detail/af7.md

@@ -2,7 +2,7 @@
 slug: '/services/af7'
 title: 'Air Force Special Enclave Video Enterprise Network (AF7)'
 shortTitle: 'AF7'
-categories:
+categories: 
   - Communications
 levels:
   - S-SAR

src/content/service-detail/afsen-coin.md

@@ -2,11 +2,16 @@
 slug: '/services/afsen-coin'
 title: 'AFSEN COIN'
 shortTitle: 'COIN'
-categories:
+categories: 
   - Networking & Connectivity
   - Global Connectivity / WAN
+levels:
+  - S-SAR
+  - S-SCI
+  - TS-SAR
+  - TS-SCI
 excerpt: 'AFSEN-COIN is designed to provide a standardized means of information transportation to improve service and connectivity between locations.'
-updated: March 23, 2021 at 2:54:52 PM EDT
+updated: March 26
 ---
 
 AFSEN-COIN is a Virtual Private Network (VPN) service provided through the Defense Information Systems Agency (DISA) Global Information Grid (GIG). AFSEN-COIN provides the transport pipe for Secret//Special Access Required (SAR) up to Top Secret Sensitive Compartmented Information (SCI)//SAR traffic that is National Security Agency (NSA) Type-1 encrypted using DISA’s Layer 3-VPN service for long-haul transport. AFSEN-COIN provides customers with dedicated transport/bandwidth for Special Access Program (SAP) missions without having to compete with existing NIPRNet bandwidth. Private Network (VPN) service provided through the Defense Information Systems Agency (DISA) Global Information Grid (GIG). AFSEN-COIN provides the transport pipe for Secret//Special Access Required (SAR) up to Top Secret Sensitive Compartmented Information (SCI)//SAR traffic that is National Security Agency (NSA) Type-1 encrypted using DISA’s Layer 3-VPN service for long-haul transport. AFSEN-COIN provides customers with dedicated transport/bandwidth for Special Access Program (SAP) missions without having to compete with existing NIPRNet bandwidth.

src/content/service-detail/base-it.md

@@ -2,7 +2,7 @@
 slug: '/services/base-it-infrastructure'
 title: 'Base IT Infrastructure'
 shortTitle: 'BITI'
-categories:
+categories: 
   - Networking & Connectivity
   - Local Connectivity / BAN
   - Global Connectivity / WAN
@@ -10,20 +10,20 @@ levels:
   - U
   - S
 excerpt: 'Base IT Infrastructure services are centrally managed to provide both wired and wireless WAN and BAN capabilities.'
-updated: March 23, 2021 at 2:54:52 PM EDT
+updated: March 26
 ---
 
 **Wired**
 - All switches, critical and non-critical, to be replaced with improved technology.
-- Software Defined Networking (SDN) capable
-- Enhanced network security (802.1x, 2FA)
+    - Software Defined Networking (SDN) capable
+    - Enhanced network security (802.1x, 2FA)
 
 
 **Wireless**
 - Replacement/addition of facility wireless and flight-line wireless.
-- Wi-Fi 6 capable 
-- Citizens Broadband Radio Service (CBRS) capable (flight-line only)
-- Private/Public/5G LTE delivery (flight-line only)
+    - Wi-Fi 6 capable 
+    - Citizens Broadband Radio Service (CBRS) capable (flight-line only)
+    - Private/Public/5G LTE delivery (flight-line only)
 
 **Centralized Management**
 - Deploy centralized management system for management of wireless, wired and deployment of security policies.

src/content/service-detail/cloud-gateway.md

@@ -3,8 +3,15 @@ slug: '/services/cloud-gateway'
 title: 'Cloud Gateway'
 categories:
   - Network & Connectivity
-  - Cloud Accesslevels
+  - Cloud Access
+levels:
+  - S
+  - S-SAR
+  - S-SCI
+  - TS
+  - TS-SAR
+  - TS-SCI
 excerpt: 'Cloud Gateway provides access to approved SAP Clouds & Services, SAP Meet Me Point (MMPs), and COMSEC collocation by offering high speed Cloud access and leverages common transports. It is tailored towards DoD SAP and ICON Defense Industrial Based (DIB) participants'
-updated: March 23, 2021 at 2:54:52 PM EDT
+updated: March 26
 ---
 

src/content/service-detail/core-rock.md

@@ -21,16 +21,16 @@ CORE is an Air Force Special Access Program (SAP) suite of services approved for
 - Consolidates disparate architectures
 - Eliminates secure faxing and human courier time
 - Webmail service
-	- Adapts based on user clearances
-	- No limit on inbox size
-	- Attach files
+  - Adapts based on user clearances
+  - No limit on inbox size
+  - Attach files
 - Cloud-based file transfer
-	- Multi-level Compartmentalization
-	- Adapts based on user clearances
+  - Multi-level Compartmentalization
+  - Adapts based on user clearances
 - 3rd Party Introduction
-	- User SAP accesses pulled from JADE
-	- Strips PII information for general users
-	
+  - User SAP accesses pulled from JADE
+  - Strips PII information for general users
+
 ### Requirements
 
 All necessary forms are provided by the Rock Connections Team

src/content/service-detail/d1scovery.md

@@ -6,7 +6,7 @@ categories:
 levels: 
   - U
 excerpt: 'An enterprise Big Data Analytics platform hosted on Cloud One that provides advanced data analytics and data management tools up to IL4.'
-updated: March 23, 2021 at 2:54:52 PM EDT
+updated: March 26
 ---
 
 D1scovery provides an operational environment for analytics-based solutions and gives users access to cutting-edge commercial business intelligence and advanced data analytics tools and environment on Microsoft’s Azure Government Cloud.
@@ -15,6 +15,7 @@ D1scovery provides an operational environment for analytics-based solutions and
 ### Benefits & Features
 
 **Benefits**
+
 - Reduce cost and time needed to field Data Analytics Solutions with Data Lab sandbox to test analyses and draft solutions. 
 - Publish vetted analytic solutions that can be shared with any CAC user via URL 
 - Access a metadata catalog and Data Specialists to explore over 50 data sources and existing solutions 
@@ -23,6 +24,7 @@ D1scovery provides an operational environment for analytics-based solutions and
 - Utilize a comprehensive knowledge portal and on-demand toolbox resources to reduce training and start-up time.
 
 **Available Features**
+
 - Apache MiFI
 - Apache Spark
 - Azure Data Factory