Hero cleanup (#874)

* cleaned up landing page * added mona * swap homepage header illustration * fix image * image * removed padding * last padding tweak * changed padding value * padding fix * fixed height on image --------- Co-authored-by: Mike Perrotti <mperrotti@github.com>
primer · Oct 12, 2024 · 625966b · 625966b
1 parent 33304e5
commit 625966b
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 41 deletions.
diff --git a/content/index.mdx b/content/index.mdx
@@ -1,58 +1,93 @@
 ---
-title: Interface guidelines
+title: Primer Design System
 ---
 
 import {HeroLayout} from '@primer/gatsby-theme-doctocat'
 export default HeroLayout
 import {Text, Link, Box, Heading} from '@primer/react'
 import {Link as GatsbyLink} from 'gatsby'
 
-<Box mb={6}>
-  <Text as="p" sx={{m: 0, fontSize: 3}}>
-    Primer is a set of guidelines, principles, and patterns for designing and building UI at GitHub. It provides a shared language and standardized approach to delivering cohesive experiences.
-  </Text>
-</Box>
-
-<Box display="grid" gridTemplateColumns={['1fr', null, null, null, '1fr 1fr']} gridGap={5}>
+<Box pb={4} display="grid" gridTemplateColumns={['1fr', null, null, null, '1fr 1fr']} gridGap={4}>
   <Box>
-    <Heading as="h3" sx={{fontSize: 3}}><Link sx={{fontSize: 3,}} as={GatsbyLink} to="/guides/">Guides</Link></Heading>
-    <Text as="p" sx={{fontSize: 2, color: 'fg.muted'}}>Standards, guidelines, and tools to getting started with Primer.</Text>
+    <Heading as="h3" sx={{color: 'fg.default'}}>
+      <Link sx={{fontSize: 4, color: 'fg.default'}} as={GatsbyLink} to="/guides/">
+        Guides
+      </Link>
+    </Heading>
+    <Text as="p" sx={{fontSize: 2, color: 'fg.muted'}}>
+      Standards, guidelines, and tools to getting started with Primer.
+    </Text>
   </Box>
   <Box>
-    <Heading as="h3" sx={{fontSize: 3}}><Link sx={{fontSize: 3,}} as={GatsbyLink} to="/foundations/">Foundations</Link></Heading>
-    <Text as="p" sx={{fontSize: 2, color: 'fg.muted'}}>The fundamental parts of the design system that underpin all GitHub interfaces, such as color and typography.</Text>
+    <Heading as="h3" sx={{color: 'fg.default'}}>
+      <Link sx={{fontSize: 4, color: 'fg.default'}} as={GatsbyLink} to="/foundations/">
+        Foundations
+      </Link>
+    </Heading>
+    <Text as="p" sx={{fontSize: 2, color: 'fg.muted'}}>
+      The fundamental parts of the design system that underpin all GitHub interfaces, such as color and typography.
+    </Text>
   </Box>
   <Box>
-    <Heading as="h3" sx={{fontSize: 3}}><Link sx={{fontSize: 3,}} as={GatsbyLink} to="/ui-patterns/">UI patterns</Link></Heading>
-    <Text as="p" sx={{fontSize: 2, color: 'fg.muted'}}>Design guidelines covering common user workflows.</Text>
+    <Heading as="h3" sx={{color: 'fg.default'}}>
+      <Link sx={{fontSize: 4, color: 'fg.default'}} as={GatsbyLink} to="/ui-patterns/">
+        UI patterns
+      </Link>
+    </Heading>
+    <Text as="p" sx={{fontSize: 2, color: 'fg.muted'}}>
+      Design guidelines covering common user workflows.
+    </Text>
   </Box>
   <Box>
-    <Heading as="h3" sx={{fontSize: 3}}><Link sx={{fontSize: 3,}} as={GatsbyLink} to="/components/">Components</Link></Heading>
-    <Text as="p" sx={{fontSize: 2, color: 'fg.muted'}}>Design and usage guidelines for individual Primer components.</Text>
+    <Heading as="h3" sx={{color: 'fg.default'}}>
+      <Link sx={{fontSize: 4, color: 'fg.default'}} as={GatsbyLink} to="/components/">
+        Components
+      </Link>
+    </Heading>
+    <Text as="p" sx={{fontSize: 2, color: 'fg.muted'}}>
+      Design and usage guidelines for individual Primer components.
+    </Text>
   </Box>
   <Box>
-    <Heading as="h3" sx={{fontSize: 3}}><Link sx={{fontSize: 3,}} as={GatsbyLink} to="/github-staff/">GitHub staff</Link></Heading>
-    <Text as="p" sx={{fontSize: 2, color: 'fg.muted'}}>Internal documentation for GitHub staff.</Text>
+    <Heading as="h3" sx={{ color: 'fg.default'}}>
+      <Link sx={{fontSize: 4, color: 'fg.default'}} as={GatsbyLink} to="/github-staff/">
+        GitHub staff
+      </Link>
+    </Heading>
+    <Text as="p" sx={{fontSize: 2, color: 'fg.muted'}}>
+      Internal documentation for GitHub staff.
+    </Text>
   </Box>
   <Box>
-    <Heading as="h3" sx={{fontSize: 3}}><Link sx={{fontSize: 3,}} as={GatsbyLink} to="/native/">Native</Link></Heading>
-    <Text as="p" sx={{fontSize: 2, color: 'fg.muted'}}>Principles, foundations and usage guidelines for designing for GitHub's native products.</Text>
+    <Heading as="h3" sx={{color: 'fg.default'}}>
+      <Link sx={{fontSize: 4, color: 'fg.default'}} as={GatsbyLink} to="/native/">
+        Native
+      </Link>
+    </Heading>
+    <Text as="p" sx={{fontSize: 2, color: 'fg.muted'}}>
+      Principles, foundations and usage guidelines for designing for GitHub's native products.
+    </Text>
   </Box>
 </Box>
 
-<hr /> 
+<hr />{' '}
 
-<Box mb={7} display="grid" gridTemplateColumns={['1fr', null, null, null, '1fr 1fr']} gridGap={5}>
-  <Box>
-    <Heading as="h4" sx={{fontSize: 5}}>Open source</Heading>
-    <Text as="p" sx={{fontSize: 3, mt: 3}}>Primer is open-sourced on GitHub. Contributions and feedback are welcome!</Text>
-    <Link sx={{fontSize: 1, fontWeight: 'bold'}} as={GatsbyLink} to="https://github.com/primer">Contribute on GitHub</Link>
-  </Box>
-  <Box>
-    <Heading as="h4" sx={{fontSize: 5}}>Stay up to date</Heading>
-    <Link sx={{fontSize: 1, display: 'block', mt: 3, mb: 2, fontWeight: 'bold'}} as={GatsbyLink} to="https://twitter.com/githubprimer">Follow us on Twitter</Link>
-    <Link sx={{fontSize: 1, display: 'block',  fontWeight: 'bold'}} as={GatsbyLink} to="https://github.blog/tag/design-systems/">Read the latest on the blog</Link>
-  </Box>
+<Box pt={3}>
+  <Heading as="h4" sx={{fontSize: 5}}>
+    Open source
+  </Heading>
+  <Text as="p" sx={{fontSize: 2, mt: 3}}>
+    Primer is open-sourced on GitHub.{' '}
+    <Link as={GatsbyLink} to="https://github.com/primer">
+      Contributions and feedback
+    </Link>{' '}
+    are welcome!
+  </Text>
+  <Text as="p" sx={{fontSize: 2}}>
+    <Text sx={{fontWeight: 'bold'}}>Need help?</Text> If you found a bug on this website, please{' '}
+    <Link as={GatsbyLink} to="https://github.com/primer/design/issues/new">
+      open a new issue
+    </Link>{' '}
+    with as much detail as possible.
+  </Text>
 </Box>
-
-<Text as="p" sx={{fontSize: 2}}><Text sx={{fontWeight: 'bold'}}>Need help?</Text> If you found a bug on this website, please <Link as={GatsbyLink} to="https://github.com/primer/design/issues/new">open a new issue</Link> with as much detail as possible.</Text>
diff --git a/src/@primer/gatsby-theme-doctocat/components/hero.js b/src/@primer/gatsby-theme-doctocat/components/hero.js
@@ -1,17 +1,37 @@
-import {Box, Heading, ThemeProvider} from '@primer/react'
+import {Text, Box, Heading, ThemeProvider} from '@primer/react'
 import React from 'react'
 import {Container} from '@primer/gatsby-theme-doctocat'
-import heroIllustration from '../../../hero-illustration.svg'
 
 export default function Hero() {
   return (
     <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
-      <Box bg="canvas.default" py={6}>
+      <Box pt={3}>
         <Container>
-          <Heading sx={{color: 'accent.fg', fontSize: 7, lineHeight: 'condensed', pb: 3, m: 0}}>
-            Primer Design System
-          </Heading>
-          <img src={heroIllustration} alt="Primer Design System" width="100%" />
+          <Box
+            sx={{
+              display: 'flex',
+              gap: '64px',
+              align: 'center',
+              img: {
+                display: 'none',
+                '@media screen and (min-width: 768px)': {display: 'block'},
+              },
+            }}
+          >
+            <div>
+              <Heading sx={{fontSize: 7, lineHeight: 'condensed', pb: 3, mt: 5}}>Primer Design System</Heading>
+              <Text as="p" sx={{m: 0, fontSize: 3, pb: 0}}>
+                Primer is a set of guidelines, principles, and patterns for designing and building UI at GitHub.
+              </Text>
+            </div>
+            <img
+              role="presentation"
+              alt="Mona illustration"
+              width="250"
+              height="202"
+              src="https://github.com/user-attachments/assets/3a52cf63-82b6-4c46-98db-da3d70e4a115"
+            />
+          </Box>
         </Container>
       </Box>
     </ThemeProvider>

diff --git a/src/images/header-background-gradient.png b/src/images/header-background-gradient.png
diff --git a/src/images/mona.png b/src/images/mona.png