swap homepage header illustration

primer · Oct 11, 2024 · fff17d6 · fff17d6
1 parent 830dc3f
commit fff17d6
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 32 deletions.
diff --git a/content/index.mdx b/content/index.mdx
@@ -2,48 +2,92 @@
 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 pb={4}>
-  <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>
-
-<hr /> 
-
 <Box py={4} display="grid" gridTemplateColumns={['1fr', null, null, null, '1fr 1fr']} gridGap={5}>
   <Box>
-    <Heading as="h3" sx={{fontSize: 3}}><Link sx={{fontSize: 3, 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>
+    <Heading as="h3" sx={{fontSize: 3}}>
+      <Link sx={{fontSize: 3, 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, color: 'fg.default'}}><Link sx={{fontSize: 3, 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>
+    <Heading as="h3" sx={{fontSize: 3, color: 'fg.default'}}>
+      <Link sx={{fontSize: 3, 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, color: 'fg.default'}}><Link sx={{fontSize: 3, 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>
+    <Heading as="h3" sx={{fontSize: 3, color: 'fg.default'}}>
+      <Link sx={{fontSize: 3, 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, color: 'fg.default'}}><Link sx={{fontSize: 3, 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>
+    <Heading as="h3" sx={{fontSize: 3, color: 'fg.default'}}>
+      <Link sx={{fontSize: 3, 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, color: 'fg.default'}}><Link sx={{fontSize: 3, 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>
+    <Heading as="h3" sx={{fontSize: 3, color: 'fg.default'}}>
+      <Link sx={{fontSize: 3, 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, color: 'fg.default'}}><Link sx={{fontSize: 3, 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>
+    <Heading as="h3" sx={{fontSize: 3, color: 'fg.default'}}>
+      <Link sx={{fontSize: 3, 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>
-  <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>
+  <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>
diff --git a/src/@primer/gatsby-theme-doctocat/components/hero.js b/src/@primer/gatsby-theme-doctocat/components/hero.js
@@ -1,17 +1,38 @@
-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 py={6}>
         <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, m: 0}}>Primer Design System</Heading>
+              <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>
+            </div>
+            <img
+              role="presentation"
+              alt="Mona illustration"
+              width="150"
+              height="150"
+              src="https://github.com/user-attachments/assets/c8ad1ae3-262f-4ede-b0ec-9f1500ad30b1"
+            />
+          </Box>
         </Container>
       </Box>
     </ThemeProvider>