From 9c40a869ac4d7021a89dad75540e0a92a88f5e99 Mon Sep 17 00:00:00 2001
From: Anne Demey <anneyvdemey@gmail.com>
Date: Mon, 29 Mar 2021 12:41:14 -0500
Subject: [PATCH 01/12] Adding MD fro non-shoppable services New icon for
 homepage service section Progress on menu dropdown styling

---
 gatsby-node.js                                | 18 ++++---
 src/components/app/Nav.js                     | 51 ++++++++++++-------
 src/components/core/CtaLink.js                | 35 +++++++++++++
 src/components/core/index.js                  |  1 +
 src/components/icons/DtTriad.js               | 16 ++++++
 src/components/icons/index.js                 |  1 +
 src/components/mega-menu/MegaMenu.js          |  2 +-
 src/components/pages/home/Solutions.js        | 20 +++++---
 .../pages/service-category/ServiceList.js     | 10 ++--
 .../pages/solution-detail/SolutionList.js     | 33 +++++-------
 src/content/service-detail/dual-path.md       |  6 +++
 src/content/service-detail/hnp-it.md          |  6 +++
 src/content/solutions/biti.md                 |  9 ++--
 src/pages/solutions.js                        |  4 +-
 src/templates/SolutionDetail.js               |  1 -
 15 files changed, 148 insertions(+), 65 deletions(-)
 create mode 100644 src/components/core/CtaLink.js
 create mode 100644 src/components/icons/DtTriad.js
 create mode 100644 src/content/service-detail/dual-path.md
 create mode 100644 src/content/service-detail/hnp-it.md

diff --git a/gatsby-node.js b/gatsby-node.js
index f5c9e7b..883c5ae 100644
--- a/gatsby-node.js
+++ b/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,
+        },
+      });
+    }
   });
 };
