Fix broken components
This commit is contained in:
khatabwedaa
parent
16613ef99e
commit
19511b9a10
5 changed files with 20 additions and 59 deletions
|
|
@ -24,13 +24,13 @@
|
|||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div :class="isOpen ? 'flex' : 'hidden lg:flex'" class="flex-col mt-4 space-y-2 lg:mt-0 lg:flex-row lg:-px-8 lg:space-y-0">
|
||||
<a class="mx-8 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
|
||||
<a class="text-gray-700 transition-colors duration-200 transform lg:mx-8 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
|
||||
href="#">Home</a>
|
||||
<a class="mx-8 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
|
||||
<a class="text-gray-700 transition-colors duration-200 transform lg:mx-8 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
|
||||
href="#">Components</a>
|
||||
<a class="mx-8 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
|
||||
<a class="text-gray-700 transition-colors duration-200 transform lg:mx-8 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
|
||||
href="#">Pricing</a>
|
||||
<a class="mx-8 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
|
||||
<a class="text-gray-700 transition-colors duration-200 transform lg:mx-8 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
|
||||
href="#">Contact</a>
|
||||
</div>
|
||||
|
||||
|
|
@ -91,13 +91,13 @@
|
|||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div class="flex flex-col mt-4 space-y-2 lg:mt-0 lg:flex-row lg:-px-8 lg:space-y-0">
|
||||
<a class="mx-8 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
|
||||
<a class="text-gray-700 transition-colors duration-200 transform lg:mx-8 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
|
||||
href="#">Home</a>
|
||||
<a class="mx-8 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
|
||||
<a class="text-gray-700 transition-colors duration-200 transform lg:mx-8 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
|
||||
href="#">Components</a>
|
||||
<a class="mx-8 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
|
||||
<a class="text-gray-700 transition-colors duration-200 transform lg:mx-8 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
|
||||
href="#">Pricing</a>
|
||||
<a class="mx-8 text-gray-700 transition-colors duration-200 transform dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
|
||||
<a class="text-gray-700 transition-colors duration-200 transform lg:mx-8 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
|
||||
href="#">Contact</a>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div class="hidden -mx-4 lg:flex lg:items-center">
|
||||
<div class="-mx-4 lg:flex lg:items-center">
|
||||
<a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Web developers</a>
|
||||
<a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Web Designers</a>
|
||||
<a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">UI/UX Designers</a>
|
||||
|
|
|
|||
|
|
@ -129,12 +129,12 @@
|
|||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div class="items-center lg:flex">
|
||||
<div class="flex flex-col mt-4 space-y-8 lg:flex-row lg:items-center lg:mt-0 lg:space-y-0 lg:-px-8">
|
||||
<a class="block mx-8 font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">glasses Search</a>
|
||||
<a class="block mx-8 font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">How it works!</a>
|
||||
<a class="block mx-8 font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Why us?</a>
|
||||
<a class="block mx-8 font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Contact</a>
|
||||
<a class="block font-medium text-gray-700 dark:text-gray-200 lg:mx-8 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">glasses Search</a>
|
||||
<a class="block font-medium text-gray-700 dark:text-gray-200 lg:mx-8 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">How it works!</a>
|
||||
<a class="block font-medium text-gray-700 dark:text-gray-200 lg:mx-8 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Why us?</a>
|
||||
<a class="block font-medium text-gray-700 dark:text-gray-200 lg:mx-8 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Contact</a>
|
||||
|
||||
<button class="flex items-center px-5 py-2 text-sm font-medium tracking-wide text-center text-white capitalize transition-colors duration-200 transform bg-gray-700 rounded-lg hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
|
||||
<button class="flex items-center justify-center px-5 py-2 text-sm font-medium tracking-wide text-center text-white capitalize transition-colors duration-200 transform bg-gray-700 rounded-lg hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
|
||||
Get in touch
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,52 +1,9 @@
|
|||
<template>
|
||||
<div class="relative bg-white font-roboto">
|
||||
<Nuxt />
|
||||
|
||||
<transition
|
||||
leave-active-class="transition duration-300 ease-in transform"
|
||||
leave-class="translate-x-0 opacity-100"
|
||||
leave-to-class="translate-x-20 opacity-0"
|
||||
>
|
||||
<div v-show="byMeCoffee" class="fixed inset-x-0 lg:inset-x-auto bottom-6 lg:right-8 xl:right-10 xl:bottom-16">
|
||||
<div class="lg:w-[24rem] px-6 lg:px-0">
|
||||
<div class="p-2 bg-blue-600 rounded-lg shadow-lg sm:p-3">
|
||||
<div class="flex flex-wrap items-center justify-between">
|
||||
<a target="_blank" href="https://www.buymeacoffee.com/khatabwedaa/e/54228" class="flex items-center flex-1 w-0">
|
||||
<span class="flex p-2 bg-blue-800 rounded-lg">
|
||||
<!-- Heroicon name: outline/speakerphone -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 15.546c-.523 0-1.046.151-1.5.454a2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0 2.701 2.701 0 00-1.5-.454M9 6v2m3-2v2m3-2v2M9 3h.01M12 3h.01M15 3h.01M21 21v-7a2 2 0 00-2-2H5a2 2 0 00-2 2v7h18zm-3-9v-2a2 2 0 00-2-2H8a2 2 0 00-2 2v2h12z" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<p class="ml-3 font-medium tracking-wide text-white truncate">
|
||||
Support Meraki UI
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<div class="flex-shrink-0 order-2 sm:order-3 sm:ml-2">
|
||||
<button @click="byMeCoffee = false" type="button" class="flex p-2 -mr-1 rounded-md hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-white">
|
||||
<span class="sr-only">Dismiss</span>
|
||||
<!-- Heroicon name: outline/x -->
|
||||
<svg class="w-4 h-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
byMeCoffee: true
|
||||
}
|
||||
}
|
||||
};
|
||||
export default {};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -32,8 +32,12 @@
|
|||
<main id="main" class="flex flex-col flex-1 overflow-x-hidden lg:overflow-y-auto">
|
||||
<div class="container px-4 mx-auto sm:px-6 ">
|
||||
<div class="py-8 text-center md:py-16">
|
||||
<a href="/" class="inline-flex items-center text-xl font-bold text-gray-700 transition-colors duration-200 transform xl:hidden md:text-2xl hover:text-blue-500">
|
||||
<img class="w-8 h-8 mr-2" src="../assets/svg/logo-sidebar.svg" alt="logo"> Meraki <span class="text-blue-500">UI</span>
|
||||
</a>
|
||||
|
||||
<h1
|
||||
class="text-xl font-medium text-gray-700 sm:flex sm:items-center sm:justify-center lg:text-3xl"
|
||||
class="mt-2 text-xl font-medium text-gray-700 sm:flex sm:items-center sm:justify-center lg:text-3xl"
|
||||
>
|
||||
<span>Discover new components. Build amazing things. </span>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue