Merge pull request #33 from chakra-ui/docs/update-landing-page

Docs: update landing page

Author: codebender828

website/src/assets/chakra-ui-vue-logo.svg

@@ -0,0 +1,145 @@
+import { extendTheme } from '@chakra-ui/vue-next'
+import { mode } from '@chakra-ui/vue-theme-tools'
+
+export default extendTheme({
+  colors: {
+    vue: {
+      50: '#EEF8F4',
+      100: '#CDEBDD',
+      200: '#ACDEC6',
+      300: '#8BD1AF',
+      400: '#6AC398',
+      500: '#42B883',
+      600: '#30855F',
+      700: '#2E7452',
+      800: '#21533B',
+      900: '#143223',
+    },
+  },
+  fonts: {
+    heading: `Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
+    body: `Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
+  },
+  shadows: {
+    search:
+      '0 0 0 1px rgba(16,22,26,.1), 0 4px 8px rgba(16,22,26,.2), 0 18px 46px 6px rgba(16,22,26,.2)',
+  },
+  styles: {
+    global: (props: any) => ({
+      body: {
+        color: mode('gray.700', 'whiteAlpha.900')(props),
+        '.deleted': {
+          color: '#ff8383 !important',
+          fontStyle: 'normal !important',
+        },
+        '.inserted': {
+          color: '#b5f4a5 !important',
+          fontStyle: 'normal !important',
+        },
+      },
+    }),
+  },
+  textStyles: {
+    heading: {
+      fontFamily: 'heading',
+      textAlign: 'center',
+      fontWeight: 'bold',
+      letterSpacing: '-0.015em',
+      lineHeight: '1.24',
+      fontSize: { base: '2rem', md: '3.5rem' },
+    },
+    'heading-2': {
+      fontFamily: 'heading',
+      textAlign: 'center',
+      fontWeight: 'bold',
+      letterSpacing: '-0.015em',
+      lineHeight: '1.24',
+      fontSize: { base: '1.75rem', md: '2.75rem' },
+    },
+    caps: {
+      textTransform: 'uppercase',
+      fontSize: 'sm',
+      letterSpacing: 'widest',
+      fontWeight: 'bold',
+    },
+  },
+  mdx: {
+    h1: {
+      mt: '2rem',
+      mb: '.25rem',
+      lineHeight: 1.2,
+      fontWeight: 'bold',
+      fontSize: '1.875rem',
+      letterSpacing: '-.025em',
+    },
+    h2: {
+      mt: '4rem',
+      mb: '0.5rem',
+      lineHeight: 1.3,
+      fontWeight: 'semibold',
+      fontSize: '1.5rem',
+      letterSpacing: '-.025em',
+      '& + h3': {
+        mt: '1.5rem',
+      },
+    },
+    h3: {
+      mt: '3rem',
+      // mb: "0.5rem",
+      lineHeight: 1.25,
+      fontWeight: 'semibold',
+      fontSize: '1.25rem',
+      letterSpacing: '-.025em',
+    },
+    h4: {
+      mt: '3rem',
+      lineHeight: 1.375,
+      fontWeight: 'semibold',
+      fontSize: '1.125rem',
+    },
+    a: {
+      color: 'teal.500',
+      fontWeight: 'semibold',
+      transition: 'color 0.15s',
+      transitionTimingFunction: 'ease-out',
+      _hover: {
+        color: 'teal.600',
+      },
+    },
+    p: {
+      mt: '1.25rem',
+      lineHeight: 1.7,
+      'blockquote &': {
+        mt: 0,
+      },
+    },
+    hr: {
+      my: '4rem',
+    },
+    blockquote: {
+      bg: 'orange.100',
+      borderWidth: '1px',
+      borderColor: 'orange.200',
+      rounded: 'lg',
+      px: '1.25rem',
+      py: '1rem',
+      my: '1.5rem',
+    },
+    ul: {
+      mt: '1.5rem',
+      ml: '1.25rem',
+      'blockquote &': { mt: 0 },
+      '& > * + *': {
+        mt: '0.25rem',
+      },
+    },
+    code: {
+      rounded: 'sm',
+      px: '1',
+      fontSize: '0.875em',
+      py: '2px',
+      whiteSpace: 'nowrap',
+      lineHeight: 'normal',
+    },
+  },
+})

website/src/assets/custom-theme.ts

@@ -1,16 +1,18 @@
 <template>
   <chakra.nav
     h="60px"
-    w="100vw"
+    w="100%"
     px="4"
     d="flex"
     position="fixed"
     align-items="center"
     shadow="sm"
     bg="white"
     z-index="10"
+    border-top="6px solid"
+    border-color="vue.500"
   >
-    <CFlex align-items="center" flex="1" />
+    <CFlex align-items="center" :flex="{ base: 0, sm: 1 }" />
     <CFlex flex="1" justify-content="center">
       <CIcon name="search" mt="8px" />
     </CFlex>
@@ -23,35 +25,48 @@
       pt="8px"
       justify-content="flex-end"
     >
-      <CBox as="li" mr="2">
+      <CBox as="li" mr="2" :d="{ base: 'none', sm: 'block' }">
         <CIconButton
           as="a"
           variant="ghost"
           variant-color="gray"
-          aria-label="View the documentation"
+          aria-label="View GitHub"
           target="_blank"
+          rel="noopener noreferrer"
           href="https://github.com/chakra-ui/chakra-ui-vue"
+          icon="github"
+        />
+      </CBox>
+      <CBox as="li" mr="2" :d="{ base: 'none', sm: 'block' }">
+        <CIconButton
+          as="a"
+          variant="ghost"
+          variant-color="gray"
+          aria-label="View the documentation"
+          href="/getting-started"
           icon="book"
         />
       </CBox>
-      <CBox as="li" mr="2">
+      <CBox as="li" mr="2" :d="{ base: 'none', sm: 'block' }">
         <CIconButton
           as="a"
           variant="ghost"
           variant-color="gray"
           aria-label="Join Discord channel"
           target="_blank"
-          href="https://discord.gg/sq2Kp6x"
+          rel="noopener noreferrer"
+          href="https://github.com/chakra-ui/chakra-ui-vue"
           icon="message-circle"
         />
       </CBox>
-      <CBox as="li" mr="2">
+      <CBox as="li">
         <CIconButton
           as="a"
           variant="ghost"
           variant-color="gray"
           aria-label="Open menu"
           target="_blank"
+          rel="noopener noreferrer"
           href="https://discord.gg/sq2Kp6x"
           icon="menu"
         />