diff --git a/src/components/app/Nav.js b/src/components/app/Nav.js
index 98f960e..b50b4ab 100644
--- a/src/components/app/Nav.js
+++ b/src/components/app/Nav.js
@@ -1,13 +1,6 @@
 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,7 +22,8 @@ const Nav = ({ sticky }) => {
         <Box
           as="nav"
           justify="center"
-          gap="medium"
+          align={sticky ? 'center' : 'end'}
+          gap={sticky ? 'large' : 'small'}
           direction={sticky ? 'row' : 'column'}
         >
           <Box direction="row" justify="end" gap="large">
@@ -54,19 +48,40 @@ const Nav = ({ sticky }) => {
               </Link>
             </Box>
           </Box>
-          <Box direction="row" justify="end" gap="large">
+          {sticky && <Box height="1em" width="2px" background="dark-1" />}
+          <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 height="1em" width="2px" background="dark-1" />
+
             <Box justify="center">
               <Link
                 to="/solutions"
diff --git a/src/components/core/CtaLink.js b/src/components/core/CtaLink.js
new file mode 100644
index 0000000..c7bf3e0
--- /dev/null
+++ b/src/components/core/CtaLink.js
@@ -0,0 +1,35 @@
+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;
diff --git a/src/components/core/index.js b/src/components/core/index.js
index 764928d..4b7ce97 100644
--- a/src/components/core/index.js
+++ b/src/components/core/index.js
@@ -1,4 +1,5 @@
 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';
diff --git a/src/components/icons/DtTriad.js b/src/components/icons/DtTriad.js
new file mode 100644
index 0000000..e9f7f11
--- /dev/null
+++ b/src/components/icons/DtTriad.js
@@ -0,0 +1,16 @@
+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>
+);
diff --git a/src/components/icons/index.js b/src/components/icons/index.js
index 4c3c376..95b0485 100644
--- a/src/components/icons/index.js
+++ b/src/components/icons/index.js
@@ -6,3 +6,4 @@ export * from './DtComputeStore';
 export * from './DtDataAnalysis';
 export * from './DtSquare';
 export * from './DtHex';
+export * from './DtTriad';
diff --git a/src/components/mega-menu/MegaMenu.js b/src/components/mega-menu/MegaMenu.js
index 96b28de..348a920 100644
--- a/src/components/mega-menu/MegaMenu.js
+++ b/src/components/mega-menu/MegaMenu.js
@@ -14,7 +14,7 @@ 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;
 `;
diff --git a/src/components/pages/home/Solutions.js b/src/components/pages/home/Solutions.js
index 2b845ea..1c3fd19 100644
--- a/src/components/pages/home/Solutions.js
+++ b/src/components/pages/home/Solutions.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { useStaticQuery, graphql } from 'gatsby';
 import { Box, Text, Heading, Paragraph } from 'grommet';
-import { DtNetConn } from '../../icons';
+import { DtTriad } from '../../icons';
 import Reference from '../../icons/Reference';
-import { Link, PrimaryButton } from '../../core';
+import { CtaLink, PrimaryButton } from '../../core';
 
 /**
  * 2 column responsive grid block
@@ -52,10 +52,16 @@ 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 }}>
@@ -71,7 +77,7 @@ const Solutions = () => {
               </Text>
             </Box>
           ))}
-          <Link to={s1.frontmatter.slug}>Learn More</Link>
+          <CtaLink to={s1.frontmatter.slug}>Learn More</CtaLink>
         </Box>
         <Box gap="medium" basis="1/2">
           <Text weight="bold" as="p">
@@ -85,7 +91,7 @@ const Solutions = () => {
               </Text>
             </Box>
           ))}
-          <Link to={s2.frontmatter.slug}>Learn More</Link>
+          <CtaLink to={s2.frontmatter.slug}>Learn More</CtaLink>
         </Box>
       </Box>
       <Box width="300px" margin="large">
diff --git a/src/components/pages/service-category/ServiceList.js b/src/components/pages/service-category/ServiceList.js
index e95cd53..fc0adcb 100644
--- a/src/components/pages/service-category/ServiceList.js
+++ b/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 }) => {
@@ -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>
                   );
diff --git a/src/components/pages/solution-detail/SolutionList.js b/src/components/pages/solution-detail/SolutionList.js
index 389f5c7..564e45d 100644
--- a/src/components/pages/solution-detail/SolutionList.js
+++ b/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,23 +33,27 @@ 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 = ({ shoppable }) => {
   const {
     allMarkdownRemark: { nodes },
   } = useStaticQuery(listQuery);
@@ -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,
 };
 
 export default SolutionList;
diff --git a/src/content/service-detail/dual-path.md b/src/content/service-detail/dual-path.md
new file mode 100644
index 0000000..be2c08f
--- /dev/null
+++ b/src/content/service-detail/dual-path.md
@@ -0,0 +1,6 @@
+---
+title: Dual-Path Resiliency
+shortTitle: DPR
+excerpt: 'Dual Path Text: Base IT Infrastructure services are centrally managed to provide both wired and wireless WAN and BAN capabilities.'
+updated: March 29
+---
\ No newline at end of file
diff --git a/src/content/service-detail/hnp-it.md b/src/content/service-detail/hnp-it.md
new file mode 100644
index 0000000..8b9dd5f
--- /dev/null
+++ b/src/content/service-detail/hnp-it.md
@@ -0,0 +1,6 @@
+---
+title: HN Performance & Integration Team
+shortTitle: HNP-IT
+excerpt: 'HN Performance & Integration Team Text: Base IT Infrastructure services are centrally managed to provide both wired and wireless WAN and BAN capabilities.'
+updated: March 29
+---
\ No newline at end of file
diff --git a/src/content/solutions/biti.md b/src/content/solutions/biti.md
index d278c72..0876036 100644
--- a/src/content/solutions/biti.md
+++ b/src/content/solutions/biti.md
@@ -5,10 +5,11 @@ useCase: Optimize and modernize networks and connectivity across a base
 categories:
   - Networking & Connectivity
 shoppable:
-  - Base IT Infrastructure
-  - AFSEN COIN
+  - BITI
+  - COIN
+  - DPR
+  - HNP-IT
 nonShoppable:
-  - Dual-Path Resiliency
-  - HN Performance & Integration Team
+  - Nothing
 index: 2
 ---
\ No newline at end of file
diff --git a/src/pages/solutions.js b/src/pages/solutions.js
index 781226d..775d164 100644
--- a/src/pages/solutions.js
+++ b/src/pages/solutions.js
@@ -5,7 +5,7 @@ import { AppLayout, SEO } from '../components/app';
 import { Container, Column } from '../components/layout';
 import { ServiceHero } from '../components/hero';
 import { DtSquare } from '../components/icons';
-import { Link } from '../components/core';
+import { CtaLink } from '../components/core';
 
 const Solutions = ({ data }) => {
   const imageFluid = data.allFile.edges[0].node.childImageSharp.fluid;
@@ -57,7 +57,7 @@ const Solutions = ({ data }) => {
                         </Box>
                       )}
 
-                      <Link to={node.frontmatter.slug}>View Details</Link>
+                      <CtaLink to={node.front.matter.slug}>Learn More</CtaLink>
                     </Box>
                   </Box>
                 ))}
diff --git a/src/templates/SolutionDetail.js b/src/templates/SolutionDetail.js
index 6da179f..2d06f93 100644
--- a/src/templates/SolutionDetail.js
+++ b/src/templates/SolutionDetail.js
@@ -64,7 +64,6 @@ export const pageQuery = graphql`
         title
         useCase
         shoppable
-        nonShoppable
       }
     }
     allFile(filter: { absolutePath: { regex: "/images/detail-header.png/" } }) {
-- 
GitLab


From 19ec0c676f4ab20105dd01f9e33142ddda939db2 Mon Sep 17 00:00:00 2001
From: Anne Demey <anneyvdemey@gmail.com>
Date: Mon, 29 Mar 2021 12:55:54 -0500
Subject: [PATCH 02/12] Responsive tablet size mega menu

---
 src/components/app/Header.js          |   4 +-
 src/components/mega-menu/MegaMenu.js  | 180 ++++++++++++++------------
 src/components/mega-menu/MenuGroup.js |   1 +
 src/pages/other-programs.js           |   2 +-
 4 files changed, 103 insertions(+), 84 deletions(-)

diff --git a/src/components/app/Header.js b/src/components/app/Header.js
index 02850cf..acd1266 100644
--- a/src/components/app/Header.js
+++ b/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}
diff --git a/src/components/mega-menu/MegaMenu.js b/src/components/mega-menu/MegaMenu.js
index 348a920..8ac8832 100644
--- a/src/components/mega-menu/MegaMenu.js
+++ b/src/components/mega-menu/MegaMenu.js
@@ -1,5 +1,5 @@
-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,
@@ -21,7 +21,7 @@ const StyledMenu = styled(Box)`
 
 const Divider = ({ ...props }) => (
   <Box
-    margin={{ vertical: 'medium' }}
+    margin={{ top: 'medium', bottom: 'medium', right: 'large' }}
     height="2px"
     background="light-1"
     {...props}
@@ -47,91 +47,109 @@ const GroupHeader = ({ label, icon, overview }) => (
   </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;
diff --git a/src/components/mega-menu/MenuGroup.js b/src/components/mega-menu/MenuGroup.js
index 19b4142..0ceaf7f 100644
--- a/src/components/mega-menu/MenuGroup.js
+++ b/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}
diff --git a/src/pages/other-programs.js b/src/pages/other-programs.js
index 64b8a58..e0e2e42 100644
--- a/src/pages/other-programs.js
+++ b/src/pages/other-programs.js
@@ -61,7 +61,7 @@ const OtherPrograms = ({ data }) => {
       />
       <ServiceHero
         title="Our Other Programs"
-        subtitle="Lorem Ipsum"
+        subtitle="In addition to our available services, AFLCMC / C3I&N manages a range of different IT programs and initiatives."
         imageFluid={imageFluid}
       />
       <Container>
-- 
GitLab


From 1aa237fc1e217ceeb9758bdde1cc9095ea3eab70 Mon Sep 17 00:00:00 2001
From: Anne Demey <anneyvdemey@gmail.com>
Date: Mon, 29 Mar 2021 14:39:18 -0500
Subject: [PATCH 03/12] Working on responsive styles for solutions and
 accordion

---
 src/components/mega-menu/MegaMenu.js        | 18 +++---
 src/components/pages/home/OfferAccordion.js | 40 +++++++++---
 src/components/pages/home/Solutions.js      | 69 +++++++++++----------
 src/pages/solutions.js                      |  2 +-
 4 files changed, 80 insertions(+), 49 deletions(-)

diff --git a/src/components/mega-menu/MegaMenu.js b/src/components/mega-menu/MegaMenu.js
index 8ac8832..d749989 100644
--- a/src/components/mega-menu/MegaMenu.js
+++ b/src/components/mega-menu/MegaMenu.js
@@ -36,14 +36,16 @@ 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>
 );
 
diff --git a/src/components/pages/home/OfferAccordion.js b/src/components/pages/home/OfferAccordion.js
index 15886f1..6c6fd6c 100644
--- a/src/components/pages/home/OfferAccordion.js
+++ b/src/components/pages/home/OfferAccordion.js
@@ -1,14 +1,20 @@
-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}
             />
           }
         >
diff --git a/src/components/pages/home/Solutions.js b/src/components/pages/home/Solutions.js
index 1c3fd19..1af2683 100644
--- a/src/components/pages/home/Solutions.js
+++ b/src/components/pages/home/Solutions.js
@@ -1,10 +1,33 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { useStaticQuery, graphql } from 'gatsby';
-import { Box, Text, Heading, Paragraph } from 'grommet';
+import { Box, Text, Heading, Paragraph, ResponsiveContext } from 'grommet';
 import { DtTriad } from '../../icons';
 import Reference from '../../icons/Reference';
 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={5} 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
  * @see https://storybook.grommet.io/?path=/story/layout-grid-responsive-grid--responsive-grid
@@ -31,6 +54,9 @@ 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;
@@ -38,7 +64,7 @@ const Solutions = () => {
   return (
     <Box align="center" pad={{ vertical: 'large' }}>
       <Box align="center" style={{ position: 'relative' }}>
-        <Box style={{ zIndex: 2 }}>
+        <Box style={{ zIndex: 2 }} align="center">
           <Heading
             level={1}
             as="h2"
@@ -64,35 +90,14 @@ const Solutions = () => {
           }}
         />
       </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>
-          ))}
-          <CtaLink to={s1.frontmatter.slug}>Learn More</CtaLink>
-        </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>
-          ))}
-          <CtaLink to={s2.frontmatter.slug}>Learn More</CtaLink>
-        </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" />
diff --git a/src/pages/solutions.js b/src/pages/solutions.js
index 775d164..b48e8d5 100644
--- a/src/pages/solutions.js
+++ b/src/pages/solutions.js
@@ -57,7 +57,7 @@ const Solutions = ({ data }) => {
                         </Box>
                       )}
 
-                      <CtaLink to={node.front.matter.slug}>Learn More</CtaLink>
+                      <CtaLink to={node.frontmatter.slug}>Learn More</CtaLink>
                     </Box>
                   </Box>
                 ))}
-- 
GitLab


From e60e4fb883df9122548f90a9488d8df3b1e62a22 Mon Sep 17 00:00:00 2001
From: Anne Demey <anneyvdemey@gmail.com>
Date: Mon, 29 Mar 2021 15:11:06 -0500
Subject: [PATCH 04/12] Adjusting the nav divider

---
 src/components/app/Nav.js              | 31 ++++++++++++++++++++------
 src/components/pages/home/Solutions.js |  8 +++++--
 src/styles/global.css                  |  3 ---
 3 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/app/Nav.js b/src/components/app/Nav.js
index b50b4ab..2a9f92f 100644
--- a/src/components/app/Nav.js
+++ b/src/components/app/Nav.js
@@ -23,15 +23,20 @@ const Nav = ({ sticky }) => {
           as="nav"
           justify="center"
           align={sticky ? 'center' : 'end'}
-          gap={sticky ? 'large' : 'small'}
+          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
@@ -41,14 +46,21 @@ 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>
-          {sticky && <Box height="1em" width="2px" background="dark-1" />}
+          {sticky && (
+            <Box
+              height="1em"
+              width="2px"
+              background="light-1"
+              style={{ opacity: '0.4' }}
+            />
+          )}
           <Box
             direction="row"
             justify="end"
@@ -80,9 +92,14 @@ const Nav = ({ sticky }) => {
                 </Link>
               </Box>
             </Box>
-            <Box height="1em" width="2px" background="dark-1" />
+            <Box
+              height="1em"
+              width="2px"
+              background="light-1"
+              style={{ opacity: '0.4' }}
+            />
 
-            <Box justify="center">
+            <Box justify="center" margin={{ left: 'medium' }}>
               <Link
                 to="/solutions"
                 size="small"
diff --git a/src/components/pages/home/Solutions.js b/src/components/pages/home/Solutions.js
index 1af2683..5f9b9ae 100644
--- a/src/components/pages/home/Solutions.js
+++ b/src/components/pages/home/Solutions.js
@@ -8,7 +8,7 @@ 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={5} margin="0">
+      <Heading level={4} margin="0">
         {node.frontmatter.useCase}
       </Heading>
     </Box>
@@ -62,7 +62,11 @@ const Solutions = () => {
   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 }} align="center">
           <Heading
diff --git a/src/styles/global.css b/src/styles/global.css
index e98cc64..293d3b1 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,6 +1,3 @@
 body {
   margin: 0;
-  /* Hack for megamenu modal mode */
-  /* TODO: Find a better way */
-  /* overflow: auto !important; */
 }
-- 
GitLab


From 892cad2af8c336fca4e1aacd588e95eb9e5d8f69 Mon Sep 17 00:00:00 2001
From: Anne Demey <anneyvdemey@gmail.com>
Date: Mon, 29 Mar 2021 15:20:24 -0500
Subject: [PATCH 05/12] Small fix for sticky icon

---
 src/components/pages/service-category/ServiceList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/service-category/ServiceList.js b/src/components/pages/service-category/ServiceList.js
index fc0adcb..e9251a8 100644
--- a/src/components/pages/service-category/ServiceList.js
+++ b/src/components/pages/service-category/ServiceList.js
@@ -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 && (
-- 
GitLab


From 0e841915a4db71c0bb67ca0f963ae1531ca22e4c Mon Sep 17 00:00:00 2001
From: Anne Demey <anneyvdemey@gmail.com>
Date: Mon, 29 Mar 2021 15:26:56 -0500
Subject: [PATCH 06/12] Removed nonshoppable data

---
 src/content/solutions/biti.md   | 2 --
 src/templates/SolutionDetail.js | 5 +----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/content/solutions/biti.md b/src/content/solutions/biti.md
index 0876036..e3740bc 100644
--- a/src/content/solutions/biti.md
+++ b/src/content/solutions/biti.md
@@ -9,7 +9,5 @@ shoppable:
   - COIN
   - DPR
   - HNP-IT
-nonShoppable:
-  - Nothing
 index: 2
 ---
\ No newline at end of file
diff --git a/src/templates/SolutionDetail.js b/src/templates/SolutionDetail.js
index 2d06f93..5250290 100644
--- a/src/templates/SolutionDetail.js
+++ b/src/templates/SolutionDetail.js
@@ -40,10 +40,7 @@ const SolutionDetailTemplate = ({ data }) => {
                   <Text weight="bold">{`The following C3I&N services could be used together to help ${frontmatter.useCase}`}</Text>
                 </Box>
               </Box>
-              <SolutionList
-                shoppable={frontmatter.shoppable}
-                nonShoppable={frontmatter.nonShoppable}
-              />
+              <SolutionList shoppable={frontmatter.shoppable} />
             </Box>
             <Box basis="460px" flex={{ shrink: 0 }}>
               <ContactForm />
-- 
GitLab


From cd643cc436000385f2c86cb742030de2da2d6462 Mon Sep 17 00:00:00 2001
From: Anne Demey <anneyvdemey@gmail.com>
Date: Mon, 29 Mar 2021 15:33:17 -0500
Subject: [PATCH 07/12] Adding back nonshoppable and merging with shoppable

---
 src/components/pages/solution-detail/SolutionList.js | 6 +++---
 src/content/solutions/biti.md                        | 2 ++
 src/templates/SolutionDetail.js                      | 7 +++++--
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/pages/solution-detail/SolutionList.js b/src/components/pages/solution-detail/SolutionList.js
index 564e45d..4cfa868 100644
--- a/src/components/pages/solution-detail/SolutionList.js
+++ b/src/components/pages/solution-detail/SolutionList.js
@@ -53,12 +53,12 @@ const ServiceItem = ({ node, pad }) => (
   </Box>
 );
 
-const SolutionList = ({ shoppable }) => {
+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;
@@ -84,7 +84,7 @@ const SolutionList = ({ shoppable }) => {
 };
 
 SolutionList.propTypes = {
-  shoppable: PropTypes.array.isRequired,
+  list: PropTypes.array.isRequired,
 };
 
 export default SolutionList;
diff --git a/src/content/solutions/biti.md b/src/content/solutions/biti.md
index e3740bc..a335e3f 100644
--- a/src/content/solutions/biti.md
+++ b/src/content/solutions/biti.md
@@ -7,7 +7,9 @@ categories:
 shoppable:
   - BITI
   - COIN
+nonShoppable:
   - DPR
   - HNP-IT
+  
 index: 2
 ---
\ No newline at end of file
diff --git a/src/templates/SolutionDetail.js b/src/templates/SolutionDetail.js
index 5250290..ea5beff 100644
--- a/src/templates/SolutionDetail.js
+++ b/src/templates/SolutionDetail.js
@@ -17,7 +17,9 @@ import { SolutionList } from '../components/pages/solution-detail';
 const SolutionDetailTemplate = ({ data }) => {
   const { frontmatter } = data.markdownRemark;
   const images = data.allFile.edges;
-
+  const solutionList = frontmatter.nonShoppable
+    ? [...frontmatter.shoppable, ...frontmatter.nonShoppable]
+    : frontmatter.shoppable;
   return (
     <AppLayout transparentHeader>
       <SEO
@@ -40,7 +42,7 @@ const SolutionDetailTemplate = ({ data }) => {
                   <Text weight="bold">{`The following C3I&N services could be used together to help ${frontmatter.useCase}`}</Text>
                 </Box>
               </Box>
-              <SolutionList shoppable={frontmatter.shoppable} />
+              <SolutionList list={solutionList} />
             </Box>
             <Box basis="460px" flex={{ shrink: 0 }}>
               <ContactForm />
@@ -61,6 +63,7 @@ export const pageQuery = graphql`
         title
         useCase
         shoppable
