docs(PPDSC-2299): newskit new homepage hero section (#329)

* docs(PPDSC-2299): newskit new homepage hero section

* docs(PPDSC-2299): update background image rules

* docs(PPDSC-2299): revert typography presets changes

* docs(PPDSC-2299): fixed background and reorganise files

* docs(PPDSC-2299): improve CTA buttons

* docs(PPDSC-2299): hero background updates

* docs(PPDSC-2299): update grid illustration

* docs(PPDSC-2299): address comments

* docs(PPDSC-2299): update grid structure

* docs(PPDSC-2299): update maxWidth

* docs(PPDSC-2299): update grid containers

* docs(PPDSC-2299): remove unused `themeMode`

site/components/homepage/hero/hero.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import {GridLayoutItem, TextBlock, GridLayout, Visible, Button} from 'newskit';
+import LinkNext from 'next/link';
+import HeroGrid from '../../illustrations/landing-page/hero-grid';
+import {HeroProps} from './types';
+import {HeroContainer} from './styled';
+
+const DESIGN_BUTTON_PROPS = {
+  href: '/getting-started/design/design-overview',
+  overrides: {stylePreset: 'buttonSolidPrimary'},
+};
+const DEVELOPING_BUTTON_PROPS = {
+  href: '/getting-started/code/engineering-quickstart',
+  overrides: {stylePreset: 'buttonOutlinedPrimary'},
+};
+
+export const Hero = ({contentContainerOverrides}: HeroProps) => (
+  <HeroContainer
+    paddingBlock={{xs: 'space020', lg: 'space100'}}
+    marginBlockStart="-12px"
+  >
+    <GridLayout overrides={contentContainerOverrides}>
+      <GridLayout
+        columns="1fr minmax(min-content, 530px)"
+        overrides={{marginBlock: {xs: 'space070', lg: 'space000'}}}
+        alignItems="center"
+      >
+        <GridLayoutItem
+          paddingBlock={{
+            xs: 'space000',
+            md: 'space110',
+          }}
+          column={{
+            xs: `1 / span 2`,
+            lg: `1 / span 1`,
+          }}
+        >
+          <TextBlock
+            as="h1"
+            stylePreset="inkBase"
+            paddingInlineEnd={{
+              xs: 'space120',
+              sm: 'space100',
+            }}
+            typographyPreset={{
+              xs: 'editorialHeadline070',
+              md: 'editorialHeadline080',
+              lg: 'editorialDisplay020',
+            }}
+          >
+            Say hello to NewsKit
+          </TextBlock>
+          <TextBlock
+            marginBlockStart={{xs: 'space060', lg: 'space080'}}
+            stylePreset="inkBase"
+            typographyPreset="editorialSubheadline020"
+            paddingInlineEnd={{
+              xs: 'space090',
+              md: 'space080',
+              lg: 'space100',
+              xl: 'space080',
+            }}
+          >
+            An open source design system built by News UK, for everyone
+          </TextBlock>
+          <GridLayout
+            justifyContent="start"
+            columns="repeat(2, auto)"
+            columnGap="space030"
+            overrides={{
+              marginBlockStart: 'space090',
+            }}
+          >
+            <GridLayoutItem>
+              <LinkNext href="/getting-started/design/design-overview" passHref>
+                <>
+                  <Visible xs sm>
+                    <Button {...DESIGN_BUTTON_PROPS}>Designing</Button>
+                  </Visible>
+                  <Visible md lg xl>
+                    <Button {...DESIGN_BUTTON_PROPS}>Start designing</Button>
+                  </Visible>
+                </>
+              </LinkNext>
+            </GridLayoutItem>
+            <GridLayoutItem>
+              <LinkNext
+                href="/getting-started/code/engineering-quickstart"
+                passHref
+              >
+                <>
+                  <Visible xs sm>
+                    <Button {...DEVELOPING_BUTTON_PROPS}>Developing</Button>
+                  </Visible>
+                  <Visible md lg xl>
+                    <Button {...DEVELOPING_BUTTON_PROPS}>
+                      Start developing
+                    </Button>
+                  </Visible>
+                </>
+              </LinkNext>
+            </GridLayoutItem>
+          </GridLayout>
+        </GridLayoutItem>
+        <GridLayoutItem>
+          <Visible xl lg>
+            <HeroGrid />
+          </Visible>
+        </GridLayoutItem>
+      </GridLayout>
+    </GridLayout>
+  </HeroContainer>
+);

site/components/homepage/hero/index.ts

@@ -0,0 +1 @@
+export * from './hero';

site/components/homepage/hero/styled.ts

@@ -0,0 +1,23 @@
+import {getMediaQueryFromTheme, styled, Block} from 'newskit*';
+
+export const HeroContainer = styled(Block)`
+  background-size: cover;
+  background-repeat: no-repeat;
+
+  ${getMediaQueryFromTheme('md')} {
+    ${({theme}) => {
+      const heroGradientBackground = theme.colors.interfaceSkeleton010;
+      const heroGradientColor = theme.colors.interfaceBrand030;
+      return `background-image: radial-gradient(
+        circle at -120% 160%,
+        ${heroGradientColor} 0%,
+        ${heroGradientBackground}00 70%
+      ),
+      radial-gradient(
+        circle at 180% -70%,
+        ${heroGradientColor} 0%,
+        ${heroGradientBackground} 60%
+      );`;
+    }};
+  }
+`;

site/components/homepage/hero/types.ts

@@ -0,0 +1,5 @@
+import {GridLayoutProps} from '../../../../src/grid-layout/types';
+
+export interface HeroProps {
+  contentContainerOverrides: GridLayoutProps['overrides'];
+}

site/components/homepage/index.ts

@@ -0,0 +1 @@
+export * from './hero';

site/pages/index-new.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import {GridLayout, GridLayoutItem, styled, TextBlock, Visible} from 'newskit';
+import {GridLayout, styled, TextBlock} from 'newskit';
 import Layout, {LayoutProps} from '../components/layout';
-import {GridLayoutItemProps} from '../../src/grid-layout/types';
+import {Hero} from '../components/homepage';
+import {GridLayoutProps} from '../../src/grid-layout/types';
 
 const Placeholder: React.FC = ({children}) => (
   <TextBlock
@@ -19,65 +20,55 @@ const GridBox = styled.div`
   border: 1px solid orange;
 `;
 
-const fullGridColumns: GridLayoutItemProps = {
-  column: {xs: `2 / span 10`},
+const GRID_SECTION_OVERRIDES: GridLayoutProps['overrides'] = {
+  maxWidth: '1150px',
+  marginInline: 'auto',
+  width: '100%',
+  paddingInline: {
+    xs: 'space050',
+    sm: 'space070',
+    md: 'space100',
+    lg: 'space080',
+  },
 };
 
 const Index = (layoutProps: LayoutProps) => (
   <Layout {...layoutProps} newPage hideSidebar path="/index-new">
     <GridLayout
-      columns={{xs: 'repeat(12, minmax(0,1fr))'}}
       rowGap={{xs: 'space070', md: 'space100'}}
       overrides={{marginBlockEnd: 'space080'}}
     >
-      <GridLayoutItem {...fullGridColumns}>
-        <GridLayout
-          overrides={{marginBlockStart: {xs: 'space070', xl: 'space000'}}}
-        >
-          <GridLayoutItem column={{xs: `auto / span 10`, xl: `auto / span 4`}}>
-            <GridBox>
-              <Placeholder>Hero Text</Placeholder>
-            </GridBox>
-          </GridLayoutItem>
-          <GridLayoutItem column={{xl: `span 6 / 11`}}>
-            <Visible xl>
-              <GridBox>
-                <Placeholder>Hero Image</Placeholder>
-              </GridBox>
-            </Visible>
-          </GridLayoutItem>
-        </GridLayout>
-      </GridLayoutItem>
-      <GridLayoutItem {...fullGridColumns}>
+      <Hero contentContainerOverrides={GRID_SECTION_OVERRIDES} />
+      <GridLayout overrides={GRID_SECTION_OVERRIDES}>
         <GridBox>
           <Placeholder>Banner</Placeholder>
         </GridBox>
-      </GridLayoutItem>
-      <GridLayoutItem {...fullGridColumns}>
+      </GridLayout>
+      <GridLayout overrides={GRID_SECTION_OVERRIDES}>
         <GridBox>
           <Placeholder>Explore</Placeholder>
         </GridBox>
-      </GridLayoutItem>
-      <GridLayoutItem {...fullGridColumns}>
+      </GridLayout>
+      <GridLayout overrides={GRID_SECTION_OVERRIDES}>
         <GridBox>
           <Placeholder>Whats New</Placeholder>
         </GridBox>
-      </GridLayoutItem>
-      <GridLayoutItem {...fullGridColumns}>
+      </GridLayout>
+      <GridLayout overrides={GRID_SECTION_OVERRIDES}>
         <GridBox>
           <Placeholder>Contribute</Placeholder>
         </GridBox>
-      </GridLayoutItem>
-      <GridLayoutItem {...fullGridColumns}>
+      </GridLayout>
+      <GridLayout overrides={GRID_SECTION_OVERRIDES}>
         <GridBox>
           <Placeholder>Keep in touch</Placeholder>
         </GridBox>
-      </GridLayoutItem>
-      <GridLayoutItem {...fullGridColumns}>
+      </GridLayout>
+      <GridLayout overrides={GRID_SECTION_OVERRIDES}>
         <GridBox>
           <Placeholder>Supported brands</Placeholder>
         </GridBox>
-      </GridLayoutItem>
+      </GridLayout>
     </GridLayout>
   </Layout>
 );