UNCLASSIFIED

Skip to content

GitLab

Commit 81e0c1e9 authored by Ben Wynn's avatar Ben Wynn
Browse files

Merge branch 'develop' into 'staging' 

updates with actual content

See merge request !12
parents 7cb28d55 7962224f
Pipeline #203787 passed with stages
in 6 minutes and 26 seconds
Hide whitespace changes
Inline Side-by-side
Showing with 571 additions and 231 deletions
gatsby-config.js
View file @ 81e0c1e9
module.exports = { module.exports = {
siteMetadata: { siteMetadata: {
title: `AF Enterprise Digital Transformation Services`, title: `AF Enterprise Digital Transformation Services`,
description: `TODO: Add Description`, description: `C3I&N enables digital transformation across the U.S. Air Force. Explore our Networking, Compute & Store and DevSecOps services and more.`,
author: `TODO: Add Autor`, image: `/src/images/usaf-logo.png`,
}, },
plugins: [ plugins: [
`gatsby-plugin-react-helmet`, `gatsby-plugin-react-helmet`,
......
gatsby-node.js
View file @ 81e0c1e9
...@@ -18,6 +18,11 @@ exports.createPages = async (gatsbyNodeHelpers) => { ...@@ -18,6 +18,11 @@ exports.createPages = async (gatsbyNodeHelpers) => {
'./src/templates/Generic.js', './src/templates/Generic.js',
'/generic/' '/generic/'
); );
await mdPagesFromTemplate(
gatsbyNodeHelpers,
'./src/templates/SolutionDetail.js',
'/content/solutions/'
);
}; };
/** /**
......
src/components/Classification.js
View file @ 81e0c1e9
...@@ -50,23 +50,23 @@ const Classification = ({ levels }) => ( ...@@ -50,23 +50,23 @@ const Classification = ({ levels }) => (
flex="grow" flex="grow"
border={{ size: 'xsmall', side: 'top', color: 'light-1' }} border={{ size: 'xsmall', side: 'top', color: 'light-1' }}
> >
<LevelNode levels={levels} value="Unclass"> <LevelNode levels={levels} value="U">
U CUI
</LevelNode> </LevelNode>
<LevelNode levels={levels} value="SEC-COLL"> <LevelNode levels={levels} value="S">
S S
</LevelNode> </LevelNode>
<LevelNode levels={levels} value="SEC-SAP"> <LevelNode levels={levels} value="S-SAR">
S//Sar S//SAR
</LevelNode> </LevelNode>
<LevelNode levels={levels} value="SEC-SCI"> <LevelNode levels={levels} value="S-SCI">
S//SCI S//SCI
</LevelNode> </LevelNode>
<LevelNode levels={levels} value="TS-COLL"> <LevelNode levels={levels} value="TS">
TS//Col TS
</LevelNode> </LevelNode>
<LevelNode levels={levels} value="TS-SAP"> <LevelNode levels={levels} value="TS-SAR">
TS//SAP TS//SAR
</LevelNode> </LevelNode>
<LevelNode levels={levels} value="TS-SCI"> <LevelNode levels={levels} value="TS-SCI">
TS//SCI TS//SCI
...@@ -78,12 +78,12 @@ const Classification = ({ levels }) => ( ...@@ -78,12 +78,12 @@ const Classification = ({ levels }) => (
Classification.propTypes = { Classification.propTypes = {
level: PropTypes.arrayOf([ level: PropTypes.arrayOf([
'Unclass', 'U',
'SEC-COLL', 'S',
'SEC-SAP', 'S-SAR',
'SEC-SCI', 'S-SCI',
'TS-COLL', 'TSS',
'TS-SAP', 'TS-SAR',
'TS-SCI', 'TS-SCI',
]), ]),
}; };
......
src/components/DownHex.js 0 → 100644
View file @ 81e0c1e9
import React from 'react';
import { Box } from 'grommet';
import { FormDown } from 'grommet-icons';
import { Column } from './layout';
import { DtHex } from './icons';
const DownHex = () => (
<Box
style={{ position: 'absolute', bottom: 0, left: 0, right: 0 }}
align="center"
>
<Column align="start" direction="row">
<Box
pad="small"
width="80px"
height="35px"
align="center"
justify="center"
style={{ position: 'relative', overflow: 'hidden' }}
>
<DtHex
color="white"
size="80"
style={{
position: 'absolute',
top: '0',
left: '0',
right: '0',
bottom: '0',
}}
/>
<FormDown
color="accent-1"
size="30"
style={{ position: 'relative', top: '7px' }}
/>
</Box>
</Column>
</Box>
);
export default DownHex;
src/components/FeedbackFooter.js 0 → 100644
View file @ 81e0c1e9
import React, { useContext } from 'react';
import { Box, Text, ResponsiveContext } from 'grommet';
import { Container, Column } from './layout';
import { SecondaryButton } from './core';
const FeedbackFooter = () => {
const size = useContext(ResponsiveContext);
const isMobile = ['xsmall', 'small'].includes(size);
return (
<Container border={{ side: 'top', color: 'light-1' }}>
<Column>
<Box
direction={isMobile ? 'column' : 'row'}
justify="center"
pad="medium"
gap="medium"
>
<Box justify="center" align={isMobile ? 'center' : 'start'}>
<Text weight="bold">We could use your feedback!</Text>
<Text size="small">Help us improve this service.</Text>
</Box>
<Box border={{ side: 'right', size: 'small', color: 'light-1' }} />
<Box justify="center" align="center">
<Box width="200px">
<SecondaryButton label="SEND FEEDBACK" />
</Box>
</Box>
</Box>
</Column>
</Container>
);
};
export default FeedbackFooter;
src/components/app/AppLayout.js
View file @ 81e0c1e9
...@@ -4,21 +4,23 @@ import { Grommet, Box, Main } from 'grommet'; ...@@ -4,21 +4,23 @@ import { Grommet, Box, Main } from 'grommet';
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
import Header from './Header'; import Header from './Header';
import Footer from './Footer'; import Footer from './Footer';
import FeedbackFooter from '../FeedbackFooter';
import DebugController from '../DebugController'; import DebugController from '../DebugController';
import DebugResponsive from '../DebugResponsive'; import DebugResponsive from '../DebugResponsive';
import theme from '../../styles/theme'; import theme from '../../styles/theme';
import '../../styles/global.css'; import '../../styles/global.css';
const AppLayout = ({ children, isHome }) => ( const AppLayout = ({ children, transparentHeader }) => (
<Grommet theme={theme}> <Grommet theme={theme}>
<DebugController> <DebugController>
<Helmet> <Helmet>
{/* Korolev font */} {/* Korolev font */}
<link rel="stylesheet" href="https://use.typekit.net/hap3fxx.css" /> <link rel="stylesheet" href="https://use.typekit.net/hap3fxx.css" />
</Helmet> </Helmet>
<Header isHome={isHome} /> <Header transparent={transparentHeader} />
<Box> <Box>
<Main>{children}</Main> <Main>{children}</Main>
<FeedbackFooter />
<Footer /> <Footer />
</Box> </Box>
<DebugResponsive /> <DebugResponsive />
...@@ -28,7 +30,7 @@ const AppLayout = ({ children, isHome }) => ( ...@@ -28,7 +30,7 @@ const AppLayout = ({ children, isHome }) => (
AppLayout.propTypes = { AppLayout.propTypes = {
children: PropTypes.node.isRequired, children: PropTypes.node.isRequired,
isHome: PropTypes.bool, transparentHeader: PropTypes.bool,
}; };
export default AppLayout; export default AppLayout;
src/components/app/Footer.js
View file @ 81e0c1e9
import React from 'react'; import React, { useContext } from 'react';
import { Box, Text } from 'grommet'; import { Box, ResponsiveContext } from 'grommet';
import { Container, Column } from '../layout'; import { Container, Column } from '../layout';
import { Link } from '../core';
import AFLogo from '../../images/af-logo.svg'; import AFLogo from '../../images/af-logo.svg';
import C3Logo from '../../images/c3.png'; import C3Logo from '../../images/c3.png';
const Footer = () => ( const Footer = () => {
<Container as="footer" background="background-contrast" justify="end"> const size = useContext(ResponsiveContext);
<Column>
<Box pad={{ vertical: 'large' }} justify="between" direction="row"> const isMobile = ['xsmall', 'small'].includes(size);
<Box gap="medium" justify="center">
<Text color="light-1" size="small" weight="bold"> return (
About Us <Container as="footer" background="background-contrast" justify="end">
</Text> <Column>
<Text color="light-1" size="small" weight="bold"> <Box
Help us improve by sharing your feedback pad={{ vertical: 'large' }}
</Text> justify="between"
</Box> direction={isMobile ? 'column' : 'row'}
<Box direction="row" gap="medium"> gap="large"
<img src={C3Logo} width="117" height="117" alt="C3I&N" /> >
<AFLogo height="117" /> <Box
gap="medium"
justify="center"
align={isMobile ? 'center' : 'start'}
>
<Link to="/about-us" color="light-1" size="small" weight="bold">
About Us
</Link>
</Box>
<Box
direction={isMobile ? 'column' : 'row'}
gap="medium"
align="center"
>
<img src={C3Logo} width="117" height="117" alt="C3I&N" />
<AFLogo height="117" />
</Box>
</Box> </Box>
</Box> </Column>
</Column> </Container>
</Container> );
); };
export default Footer; export default Footer;
src/components/app/Header.js
View file @ 81e0c1e9
import React from 'react'; import React, { useContext } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Link } from 'gatsby'; import { Link } from 'gatsby';
import { Box, Text, Header as GHeader } from 'grommet'; import { Box, Text, Header as GHeader, ResponsiveContext } from 'grommet';
import styled from 'styled-components'; import styled from 'styled-components';
import { RenderPropSticky as Sticky } from 'react-sticky-el'; import { RenderPropSticky as Sticky } from 'react-sticky-el';
import { Container, Column } from '../layout'; import { Container, Column } from '../layout';
...@@ -20,71 +20,86 @@ const StyledHeader = styled(GHeader)` ...@@ -20,71 +20,86 @@ const StyledHeader = styled(GHeader)`
left: 0; left: 0;
right: 0; right: 0;
background: ${(props) => background: ${(props) =>
props.isHome && !props.sticky props.transparent && !props.sticky
? 'linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0))' ? 'linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0))'
: 'black'}; : 'black'};
display: flex; display: flex;
height: ${(props) => height: ${(props) =>
props.sticky props.sticky || props.isMobile
? theme.custom.header.stickyHeight ? theme.custom.header.stickyHeight
: theme.custom.header.height}; : theme.custom.header.height};
`; `;
const Header = ({ isHome }) => ( const Header = ({ transparent }) => {
<Sticky topOffset={30}> const size = useContext(ResponsiveContext);
{({ isFixed, wrapperStyles, wrapperRef, holderStyles, holderRef }) => ( const isMobile = ['xsmall', 'small'].includes(size);
<div ref={holderRef} style={{ holderStyles }}> return (
<div <Sticky topOffset={30}>
ref={wrapperRef} {({ isFixed, wrapperStyles, wrapperRef, holderStyles, holderRef }) => (
style={isFixed ? { ...wrapperStyles, ...{ zIndex: 10 } } : {}} <div ref={holderRef} style={{ holderStyles }}>
> <div
<StyledHeader sticky={isFixed} isHome={isHome} background="black"> ref={wrapperRef}
<Container> style={isFixed ? { ...wrapperStyles, ...{ zIndex: 10 } } : {}}
<Column> >
<Box direction="row" justify="between" flex="grow"> <StyledHeader
<Box justify="center"> sticky={isFixed}
<Link transparent={transparent}
to="/" isMobile={isMobile}
style={{ background="black"
textDecoration: `none`, >
fontSize: 12, <Container>
display: 'flex', <Column>
flexDirection: 'row', <Box direction="row" justify="between" flex="grow">
}} <Box justify="center">
> <Link
<Box as="span" direction="row" align="center" gap="small"> to="/"
<AFLogo height={isFixed ? 45 : 55} /> style={{
{!isFixed && ( textDecoration: `none`,
<Text fontSize: 12,
color="white" display: 'flex',
size="small" flexDirection: 'row',
style={{ }}
textTransform: 'uppercase', >
lineHeight: '1em', <Box
}} as="span"
weight="bold" direction="row"
> align="center"
AF Enterprise Digital gap="small"
<br /> >
Transformation Services <AFLogo height={isFixed || isMobile ? 45 : 55} />
</Text> {!isFixed && !isMobile && (
)} <Text
</Box> color="white"
</Link> size="small"
style={{
textTransform: 'uppercase',
lineHeight: '1em',
}}
weight="bold"
>
AF Enterprise Digital
<br />
Transformation Services
</Text>
)}
</Box>
</Link>
</Box>
<Nav sticky={isFixed} />
</Box> </Box>
<Nav sticky={isFixed} /> </Column>
</Box> </Container>
</Column> </StyledHeader>
</Container> </div>
</StyledHeader>
</div> </div>
</div> )}
)} </Sticky>
</Sticky> );
); };
Header.propTypes = { Header.propTypes = {
isHome: PropTypes.bool, isHome: PropTypes.bool,
transparent: PropTypes.bool,
}; };
export default Header; export default Header;
src/components/app/Nav.js
View file @ 81e0c1e9
import React, { useState } from 'react'; import React, { useState, useContext } from 'react';
import { Box, Button, Text, Keyboard, ThemeContext } from 'grommet'; import {
Box,
Button,
Keyboard,
Layer,
ThemeContext,
ResponsiveContext,
} from 'grommet';
import { Menu } from 'grommet-icons';
import { Link } from '../core'; import { Link } from '../core';
import { MegaMenu } from '../mega-menu'; import { MegaMenu, MegaMobileMenu } from '../mega-menu';
const Nav = ({ sticky }) => { const Nav = ({ sticky }) => {
const [menuOpen, setMenuOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false);
const size = useContext(ResponsiveContext);
const isMobile = ['xsmall', 'small'].includes(size);
const handleToggleMenu = (e) => { const handleToggleMenu = (e) => {
setMenuOpen(!menuOpen); setMenuOpen(!menuOpen);
e.preventDefault(); e.preventDefault();
...@@ -13,65 +24,74 @@ const Nav = ({ sticky }) => { ...@@ -13,65 +24,74 @@ const Nav = ({ sticky }) => {
return ( return (
<> <>
<Box {isMobile && <Button icon={<Menu />} onClick={handleToggleMenu} />}
as="nav" {!isMobile && (
justify="center" <Box
gap="medium" as="nav"
direction={sticky ? 'row' : 'column'} justify="center"
> gap="medium"
<Box direction="row" justify="end" gap="large"> direction={sticky ? 'row' : 'column'}
<Box justify="center"> >
<Link <Box direction="row" justify="end" gap="large">
to="/about-us" <Box justify="center">
size="xsmall" <Link
color="white" to="/about-us"
style={{ textTransform: 'uppercase' }} size="xsmall"
> color="white"
About Us
</Link>
</Box>
<Box justify="center">
<Link
to="/other-programs"
size="xsmall"
color="white"
style={{ textTransform: 'uppercase' }}
>
Our Other Programs
</Link>
</Box>
</Box>
<Box direction="row" justify="end" gap="large">
<Box justify="center">
<ThemeContext.Extend value={{}}>
<Button
onClick={handleToggleMenu}
secondary
color={menuOpen ? 'black' : 'white'}
style={{ textTransform: 'uppercase' }} style={{ textTransform: 'uppercase' }}
size="small" >
label="Available Services" About Us
/> </Link>
</ThemeContext.Extend> </Box>
<Box justify="center">
<Link
to="/other-programs"
size="xsmall"
color="white"
style={{ textTransform: 'uppercase' }}
>
Our Other Programs
</Link>
</Box>
</Box> </Box>
<Box justify="center"> <Box direction="row" justify="end" gap="large">
<Text <Box justify="center">
color="white" <ThemeContext.Extend value={{}}>
weight="bold" <Button
pad="small" onClick={handleToggleMenu}
size="small" secondary
style={{ textTransform: 'uppercase' }} color={menuOpen ? 'black' : 'white'}
> style={{ textTransform: 'uppercase' }}
Solutions size="small"
</Text> label="Available Services"
/>
</ThemeContext.Extend>
</Box>
<Box justify="center">
<Link
to="/solutions"
size="small"
weight="bold"
color="white"
style={{ textTransform: 'uppercase' }}
>
Solutions
</Link>
</Box>
</Box> </Box>
</Box> </Box>
</Box> )}
{menuOpen && (
{menuOpen && !isMobile && (
<Keyboard target="document" onEsc={handleToggleMenu}> <Keyboard target="document" onEsc={handleToggleMenu}>
<MegaMenu sticky={sticky} /> <MegaMenu sticky={sticky} />
</Keyboard> </Keyboard>
)} )}
{menuOpen && isMobile && (
<Layer full onClickOutside={handleToggleMenu} onEsc={handleToggleMenu}>
<MegaMobileMenu onClose={handleToggleMenu} />
</Layer>
)}
</> </>
); );
}; };
......
src/components/app/SEO.js
View file @ 81e0c1e9
...@@ -5,12 +5,12 @@ ...@@ -5,12 +5,12 @@
* See: https://www.gatsbyjs.com/docs/use-static-query/ * See: https://www.gatsbyjs.com/docs/use-static-query/
*/ */
import React from "react" import React from 'react';
import PropTypes from "prop-types" import PropTypes from 'prop-types';
import { Helmet } from "react-helmet" import { Helmet } from 'react-helmet';
import { useStaticQuery, graphql } from "gatsby" import { useStaticQuery, graphql } from 'gatsby';
function SEO({ description, lang, meta, title }) { function SEO({ description, lang, meta, title, image }) {
const { site } = useStaticQuery( const { site } = useStaticQuery(
graphql` graphql`
query { query {
...@@ -18,15 +18,16 @@ function SEO({ description, lang, meta, title }) { ...@@ -18,15 +18,16 @@ function SEO({ description, lang, meta, title }) {
siteMetadata { siteMetadata {
title title
description description
author image
} }
} }
} }
` `
) );
const metaDescription = description || site.siteMetadata.description const metaDescription = description || site.siteMetadata.description;
const defaultTitle = site.siteMetadata?.title const defaultTitle = site.siteMetadata.title;
const shareImage = image || site.siteMetadata.image;
return ( return (
<Helmet <Helmet
...@@ -34,7 +35,7 @@ function SEO({ description, lang, meta, title }) { ...@@ -34,7 +35,7 @@ function SEO({ description, lang, meta, title }) {
lang, lang,
}} }}
title={title} title={title}
titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null} titleTemplate={title ? `%s | ${defaultTitle}` : null}
meta={[ meta={[
{ {
name: `description`, name: `description`,
...@@ -53,12 +54,12 @@ function SEO({ description, lang, meta, title }) { ...@@ -53,12 +54,12 @@ function SEO({ description, lang, meta, title }) {
content: `website`, content: `website`,
}, },
{ {
name: `twitter:card`, property: `og:image`,
content: `summary`, content: shareImage,
}, },
{ {
name: `twitter:creator`, name: `twitter:card`,
content: site.siteMetadata?.author || ``, content: `summary`,
}, },
{ {
name: `twitter:title`, name: `twitter:title`,
...@@ -70,20 +71,20 @@ function SEO({ description, lang, meta, title }) { ...@@ -70,20 +71,20 @@ function SEO({ description, lang, meta, title }) {
}, },
].concat(meta)} ].concat(meta)}
/> />
) );
} }
SEO.defaultProps = { SEO.defaultProps = {
lang: `en`, lang: `en`,
meta: [], meta: [],
description: ``, description: ``,
} };
SEO.propTypes = { SEO.propTypes = {
description: PropTypes.string, description: PropTypes.string,
lang: PropTypes.string, lang: PropTypes.string,
meta: PropTypes.arrayOf(PropTypes.object), meta: PropTypes.arrayOf(PropTypes.object),
title: PropTypes.string.isRequired, title: PropTypes.string,
} };
export default SEO export default SEO;
src/components/core/SecondaryButton.js 0 → 100644
View file @ 81e0c1e9
import React from 'react';
import { Button } from 'grommet';
import { FormNext } from 'grommet-icons';
/**
* Application specific button component, using Grommet Button
* @see https://v2.grommet.io/button
* @param {object} props - React props
* @returns {Component}
*/
const SecondaryButton = ({ ...rest }) => (
<Button
secondary
color="dark-1"
style={{ textTransform: 'uppercase' }}
icon={<FormNext color="accent-1" />}
reverse
size="small"
{...rest}
/>
);
export default SecondaryButton;
src/components/core/index.js
View file @ 81e0c1e9
export { default as Link } from './Link'; export { default as Link } from './Link';
export { default as Markdown } from './Markdown'; export { default as Markdown } from './Markdown';
export { default as PrimaryButton } from './PrimaryButton'; export { default as PrimaryButton } from './PrimaryButton';
export { default as SecondaryButton } from './SecondaryButton';
src/components/hero/Hero.js
View file @ 81e0c1e9
...@@ -3,6 +3,7 @@ import { useStaticQuery, graphql } from 'gatsby'; ...@@ -3,6 +3,7 @@ import { useStaticQuery, graphql } from 'gatsby';
import Img from 'gatsby-image'; import Img from 'gatsby-image';
import { Box, Heading, Text, ThemeContext } from 'grommet'; import { Box, Heading, Text, ThemeContext } from 'grommet';
import { FormPrevious } from 'grommet-icons'; import { FormPrevious } from 'grommet-icons';
import DownHex from '../DownHex';
import { Container, Column } from '../layout'; import { Container, Column } from '../layout';
import { PrimaryButton } from '../core'; import { PrimaryButton } from '../core';
...@@ -152,6 +153,7 @@ const Hero = () => { ...@@ -152,6 +153,7 @@ const Hero = () => {
</Box> </Box>
))} ))}
</Box> </Box>
<DownHex />
</Box> </Box>
); );
}; };
......
src/components/hero/ServiceCatHero.js
View file @ 81e0c1e9
import React from 'react'; import React, { useContext } from 'react';
import { Box, Heading } from 'grommet';
import Img from 'gatsby-image'; import Img from 'gatsby-image';
import { FormDown, Cluster } from 'grommet-icons'; import { Box, Heading, Text, ResponsiveContext } from 'grommet';
import * as dtIcons from '../icons';
import { Container, Column } from '../layout'; import { Container, Column } from '../layout';
import { Markdown } from '../core'; import { Markdown } from '../core';
import DownHex from '../DownHex';
import theme from '../../styles/theme'; import theme from '../../styles/theme';
const ServiceCatHero = ({ title, description, imageFluid }) => ( const ServiceCatHero = ({ title, description, imageFluid, iconName }) => {
<Container const size = useContext(ResponsiveContext);
background="accent-3" const IconComponent = dtIcons[iconName];
style={{ position: 'relative' }}
pad={{ top: theme.custom.header.height }} const isMobile = ['xsmall', 'small'].includes(size);
>
<Img return (
fluid={imageFluid} <Container
alt="Hero" background="black"
style={{ style={{ position: 'relative' }}
position: 'absolute', pad={{
top: '0', top: isMobile
left: '0', ? theme.custom.header.stickyHeight
right: '0', : theme.custom.header.height,
bottom: '0',
}} }}
/> >
{!isMobile && (
<Img
fluid={imageFluid}
alt="Hero"
style={{
position: 'absolute',
top: '0',
left: '0',
right: '0',
bottom: '0',
}}
/>
)}
<Column>
<Box
pad={{ vertical: 'large' }}
direction="row"
style={{ position: 'relative' }}
>
<Box
background={isMobile ? 'none' : 'black'}
pad="medium"
style={{ zIndex: 5 }}
>
<Text size="small" color="accent-2">
AVAILABLE SERVICES
</Text>
<Column> <Heading level={1} margin={{ vertical: 'small' }}>
<Box
pad={{ vertical: 'medium' }}
direction="row"
style={{ position: 'relative' }}
>
<Box background="black" pad="medium">
<Box>
<Heading level={1} margin="none">
{title} {title}
</Heading> </Heading>
<Box width={isMobile ? 'auto' : '500px'}>
{description && <Markdown>{description}</Markdown>}
</Box>
</Box> </Box>
<Box width="500px"> {!isMobile && (
{description && <Markdown>{description}</Markdown>} <Box
</Box> pad={{ horizontal: 'medium' }}
</Box> align="center"
<Box pad="medium" align="center" justify="center" flex={{ grow: 1 }}> justify="center"
<Cluster size="100%" /> gap="medium"
flex={{ grow: 1 }}
>
<IconComponent size="300" color={isMobile ? 'dark-4' : 'white'} />
</Box>
)}
</Box> </Box>
</Box> {isMobile && (
</Column> <IconComponent
size="300"
color="dark-4"
style={{
position: 'fixed',
right: '-150px',
top: '100px',
zIndex: 2,
}}
/>
)}
</Column>
<Column align="start" direction="row" style={{ position: 'relative' }}> <DownHex />
<Box background="white" pad="small"> </Container>
<FormDown color="accent-1" /> );
</Box> };
</Column>
</Container>
);
export default ServiceCatHero; export default ServiceCatHero;
src/components/hero/ServiceHero.js
View file @ 81e0c1e9
import React from 'react'; import React, { useContext } from 'react';
import { Box, Heading } from 'grommet'; import Img from 'gatsby-image';
import { Nodes, FormDown } from 'grommet-icons'; import { Box, Heading, Text, ResponsiveContext } from 'grommet';
import { Container, Column } from '../layout'; import { Container, Column } from '../layout';
import DownHex from '../DownHex';
import theme from '../../styles/theme'; import theme from '../../styles/theme';
const addDivider = (arr, divider) => const addDivider = (arr, divider) =>
[].concat(...arr.map((n) => [n, divider])).slice(0, -1); [].concat(...arr.map((n) => [n, divider])).slice(0, -1);
const ServiceHero = ({ title, categories }) => { const ServiceHero = ({ title, subtitle, pretitle, categories, imageFluid }) => {
const size = useContext(ResponsiveContext);
const isMobile = ['xsmall', 'small'].includes(size);
const catWithDivider = categories && addDivider(categories, '|'); const catWithDivider = categories && addDivider(categories, '|');
return ( return (
<Container background="accent-3" pad={{ top: theme.custom.header.height }}> <Container
<Column direction="row"> background="black"
<Box pad="medium"> style={{ position: 'relative' }}
pad={{ top: theme.custom.header.height }}
>
{!isMobile && (
<Img
fluid={imageFluid}
alt="Hero"
style={{
position: 'absolute',
top: '0',
left: '0',
right: '0',
bottom: '0',
}}
/>
)}
<Column
direction="row"
pad={{ vertical: 'large' }}
style={{ position: 'relative' }}
>
<Box pad="large">
{pretitle && <Text color="accent-2">{pretitle}</Text>}
<Heading level={1} as="h1" margin="none">
{title}
</Heading>
<Box direction="row" align="center" gap="small"> <Box direction="row" align="center" gap="small">
<Nodes size="large" /> {subtitle && (
{catWithDivider?.map((t) => ( <Text size="small" color="white">
<Heading level={4} key={t}> {subtitle}
</Text>
)}
{catWithDivider?.map((t, i) => (
<Text size="small" color="accent-2" key={`${t}-${i}`}>
{t} {t}
</Heading> </Text>
))} ))}
</Box> </Box>
<Heading level={1} as="h1" margin="none">
{title}
</Heading>
</Box>
</Column>
<Column align="start" direction="row">
<Box background="white" pad="small">
<FormDown color="accent-1" />
</Box> </Box>
</Column> </Column>
<DownHex />
</Container> </Container>
); );
}; };
......
src/components/icons/DtComms.js 0 → 100644
View file @ 81e0c1e9
import React from 'react';
import { StyledIcon } from 'grommet-icons/StyledIcon';
export const DtComms = (props) => (
<StyledIcon viewBox="0 0 24 24" a11yTitle="Communications" {...props}>
<path
fill="none"
stroke="#000"
strokeWidth="1"
strokeLinecap="round"
strokeLinejoin="bevel"
d="M4.8,23.7l3.6-6.6l3.6-6.6l3.6,6.6l3.6,6.6 M12,0.4c2.8,0,5.1,2.3,5.1,5.1s-2.3,5.1-5.1,5.1S6.9,8.3,6.9,5.5
S9.2,0.4,12,0.4C12,0.4,12,0.4,12,0.4z M8.4,17.1h7.2 M20.2,2.6c0.8,1.8,0.8,3.9,0,5.7 M3.8,8.1c-0.7-1.6-0.7-3.5,0-5.1 M23,1.7
c0.8,2.4,0.8,5.1,0,7.5 M1,9.2C0.2,6.8,0.2,4.1,1,1.7"
/>
</StyledIcon>
);
src/components/icons/DtComputeStore.js 0 → 100644
View file @ 81e0c1e9
import React from 'react';
import { StyledIcon } from 'grommet-icons/StyledIcon';
export const DtComputeStore = (props) => {
const pathProps = {
fill: 'none',
stroke: '#000',
strokeWidth: '1',
};
return (
<StyledIcon viewBox="0 0 24 24" a11yTitle="DtComputeStore" {...props}>
<path
{...pathProps}
stroke="none"
fill="inherit"
d="M23.2,1v6.4H0.9V1H23.2 M23.4,0.3H0.7c-0.3,0-0.5,0.2-0.5,0.4c0,0,0,0,0,0v6.9c0,0.3,0.1,0.5,0.4,0.5c0,0,0.1,0,0.1,0h22.7
c0.3,0,0.5-0.2,0.5-0.5c0,0,0,0,0,0V0.8C23.9,0.6,23.7,0.4,23.4,0.3z"
/>
<path
strokeLinecap="round"
{...pathProps}
d="M6.8,4.3h10.5 M3.2,4.3L3.2,4.3 M5,4.3L5,4.3 M20.8,4.3L20.8,4.3 M19,4.3L19,4.3"
/>
<path strokeLinecap="round" {...pathProps} d="M7.7,23.5h8.6" />
<path strokeLinecap="round" {...pathProps} d="M9.2,20.9h5.5" />
<path strokeLinecap="round" {...pathProps} d="M12,18.4v2.5" />
<path strokeLinecap="round" {...pathProps} d="M12,8.2v2.5" />
<path
{...pathProps}
stroke="none"
fill="inherit"
d="M23.2,11.3v6.4H0.9v-6.4H23.2 M23.4,10.6H0.7c-0.3,0-0.5,0.2-0.5,0.5c0,0,0,0,0,0v6.9c0,0.3,0.2,0.5,0.5,0.5h22.7
c0.3,0,0.5-0.2,0.5-0.5c0,0,0,0,0,0v-6.9C23.8,10.8,23.6,10.6,23.4,10.6L23.4,10.6z"
/>
<path
strokeLinecap="round"
{...pathProps}
d="M6.8,14.6h10.5 M3.2,14.6L3.2,14.6 M5,14.6L5,14.6 M20.8,14.6L20.8,14.6 M19,14.6L19,14.6"
/>
</StyledIcon>
);
};
src/components/icons/DtDataAnalysis.js 0 → 100644
View file @ 81e0c1e9
import React from 'react';
import { StyledIcon } from 'grommet-icons/StyledIcon';
export const DtDataAnalysis = (props) => (
<StyledIcon viewBox="0 0 24 24" a11yTitle="DtDataAnalysis" {...props}>
<path
fill="none"
stroke="#000"
strokeWidth="1"
d="M2.8,20.9c-1.2,0-2.1-0.9-2.1-2.1c0-1.2,0.9-2.1,2.1-2.1s2.1,0.9,2.1,2.1C4.9,20,4,20.9,2.8,20.9z M11.1,12.4
c0-1.2-0.9-2.1-2.1-2.1s-2.1,0.9-2.1,2.1s0.9,2.1,2.1,2.1S11.1,13.6,11.1,12.4z M17.2,15.4c0-1.2-0.9-2.1-2.1-2.1s-2.1,0.9-2.1,2.1
s0.9,2.1,2.1,2.1S17.2,16.6,17.2,15.4z M23.3,5.2c0-1.2-0.9-2.1-2.1-2.1c-1.2,0-2.1,0.9-2.1,2.1s0.9,2.1,2.1,2.1
C22.4,7.3,23.3,6.3,23.3,5.2z M16.1,13.6l4-6.7 M13.2,14.5l-2.4-1.2 M7.5,13.9l-3.2,3.3"
/>
</StyledIcon>
);
src/components/icons/DtDevSecOps.js 0 → 100644
View file @ 81e0c1e9
import React from 'react';
import { StyledIcon } from 'grommet-icons/StyledIcon';
export const DtDevSecOps = (props) => (
<StyledIcon viewBox="0 0 24 24" a11yTitle="DtDevSecOps" {...props}>
<path
fill="none"
stroke="#000"
strokeWidth="1"
d="M4.3,0.3h3L8,3h2l0.6-2.6h2.6L14,2.9h1.7l0.8-2.6h3.1l-2,9H6.4L4.3,0.3z M8.1,9.6L7,20.6 M15.9,9.3l1.2,11
M18.4,23.6H5.6c-0.9,0-1.6-0.7-1.6-1.6l0,0c0-0.9,0.7-1.6,1.6-1.6h12.8c0.9,0,1.6,0.7,1.6,1.6l0,0C20,22.9,19.3,23.7,18.4,23.6
C18.4,23.7,18.4,23.7,18.4,23.6L18.4,23.6z"
/>
</StyledIcon>
);
src/components/icons/DtDigiEng.js 0 → 100644
View file @ 81e0c1e9
import React from 'react';
import { StyledIcon } from 'grommet-icons/StyledIcon';
export const DtDigiEng = (props) => (
<StyledIcon viewBox="0 0 24 24" a11yTitle="Digital Engineering" {...props}>
<path
fill="none"
stroke="#000"
strokeWidth="1"
d="M16.5,6.2l1.3,1.4l-1.4,1.7l0.6,1.4l2.3,0.3v1.9L17,13.2l-0.7,1.4l1.4,1.9l-1.2,1.4l-2-1.5l-1.3,0.6L13,19.3H11
L10.6,17l-1.2-0.5l-1.9,1.4l-1.4-1.3l1.4-2l-0.6-1.4l-2.3-0.4V11L7,10.9l0.7-1.5l-1.4-2l1.2-1.2l1.8,1.4l1.4-0.5L11,4.7H13L13.4,7
l1.3,0.7L16.5,6.2z M23.2,2.9c0,1.2-1,2.1-2.1,2c-1.2,0-2.1-1-2-2.1c0-1.2,1-2,2.1-2C22.2,0.8,23.2,1.8,23.2,2.9L23.2,2.9L23.2,2.9z
M2.9,0.8c-1.2,0-2.1,1-2.1,2.1S1.8,5,2.9,5S5,4.1,5,2.9l0,0C5,1.8,4.1,0.8,2.9,0.8z M2.9,19.1c-1.2,0-2.1,1-2.1,2.1
c0,1.2,1,2.1,2.1,2.1s2.1-1,2.1-2.1l0,0C5,19.9,4.1,19.1,2.9,19.1z M21.1,19.1c-1.2,0-2.1,1-2.1,2.1c0,1.2,1,2.1,2.1,2.1
c1.2,0,2.1-1,2.1-2.1l0,0C23.2,19.9,22.2,19.1,21.1,19.1z M12,9.2c-1.5,0-2.8,1.3-2.8,2.8c0,1.5,1.3,2.8,2.8,2.8s2.8-1.3,2.8-2.8
S13.5,9.2,12,9.2L12,9.2z M4.5,4.6l2.3,2.3 M17.1,6.8l2.4-2.4 M17.2,17.1l2.2,2.2 M6.7,17.3l-2.2,2.2"
/>
</StyledIcon>
);
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

UNCLASSIFIED