feat(nuxt): update playground

Author: codebender828

modules/nuxt/playground/app.vue

@@ -25,9 +25,10 @@
         </c-heading>
         <chakra.h4
           font-weight="bold"
-          font-size="3xl"
+          :font-size="['xl', '2xl', '3xl']"
           display="flex"
-          align-items="center"
+          :flex-direction="['column', 'column', 'row']"
+          :align-items="['flex-start', 'flex-start', 'center']"
         >
           <chakra.span
             >Build Beautiful Accessible Components - Powered by</chakra.span
@@ -48,42 +49,60 @@
           </chakra.a>
         </chakra.h4>
       </c-stack>
-      <c-h-stack
+      <c-wrap
         :bg="useColorModeValue('blackAlpha.50', 'whiteAlpha.50').value"
-        padding="3"
-        rounded="full"
+        :px="[5, 3]"
+        :py="[4, 3]"
+        :rounded="{ base: '2xl', md: '2xl', lg: 'full' }"
+        spacing="3"
       >
-        <c-circle
-          box-size="8"
-          v-for="(color, i) in colors"
-          :key="color"
-          :bg="`${color}.400`"
-          cursor="pointer"
-          :_hover="{
-            bg: `${color}.500`,
-            transform: 'scale(1.1)',
-            transition: 'all 0.2s',
-          }"
-          @mouseenter="selectedColor.color = color"
-        />
-      </c-h-stack>
+        <c-wrap-item v-for="(color, i) in colors" :key="color">
+          <c-circle
+            box-size="8"
+            :bg="`${color}.400`"
+            cursor="pointer"
+            :_hover="{
+              bg: `${color}.500`,
+              transform: 'scale(1.1)',
+              transition: 'all 0.2s',
+            }"
+            @mouseenter="selectedColor.color = color"
+          />
+        </c-wrap-item>
+      </c-wrap>
       <c-badge
-        rounded="full"
         :color-scheme="selectedColor.color"
         text-transform="unset"
-        px="2"
-        py="1"
+        :px="[5, 2]"
+        :py="[4, 1]"
         font-size="md"
+        :rounded="{ base: '2xl', md: '2xl', lg: 'full' }"
+        white-space="break-spaces"
       >
         Chakra UI Vue is currently still in early beta. Explore the
         documentation and join our Discord!
       </c-badge>
-      <c-button-group size="lg" spacing="5" :color-scheme="selectedColor.color">
-        <c-button :right-icon="ExternalLinkIcon"> Get Started </c-button>
-        <c-button :right-icon="DocumentationIcon" variant="outline">
-          Documentation
-        </c-button>
-      </c-button-group>
+      <c-wrap spacing="5" :color-scheme="selectedColor.color">
+        <c-wrap-item>
+          <c-button
+            size="lg"
+            :color-scheme="selectedColor.color"
+            :right-icon="ExternalLinkIcon"
+          >
+            Get Started
+          </c-button>
+        </c-wrap-item>
+        <c-wrap-item>
+          <c-button
+            size="lg"
+            :color-scheme="selectedColor.color"
+            :right-icon="DocumentationIcon"
+            variant="outline"
+          >
+            Documentation
+          </c-button>
+        </c-wrap-item>
+      </c-wrap>
       <c-button-group :color-scheme="selectedColor.color" variant="outline">
         <c-icon-button
           aria-label="Toggle color mode"

modules/nuxt/playground/theme/text-styles.ts

@@ -2,8 +2,8 @@ import { SystemStyleObject } from "@chakra-ui/vue-next"
 
 export const home: Record<string, SystemStyleObject> = {
   heading: {
-    fontSize: "8xl",
-    letterSpacing: "-3px",
+    fontSize: ["3xl", "6xl", "8xl"],
+    letterSpacing: ["normal", "normal", "-3px"],
   },
   subheading: {
     fontSize: "3xl",