feat: add footer

Author: carwack

website/src/components/home/Footer.vue

@@ -0,0 +1,40 @@
+<template>
+  <CFlex
+    as="footer"
+    flex-dir="column"
+    font-family="body"
+    justify-content="center"
+    align-items="center"
+    :py="[4, 10, 10]"
+    bg="white"
+    shadow="lg"
+  >
+    <chakra.p px="4">
+      Designed and developed by the Chakra UI Vue core team.
+    </chakra.p>
+    <chakra.p px="4">
+      Special thanks goes to these
+      <chakra.a
+        href="https://vue.chakra-ui.com/contributors"
+        target="_blank"
+        rel="noopener noreferrer"
+        color="vue.600"
+      >
+        contributors
+      </chakra.a>
+      💚
+    </chakra.p>
+  </CFlex>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { CFlex } from '@chakra-ui/vue-next'
+
+export default defineComponent({
+  name: 'Footer',
+  components: {
+    CFlex,
+  },
+})
+</script>

website/src/components/home/PilersHero.vue

@@ -3,7 +3,7 @@
     as="section"
     :flex-dir="['column', 'column', 'row']"
     font-family="body"
-    :pl="[0, 10, 12]"
+    :ml="[0, 10, 12]"
     :py="[4, 10, 10]"
   >
     <chakra.div
@@ -15,7 +15,7 @@
       py="10"
       :px="{ base: '3', sm: '10' }"
     >
-      <CBox>
+      <CBox m="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>
+      <CBox m="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>
+      <CBox m="3">
         <CFlex align-items="center" mb="5">
           <CFlex
             justify-content="center"

website/src/pages/index.vue

@@ -8,6 +8,7 @@
   >
     <Hero />
     <PilersHero />
+    <Footer />
   </chakra.main>
 </template>
 
@@ -16,13 +17,15 @@ import { defineComponent } from 'vue'
 import Hero from '../components/home/Hero.vue'
 import PilersHero from '../components/home/PilersHero.vue'
 import Navbar from '../components/Navbar.vue'
+import Footer from '../components/home/Footer.vue'
 
 export default defineComponent({
   name: 'Index',
   components: {
     Hero,
     PilersHero,
     Navbar,
+    Footer,
   },
 })
 </script>