Merge pull request #53 from chakra-ui/docs/sandbox-example-vue3

feat: update example with vue 3 and chakra v1 and add content text

Author: codebender828

website/src/components/SandboxExample.vue

@@ -1,13 +1,36 @@
 <template>
-  <chakra.div :mx="[0, 10, 12]" :mt="[4, 10, 10]" shadow="lg">
+  <chakra.div :mx="[0, 10, 12]" :mt="[4, 10, 10]" shadow="2xl" bg="white">
+    <chakra.div pt="10" :px="{ base: '3', sm: '10' }">
+      <chakra.h1
+        maxW="16ch"
+        :fontSize="{ base: '2.25rem', sm: '3rem', lg: '4rem' }"
+        fontFamily="heading"
+        letterSpacing="tighter"
+        fontWeight="extrabold"
+        mb="16px"
+        lineHeight="1.2"
+      >
+        Less code.
+        <chakra.span color="vue.600" px="5px">More speed.</chakra.span>
+      </chakra.h1>
+      <chakra.p
+        :maxW="{ base: '560px', lg: '650px' }"
+        opacity="0.7"
+        :fontSize="{ base: 'lg', lg: 'xl' }"
+        mt="6"
+        mb="10"
+      >
+        Spend less time writing UI code and more time building a great
+        experience for your customers.
+      </chakra.p>
+    </chakra.div>
     <chakra.iframe
       title="Chakra UI Vue Starter Template for Vue 2"
-      src="https://codesandbox.io/embed/chakra-ui-vue-starter-template-for-vue-2-2sy0g?autoresize=1&codemirror=1&fontsize=12&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark"
+      src="https://codesandbox.io/embed/charka-ui-vue-chidori-airbnb-card-example-v3zi5?autoresize=1&codemirror=1&fontsize=12&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark"
       allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
       sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
       tabindex="0"
       width="100%"
-      bg="white"
       height="600px"
     />
   </chakra.div>