From a4d757586d66e1f4abb3a089ba5fc6e9213a4a39 Mon Sep 17 00:00:00 2001
From: atanasster <atanasster@gmail.com>
Date: Mon, 8 Jun 2020 14:31:55 -0400
Subject: [PATCH] feat: home page sections

---
 .../stories/src/blogs/custom-docs-pages.mdx   |  2 +-
 examples/stories/src/blogs/home-page.mdx      | 28 +++++++++++++++----
 .../src/ThemeContext/ThemeContext.tsx         | 10 +++++++
 3 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/examples/stories/src/blogs/custom-docs-pages.mdx b/examples/stories/src/blogs/custom-docs-pages.mdx
index 1d296e369..8049ef79d 100644
--- a/examples/stories/src/blogs/custom-docs-pages.mdx
+++ b/examples/stories/src/blogs/custom-docs-pages.mdx
@@ -177,7 +177,7 @@ const page = {
 }
 export default page;
 ```
-![component-controls blocks](https://github.com/ccontrols/component-controls/raw/master/misc/storybook-custom-docs/images/component-controls-blocks-controls-blocks.jpg)
+![component-controls blocks](https://github.com/ccontrols/component-controls/raw/master/misc/storybook-custom-docs/images/component-controls-blocks.jpg)
 
 
 5. **Mixed blocks**
diff --git a/examples/stories/src/blogs/home-page.mdx b/examples/stories/src/blogs/home-page.mdx
index 3e934d457..6656ec629 100644
--- a/examples/stories/src/blogs/home-page.mdx
+++ b/examples/stories/src/blogs/home-page.mdx
@@ -4,13 +4,18 @@ route: /
 type: page
 ---
 
-import { jsx, Flex, Heading, Text, Button } from 'theme-ui';
-import { SyntaxHighlighter } from '@component-controls/components';
+import { jsx, Flex, Box, Heading, Text, Button, Card } from 'theme-ui';
 import { DocsLink } from '@component-controls/app';
+import { Link } from '@component-controls/app-components';
+import { Subtitle, Title } from '@component-controls/components';
+
+export const BoxItem = props => (
+  <Card sx={{ width: '300px', height: '300px', m: 2, py: 4, justifyContent: 'space-between' }} {...props}/>
+);
 
 <Flex sx={{ minHeight: '300px', width: '100%', alignItems: 'center', backgroundColor: 'primary', color: 'white' }}>
   <Flex sx={{ flexDirection: 'column', alignItems: 'center', width: '100%'}}>
-    <Heading as='h1'>component-controls</Heading>
+    <Title>component-controls</Title>
     <Text sx={{ my: 2 }}>
       design -> develop -> test
     </Text>  
@@ -18,6 +23,19 @@ import { DocsLink } from '@component-controls/app';
   </Flex>  
 </Flex>
 
-<Flex sx={{ flexDirection: 'row', alignContent: 'center', px: 6}}>
-  # Getting started
+<Flex sx={{ flexDirection: 'column', alignItems: 'center', py: 5}}>
+  <Flex sx={{ flexDirection: 'row', alignItems: 'center',  flexWrap: 'wrap', justifyContent: 'space-between', maxWidth: '1000px', width: '100%'}}>
+    <BoxItem>
+      <Subtitle>Start with Gatsby</Subtitle>
+      <Link href='/storybook'>get started...</Link>
+    </BoxItem>
+    <BoxItem>
+      <Subtitle>Start with Vercel</Subtitle>
+      <Link href='/storybook'>get started...</Link>
+    </BoxItem>
+    <BoxItem>
+      <Subtitle>Start with Storybook</Subtitle>
+      <Link href='/storybook'>get started...</Link>
+    </BoxItem>
+  </Flex>
 </Flex>  
diff --git a/ui/components/src/ThemeContext/ThemeContext.tsx b/ui/components/src/ThemeContext/ThemeContext.tsx
index dde88b5dd..ebf2f6d09 100644
--- a/ui/components/src/ThemeContext/ThemeContext.tsx
+++ b/ui/components/src/ThemeContext/ThemeContext.tsx
@@ -153,6 +153,16 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
             bg: 'action',
           },
         },
+        cards: {
+          primary: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            padding: 2,
+            borderRadius: 4,
+            boxShadow: '0 0 8px rgba(0, 0, 0, 0.125)',
+          },
+        },
         links: {
           nav: {
             fontWeight: 300,