+        nonShoppable
       }
     }
     allFile(filter: { absolutePath: { regex: "/images/detail-header.png/" } }) {
-- 
GitLab


From 8fef1438b7bde40bfdcd55dca8283ada290c163a Mon Sep 17 00:00:00 2001
From: Anne Demey <anneyvdemey@gmail.com>
Date: Mon, 29 Mar 2021 15:48:19 -0500
Subject: [PATCH 08/12] Syncing content from dropbox

---
 src/content/service-detail/af7.md                |  2 +-
 src/content/service-detail/afsen-coin.md         |  9 +++++++--
 src/content/service-detail/base-it.md            | 16 ++++++++--------
 src/content/service-detail/cloud-gateway.md      | 11 +++++++++--
 src/content/service-detail/d1scovery.md          |  4 +++-
 src/content/service-detail/fences.md             |  2 +-
 src/content/service-detail/icon.md               |  9 ++++++++-
 src/content/service-detail/platform-one-cnap.md  | 11 +++++------
 src/content/service-detail/platform-one.md       |  8 +++++++-
 src/content/service-detail/seitaas-isp.md        | 11 +++++++++--
 .../service-detail/seitaas-remote-connect.md     |  2 +-
 src/content/service-detail/seitaas-summit.md     | 13 +++++++++++++
 12 files changed, 72 insertions(+), 26 deletions(-)

diff --git a/src/content/service-detail/af7.md b/src/content/service-detail/af7.md
index 6e6269b..7bc012b 100644
--- a/src/content/service-detail/af7.md
+++ b/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
diff --git a/src/content/service-detail/afsen-coin.md b/src/content/service-detail/afsen-coin.md
index 9786cbe..a4e52a1 100644
--- a/src/content/service-detail/afsen-coin.md
+++ b/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.
diff --git a/src/content/service-detail/base-it.md b/src/content/service-detail/base-it.md
index f68ec0b..c8f26c9 100644
--- a/src/content/service-detail/base-it.md
+++ b/src/content/service-detail/base-it.md
@@ -2,28 +2,28 @@
 slug: '/services/base-it-infrastructure'
 title: 'Base IT Infrastructure'
 shortTitle: 'BITI'
-categories:
+categories: 
   - Networking & Connectivity
   - Local Connectivity / BAN
   - Global Connectivity / WAN
 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
+Excerpt: 'Base IT Infrastructure services are centrally managed to provide both wired and wireless WAN and BAN capabilities.'
+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.
diff --git a/src/content/service-detail/cloud-gateway.md b/src/content/service-detail/cloud-gateway.md
index 2a7168f..64a3633 100644
--- a/src/content/service-detail/cloud-gateway.md
+++ b/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
 ---
 
diff --git a/src/content/service-detail/d1scovery.md b/src/content/service-detail/d1scovery.md
index a7057c5..4c1c46e 100644
--- a/src/content/service-detail/d1scovery.md
+++ b/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
diff --git a/src/content/service-detail/fences.md b/src/content/service-detail/fences.md
index f7512dc..5320411 100644
--- a/src/content/service-detail/fences.md
+++ b/src/content/service-detail/fences.md
@@ -11,7 +11,7 @@ levels:
   - TS-SAR
   - TS-SCI
 excerpt: 'FENCES is the only SAP-compliant enterprise cloud solution for the DoD at independent levels of security.'
-updated: March 23, 2021 at 2:54:52 PM EDT
+updated: March 26
 ---
 
 FENCES provides PL-2 workload templates for SAP customers that easily provide virtual desktops, DevSecOps, modeling & simulation, edge computing, and data backup capabilities. These workload templates are available across every security level to simplify development and migration of mission applications for SAP data.
diff --git a/src/content/service-detail/icon.md b/src/content/service-detail/icon.md
index 19495c2..9053ced 100644
--- a/src/content/service-detail/icon.md
+++ b/src/content/service-detail/icon.md
@@ -5,8 +5,15 @@ shortTitle: 'ICON'
 categories: 
   - Networking & Connectivity
   - Reference Architectures
+levels:
+  - S
+  - S-SAR
+  - S-SCI
+  - TS
+  - TS-SAR
+  - TS-SCI
 excerpt: 'ICON is a reference architecture for industry partners to build out their own PL-3 networks to connect to FENCES or Summit.'
-updated: March 23, 2021 at 2:54:52 PM EDT
+updated: March 26
 ---
 
 ICON connect industry to DoD’s Enterprise SAP Services (SWS) and cloud environment by providing a standardized architecture, security, cyber and operations across industry through the ICON Reference Architecture. 
diff --git a/src/content/service-detail/platform-one-cnap.md b/src/content/service-detail/platform-one-cnap.md
index e8aabbf..f58e1a1 100644
--- a/src/content/service-detail/platform-one-cnap.md
+++ b/src/content/service-detail/platform-one-cnap.md
@@ -7,17 +7,16 @@ categories:
   - Cloud Access
 levels: 
   - U
-excerpt: 'CNAP provides access to cloud-based development, testing, and production enclaves.'
-updated: March 23, 2021 at 2:54:52 PM EDT
+excerpt: 'The Cloud Native Acess Point is available on Cloud One to provide access to Development, Testing, and Production enclaves at IL-2, IL-4, and IL-5 that use Platform One DevSecOps DevSecOps environments by using an internet-facing Cloud-native Zero trust model.'
+updated: March 26
 ---
 
+CNAP brings a full Zero Trust tech stack enforcing device state, user RBAC, and Software Defined Perimeter / Networks based on Google BeyondCorp concepts and allows access to Cloud One (AWS GovCloud and soon Azure Government) and Platform One without a BCAP or IAP. CNAP allows thick client access from BYOD Government-owned devices (both mobile and desktop) through AppGate Zero Trust clients to enforce device states.
+
 ### Benefits & Features
 
-- Brings a full Zero Trust tech stack enforcing device state, user RBAC, and Software Defined Perimeter / Networks based on Google BeyondCorp concepts
-- Allows access to Cloud One (AWS GovCloud and soon Azure Government) and Platform One without a BCAP or IAP
-- Allows thick client access from BYOD Government-owned devices (both mobile and desktop) through AppGate Zero Trust clients to enforce device states
 - Allows for VDI options for zero / thin clients
-- Enables internet egress at IL 5 in development enclaves
+- Enables internet egress at IL2, IL4, IL5 in development enclaves
 - Brings DMZ Network / Perimeter stack with break and inspect, IDS / IPS , WAF Capability, full packet captures as an elastic Cloud-based stack
 - Brings SSO with various DoD PKI authentication options and IL2 MFA options.
 - Centralizes and aggregates logs and pushes to CSSP
diff --git a/src/content/service-detail/platform-one.md b/src/content/service-detail/platform-one.md
index fd2d5bd..0e276bb 100644
--- a/src/content/service-detail/platform-one.md
+++ b/src/content/service-detail/platform-one.md
@@ -7,7 +7,13 @@ levels:
   - U
   - S
 excerpt: 'Platform One provides the secure DevSecOps platform and pipelines needed to implement and automate the accreditation and deployment of warfighting software capabilities at commercial speeds.'
-updated: March 23, 2021 at 2:54:52 PM EDT
+updated: March 26
 ---
 
 Platform One implements the DoD DevSecOps transformation with program offices under the technical direction and vision of the Air Force Chief Software Officer. Platform One is also the DoD CIO’s preferred DevSecOps service provider.
+
+### Benefits & Features
+
+- Build and deliver new and accredited custom software applications (microservices)
+- DoD Continuous Authority to Operate (cATO) (pay per app)
+- Teams can use existing CI/CD pipelines hosted on Repo One with their current Infrastructure as Code (IaC) Code
\ No newline at end of file
diff --git a/src/content/service-detail/seitaas-isp.md b/src/content/service-detail/seitaas-isp.md
index 1efcb46..2cd86f0 100644
--- a/src/content/service-detail/seitaas-isp.md
+++ b/src/content/service-detail/seitaas-isp.md
@@ -5,8 +5,15 @@ shortTitle: 'SEITaaS ISP'
 categories: 
   - Networking & Connectivity
   - Global Connectivity / WAN
+levels:
+  - S
+  - S-SAR
+  - S-SCI
+  - TS
+  - TS-SAR
+  - TS-SCI
 excerpt: 'SEITaaS network transport will be provided by a catalogue of service providers including both government and commercial internet providers.'
-updated: March 23, 2021 at 2:54:52 PM EDT
+updated: March 26
 ---
 
-During site surveys and end user requirements refinement the SEITaaS/Summit team will evaluate all available options for connectivity at a site and use the best available option to meet the user requirements.
+During site surveys and end user requirements refinement the SEITaaS/Summit team will evaluate all available options for connectivity at a site and use the best available option to meet the user requirements. Options considered will include government provided transport (NIPR, COIN, DREN, etc.) or locally available commercial ISP. 
diff --git a/src/content/service-detail/seitaas-remote-connect.md b/src/content/service-detail/seitaas-remote-connect.md
index c0f9b97..5ebcf11 100644
--- a/src/content/service-detail/seitaas-remote-connect.md
+++ b/src/content/service-detail/seitaas-remote-connect.md
@@ -10,6 +10,6 @@ levels:
   - TS-SAR
   - TS-SCI
 excerpt: 'SEITaaS will enable enterprise capabilities to be provided as a service to users accessing thin client, zero client, or connected self sustained performer LANs.'
-updated: March 23, 2021 at 2:54:52 PM EDT
+updated: March 26
 ---
 
diff --git a/src/content/service-detail/seitaas-summit.md b/src/content/service-detail/seitaas-summit.md
index c741414..ee04804 100644
--- a/src/content/service-detail/seitaas-summit.md
+++ b/src/content/service-detail/seitaas-summit.md
@@ -13,3 +13,16 @@ updated: March 23, 2021 at 2:51:35 PM EDT
 ---
 
 SEITaaS/Summit delivers End User Services, MLS applications, and NaaS to include data transport and endpoints.  These capabilities are maintained centrally and down to the desktop.  Users have the ability to select applications and new capabilities from a government service catalog or request new services to add to the government service catalog as needed.
+
+### Benefits & Features
+
+- Modernize AF SAP IT enterprise services
+- Consolidate AF SAP IT systems and services
+- Better secure AF SAP IT systems and data
+- Optimize AF SAP IT enterprise services
+- Validate the Government technical approach
+- Rapidly meet urgent customer needs
+- Gather comprehensive "as a service" data
+- Reduce the overall cost of SAP IT services
+- Refine customer assessment and fielding processes
+- Transfer the solution to follow on "as a service" vendor(s)
\ No newline at end of file
-- 
GitLab


From a1fa167b7f4327e9c0956d675309a89a0043b7ab Mon Sep 17 00:00:00 2001
From: Anne Demey <anneyvdemey@gmail.com>
Date: Mon, 29 Mar 2021 15:55:52 -0500
Subject: [PATCH 09/12] Fixing indent on header for core rock page

---
 src/content/service-detail/core-rock.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/service-detail/core-rock.md b/src/content/service-detail/core-rock.md
index f5262e5..3cdb0a4 100644
--- a/src/content/service-detail/core-rock.md
+++ b/src/content/service-detail/core-rock.md
@@ -30,7 +30,7 @@ CORE is an Air Force Special Access Program (SAP) suite of services approved for
 - 3rd Party Introduction
 	- User SAP accesses pulled from JADE
 	- Strips PII information for general users
-	
+
 ### Requirements
 
 All necessary forms are provided by the Rock Connections Team
-- 
GitLab


From efa039d0df3224be8b3d437a960e0025f103d30e Mon Sep 17 00:00:00 2001
From: Anne Demey <anneyvdemey@gmail.com>
Date: Mon, 29 Mar 2021 15:57:49 -0500
Subject: [PATCH 10/12] Fixing tabs in md

---
 src/content/service-detail/core-rock.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/content/service-detail/core-rock.md b/src/content/service-detail/core-rock.md
index 3cdb0a4..80301a0 100644
--- a/src/content/service-detail/core-rock.md
+++ b/src/content/service-detail/core-rock.md
@@ -21,15 +21,15 @@ 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
 
-- 
GitLab


From a5b9dd56c38f0a4dc8cd426e19b4b990a86aec2f Mon Sep 17 00:00:00 2001
From: Ben Wynn <ben.wynn@us.isobar.com>
Date: Mon, 29 Mar 2021 18:12:50 -0400
Subject: [PATCH 11/12] Fixing the SEO description to properly pull from
 excerpt instead of listing 'undefined' ...  also fixing base-it to have an
 'excerpt' tag, instead of that unknown 'Excerpt' tag.

---
 src/content/service-detail/base-it.md | 2 +-
 src/templates/ServiceDetail.js        | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/content/service-detail/base-it.md b/src/content/service-detail/base-it.md
index c8f26c9..4c1ec5e 100644
--- a/src/content/service-detail/base-it.md
+++ b/src/content/service-detail/base-it.md
@@ -9,7 +9,7 @@ categories:
 levels: 
   - U
   - S
-Excerpt: 'Base IT Infrastructure services are centrally managed to provide both wired and wireless WAN and BAN capabilities.'
+excerpt: 'Base IT Infrastructure services are centrally managed to provide both wired and wireless WAN and BAN capabilities.'
 updated: March 26
 ---
 
diff --git a/src/templates/ServiceDetail.js b/src/templates/ServiceDetail.js
index ae9c746..64fd7dc 100644
--- a/src/templates/ServiceDetail.js
+++ b/src/templates/ServiceDetail.js
@@ -57,6 +57,7 @@ export const pageQuery = graphql`
         title
         categories
         levels
+        excerpt
       }
     }
     allFile(filter: { absolutePath: { regex: "/images/detail-header.png/" } }) {
-- 
GitLab


From c740d5ad7d66bf0b76da631efa293ad1ac0f5636 Mon Sep 17 00:00:00 2001
From: Anne Demey <anneyvdemey@gmail.com>
Date: Mon, 29 Mar 2021 19:23:27 -0500
Subject: [PATCH 12/12] Adding AFIT title to share title

---
 src/components/app/SEO.js | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/app/SEO.js b/src/components/app/SEO.js
index 5a1e465..69e397b 100644
--- a/src/components/app/SEO.js
+++ b/src/components/app/SEO.js
@@ -1,10 +1,3 @@
-/**
- * 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`,
-- 
GitLab