From 19511b9a10c829e2954d32571d002f77d2d058dc Mon Sep 17 00:00:00 2001
From: khatabwedaa <khatabwedaa@gmail.com>
Date: Tue, 19 Apr 2022 23:23:13 +0200
Subject: [PATCH] Fix broken components

---
 components/ui/Heros/CenterContent.vue | 16 +++++-----
 components/ui/Heros/WithBGImage.vue   |  2 +-
 components/ui/Heros/WithImage.vue     | 10 +++---
 layouts/default.vue                   | 45 +--------------------------
 pages/components.vue                  |  6 +++-
 5 files changed, 20 insertions(+), 59 deletions(-)

diff --git a/components/ui/Heros/CenterContent.vue b/components/ui/Heros/CenterContent.vue
index fcf0178..cf26db4 100644
--- a/components/ui/Heros/CenterContent.vue
+++ b/components/ui/Heros/CenterContent.vue
@@ -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>
         
diff --git a/components/ui/Heros/WithBGImage.vue b/components/ui/Heros/WithBGImage.vue
index 847bbb6..bb7ab6c 100644
--- a/components/ui/Heros/WithBGImage.vue
+++ b/components/ui/Heros/WithBGImage.vue
@@ -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>
diff --git a/components/ui/Heros/WithImage.vue b/components/ui/Heros/WithImage.vue
index b57fa8c..3d95773 100644
--- a/components/ui/Heros/WithImage.vue
+++ b/components/ui/Heros/WithImage.vue
@@ -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>
diff --git a/layouts/default.vue b/layouts/default.vue
index 5ecf163..009bfbd 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -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>
diff --git a/pages/components.vue b/pages/components.vue
index 0f5444e..9ac4958 100644
--- a/pages/components.vue
+++ b/pages/components.vue
@@ -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> &nbsp;