Merge pull request #54 from chakra-ui/docs/discord-strip

Docs: Discord hero

Author: codebender828

website/src/assets/custom-theme.ts

@@ -15,6 +15,10 @@ export default extendTheme({
       800: '#21533B',
       900: '#143223',
     },
+    discord: {
+      primary: '#7289DA',
+      accessible: '#5570D2',
+    },
   },
   fonts: {
     heading: `Inter, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,

website/src/components/Navbar.vue

@@ -76,8 +76,8 @@
           aria-label="Join Discord channel"
           target="_blank"
           rel="noopener noreferrer"
-          href="https://github.com/chakra-ui/chakra-ui-vue"
-          icon="message-circle"
+          href="https://discord.gg/sq2Kp6x"
+          icon="discord"
         />
       </CBox>
       <CBox as="li">

website/src/components/home/DiscordHero.vue

@@ -0,0 +1,70 @@
+<template>
+  <CFlex
+    as="section"
+    :flex-dir="['column', 'column', 'column', 'row']"
+    align="center"
+    justify="space-between"
+    font-family="body"
+    color="white"
+    bg="discord.accessible"
+    :h="['auto', 'auto', 'auto', 40]"
+    :px="[4, 10, 12]"
+  >
+    <CFlex
+      flex-dir="row"
+      flex="1"
+      py="10"
+      :mr="{ base: '0', lg: '10' }"
+      :w="{ base: '100%', lg: 'auto' }"
+    >
+      <CIcon name="discord" size="48px" mr="5" />
+      <CBox>
+        <chakra.h2 font-size="md" font-weight="bold" lineHeight="1.2" mb="1">
+          Connect with the Chakra community
+        </chakra.h2>
+        <chakra.p>
+          Feel free to ask questions, report issues, and meet new people.
+        </chakra.p>
+      </CBox>
+    </CFlex>
+    <CFlex
+      flex-dir="row"
+      :pt="{ base: '0', lg: '10' }"
+      pb="10"
+      h="100%"
+      :w="{ base: '100%', lg: 'auto' }"
+      align="center"
+    >
+      <CButton
+        as="a"
+        text-decoration="none"
+        aria-label="Join Discord channel"
+        href="https://discord.gg/sq2Kp6x"
+        target="_blank"
+        rel="noopener noreferrer"
+        size="lg"
+        color="black"
+        bg="white"
+        shadow="lg"
+        :w="{ base: '100%', lg: 'auto' }"
+      >
+        Join the #Chakra Discord!
+      </CButton>
+    </CFlex>
+  </CFlex>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { CFlex, CBox, CButton, CIcon } from '@chakra-ui/vue-next'
+
+export default defineComponent({
+  name: 'DiscordHero',
+  components: {
+    CFlex,
+    CBox,
+    CButton,
+    CIcon,
+  },
+})
+</script>

website/src/components/home/Footer.vue

@@ -30,11 +30,11 @@
       aria-label="Join Discord channel"
       target="_blank"
       rel="noopener noreferrer"
-      href="https://github.com/chakra-ui/chakra-ui-vue"
+      href="https://discord.gg/sq2Kp6x"
       :_hover="{ color: 'vue.500' }"
       mx="4"
     >
-      <CIcon name="message-circle" mt="8px" />
+      <CIcon name="discord" mt="8px" />
     </chakra.a>
   </CFlex>
 </template>

website/src/components/home/PilersHero.vue

@@ -15,7 +15,7 @@
       py="10"
       :px="{ base: '3', sm: '10' }"
     >
-      <CBox m="3">
+      <CBox my="3" :mx="{ base: '0', sm: '3' }">
         <CFlex align-items="center" mb="5">
           <CFlex
             justify-content="center"
@@ -33,7 +33,7 @@
         Chakra UI strictly follows WAI-ARIA standards. All components come with
         proper attributes and keyboard interactions out of the box.
       </CBox>
-      <CBox m="3">
+      <CBox my="3" :mx="{ base: '0', sm: '3' }">
         <CFlex align-items="center" mb="5">
           <CFlex
             justify-content="center"
@@ -51,7 +51,7 @@
         Quickly and easily reference values from your theme throughout your
         entire application, on any component.
       </CBox>
-      <CBox m="3">
+      <CBox m="3" :mx="{ base: '0', sm: '3' }">
         <CFlex align-items="center" mb="5">
           <CFlex
             justify-content="center"

website/src/main.ts

@@ -38,6 +38,13 @@ export const createApp = ViteSSG(App, { routes }, ({ app, isClient }) => {
         feStar,
         feTwitter,
       },
+      extend: {
+        discord: {
+          path:
+            '<path fill="currentColor" d="M297.216 243.2c0 15.616-11.52 28.416-26.112 28.416-14.336 0-26.112-12.8-26.112-28.416s11.52-28.416 26.112-28.416c14.592 0 26.112 12.8 26.112 28.416zm-119.552-28.416c-14.592 0-26.112 12.8-26.112 28.416s11.776 28.416 26.112 28.416c14.592 0 26.112-12.8 26.112-28.416.256-15.616-11.52-28.416-26.112-28.416zM448 52.736V512c-64.494-56.994-43.868-38.128-118.784-107.776l13.568 47.36H52.48C23.552 451.584 0 428.032 0 398.848V52.736C0 23.552 23.552 0 52.48 0h343.04C424.448 0 448 23.552 448 52.736zm-72.96 242.688c0-82.432-36.864-149.248-36.864-149.248-36.864-27.648-71.936-26.88-71.936-26.88l-3.584 4.096c43.52 13.312 63.744 32.512 63.744 32.512-60.811-33.329-132.244-33.335-191.232-7.424-9.472 4.352-15.104 7.424-15.104 7.424s21.248-20.224 67.328-33.536l-2.56-3.072s-35.072-.768-71.936 26.88c0 0-36.864 66.816-36.864 149.248 0 0 21.504 37.12 78.08 38.912 0 0 9.472-11.52 17.152-21.248-32.512-9.728-44.8-30.208-44.8-30.208 3.766 2.636 9.976 6.053 10.496 6.4 43.21 24.198 104.588 32.126 159.744 8.96 8.96-3.328 18.944-8.192 29.44-15.104 0 0-12.8 20.992-46.336 30.464 7.68 9.728 16.896 20.736 16.896 20.736 56.576-1.792 78.336-38.912 78.336-38.912z" fa-key="3" fill="currentColor"></path>',
+          viewBox: '0 0 496 512',
+        },
+      },
     },
   })
 

website/src/pages/index.vue

@@ -9,6 +9,7 @@
     <Hero />
     <SandboxExample />
     <PilersHero />
+    <DiscordHero />
     <Footer />
   </chakra.main>
 </template>
@@ -20,6 +21,7 @@ import PilersHero from '../components/home/PilersHero.vue'
 import Navbar from '../components/Navbar.vue'
 import Footer from '../components/home/Footer.vue'
 import SandboxExample from '../components/SandboxExample.vue'
+import DiscordHero from '../components/home/DiscordHero.vue'
 
 export default defineComponent({
   name: 'Index',
@@ -29,6 +31,7 @@ export default defineComponent({
     Navbar,
     Footer,
     SandboxExample,
+    DiscordHero,
   },
 })
 </script>