Merge branch 'develop' into 'staging'

content update + demo updates See merge request !18

Merge branch 'develop' into 'staging'
content update + demo updates See merge request !18
d87dbd4a · Ben Wynn · cd8a35dd · b7591b81 · d87dbd4a · d87dbd4a
Commit d87dbd4a authored Apr 06, 2021 by Ben Wynn
20 changed files
--- a/package-lock.json
+++ b/package-lock.json
@@ -9716,16 +9716,16 @@
      }
    },
    "grommet": {
-      "version": "2.16.3",
+      "version": "2.17.1",
-      "resolved": "https://registry.npmjs.org/grommet/-/grommet-2.16.3.tgz",
+      "resolved": "https://registry.npmjs.org/grommet/-/grommet-2.17.1.tgz",
-      "integrity": "sha512-q/je53d5AoCpokqXIJHzIIXpRMej9cjsdGt/BkWbTizF+36OWQ67Aqw8f4kK8YfAOxZ267gRj1Y1mDFva3duYw==",
+      "integrity": "sha512-ULHivqDHiMtHMXfPiyyL9yct0n9a6S9V+Azs9B4Ukjy6Zvp02gTzVve3K/q/IyBagD7EP3AGHuqwMZUxiJL15w==",
      "requires": {
        "grommet-icons": "^4.5.0",
        "hoist-non-react-statics": "^3.2.0",
        "markdown-to-jsx": "^6.11.4",
        "polished": "^3.4.1",
        "prop-types": "^15.7.2",
-        "react-desc": "^4.1.2"
+        "react-desc": "^4.1.3"
      }
    },
    "grommet-icons": {
@@ -14908,9 +14908,9 @@
      }
    },
    "react-desc": {
-      "version": "4.1.2",
+      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/react-desc/-/react-desc-4.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/react-desc/-/react-desc-4.1.3.tgz",
-      "integrity": "sha512-JAVe89uaLr0HZ0IKodnpTPNgNyJ/SPDQnl3VJPVwI+SpebmHvJiBNZEOwX201QmSbsVGqRY8ql/VFPlAx85WzA=="
+      "integrity": "sha512-XqfNsg+nvAO77ja5+v3J6bMS7drnWozpiA64bUTyhqvSCJRkq45FiONl7/+74OjPw4Id6qbqVX6xkER/yTU8+w=="
    },
    "react-dev-utils": {
      "version": "4.2.3",

--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
    "gatsby-transformer-remark": "^2.16.1",
    "gatsby-transformer-sharp": "^2.12.0",
    "gatsby-transformer-yaml": "^3.0.0",
-    "grommet": "^2.16.3",
+    "grommet": "^2.17.1",
    "grommet-icons": "^4.5.0",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",

--- a/src/components/ContactForm.js
+++ b/src/components/ContactForm.js
 import React, { useState } from 'react';
-import { Box, Heading, Text, Form, FormField, TextInput } from 'grommet';
+import {
+  Box,
+  Heading,
+  Text,
+  Form,
+  FormField,
+  TextInput,
+  TextArea,
+  Spinner,
+} from 'grommet';
 import { PrimaryButton } from './core';
+const korolevFont = 'korolev, Helvetica Neue, Helvetica, Arial, sans-serif';
 const ContactForm = () => {
-  const [value, setValue] = useState({});
+  const [submitting, setSubmitting] = useState();
+  const [success, setSuccess] = useState();
+  const handleSubmit = (event) => {
+    const data = new FormData(event.target);
+    setSubmitting(true);
+    fetch(
+      'https://docs.google.com/forms/d/e/1FAIpQLScsfrAHD8yKJGKF-yI_T9676FR-LDmmuBG_m8uY2TmP_zmZUg/formResponse',
+      {
+        mode: 'no-cors', // we don't care about the result of this request, so just do it.
+        method: 'POST',
+        body: data,
+      }
+    ).then((res) => {
+      setSubmitting(false);
+      setSuccess(true);
+    });
+  };
  return (
    <Box>
      <Box pad="medium" background="black">
-        <Heading level={3} margin={{ top: 'none', bottom: 'xsmall' }}>
+        <Heading
-          Request a consultation
+          level={3}
+          margin="0"
+          style={{
+            fontFamily: korolevFont,
+          }}
+        >
+          REQUEST A CONSULTATION
        </Heading>
-        <Text size="small">
-          Use this form to get going. We'll get in touch-to-discuss the details.
-        </Text>
      </Box>
      <Box
        pad="medium"
        border={{ color: 'light-1', size: 'xsmall', side: 'all' }}
+        style={{ position: 'relative' }}
      >
-        <Form
+        {!success && (
-          value={value}
+          <Box>
-          onChange={(nextValue) => setValue(nextValue)}
+            <Text size="small">
-          onReset={() => setValue({})}
+              <Text size="small" weight="bold">
-          onSubmit={(event) => {
+                We'd love to talk.
-            const data = new FormData(event.target);
+              </Text>{' '}
-            fetch(
+              Tell us how we can reach you and what services you're interested
-              'https://docs.google.com/forms/u/0/d/e/1FAIpQLScV4doNjISIN1IyjI8gdyv7bUsaMvAFuEkwDy-I5IyicZJSYw/formResponse',
+              in, and someone from our team will reach out soon.
-              {
+            </Text>
-                mode: 'no-cors', // we don't care about the result of this request, so just do it.
+            <Text size="small" color="accent-1">
-                method: 'POST',
+              Submit{' '}
-                body: data,
+              <Text weight="bold" size="small" color="accent-1">
-              }
+                unclassified
-            );
+              </Text>{' '}
-          }}
+              data only.
-        >
+            </Text>
-          <Text color="accent-1" weight="bold" size="small">
+            <Form onSubmit={handleSubmit}>
-            Required*
+              <FormField
-          </Text>
+                name="entry.1114584563"
-          <FormField
+                htmlFor="text-input-name"
-            name="emailAddress"
+                label={
-            htmlFor="text-input-name"
+                  <Text weight="bold" size="small">
-            label="Email address"
+                    Name{' '}
-            required
+                    <Text weight="normal" size="small">
-          >
+                      (required)
-            <TextInput id="text-input-name" name="emailAddress" />
+                    </Text>
-          </FormField>
+                  </Text>
-          <FormField
+                }
-            name="entry.1408130248"
+                required
-            htmlFor="text-input-name"
+              >
-            label="Name"
+                <TextInput id="text-input-name" name="entry.1114584563" />
-            required
+              </FormField>
-          >
+              <FormField
-            <TextInput id="text-input-name" name="entry.1408130248" />
+                name="emailAddress"
-          </FormField>
+                htmlFor="text-input-email"
-          <FormField
+                label={
-            name="programs"
+                  <Text weight="bold" size="small">
-            htmlFor="text-input-programs"
+                    Email address{' '}
-            label="Tell us what programs you're interested in?"
+                    <Text weight="normal" size="small">
+                      (required)
+                    </Text>
+                  </Text>
+                }
+                required
+              >
+                <TextInput id="text-input-email" name="emailAddress" />
+              </FormField>
+              <FormField
+                name="entry.533506743"
+                htmlFor="text-input-services"
+                label={
+                  <Text weight="bold" size="small">
+                    Services or solutions you are interested in{' '}
+                    <Text weight="normal" size="small">
+                      (optional)
+                    </Text>
+                  </Text>
+                }
+              >
+                <TextInput id="text-input-services" name="entry.533506743" />
+              </FormField>
+              <FormField
+                name="entry.297731592"
+                htmlFor="text-input-comments"
+                label={
+                  <Text weight="bold" size="small">
+                    Comments or details{' '}
+                    <Text weight="normal" size="small">
+                      (optional)
+                    </Text>
+                  </Text>
+                }
+              >
+                <TextArea
+                  id="text-input-comments"
+                  name="entry.297731592"
+                  style={{ height: '100px' }}
+                />
+              </FormField>
+              <Box pad={{ top: 'medium' }}>
+                <PrimaryButton
+                  pad={{ vertical: 'large' }}
+                  type="submit"
+                  label="Submit"
+                />
+              </Box>
+            </Form>
+          </Box>
+        )}
+        {submitting && (
+          <Box
+            background="rgba(0, 0, 0, 0.8)"
+            align="center"
+            justify="center"
+            gap="medium"
+            style={{
+              position: 'absolute',
+              top: 0,
+              right: 0,
+              bottom: 0,
+              left: 0,
+            }}
          >
-            <TextInput id="text-input-programs" name="entry.1486723414" />
+            <Spinner
-          </FormField>
+              size="medium"
-          <PrimaryButton type="submit" label="Submit" />
+              style={{
-        </Form>
+                borderBottomColor: 'rgba(255, 255, 255, 0.2)',
+                borderLeftColor: 'rgba(255, 255, 255, 0.2)',
+                borderRightColor: 'rgba(255, 255, 255, 0.2)',
+              }}
+            />
+            <Text
+              size="large"
+              weight="bold"
+              style={{
+                fontFamily: korolevFont,
+              }}
+            >
+              REQUESTING CONSULTATION
+            </Text>
+          </Box>
+        )}
+        {success && (
+          <Box pad="large" align="center" justify="center">
+            <Heading
+              level={3}
+              style={{ fontFamily: korolevFont }}
+              margin={{ top: '0', bottom: 'small' }}
+            >
+              REQUEST SENT
+            </Heading>
+            <Text textAlign="center">
+              Our engagement team will
+              <br />
+              reach out soon.
+            </Text>
+          </Box>
+        )}
      </Box>
    </Box>
  );

--- a/src/components/FeedbackFooter.js
+++ b/src/components/FeedbackFooter.js
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
-import { Box, Text, ResponsiveContext } from 'grommet';
+import { Box, Text, Layer, ResponsiveContext } from 'grommet';
+import FeedbackForm from './FeedbackForm';
 import { Container, Column } from './layout';
 import { SecondaryButton } from './core';
 const FeedbackFooter = () => {
+  const [isOpen, setOpen] = useState();
  const size = useContext(ResponsiveContext);
  const isMobile = ['xsmall', 'small'].includes(size);
+  const handleToggleOpen = () => {
+    setOpen(!isOpen);
+  };
  return (
-    <Container border={{ side: 'top', color: 'light-1' }}>
+    <>
-      <Column>
+      <Container
-        <Box
+        margin={{ top: 'large' }}
-          direction={isMobile ? 'column' : 'row'}
+        border={{ side: 'top', color: 'light-1' }}
-          justify="center"
+      >
-          pad="medium"
+        <Column>
-          gap="medium"
+          <Box
-        >
+            direction={isMobile ? 'column' : 'row'}
-          <Box justify="center" align={isMobile ? 'center' : 'start'}>
+            justify="center"
-            <Text weight="bold">We could use your feedback!</Text>
+            pad="medium"
-            <Text size="small">Help us improve this service.</Text>
+            gap="medium"
-          </Box>
+          >
-          <Box border={{ side: 'right', size: 'small', color: 'light-1' }} />
+            <Box justify="center" align={isMobile ? 'center' : 'start'}>
-          <Box justify="center" align="center">
+              <Text weight="bold">We could use your feedback!</Text>
-            <Box width="200px">
+              <Text size="small">
-              <SecondaryButton label="SEND FEEDBACK" />
+                Send us feedback on this website or, better,
+                <br />
+                volunteer for our Customer Advisory Panel.
+              </Text>
+            </Box>
+            <Box border={{ side: 'right', size: 'xsmall', color: 'light-1' }} />
+            <Box justify="center" align="center">
+              <Box width="200px">
+                <SecondaryButton
+                  label="SEND FEEDBACK"
+                  onClick={handleToggleOpen}
+                />
+              </Box>
            </Box>
          </Box>
-        </Box>
+        </Column>
-      </Column>
+      </Container>
-    </Container>
+      {isOpen && (
+        <Layer animation="fadeIn">
+          <FeedbackForm onClose={handleToggleOpen} />
+        </Layer>
+      )}
+    </>
  );
 };

--- a/src/components/FeedbackForm.js
+++ b/src/components/FeedbackForm.js
+import React, { useState } from 'react';
+import {
+  Box,
+  Heading,
+  Text,
+  Form,
+  FormField,
+  TextInput,
+  TextArea,
+  Spinner,
+  Button,
+  CheckBox,
+  ThemeContext,
+} from 'grommet';
+import { Close } from 'grommet-icons';
+import { PrimaryButton } from './core';
+const korolevFont = 'korolev, Helvetica Neue, Helvetica, Arial, sans-serif';
+const FeedbackForm = ({ onClose }) => {
+  const [submitting, setSubmitting] = useState();
+  const [success, setSuccess] = useState();
+  const handleSubmit = (event) => {
+    const data = new FormData(event.target);
+    setSubmitting(true);
+    fetch(
+      'https://docs.google.com/forms/d/e/1FAIpQLSf79Q_Cl2MC9wxUHUEZWvUAAehxUaGn_wKmJ014E49-ENaS3Q/formResponse',
+      {
+        mode: 'no-cors', // we don't care about the result of this request, so just do it.
+        method: 'POST',
+        body: data,
+      }
+    ).then((res) => {
+      setSubmitting(false);
+      setSuccess(true);
+    });
+  };
+  return (
+    <Box>
+      <Box
+        pad="medium"
+        background="black"
+        direction="row"
+        justify="between"
+        align="center"
+      >
+        <Heading
+          level={3}
+          margin="0"
+          style={{
+            fontFamily: korolevFont,
+          }}
+        >
+          SEND US YOUR FEEDBACK
+        </Heading>
+        <Button icon={<Close />} onClick={onClose}></Button>
+      </Box>
+      <Box pad="medium" style={{ position: 'relative' }}>
+        {!success && (
+          <Box>
+            <Form onSubmit={handleSubmit}>
+              <FormField
+                name="entry.675672969"
+                htmlFor="text-input-comments"
+                required
+                label={
+                  <Text weight="bold" size="small">
+                    Your thoughts or suggestions{' '}
+                    <Text weight="normal" size="small">
+                      (required)
+                    </Text>
+                  </Text>
+                }
+              >
+                <TextArea
+                  id="text-input-comments"
+                  name="entry.675672969"
+                  style={{ height: '100px' }}
+                />
+              </FormField>
+              <ThemeContext.Extend
+                value={{ formField: { border: { size: '0' } } }}
+              >
+                <FormField name="entry.619303959" htmlFor="checkbox-panel">
+                  <CheckBox
+                    id="checkbox-panel"
+                    name="entry.619303959"
+                    value="volunteer"
+                    label={
+                      <Box>
+                        <Text weight="bold">
+                          Join our Customer Advisory Panel
+                        </Text>
+                        <Text size="small">
+                          Help us by volunteering an occasional hour of your
+                          time to provide insights and test ideas for ow C3I&N
+                          can best serve our IT customers.
+                        </Text>
+                      </Box>
+                    }
+                  />
+                </FormField>
+              </ThemeContext.Extend>
+              <FormField
+                name="entry.1573591932"
+                htmlFor="text-input-name"
+                label={
+                  <Text weight="bold" size="small">
+                    Name{' '}
+                    <Text weight="normal" size="small">
+                      (optional)
+                    </Text>
+                  </Text>
+                }
+              >
+                <TextInput id="text-input-name" name="entry.1573591932" />
+              </FormField>
+              <FormField
+                name="entry.18763422251876342225"
+                htmlFor="text-input-email"
+                label={
+                  <Text weight="bold" size="small">
+                    Email address{' '}
+                    <Text weight="normal" size="small">
+                      (optional)
+                    </Text>
+                  </Text>
+                }
+              >
+                <TextInput id="text-input-email" name="entry.1876342225" />
+              </FormField>
+              <Box pad={{ top: 'medium' }} align="center" justify="center">
+                <PrimaryButton
+                  pad={{ vertical: 'large' }}
+                  type="submit"
+                  label="Submit"
+                  style={{ width: '250px' }}
+                />
+              </Box>
+            </Form>
+          </Box>
+        )}
+        {submitting && (
+          <Box
+            background="rgba(0, 0, 0, 0.8)"
+            align="center"
+            justify="center"
+            gap="medium"
+            style={{
+              position: 'absolute',
+              top: 0,
+              right: 0,
+              bottom: 0,
+              left: 0,
+            }}
+          >
+            <Spinner
+              size="medium"
+              style={{
+                borderBottomColor: 'rgba(255, 255, 255, 0.2)',
+                borderLeftColor: 'rgba(255, 255, 255, 0.2)',
+                borderRightColor: 'rgba(255, 255, 255, 0.2)',
+              }}
+            />
+            <Text
+              size="large"
+              weight="bold"
+              style={{
+                fontFamily: korolevFont,
+              }}
+            >
+              SENDING FEEDBACK
+            </Text>
+          </Box>
+        )}
+        {success && (
+          <Box pad="large" align="center" justify="center">
+            <Heading
+              level={3}
+              style={{ fontFamily: korolevFont }}
+              margin={{ top: '0', bottom: 'small' }}
+            >
+              FEEDBACK SENT
+            </Heading>
+            <Text textAlign="center">Thanks for sharing with us.</Text>
+            <Button onClick={onClose}>Close</Button>
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+};
+export default FeedbackForm;
--- a/src/components/core/PrimaryButton.js
+++ b/src/components/core/PrimaryButton.js
 import React from 'react';
-import { Button } from 'grommet';
+import { Button, Box, Text, ThemeContext } from 'grommet';
 import { FormNext } from 'grommet-icons';
+const themeExtend = {
+  text: {
+    font: {
+      family: 'korolev, Helvetica Neue, Helvetica, Arial, sans-serif',
+    },
+    extend: () => ({ textTransform: 'uppercase', letterSpacing: '0.05em' }),
+  },
+};
 /**
 * Application specific button component, using Grommet Button
 * @see https://v2.grommet.io/button
 * @param {object} props - React props
 * @returns {Component}
 */
-const PrimaryButton = ({ ...rest }) => (
+const PrimaryButton = ({ label, ...rest }) => (
-  <Button
+  <ThemeContext.Extend value={themeExtend}>
-    primary
+    <Button
-    color="accent-1"
+      primary
-    style={{ textTransform: 'uppercase' }}
+      color="accent-1"
-    icon={<FormNext />}
+      style={{ textTransform: 'uppercase' }}
-    reverse
+      size="small"
-    size="small"
+      {...rest}
-    {...rest}
+    >
-  />
+      <Box direction="row" align="center" justify="between" pad="small">
+        <Box>{/* Nothing */}</Box>
+        <Text size="small" weight="bold">
+          {label}
+        </Text>{' '}
+        <FormNext color="white" />
+      </Box>
+    </Button>
+  </ThemeContext.Extend>
 );
 export default PrimaryButton;
--- a/src/components/hero/Hero.js
+++ b/src/components/hero/Hero.js
@@ -7,6 +7,8 @@ import DownHex from '../DownHex';
 import { Container, Column } from '../layout';
 import { PrimaryButton } from '../core';
+const korolevFont = 'korolev, Helvetica Neue, Helvetica, Arial, sans-serif';
 const abs = {
  position: 'absolute',
  top: 0,
@@ -32,10 +34,28 @@ const Slide = ({ title, subtitle, core, cta, slug, logo }) => {
    },
  };
-  const headingTheme = ['Fences', 'Summit'].includes(title) ? thinFont : {};
+  const heavyFont = {
+    level: {
+      1: {
+        small: { size: '80px', height: '80px' },
+        medium: { size: '80px', height: '80px' },
+        large: { size: '80px', height: '80px' },
+        xlarge: { size: '80px', height: '80px' },
+      },
+    },
+  };
+  const headingTheme = title === 'Summit' ? thinFont : heavyFont;
  return (
-    <Box margin={{ top: '280px' }} align="start">
+    <Box
+      align="start"
+      justify="center"
+      border={{ color: 'red' }}
+      background="green"
+      height="100%"
+      pad={{ top: '80px' }}
+    >
      <Box width="large" gap="medium" style={{ position: 'relative' }}>
        {core && (
          <ThemeContext.Extend
@@ -44,8 +64,7 @@ const Slide = ({ title, subtitle, core, cta, slug, logo }) => {
                level: {
                  5: {
                    font: {
-                      family:
+                      family: korolevFont,
-                        'korolev, Helvetica Neue, Helvetica, Arial, sans-serif',
                    },
                  },
                },
@@ -74,14 +93,18 @@ const Slide = ({ title, subtitle, core, cta, slug, logo }) => {
            </Box>
          )}
          {subtitle && (
-            <Text size="large" weight={300} style={{ letterSpacing: '0.01em' }}>
+            <Text
+              size="xlarge"
+              weight={300}
+              style={{ letterSpacing: '0.01em', fontFamily: korolevFont }}
+            >
              {subtitle}
            </Text>
          )}
        </Box>
        {cta && (
          <Box direction="row" justify="start" pad={{ vertical: 'medium' }}>
-            <PrimaryButton label={cta} to={slug} />
+            <PrimaryButton label={cta} to={slug} style={{ width: '300px' }} />
          </Box>
        )}
      </Box>
@@ -143,7 +166,11 @@ const Hero = () => {
  };
  return (
-    <Box height="85vh" style={{ position: 'relative' }} background="brand">
+    <Box
+      height="85vh"
+      style={{ position: 'relative', minHeight: '500px' }}
+      background="brand"
+    >
      <Container>
        <Column>
          {nodes
@@ -158,7 +185,7 @@ const Hero = () => {
      </Container>
      <Box
-        style={{ position: 'absolute', right: '50px', bottom: '100px' }}
+        style={{ position: 'absolute', right: '50px', bottom: '50px' }}
        width="small"
      >
        {nodes.map((node, i) => (

--- a/src/components/mega-menu/MenuGroup.js
+++ b/src/components/mega-menu/MenuGroup.js
@@ -32,7 +32,10 @@ const MenuGroup = ({ category, title }) => {
  return (
    <Box gap="small">
      {title && (
-        <Heading level={6} margin={{ vertical: 'small', horizontal: 'medium' }}>
+        <Heading
+          level={6}
+          margin={{ top: 'small', bottom: '0', horizontal: 'medium' }}
+        >
          {title}
        </Heading>
      )}

--- a/src/components/pages/home/Solutions.js
+++ b/src/components/pages/home/Solutions.js
@@ -64,7 +64,7 @@ const Solutions = () => {
  return (
    <Box
      align="center"
-      pad={{ vertical: 'large' }}
+      pad={{ top: 'large' }}
      margin={{ top: isMobile ? '100px' : '0' }}
    >
      <Box align="center" style={{ position: 'relative' }}>

--- a/src/components/pages/home/SolutionsGrid.js
+++ b/src/components/pages/home/SolutionsGrid.js
-import React, { useContext } from 'react';
-import { Box, Grid, Text, ResponsiveContext } from 'grommet';
-import { ServerCluster, Cluster, Nodes, Deploy } from 'grommet-icons';
-const columns = {
-  small: ['full'],
-  medium: ['medium', 'medium'],
-  large: ['medium', 'medium'],
-  xlarge: ['medium', 'medium'],
-};
-const rows = {
-  small: ['auto', 'auto'],
-  medium: ['auto', 'auto'],
-  large: ['auto'],
-  xlarge: ['auto'],
-};
-const fixedGridAreas = {
-  small: [
-    { name: 'col1', start: [0, 0], end: [0, 0] },
-    { name: 'col2', start: [0, 1], end: [0, 1] },
-  ],
-  medium: [
-    { name: 'col1', start: [0, 0], end: [0, 0] },
-    { name: 'col2', start: [1, 0], end: [1, 0] },
-  ],
-  large: [
-    { name: 'col1', start: [0, 0], end: [0, 0] },
-    { name: 'col2', start: [1, 0], end: [1, 0] },
-  ],
-  xlarge: [
-    { name: 'col1', start: [0, 0], end: [0, 0] },
-    { name: 'col2', start: [1, 0], end: [1, 0] },
-  ],
-};
-const serviceList = [
-  [
-    { icon: <Nodes />, label: 'Global Networking / WAN' },
-    { icon: <Cluster />, label: 'Productivity & Collaboration' },
-  ],
-  [
-    { icon: <ServerCluster />, label: 'Hosting Infrastructure' },
-    { icon: <Deploy />, label: 'DevSecOps' },
-    { icon: <Cluster />, label: 'Productivity & Collaboration' },
-  ],
-];
-/**
- * 2 column responsive grid block
- * @see https://storybook.grommet.io/?path=/story/layout-grid-responsive-grid--responsive-grid
- * @returns {Component}
- */
-const Solutions = () => {
-  const size = useContext(ResponsiveContext);
-  return (
-    <Grid
-      alignSelf="center"
-      columns={columns[size]}
-      rows={rows[size]}
-      gap="xlarge"
-      areas={fixedGridAreas[size]}
-    >
-      <Box gridArea="col1" gap="medium">
-        <Text weight="bold" as="p">
-          Set up a collaborative network space where multiple separate teams can
-          work collaboratively.
-        </Text>
-        {serviceList[0].map((item) => (
-          <Box direction="row" gap="medium" key={item.label}>
-            {item.icon}
-            <Text>{item.label}</Text>
-          </Box>
-        ))}
-      </Box>
-      <Box gridArea="col2" gap="medium">
-        <Text weight="bold" as="p">
-          Create a cloud-native mission application but I don't have a
-          development team.
-        </Text>
-        {serviceList[1].map((item) => (
-          <Box direction="row" gap="medium" key={item.label}>
-            {item.icon}
-            <Text>{item.label}</Text>
-          </Box>
-        ))}
-      </Box>
-    </Grid>
-  );
-};
-export default Solutions;
--- a/src/content/generic/about-us.md
+++ b/src/content/generic/about-us.md
@@ -12,11 +12,11 @@ The C3I&N Directorate is responsible for executing, developing, acquiring, deplo
 ### What We Provide
-To meet our mission, we offer a broad portfolio of IT services spanning networking, compute & store, digital engineering, and more. Through our scalable, enterprise services, we reduce cost and eliminate duplications of effort across the digital Air Force. Our IT solutions leverage industry best practices to deliver optimal security, performance and end-user experience. Beyond our service offerings, we also own and manage key enterprise IT initiatives, such as EITaaS, SEITaaS and CHES. 
+To meet our mission, we offer a broad portfolio of IT services spanning networking, compute & store, digital engineering, and more. Through our scalable, enterprise services, we reduce cost and eliminate duplications of effort across the digital Air Force. Our IT solutions leverage industry best practices to deliver optimal security, performance and end-user experience. Beyond our service offerings, we also own and manage key enterprise IT initiatives, such as [EITaaS](/other-programs/), [SEITaaS](/solutions/seitaas/) and [CHES](/other-programs/). 
 ### What is “Digital Trinity?”
-Coined by Dr. Will Roper, the Assistant Secretary of the Air Force for Acquisition, Digital Trinity refers to three critical components of modern digital transformation efforts: 
+Coined by Dr. Will Roper, the Assistant Secretary of the Air Force for Acquisition,  [Digital Trinity](https://software.af.mil/wp-content/uploads/2020/10/There-Is-No-Spoon-Digital-Acquisition-7-Oct-2020-digital-version.pdf) refers to three critical components of modern digital transformation efforts: 
 - Agile software development 
 - Modular, open systems architectures

--- a/src/content/other-programs/ches.md
+++ b/src/content/other-programs/ches.md
@@ -2,20 +2,19 @@
 name: CHES
 index: 2
 ---
 ### Cloud-hosted enterprise services (CHES)
 CHES is the USAF’s adoption of Microsoft Office365.  The core capabilities are email, messaging, document management and individual storage.  Some of the current products are, OWA, Exchange, SharePoint Online, OneDrive and Teams.  Below is a brief description of these services.
-#### Exchange Online
+**Exchange Online**
 Microsoft Exchange Online is a hosted messaging solution that delivers the capabilities of Microsoft Exchange Server as a cloud-based service. It gives users access to email, calendar, contacts, and tasks from PCs, the web, and mobile devices.
-#### Teams
+**Teams**
 Microsoft Teams is the hub for teamwork in Microsoft 365. The Teams service enables instant messaging, audio and video calling, rich online meetings, mobile experiences, and extensive web conferencing capabilities. In addition, Teams provides file and data collaboration and extensibility features, and integrates with Microsoft 365.
-#### SharePoint Online
+**SharePoint Online**
 Microsoft SharePoint is used to create websites. It is a secure place to store, organize, share, and access information.  SharePoint Online is the cloud-based service, hosted by Microsoft in the DoD IL5 environment. 
-#### One Drive for Business
+**One Drive for Business**
 OneDrive is online storage space in the cloud that's provided for individual licensed users in an organization. Use it to help protect work files and access them across multiple devices. OneDrive lets you share files and collaborate on documents, and sync files to your computer.
 [Additional Information on 365](https://docs.microsoft.com/en-us/office365/servicedescriptions/office-365-service-descriptions-technet-library)
\ No newline at end of file
--- a/src/content/service-category/networking-connectivity.md
+++ b/src/content/service-category/networking-connectivity.md
@@ -12,4 +12,4 @@ share: '../../images/share/ogimage-networking_and_connectivity.png'
 icon: DtNetConn
 ---
-Provides access to modernized, standard, secure, and resilient IT infrastructure and platforms to support application workload and data storage. Portfolio aims to provide Joint Information Environment complaint enterprise and/or local application and data hosting.
+We seek to provide ubiquitous, survivable, and reliable connectivity of end-user devices to the Air Force Network and from the AFNet to the DoDIN.
\ No newline at end of file
--- a/src/content/service-detail/d1scovery.md
+++ b/src/content/service-detail/d1scovery.md
@@ -10,7 +10,7 @@ share: '../../images/share/ogimage-data_analysis.png'
 updated: March 31
 ---
-An enterprise Big Data Analytics platform hosted on Cloud One that provides advanced data analytics and data management tools up to IL4.
+An enterprise Big Data Analytics platform hosted on Cloud One that provides advanced data analytics and data management tools up to IL-4.
 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.
@@ -28,7 +28,7 @@ D1scovery provides an operational environment for analytics-based solutions and
 **Available Features**
- Apache MiFI
+- Apache NiFi
 - Apache Spark
 - Azure Data Factory
 - Data Shuttle

--- a/src/content/service-detail/fences.md
+++ b/src/content/service-detail/fences.md
@@ -12,9 +12,24 @@ levels:
  - TS-SCI
 excerpt: 'FENCES is the only SAP-compliant enterprise cloud solution for the DoD at independent levels of security.'
 share: '../../images/share/ogimage-compute_and_store.png'
-updated: March 31
+updated: April 6
 ---
 FENCES is the only SAP-compliant enterprise cloud solution for the DoD at independent levels of security. 
 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.
+### Benefits and Features
+- IL5 to TS/SCI platform accredited for ALL DoD environments
+- AWS Workspaces IL5 and TS/SAR for Modeling and Sim
+- Parity in environments allows for replication to higher security levels
+-[PlatformOne DevSecOps](/services/platform-one/) pipeline integration and tools
+- Connectivity from CV2, JWICS, NPR, AppGate (Unclass) or with connection to Secure Web Services router (SWS)
+- Available managed services such as ACAS, McAfee, AD, WSUS, NTP
+- RMF inheritance over 35% with draft language to satisfy up to 80% of remaining controls
+### Requirements
+- TS, SAP, or SAR Requirement
+- Compatible connection to FENCES
+- Clearances and approved facility for connection
+- FENCES account
\ No newline at end of file
--- a/src/content/service-detail/seitaas-remote-connect.md
+++ b/src/content/service-detail/seitaas-remote-connect.md
@@ -11,7 +11,9 @@ levels:
  - 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.'
 share: '../../images/share/ogimage-networking_and_connectivity.png'
-updated: March 31
+updated: April 6
 ---
 SEITaaS will enable enterprise capabilities to be provided as a service to users accessing thin client, zero client, or connected self sustained performer LANs.
\ No newline at end of file
+SEITaaS/Summit endpoints will be available to meet differing end-user needs. The network will offer thin client or zero client to users for a small form factor to support  a network-agnostic solution. Additionally, Summit enterprise services, including MLS applications and cybersecurity services, will be made available to some user-maintained networks that will be designated as performer LANs. These LANs would be connected to and consume services from SEITaaS/Summit until they can be transitioned over to SEITaaS/Summit-managed endpoints.
\ No newline at end of file
--- a/src/data/hero/0_home.yaml
+++ b/src/data/hero/0_home.yaml
 name: Home
-title: 'Cutting-Edge Digital Transformation'
+title: 'Cutting-Edge Digital Transformation Services, On Demand'
 subtitle: 'Enterprise IT to Power a Digital Air Force'
 image: '../../images/hero/1-hero-home.png'
 thumb: '../../images/hero/thumb-home.png'

--- a/src/data/hero/5_dep.yaml
+++ b/src/data/hero/5_dep.yaml
@@ -7,4 +7,5 @@ image: '../../images/hero/6-hero-dep.png'
 logo: '../../images/hero/logo-dep.png'
 thumb: '../../images/hero/thumb-dep.png'
 thumblogo: '../../images/hero/logo-dep.png'
+core: true
 index: 5
--- a/src/images/hero/1-hero-home.png
+++ b/src/images/hero/1-hero-home.png
--- a/src/styles/theme.js
+++ b/src/styles/theme.js
 import { grommet } from 'grommet/themes';
 import { deepMerge } from 'grommet/utils';
 /**
 * Extension of Grommet theme base
 * @see https://github.com/grommet/grommet/blob/master/src/js/themes/base.js
@@ -101,6 +100,12 @@ export const themeOverrides = {
    },
    breakpoints: globalBreakpoints,
    size: globalSize,
+    input: {
+      font: {
+        size: 'small',
+        weight: 'normal',
+      },
+    },
  },
  anchor: {
    fontWeight: 'normal',
@@ -138,6 +143,25 @@ export const themeOverrides = {
  paragraph: {
    fill: true,
  },
+  formField: {
+    label: {
+      size: 'small',
+      weight: 'bold',
+      margin: { top: 'medium', horizontal: '0' },
+    },
+    error: {
+      size: 'small',
+    },
+    border: {
+      side: 'all',
+    },
+    round: '3px',
+  },
+  spinner: {
+    container: {
+      color: 'accent-2',
+    },
+  },
  layer: {
    overlay: {
      background: 'rgba(0, 0, 0, 0.9)',