feat: add sandbox example

Author: carwack

website/src/components/SandboxExample.vue

@@ -0,0 +1,22 @@
+<template>
+  <chakra.div :mx="[0, 10, 12]" :mt="[4, 10, 10]" shadow="lg">
+    <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"
+      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>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'SandboxExample',
+})
+</script>

website/src/pages/index.vue

@@ -7,6 +7,7 @@
     bg="vue.50"
   >
     <Hero />
+    <SandboxExample />
     <PilersHero />
     <Footer />
   </chakra.main>
@@ -18,6 +19,7 @@ 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'
+import SandboxExample from '../components/SandboxExample.vue'
 
 export default defineComponent({
   name: 'Index',
@@ -26,6 +28,7 @@ export default defineComponent({
     PilersHero,
     Navbar,
     Footer,
+    SandboxExample,
   },
 })
 </script>