feat: home page sections

ccontrols · Jun 8, 2020 · a4d7575 · a4d7575
1 parent 82bddb9
commit a4d7575
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git 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
@@ -4,20 +4,38 @@ 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>  
     <DocsLink sx={{ color: 'white'}}>Getting started</DocsLink>
   </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
@@ -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,