feat: update UI

components/Counter.vue

@@ -4,13 +4,13 @@ const { count, inc, dec } = useCount()
 
 <template>
   <div inline-flex m="y-3">
-    <button btn class="!p-2" @click="dec()">
+    <button btn p-2 rounded-full @click="dec()">
       <div i-carbon-subtract></div>
     </button>
     <div font="mono" w="15" m-auto inline-block>
       {{ count }}
     </div>
-    <button btn class="!p-2" @click="inc()">
+    <button btn p-2 rounded-full @click="inc()">
       <div i-carbon-add></div>
     </button>
   </div>

components/Footer.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    text="2xl gray-500"
+    text="xl gray4"
     m-5
     flex
     justify-center
-    gap-2
+    gap-3
   >
     <NuxtLink i-carbon-campsite to="/" />
     <a i-carbon-logo-github href="https://github.com/antfu/vitesse-nuxt3" target="__blank" />

components/InputEntry.vue

@@ -9,28 +9,30 @@ const go = () => {
 </script>
 
 <template>
-  <input
-    id="input"
-    v-model="name"
-    placeholder="What's your name?"
-    type="text"
-    autocomplete="false"
-    p="x-4 y-2"
-    m="t-5"
-    w="250px"
-    text="center"
-    bg="transparent"
-    border="~ rounded gray-200 dark:gray-700"
-    outline="none active:none"
-    @keydown.enter="go"
-  >
   <div>
-    <button
-      class="m-3 text-sm btn"
-      :disabled="!name"
-      @click="go"
+    <input
+      id="input"
+      v-model="name"
+      placeholder="What's your name?"
+      type="text"
+      autocomplete="false"
+      p="x-4 y-2"
+      m="t-5"
+      w="250px"
+      text="center"
+      bg="transparent"
+      border="~ rounded gray-200 dark:gray-700"
+      outline="none active:none"
+      @keydown.enter="go"
     >
-      GO
-    </button>
+    <div>
+      <button
+        class="m-3 text-sm btn"
+        :disabled="!name"
+        @click="go"
+      >
+        GO
+      </button>
+    </div>
   </div>
 </template>

components/Logos.vue

@@ -0,0 +1,20 @@
+<template>
+  <div inline-flex text-2xl font-300 cursor-default>
+    <div flex flex-col children:mx-auto>
+      <img w-18 inline-block src="/nuxt.png" />
+      <span text-green5 mt--2>Nuxt 3</span>
+    </div>
+    <div
+      text="3xl gray4"
+      m="x-4 y-auto"
+      transition-all-500
+      transform
+      hover:rotate-135
+      i-carbon-add
+    />
+    <div flex flex-col children:mx-auto>
+      <img w-18 inline-block src="/vite.png" />
+      <span text-purple5 mt--2>Vitesse</span>
+    </div>
+  </div>
+</template>

components/PageView.vue

@@ -5,7 +5,7 @@ const time = useTimeAgo(computed(() => data.value.startAt))
 </script>
 
 <template>
-  <div text-gray>
-    <span font-500>{{ data.pageview }}</span> page views since <span font-500>{{ time }}</span>
+  <div text-gray:50>
+    <span font-500 text-gray>{{ data.pageview }}</span> page views since <span text-gray>{{ time }}</span>
   </div>
 </template>