Add links to various view layer tutorials on landing page

oguzozgen · Jun 1, 2018 · 5375c35 · 5375c35
1 parent 2f44246
commit 5375c35
Showing 1 changed file with 22 additions and 5 deletions.
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -15,6 +15,7 @@ import Hero from '../components/Hero';
 import Link from '../components/Link';
 import Button from '../components/Button';
 import CTA from '../components/CTA';
+import Subheading from '../components/Subheading';
 
 const Title = styled.h1`
  color: ${color.lightest};
@@ -25,11 +26,11 @@ const Title = styled.h1`
  text-shadow: rgba(0, 135, 220, 0.3) 0 1px 5px;
 
  @media (min-width: ${breakpoint * 1}px) {
- font-size: 56px;
+ font-size: 48px;
  }
 
  @media (min-width: ${breakpoint * 2}px) {
- font-size: 88px;
+ font-size: 72px;
  }
 `;
 
@@ -49,6 +50,12 @@ const Desc = styled.div`
  }
 `;
 
+const ActionHeading = styled(Subheading)`
+ display: block;
+ color: ${color.lighter};
+ margin-bottom: 1rem;
+`;
+
 const Actions = styled.div`
  > * {
  margin-right: 20px;
@@ -226,18 +233,28 @@ export default ({ data }) => {
  <Wrapper>
  <Content>
  <Pitch>
- <Title>Storybook Tutorial</Title>
+ <Title>Storybook tutorial</Title>
  <Desc>
  Learn Storybook to create bulletproof UI components as you build an app UI from
  scratch.
  </Desc>
 
+ <ActionHeading>Get Started</ActionHeading>
  <Actions>
  <Link isGatsby to={data.site.siteMetadata.toc[0]}>
- <Button inverse>Get started</Button>
+ <Button inverse small>
+ React tutorial
+ </Button>
+ </Link>
+ <Link isGatsby to={data.site.siteMetadata.toc[0]}>
+ <Button inverse small>
+ Vue tutorial
+ </Button>
  </Link>
  <Link href="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/hichroma/learnstorybook.com" target="_blank">
- <Button outline>View on GitHub</Button>
+ <Button outline small>
+ GitHub
+ </Button>
  </Link>
  </Actions>
  </Pitch>