daisy-ui-kit 0.4.4 → 0.5.0

package/README.md

@@ -1,80 +1,26 @@
-<p align="center">
-<img src="https://user-images.githubusercontent.com/11247099/140462375-7b7ac4db-35b7-453c-8a05-13d8d20282c4.png" width="600"/>
-</p>
+# DaisyUI Kit
 
-<h2 align="center">
-<a href="https://github.com/antfu/vitesse">Vitesse</a> for Nuxt 3
-</h2><br>
+The complete set of DaisyUI components for VueJS and NuxtJS.
 
-<pre align="center">
-🧪 Working in Progress
-</pre>
+## Publishing to Cloudflare Workers
 
-<p align="center">
-<br>
-<a href="https://vitesse-nuxt3.netlify.app/">🖥 Online Preview</a>
-<br><br>
-<a href="https://stackblitz.com/github/antfu/vitesse-nuxt3"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
-</p>
+First, you'll need to have the old version of Cloudflare Wrangler installed. (Nitro doesn't have a preset for Cloudflare Worker Modules format, yet.)
 
-## Features
-
-- [💚 Nuxt 3](https://v3.nuxtjs.org) - SSR, ESR, File-based routing, components auto importing, modules, etc.
-
-- ⚡️ Vite - Instant HMR
-
-- 🎨 [UnoCSS](https://github.com/antfu/unocss) - The instant on-demand atomic CSS engine.
-
-- 😃 Use icons from any icon sets in Pure CSS, powered by [UnoCSS](https://github.com/antfu/unocss)
-
-- 🔥 The `<script setup>` syntax
-
-- 🍍 [State Management via Pinia](https://pinia.esm.dev), see [./composables/user.ts](./composables/user.ts)
-
-- 📑 [Layout system](./layouts)
-
-- 📥 APIs auto importing - for Composition API, VueUse and custom composables.
-
-- 🏎 Zero-config cloud functions and deploy
-
-- 🦾 TypeScript, of course
-
-## Plugins
-
-### Nuxt Modules
-
-- [VueUse](https://github.com/vueuse/vueuse) - collection of useful composition APIs.
-- [ColorMode](https://github.com/nuxt-community/color-mode-module) - dark and Light mode with auto detection made easy with Nuxt.
-- [UnoCSS](https://github.com/antfu/unocss) - the instant on-demand atomic CSS engine.
-- [Pinia](https://pinia.esm.dev/) - intuitive, type safe, light and flexible Store for Vue.
-
-## IDE
-
-We recommend using [VS Code](https://code.visualstudio.com/) with [Volar](https://github.com/johnsoncodehk/volar) to get the best experience (You might want to disable Vetur if you have it).
-
-## Variations
-
-- [vitesse](https://github.com/antfu/vitesse) - Opinionated Vite Starter Template
-- [vitesse-lite](https://github.com/antfu/vitesse-lite) - Lightweight version of Vitesse
-- [vitesse-nuxt-bridge](https://github.com/antfu/vitesse-nuxt-bridge) - Vitesse for Nuxt 2 with Bridge
-- [vitesse-webext](https://github.com/antfu/vitesse-webext) - WebExtension Vite starter template
-
-## Try it now!
-
-### Online
-
-<a href="https://stackblitz.com/github/antfu/vitesse-nuxt3"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
-
-### GitHub Template
-
-[Create a repo from this template on GitHub](https://github.com/antfu/vitesse-nuxt3/generate).
+```bash
+# Remove the new version of wrangler if you have it installed.
+npm remove wrangler -g
 
-### Clone to local
+# Install the old version of wrangler then login.
+npm i @cloudflare/wrangler -g
+wrangler login
+```
 
-If you prefer to do it manually with the cleaner git history
+After your git working directory is clean, run the following:
 
 ```bash
-npx degit antfu/vitesse-nuxt3 my-nuxt3-app
-cd my-nuxt3-app
-pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
+# First, run a successful build.
+NITRO_PRESET=cloudflare npm run build
+
+# Then publish
+wrangler publish
 ```

package/components/Button.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { makeIndividualClass } from './Button.config'
 
 interface Props {
   is?: string
@@ -91,12 +90,6 @@ const disabledAttrs = computed(() => {
     return {}
   }
 })
-const disabledClass = makeIndividualClass({ props, prop: 'disabled', prefix: 'btn-' })
-const wideClass = makeIndividualClass({ props, prop: 'wide', prefix: 'btn-' })
-const blockClass = makeIndividualClass({ props, prop: 'block', prefix: 'btn-' })
-const loadingClass = makeIndividualClass({ props, prop: 'loading', prefix: '' })
-const noAnimationClass = makeIndividualClass({ props, prop: 'no-animation', prefix: '' })
-const activeClass = makeIndividualClass({ props, prop: 'active', prefix: 'btn-' })
 </script>
 
 <template>

package/components/DemoExample.vue

@@ -7,7 +7,7 @@ const props = defineProps({
 })
 const classes = computed(() => {
   return {
-    'p-12': !props.noPadding,
+    'p-6 lg:p-12': !props.noPadding,
     'not-prose': !props.allowProse,
   }
 })

package/components/Home/AlternatingFeatureSections.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { HeartIcon, SparklesIcon } from '@heroicons/vue/outline'
+import IconArrowUp from '~icons/heroicons-solid/arrow-up'
+import IconArrowDown from '~icons/heroicons-solid/arrow-down'
 import IconInfo from '~icons/feather/info'
 
 const isChecked = ref(true)
@@ -29,7 +31,7 @@ const favoriteColor = ref('')
               Tailwind classes can get messy.  DaisyUI Kit helps you declutter your code.  It's clean, scalable Tailwind.
             </Text>
 
-            <NuxtLink to="/daisy-button">
+            <NuxtLink to="/install">
               <Button primary class="mt-6 bg-gradient-primary-r">
                 Get started
               </Button>
@@ -44,10 +46,12 @@ const favoriteColor = ref('')
           <div class="py-16 pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
             <Flex grow class="w-[800px] mx-auto shadow-lg mockup-code">
               <pre><code>
-  &lt;<span class="text-orange-400">Button</span> <span class="text-purple-400">primary</span>&gt;Get Started&lt;/<span class="text-orange-400">Button</span>&gt;</code>
-
-  <span class="text-gray-400">&lt;!-- instead of --&gt;</span>
+  <span class="text-gray-400">&lt;!-- 👍 Write this --&gt;</span>
+  &lt;<span class="text-orange-400">Button</span> <span class="text-purple-400">primary</span>&gt;
+    Get Started
+  &lt;/<span class="text-orange-400">Button</span>&gt;</code>
 
+  <span class="text-gray-400">&lt;!-- 👎 Avoid this --&gt;</span>
   &lt;<span class="text-green-400">button</span> <span class="text-purple-400">class</span>="<span class="text-amber-400">inline-block px-4 py-3</span>
     <span class="text-amber-400">text-sm font-semibold text-center</span>
     <span class="text-amber-400">text-white uppercase transition</span>
@@ -83,7 +87,12 @@ const favoriteColor = ref('')
               Beautiful Components
             </Text>
             <Text block lg class="mt-4 text-base-content/60">
-              DaisyUI Kit's components are powered by the beautiful CSS of <Link>DaisyUI</Link>. Our components are built with
+              DaisyUI Kit's components are powered by the beautiful CSS of
+              <NuxtLink target="blank" to="https://www.daisyui.com">
+                <Link is="span">
+                  DaisyUI
+                </Link>
+              </NuxtLink>. Our components are built with
               just the right amount of elegant TypeScript under the hood.
             </Text>
 
@@ -98,7 +107,7 @@ const favoriteColor = ref('')
           <div class="absolute inset-0 pr-4 -ml-48 sm:pr-6 md:-ml-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
             <img
               class="w-full shadow-xl rounded-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none"
-              src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2560&q=80"
+              src="/img/unsplash-forest-sm.jpeg"
               alt="Customer profile user interface"
             >
           </div>

package/components/Home/{StatsSection.vue → BitoviConsulting.vue}

@@ -6,7 +6,7 @@
         <div class="h-full xl:relative xl:col-start-2">
           <img
             class="object-cover w-full h-full opacity-25 xl:absolute xl:inset-0"
-            src="https://images.unsplash.com/photo-1521737852567-6949f3f9f2b5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2830&q=80&sat=-100"
+            src="/img/unsplash-dev-group-sm.jpeg"
             alt="People working on laptops"
           >
           <div
@@ -16,6 +16,7 @@
         </div>
       </div>
     </div>
+
     <div
       class="max-w-4xl px-4 mx-auto sm:px-6 lg:max-w-7xl lg:px-8 xl:grid xl:grid-cols-2 xl:grid-flow-col-dense xl:gap-x-8"
     >
@@ -30,16 +31,17 @@
         >
           Let the experts build it for you
         </Text>
-        <p class="mt-5 text-lg text-gray-300">
-          Rhoncus sagittis risus arcu erat lectus bibendum. Ut in adipiscing
-          quis in viverra tristique sem. Ornare feugiat viverra eleifend
-          fusce orci in quis amet. Sit in et vitae tortor, massa. Dapibus
-          laoreet amet lacus nibh integer quis. Eu vulputate diam sit tellus
-          quis at.
-        </p>
+
+        <Text is="p" lg class="mt-5 text-gray-300">
+          Bitovi has over 15 years of experience helping every type of business.
+          From the smallest startups to the largest Fortune 100 companies, we can
+          either be your team or get your team trained quickly to build scalable,
+          beautiful applications.  Take a look at our track record and get in touch
+          when you're ready.
+        </Text>
 
         <Flex class="mt-6 space-x-4">
-          <NuxtLink to="https://bitovi.com" target="blank">
+          <NuxtLink to="https://www.bitovi.com" target="blank">
             <Button secondary lg>
               Visit Bitovi.com
             </Button>

package/components/Home/BitoviOpenSource.vue

@@ -0,0 +1,51 @@
+<template>
+  <!-- Logo Cloud -->
+  <div class="bg-base-200">
+    <div class="px-4 py-16 mx-auto max-w-7xl sm:px-6 lg:px-8">
+      <Flex items-center justify-center class="flex-col gap-4 sm:flex-row">
+        <Text is="h3" uppercase semibold center lg class="tracking-wide text-base-content/80">
+          Another Open-Source Gift by
+        </Text>
+        <NuxtLink target="blank" to="https://www.bitovi.com" class="-mt-4">
+          <img src="/logos/bitovi-red.png" class="h-[40px]">
+        </NuxtLink>
+      </Flex>
+
+      <Flex items-center justify-center class="mt-4 mb-4" />
+
+      <Text is="p" center lg semibold>
+        DaisyUI Kit joins the ranks of other professional-quality open-source projects.
+      </Text>
+
+      <div class="grid grid-cols-1 lg:grid-cols-3">
+        <Flex items-center justify-center class="py-6 lg:py-10 bg-gradient-radial from-white/20 via-transparent to-transparent">
+          <NuxtLink target="blank" to="https://www.canjs.com">
+            <img
+              class="h-10 lg:h-16"
+              src="/logos/canjs.svg"
+              alt="CanJS is a Bitovi professional open-source project."
+            >
+          </NuxtLink>
+        </Flex>
+        <Flex items-center justify-center class="py-6 lg:py-10 bg-gradient-radial from-white/20 via-transparent to-transparent">
+          <NuxtLink target="blank" to="https://www.donejs.com">
+            <img
+              class="h-10 lg:h-16"
+              src="/logos/donejs.png"
+              alt="DoneJS is a Bitovi professional open-source project."
+            >
+          </NuxtLink>
+        </Flex>
+        <Flex items-center justify-center class="py-6 lg:py-10 bg-gradient-radial from-white/20 via-transparent to-transparent">
+          <NuxtLink target="blank" to="https://www.stealjs.com">
+            <img
+              class="h-10 lg:h-16"
+              src="/logos/stealjs.svg"
+              alt="StealJS is a Bitovi professional open-source project."
+            >
+          </NuxtLink>
+        </Flex>
+      </div>
+    </div>
+  </div>
+</template>

package/components/Home/Footer.vue

@@ -1,104 +1,45 @@
 <script setup lang="ts">
+import IconFacebook from '~icons/ion/logo-facebook'
+import IconDribbble from '~icons/ph/dribbble-logo-fill'
+import IconInstagram from '~icons/ri/instagram-fill'
+import IconTwitter from '~icons/fe/twitter'
+import IconGithub from '~icons/fe/github'
+
 const footerNavigation = {
   solutions: [
-    { name: 'Marketing', href: '#' },
-    { name: 'Analytics', href: '#' },
-    { name: 'Commerce', href: '#' },
-    { name: 'Insights', href: '#' },
+    { name: 'Install', to: 'install' },
+    { name: 'Components', to: 'daisy-button' },
   ],
   support: [
-    { name: 'Pricing', href: '#' },
-    { name: 'Documentation', href: '#' },
-    { name: 'Guides', href: '#' },
-    { name: 'API Status', href: '#' },
-  ],
-  company: [
-    { name: 'About', href: '#' },
-    { name: 'Blog', href: '#' },
-    { name: 'Jobs', href: '#' },
-    { name: 'Press', href: '#' },
-    { name: 'Partners', href: '#' },
-  ],
-  legal: [
-    { name: 'Claim', href: '#' },
-    { name: 'Privacy', href: '#' },
-    { name: 'Terms', href: '#' },
-  ],
-  social: [
-    {
-      name: 'Facebook',
-      href: '#',
-      icon: defineComponent({
-        render: () =>
-          h('svg', { fill: 'currentColor', viewBox: '0 0 24 24' }, [
-            h('path', {
-              'fill-rule': 'evenodd',
-              'd': 'M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z',
-              'clip-rule': 'evenodd',
-            }),
-          ]),
-      }),
-    },
-    {
-      name: 'Instagram',
-      href: '#',
-      icon: defineComponent({
-        render: () =>
-          h('svg', { fill: 'currentColor', viewBox: '0 0 24 24' }, [
-            h('path', {
-              'fill-rule': 'evenodd',
-              'd': 'M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z',
-              'clip-rule': 'evenodd',
-            }),
-          ]),
-      }),
-    },
-    {
-      name: 'Twitter',
-      href: '#',
-      icon: defineComponent({
-        render: () =>
-          h('svg', { fill: 'currentColor', viewBox: '0 0 24 24' }, [
-            h('path', {
-              d: 'M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84',
-            }),
-          ]),
-      }),
-    },
-    {
-      name: 'GitHub',
-      href: '#',
-      icon: defineComponent({
-        render: () =>
-          h('svg', { fill: 'currentColor', viewBox: '0 0 24 24' }, [
-            h('path', {
-              'fill-rule': 'evenodd',
-              'd': 'M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z',
-              'clip-rule': 'evenodd',
-            }),
-          ]),
-      }),
-    },
-    {
-      name: 'Dribbble',
-      href: '#',
-      icon: defineComponent({
-        render: () =>
-          h('svg', { fill: 'currentColor', viewBox: '0 0 24 24' }, [
-            h('path', {
-              'fill-rule': 'evenodd',
-              'd': 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z',
-              'clip-rule': 'evenodd',
-            }),
-          ]),
-      }),
-    },
+    { name: 'Consulting', to: 'https://www.bitovi.com', target: 'blank' },
+    { name: 'Documentation', to: '#' },
+    { name: 'Github Issues', to: '#' },
   ],
+  // company: [
+  //   { name: 'About', to: '#' },
+  //   { name: 'Blog', to: '#' },
+  //   { name: 'Jobs', to: '#' },
+  //   { name: 'Press', to: '#' },
+  //   { name: 'Partners', to: '#' },
+  // ],
+  // legal: [
+  //   { name: 'Claim', to: '#' },
+  //   { name: 'Privacy', to: '#' },
+  //   { name: 'Terms', to: '#' },
+  // ],
 }
+
+const social = [
+  // { name: 'Facebook', to: '#', icon: IconFacebook },
+  // { name: 'Instagram', to: '#', icon: IconInstagram },
+  { name: 'Twitter', to: '#', icon: IconTwitter },
+  { name: 'GitHub', to: '#', icon: IconGithub },
+  // { name: 'Dribbble', to: '#', icon: IconDribbble },
+]
 </script>
 
 <template>
-  <footer class="bg-gray-50" aria-labelledby="footer-heading">
+  <footer class="bg-base-100" aria-labelledby="footer-heading">
     <h2 id="footer-heading" class="sr-only">
       Footer
     </h2>
@@ -107,104 +48,85 @@ const footerNavigation = {
         <div class="grid grid-cols-2 gap-8 xl:col-span-2">
           <div class="md:grid md:grid-cols-2 md:gap-8">
             <div>
-              <h3 class="text-sm font-semibold tracking-wider text-gray-400 uppercase">
+              <Text is="h3" semibold sm class="tracking-wider uppercase text-base-content/40">
                 Solutions
-              </h3>
+              </Text>
               <ul role="list" class="mt-4 space-y-4">
                 <li v-for="item in footerNavigation.solutions" :key="item.name">
-                  <a :href="item.href" class="text-base text-gray-500 hover:text-gray-900">{{
-                    item.name
-                  }}</a>
+                  <NuxtLink :href="item.to" class="text-base-content">
+                    {{ item.name }}
+                  </NuxtLink>
                 </li>
               </ul>
             </div>
+
             <div class="mt-12 md:mt-0">
-              <h3 class="text-sm font-semibold tracking-wider text-gray-400 uppercase">
+              <Text is="h3" semibold sm class="tracking-wider uppercase text-base-content/40">
                 Support
-              </h3>
+              </Text>
               <ul role="list" class="mt-4 space-y-4">
                 <li v-for="item in footerNavigation.support" :key="item.name">
-                  <a :href="item.href" class="text-base text-gray-500 hover:text-gray-900">{{
-                    item.name
-                  }}</a>
-                </li>
-              </ul>
-            </div>
-          </div>
-          <div class="md:grid md:grid-cols-2 md:gap-8">
-            <div>
-              <h3 class="text-sm font-semibold tracking-wider text-gray-400 uppercase">
-                Company
-              </h3>
-              <ul role="list" class="mt-4 space-y-4">
-                <li v-for="item in footerNavigation.company" :key="item.name">
-                  <a :href="item.href" class="text-base text-gray-500 hover:text-gray-900">{{
-                    item.name
-                  }}</a>
-                </li>
-              </ul>
-            </div>
-            <div class="mt-12 md:mt-0">
-              <h3 class="text-sm font-semibold tracking-wider text-gray-400 uppercase">
-                Legal
-              </h3>
-              <ul role="list" class="mt-4 space-y-4">
-                <li v-for="item in footerNavigation.legal" :key="item.name">
-                  <a :href="item.href" class="text-base text-gray-500 hover:text-gray-900">{{
-                    item.name
-                  }}</a>
+                  <NuxtLink :href="item.to" class="text-base-content" :target="item.target">
+                    {{ item.name }}
+                  </NuxtLink>
                 </li>
               </ul>
             </div>
           </div>
         </div>
+
         <div class="mt-12 xl:mt-0">
-          <h3 class="text-sm font-semibold tracking-wider text-gray-400 uppercase">
-            Subscribe to our newsletter
-          </h3>
-          <p class="mt-4 text-base text-gray-500">
+          <Text is="h3" sm semibold class="tracking-wider uppercase text-base-content/50">
+            Subscribe to updates
+          </Text>
+          <Text is="p" class="mt-4 text-base-content/80">
             The latest news, articles, and resources, sent to your inbox weekly.
-          </p>
-          <form class="mt-4 sm:flex sm:max-w-md">
-            <label for="email-address" class="sr-only">Email address</label>
-            <input
-              id="email-address"
-              type="email"
-              name="email-address"
-              autocomplete="email"
-              required
-              class="w-full min-w-0 px-4 py-2 text-base text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md shadow-sm appearance-none bg-base-100 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:placeholder-gray-400"
-              placeholder="Enter your email"
-            >
-            <div class="mt-3 rounded-md sm:mt-0 sm:ml-3 sm:flex-shrink-0">
-              <button
-                type="submit"
-                class="flex items-center justify-center w-full px-4 py-3 text-base font-medium text-white border border-transparent rounded-md shadow-sm bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border hover:from-purple-700 hover:to-indigo-700"
-              >
-                Subscribe
-              </button>
-            </div>
+          </Text>
+
+          <form class="mt-4">
+            <FormControl>
+              <Label for="email-address" class="sr-only">
+                <LabelText>Email address</LabelText>
+              </Label>
+              <InputGroup>
+                <TextInput
+                  id="email-address"
+                  name="email-address"
+                  bordered primary
+                  type="email"
+                  autocomplete="email"
+                  required
+                  placeholder="Enter your email"
+                  class="w-full placeholder-base-content/80"
+                />
+                <Button class="bg-gradient-primary-r hover:bg-primary-focus zoom-105 text-primary-content">
+                  Subscribe
+                </Button>
+              </InputGroup>
+            </FormControl>
           </form>
         </div>
       </div>
-      <div
-        class="pt-8 mt-12 border-t border-gray-200 md:flex md:items-center md:justify-between lg:mt-16"
-      >
-        <div class="flex space-x-6 md:order-2">
-          <a
-            v-for="item in footerNavigation.social"
+
+      <Flex items-center justify-between class="pt-8 mt-12 border-t border-base-content lg:mt-16">
+        <NuxtLink target="blank" to="https://www.bitovi.com">
+          <Link is="span" hover>
+            Built with ❤️ by Bitovi
+          </Link>
+        </NuxtLink>
+
+        <Flex class="gap-6">
+          <NuxtLink
+            v-for="item in social"
             :key="item.name"
-            :href="item.href"
+            :to="item.to"
             class="text-gray-400 hover:text-gray-500"
           >
             <span class="sr-only">{{ item.name }}</span>
             <component :is="item.icon" class="w-6 h-6" aria-hidden="true" />
-          </a>
-        </div>
-        <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
-          Built with ❤️ by Bitovi
-        </p>
-      </div>
+          </NuxtLink>
+        </Flex>
+      </Flex>
     </div>
   </footer>
 </template>

package/components/Home/GradientFeatureSections.vue

@@ -1,63 +1,61 @@
 <script setup lang="ts">
-import {
-  ArrowUpIcon,
-  ChatAltIcon,
-  DesktopComputerIcon,
-  DocumentReportIcon,
-  HeartIcon,
-  MoonIcon,
-  PencilAltIcon,
-  StarIcon,
-} from '@heroicons/vue/outline'
+import IconAdjustments from '~icons/heroicons-outline/adjustments'
+import IconTemplate from '~icons/heroicons-outline/template'
+import IconPencilAlt from '~icons/heroicons-outline/pencil-alt'
+import IconTabs from '~icons/ph/tabs-bold'
+import IconCollection from '~icons/heroicons-outline/collection'
+import IconHeart from '~icons/heroicons-outline/heart'
+import IconMoon from '~icons/heroicons-outline/moon'
+import IconStar from '~icons/heroicons-outline/star'
 
 const features = [
   {
     name: 'Beyond the Dark Side',
     description:
       'Don\'t clutter your app with "dark:" prefixes. Build Smart with CSS variables.',
-    icon: MoonIcon,
+    icon: IconMoon,
   },
   {
     name: 'Theme Builder',
     description:
       'Fine tune the perfect color palette for your app.',
-    icon: DesktopComputerIcon,
+    icon: IconAdjustments,
   },
   {
     name: 'Beautiful Inputs',
     description:
       'Create beautiful forms with TextInput, TextArea, Checkbox, Toggle, Radio, Range, Select and more!',
-    icon: ArrowUpIcon,
+    icon: IconPencilAlt,
   },
   {
-    name: 'Compose in Markdown',
+    name: 'Keep Tabs on Delightful',
     description:
-      'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.',
-    icon: PencilAltIcon,
+      'The TabsManager component lets you stay in control and create the perfect, custom tabs layout.',
+    icon: IconTabs,
   },
   {
     name: 'Lay It All Out',
     description:
       'Use the ButtonGroup, InputGroup, Drawer, Flex, Footer, Stack and more to create the perfect layout.',
-    icon: DocumentReportIcon,
+    icon: IconTemplate,
   },
   {
     name: 'Think Outside the Box',
     description:
       'Build with all kinds of shapes using Mask. Your site can be more than a grid of rectangles.',
-    icon: StarIcon,
+    icon: IconStar,
   },
   {
     name: 'Interactive Makes Interesting',
     description:
       'Create Dropdowns, Modals, Tooltips, and Tabs, all without writing a single line of JavaScript.',
-    icon: ChatAltIcon,
+    icon: IconCollection,
   },
   {
     name: 'What\s on the Menu',
     description:
-      'DaisyUI comes with gorgeous menu styles. They integrate well with routing state.',
-    icon: HeartIcon,
+      'DaisyUI comes with gorgeous menu styles. They cleanly integrate with router links.',
+    icon: IconHeart,
   },
 ]
 </script>

package/components/Home/Header.vue

@@ -48,127 +48,63 @@ const links = [
 
 <template>
   <header class="bg-base-100/95">
-    <Popover class="relative ">
-      <Flex
-        items-center justify-between
-        class="px-4 py-6 pb-2 mx-auto max-w-7xl sm:px-6 md:justify-start md:space-x-10 lg:px-8"
-      >
-        <Flex justify-start class="lg:w-0 lg:flex-1">
-          <Logo />
-        </Flex>
-        <div class="-my-2 -mr-2 md:hidden">
-          <PopoverButton
-            class="inline-flex items-center justify-center p-2 text-gray-400 rounded-md bg-base-100 hover:text-gray-500 hover:bg-base-200/50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
-          >
-            <span class="sr-only">Open menu</span>
-            <MenuIcon class="w-6 h-6" aria-hidden="true" />
-          </PopoverButton>
-        </div>
+    <Flex
+      items-center justify-between
+      class="px-4 py-6 pb-2 mx-auto max-w-7xl sm:px-6 md:justify-start md:space-x-10 lg:px-8"
+    >
+      <Flex grow>
+        <NuxtLink to="/">
+          <Logo class="ml-4 text-4xl" />
+        </NuxtLink>
+      </Flex>
 
-        <PopoverGroup as="nav" class="flex-row items-center hidden space-x-10 md:flex">
-          <a href="#" class="text-base font-medium text-gray-500 hover:text-gray-900">Themes</a>
-          <NuxtLink to="daisy-alert" class="text-base font-medium text-gray-500 hover:text-gray-900">
-            Components
-          </NuxtLink>
-          <a href="#" class="text-base font-medium text-gray-500 hover:text-gray-900">Contribute</a>
-          <ThemePicker />
-        </PopoverGroup>
+      <Flex is="nav" items-center row class="hidden gap-10 md:flex">
+        <!-- <a href="#" class="text-base font-medium text-base-content ">
+            Themes
+          </a> -->
+
+        <NuxtLink to="install" class="text-base font-medium text-base-content ">
+          Install
+        </NuxtLink>
 
-        <Flex items-center justify-end class="hidden md:flex md:flex-1 lg:w-0">
-          <template v-if="user">
-            <NuxtLink to="/app/dashboard">
-              <Button class="normal-case bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border hover:from-purple-700 hover:to-indigo-700">
-                Open Dashboard
-              </Button>
-            </NuxtLink>
-          </template>
+        <NuxtLink to="daisy-button" class="text-base font-medium text-base-content ">
+          Components
+        </NuxtLink>
 
-          <template v-else>
-            <a href="/api/auth/login">
-              <Button
-                ghost
-                class="text-base font-medium text-gray-500 normal-case hover:text-gray-900"
-              >
-                Sign in
-              </Button>
-            </a>
-            <a href="/api/auth/login" class="ml-4">
-              <Button
-                class="text-base normal-case border-none shadow-md bg-gradient-primary-r hover:bg-primary-focus zoom-105 text-primary-content"
-              >
-                Sign up
-              </Button>
-            </a>
-          </template>
-        </Flex>
+        <!-- <a href="#" class="text-base font-medium text-base-content ">
+            Contribute
+          </a> -->
       </Flex>
 
-      <transition
-        enter-active-class="duration-200 ease-out"
-        enter-from-class="scale-95 opacity-0"
-        enter-to-class="scale-100 opacity-100"
-        leave-active-class="duration-100 ease-in"
-        leave-from-class="scale-100 opacity-100"
-        leave-to-class="scale-95 opacity-0"
-      >
-        <PopoverPanel
-          focus
-          class="absolute inset-x-0 top-0 z-30 p-2 transition origin-top-right transform md:hidden"
-        >
-          <div
-            class="divide-y-2 rounded-lg shadow-lg bg-base-100 ring-1 ring-black ring-opacity-5 divide-gray-50"
-          >
-            <div class="px-5 pt-5 pb-6">
-              <div class="flex items-center justify-between">
-                <div>
-                  <img
-                    class="w-auto h-8"
-                    src="https://tailwindui.com/img/logos/workflow-mark-purple-600-to-indigo-600.svg"
-                    alt="Workflow"
-                  >
-                </div>
-                <div class="-mr-2">
-                  <PopoverButton
-                    class="inline-flex items-center justify-center p-2 text-gray-400 rounded-md bg-base-100 hover:text-gray-500 hover:bg-base-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
-                  >
-                    <span class="sr-only">Close menu</span>
-                    <XIcon class="w-6 h-6" aria-hidden="true" />
-                  </PopoverButton>
-                </div>
-              </div>
-              <div class="mt-6">
-                <nav class="grid grid-cols-1 gap-7">
-                  <a
-                    v-for="item in links"
-                    :key="item.name"
-                    :href="item.href"
-                    class="flex items-center p-3 -m-3 rounded-lg hover:bg-gray-50"
-                  >
-                    <div class="ml-4 text-base font-medium text-gray-900">{{ item.name }}</div>
-                  </a>
-                </nav>
-              </div>
-            </div>
-            <div class="px-5 py-6">
-              <div class="grid grid-cols-2 gap-4">
-                <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">Pricing</a>
-                <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">Partners</a>
-                <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">Company</a>
-              </div>
-              <div class="mt-6">
-                <a
-                  href="#"
-                  class="flex items-center justify-center w-full px-4 py-2 text-base font-medium text-white border border-transparent rounded-md shadow-sm bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border hover:from-purple-700 hover:to-indigo-700"
-                >Sign up</a>
-                <p class="mt-6 text-base font-medium text-center text-gray-500">
-                  Existing customer?
-                  <a href="#" class="text-gray-900">Sign in</a>
-                </p>
-              </div>
-            </div>
-          </div>
-        </PopoverPanel>
-      </transition>
-    </Popover>
+      <ThemePicker />
+
+      <!-- <Flex items-center justify-end class="hidden md:flex md:flex-1 lg:w-0">
+        <template v-if="user">
+          <NuxtLink to="/app/dashboard">
+            <Button class="normal-case bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border hover:from-purple-700 hover:to-indigo-700">
+              Open Dashboard
+            </Button>
+          </NuxtLink>
+        </template>
+
+        <template v-else>
+          <a href="/api/auth/login">
+            <Button
+              ghost
+              class="text-base font-medium text-gray-500 normal-case hover:text-gray-900"
+            >
+              Sign in
+            </Button>
+          </a>
+          <a href="/api/auth/login" class="ml-4">
+            <Button
+              class="text-base normal-case border-none shadow-md bg-gradient-primary-r hover:bg-primary-focus zoom-105 text-primary-content"
+            >
+              Sign up
+            </Button>
+          </a>
+        </template>
+      </Flex> -->
+    </Flex>
   </header>
 </template>

package/components/Home/Hero.vue

@@ -7,7 +7,7 @@
         <div class="absolute inset-0">
           <img
             class="object-cover w-full h-full"
-            src="https://images.unsplash.com/photo-1528901166007-3784c7dd3653?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
+            src="/img/unsplash-devs-sm.jpeg"
             alt="People working on laptops"
           >
           <div
@@ -24,22 +24,23 @@
               Build Beautiful Apps
             </Text>
           </Text>
-          <Text is="div" center class="max-w-lg mx-auto mt-6 text-xl text-indigo-200 sm:max-w-3xl">
-            Bring the masterfully crafted DaisyUI into your Vue app. <br>Built for you with ❤️ by <NuxtLink to="https://bitovi.com">
-              <Link>Bitovi</Link>
+          <Text center class="block max-w-lg mx-auto mt-6 text-xl text-indigo-200 sm:max-w-3xl">
+            Bring the masterfully-crafted DaisyUI into your Vue app. <br>Built for you with ❤️ by
+            <NuxtLink to="https://www.bitovi.com">
+              Bitovi
             </NuxtLink>.
           </Text>
 
           <div class="max-w-sm mx-auto mt-10 sm:max-w-none sm:flex sm:justify-center">
-            <Flex items-center justify-center class="sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2">
-              <NuxtLink custom to="/daisy-button">
-                <Button class="border-0 bg-base-100 text-base-content hover:bg-base-200">
+            <Flex items-center justify-center class="gap-2 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2">
+              <NuxtLink to="/daisy-button" class="block">
+                <Button class="w-full border-0 bg-base-100 text-base-content hover:bg-base-200">
                   Learn more
                 </Button>
               </NuxtLink>
 
-              <NuxtLink custom to="/daisy-button">
-                <Button primary>
+              <NuxtLink to="/install" class="block">
+                <Button primary class="w-full">
                   Start Building
                 </Button>
               </NuxtLink>

package/components/Home/{CTA.vue → PremiumCTA.vue}

@@ -6,17 +6,18 @@
     >
       <Text is="h2" size="4xl" extrabold class="tracking-tight">
         <Text block class="text-neutral-content">
-          Build faster with <Text secondary>
+          Build faster with
+          <Text secondary>
             DaisyUI Kit Premium
           </Text>
         </Text>
-        <Text block size="3xl" class="text-transparent bg-gradient-secondary-r bg-clip-text">
+        <Text block class="mt-4 text-2xl text-transparent lg:mt-0 xl:text-3xl bg-gradient-secondary-r bg-clip-text">
           Templates for App Layout, Marketing and E-Commerce
         </Text>
       </Text>
 
       <div class="mt-6 space-y-4 sm:space-y-0 sm:flex sm:space-x-4">
-        <Tooltip tip="Coming Soon">
+        <Tooltip primary tip="Coming Soon">
           <Button primary lg>
             Learn more
           </Button>

package/components/Logo.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="flex items-center flex-shrink-0 px-4">
-    <h5 class="ml-2 text-4xl font-bold whitespace-nowrap">
+  <div class="">
+    <Text class="font-bold whitespace-nowrap">
       <span class="text-primary">daisy</span>UI Kit
-      <span class="text-3xl">🌼</span>
-    </h5>
+      <span>🌼</span>
+    </Text>
   </div>
 </template>

package/components/MobileSidebar.vue

@@ -58,7 +58,7 @@ defineEmits(['update:show'])
             </div>
           </TransitionChild>
 
-          <Logo class="text-base-content" />
+          <Logo class="text-4xl text-base-content" />
 
           <div class="flex-1 h-0 mt-5 overflow-y-auto">
             <nav class="px-2 space-y-1">
@@ -66,11 +66,10 @@ defineEmits(['update:show'])
                 v-for="item in navigation"
                 :key="item.name"
                 :href="item.href"
-                :class="[
+                class="flex items-center px-2 py-2 text-base font-medium rounded-md group" :class="[
                   item.current
                     ? 'bg-indigo-800 text-base-content'
                     : 'text-indigo-100 hover:bg-indigo-600',
-                  'group flex items-center px-2 py-2 text-base font-medium rounded-md',
                 ]"
               >
                 <component

package/components/Sidebar.vue

@@ -72,7 +72,7 @@ const mockup = [
     <!-- Sidebar component, swap this element with another sidebar if you like -->
     <div class="relative pt-4 menu w-80 bg-base-100 text-base-content">
       <NuxtLink to="/" class="fixed">
-        <Logo class="text-base-content" />
+        <Logo class="ml-8 text-4xl text-base-content" />
       </NuxtLink>
 
       <div class="pb-12 pl-2 mt-12 overflow-y-auto">

package/components/theme/Picker.vue

@@ -1,8 +1,7 @@
-
 <script setup lang="ts">
-import { usePopper } from '@rovit/popper'
 import { onClickOutside } from '@vueuse/core'
 import { defaultThemes } from './theme-utils'
+import { usePopper } from '~~/composables/use-popper'
 import SunIcon from '~icons/feather/sun'
 
 const { theme } = useTheme()
@@ -20,20 +19,30 @@ onClickOutside(container, () => popper.hide())
 
 <template>
   <div ref="container">
-    <Button ref="theButton" sm ghost class="text-base normal-case" @click="popper.toggle">
-      <SunIcon class="mr-2" />
-      Change Theme
+    <Button ref="theButton" primary sm class="md:btn-ghost" @click="popper.toggle">
+      <SunIcon class="text-base" />
     </Button>
 
-    <Menu v-show="popper.isVisible" ref="thePopup" compact class="absolute z-10 py-3 shadow-lg bg-base-100 rounded-box">
-      <MenuTitle> Choose a Theme </MenuTitle>
-      <div class="overflow-y-scroll h-96 ">
-        <MenuItem v-for="name in themeNames" :key="name" :class="{'bg-primary-focus text-primary-content': name === theme }">
-          <a @click="theme = name">
-            {{ name }}
-          </a>
-        </MenuItem>
-      </div>
-    </Menu>
+    <div ref="thePopup">
+      <transition
+        enter-active-class="duration-200 ease-out"
+        enter-from-class="scale-95 opacity-0"
+        enter-to-class="scale-100 opacity-100"
+        leave-active-class="duration-100 ease-in"
+        leave-from-class="scale-100 opacity-100"
+        leave-to-class="scale-95 opacity-0"
+      >
+        <Menu v-if="popper.isVisible" compact class="py-3 border shadow-lg bg-base-100 rounded-box border-base-300">
+          <MenuTitle> Choose a Theme </MenuTitle>
+          <div class="overflow-y-scroll h-96 ">
+            <MenuItem v-for="name in themeNames" :key="name" :class="{ 'bg-primary-focus text-primary-content': name === theme }">
+              <a @click="theme = name">
+                {{ name }}
+              </a>
+            </MenuItem>
+          </div>
+        </Menu>
+      </transition>
+    </div>
   </div>
 </template>

package/nuxt.js

@@ -0,0 +1,14 @@
+import { defineNuxtModule } from '@nuxt/kit'
+import { fileURLToPath } from 'node:url'
+
+export default defineNuxtModule({
+  hooks: {
+    'components:dirs'(dirs) {
+      // Add ./components dir to the list
+      dirs.push({
+        path: fileURLToPath(new URL('./components', import.meta.url)),
+        prefix: 'D'
+      })
+    }
+  }
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "daisy-ui-kit",
-  "version": "0.4.4",
+  "version": "0.5.0",
   "description": "",
   "scripts": {
     "build": "nuxi build",
@@ -15,7 +15,8 @@
   },
   "main": "index.ts",
   "files": [
-    "components/*"
+    "components/*",
+    "nuxt.js"
   ],
   "dependencies": {
     "@vueuse/core": "^9.0.0",
@@ -31,6 +32,7 @@
     "@iconify/json": "^2.1.83",
     "@nuxtjs/color-mode": "^3.1.4",
     "@pinia/nuxt": "^0.3.1",
+    "@popperjs/core": "^2.11.5",
     "@rovit/popper": "^3.9.0",
     "@tailwindcss/aspect-ratio": "^0.4.0",
     "@tailwindcss/forms": "^0.5.2",
@@ -43,7 +45,7 @@
     "eslint": "^8.20.0",
     "feathers-pinia": "^0.34.0",
     "mobile-detect": "^1.4.5",
-    "nuxt": "^3.0.0-rc.2",
+    "nuxt": "^3.0.0-rc.8",
     "ohmyfetch": "^0.4.18",
     "pinia": "^2.0.17",
     "postcss": "^8.4.14",

package/components/Home/LogoCloud.vue

@@ -1,49 +0,0 @@
-<template>
-  <!-- Logo Cloud -->
-  <div class="bg-base-200">
-    <div class="px-4 py-16 mx-auto max-w-7xl sm:px-6 lg:px-8">
-      <p
-        class="text-sm font-semibold tracking-wide text-center text-gray-500 uppercase"
-      >
-        Trusted by over 5 very average small businesses
-      </p>
-      <div class="grid grid-cols-2 gap-8 mt-6 md:grid-cols-6 lg:grid-cols-5">
-        <div class="flex justify-center col-span-1 md:col-span-2 lg:col-span-1">
-          <img
-            class="h-12"
-            src="https://tailwindui.com/img/logos/tuple-logo-gray-400.svg"
-            alt="Tuple"
-          >
-        </div>
-        <div class="flex justify-center col-span-1 md:col-span-2 lg:col-span-1">
-          <img
-            class="h-12"
-            src="https://tailwindui.com/img/logos/mirage-logo-gray-400.svg"
-            alt="Mirage"
-          >
-        </div>
-        <div class="flex justify-center col-span-1 md:col-span-2 lg:col-span-1">
-          <img
-            class="h-12"
-            src="https://tailwindui.com/img/logos/statickit-logo-gray-400.svg"
-            alt="StaticKit"
-          >
-        </div>
-        <div class="flex justify-center col-span-1 md:col-span-2 md:col-start-2 lg:col-span-1">
-          <img
-            class="h-12"
-            src="https://tailwindui.com/img/logos/transistor-logo-gray-400.svg"
-            alt="Transistor"
-          >
-        </div>
-        <div class="flex justify-center col-span-2 md:col-span-2 md:col-start-4 lg:col-span-1">
-          <img
-            class="h-12"
-            src="https://tailwindui.com/img/logos/workcation-logo-gray-400.svg"
-            alt="Workcation"
-          >
-        </div>
-      </div>
-    </div>
-  </div>
-</template>