From e6ae61825ff91a92eda5624886665c00f278d86f Mon Sep 17 00:00:00 2001
From: khatabwedaa <khatabwedaa@gmail.com>
Date: Sat, 9 Jan 2021 13:24:53 +0200
Subject: [PATCH 1/8] =?UTF-8?q?Add=20ContactForm,=20SidebarWithSearch,=20H?=
 =?UTF-8?q?eroWithImage=20components=20=F0=9F=A7=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header.vue                 |   2 +-
 src/components/Main.vue                   |   7 +
 src/components/ui/Forms/Contact.vue       | 131 +++++++++++++++
 src/components/ui/Heros/WithImage.vue     | 192 ++++++++++++++++------
 src/components/ui/Heros/WithSideImage.vue | 114 +++++++++++++
 src/components/ui/Sidebars/WithSearch.vue | 151 +++++++++++++++++
 src/models/Components.js                  |  11 +-
 7 files changed, 558 insertions(+), 50 deletions(-)
 create mode 100644 src/components/ui/Forms/Contact.vue
 create mode 100644 src/components/ui/Heros/WithSideImage.vue
 create mode 100644 src/components/ui/Sidebars/WithSearch.vue

diff --git a/src/components/Header.vue b/src/components/Header.vue
index 7c54e56..d96f4d0 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -72,7 +72,7 @@
 export default {
     data() {
         return {
-            components_count: 43,
+            components_count: 46,
             SHARE_LINK: `https://twitter.com/intent/tweet?text=${encodeURIComponent(
             'Check out Meraki UI Awesome @tailwindcss Components that support RTL and fully responsive by @khatabwedaa and @miaababikir 🔥.'
             )}&url=${encodeURIComponent('https://merakiui.com')}`
diff --git a/src/components/Main.vue b/src/components/Main.vue
index 5a93018..04396c4 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -64,6 +64,7 @@ import DropdownsNotification from "./ui/Dropdowns/Notification";
 // Forms
 import FormsNewsletter from "./ui/Forms/Newsletter";
 import FormsSimple from "./ui/Forms/Simple";
+import FormsContact from "./ui/Forms/Contact";
 // Navbars
 import NavbarsECommerce from "./ui/Navbars/ECommerce";
 import NavbarsWithAvatar from "./ui/Navbars/WithAvatar";
@@ -72,8 +73,11 @@ import NavbarsWithSearch from "./ui/Navbars/WithSearch";
 // Heros
 import HerosECommerce from "./ui/Heros/ECommerce";
 import HerosWithImage from "./ui/Heros/WithImage";
+import HerosWithSideImage from "./ui/Heros/WithSideImage";
 import HerosWithBGImage from "./ui/Heros/WithBGImage";
 import HerosWithPattern from "./ui/Heros/WithPattern";
+// Sidebars
+import SidebarsWithSearch from "./ui/Sidebars/WithSearch";
 // Sections
 import SectionsAboutMe from "./ui/Sections/AboutMe";
 import SectionsFeature from "./ui/Sections/Feature";
@@ -118,14 +122,17 @@ export default {
         DropdownsNotification,
         FormsNewsletter,
         FormsSimple,
+        FormsContact,
         NavbarsECommerce,
         NavbarsWithAvatar,
         NavbarsWithCategories,
         NavbarsWithSearch,
         HerosECommerce,
         HerosWithImage,
+        HerosWithSideImage,
         HerosWithBGImage,
         HerosWithPattern,
+        SidebarsWithSearch,
         SectionsAboutMe,
         SectionsFeature,
         SectionsOurTeam,
diff --git a/src/components/ui/Forms/Contact.vue b/src/components/ui/Forms/Contact.vue
new file mode 100644
index 0000000..682c231
--- /dev/null
+++ b/src/components/ui/Forms/Contact.vue
@@ -0,0 +1,131 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="px-3 py-6" slot="component">
+            <div class="max-w-2xl w-full mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md px-6 py-4">
+                <h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-white">Get in touch</h2>
+                <p class="text-gray-600 dark:text-gray-400 text-center mt-3">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
+                
+                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 mt-6">
+                    <a href="#" class="flex flex-col items-center py-3 px-4 text-gray-700 dark:text-gray-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-500">
+                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
+                        </svg>
+
+                        <span class="mt-2">121 Street, NY</span>
+                    </a>
+
+                    <a href="#" class="flex flex-col items-center py-3 px-4 text-gray-700 dark:text-gray-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-500">
+                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                            <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
+                        </svg>
+
+                        <span class="mt-2">+2499999666600</span>
+                    </a>
+
+                    <a href="#" class="flex flex-col items-center py-3 px-4 text-gray-700 dark:text-gray-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-500">
+                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                            <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
+                            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
+                        </svg>
+
+                        <span class="mt-2">example@example.com</span>
+                    </a>
+                </div>
+                
+                <div class=" mt-6">
+                    <div class="md:flex items-center -mx-2">
+                        <div class="mx-2 w-full">
+                            <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2">Name</label>
+
+                            <input class="bg-wbg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="text">
+                        </div>
+
+                        <div class="mx-2 w-full mt-4 md:mt-0">
+                            <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2">E-mail</label>
+
+                            <input class="bg-wbg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email">
+                        </div>
+                    </div>
+
+                    <div class="mt-4 w-full">
+                        <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2">Message</label>
+
+                        <textarea class="bg-wbg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full h-40 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"></textarea>
+                    </div>
+
+                    <div class="flex justify-center mt-6">
+                        <button class="bg-gray-700 text-white py-2 px-4 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Send Message</button>
+                    </div>
+                </div>
+            </div>
+        </div>   
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Contact',
+                code: `
+        <div class="max-w-2xl w-full mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md px-6 py-4">
+            <h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-white">Get in touch</h2>
+            <p class="text-gray-600 dark:text-gray-400 text-center mt-3">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
+            
+            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 mt-6">
+                <a href="#" class="flex flex-col items-center py-3 px-4 text-gray-700 dark:text-gray-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-500">
+                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
+                    </svg>
+
+                    <span class="mt-2">121 Street, NY</span>
+                </a>
+
+                <a href="#" class="flex flex-col items-center py-3 px-4 text-gray-700 dark:text-gray-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-500">
+                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                        <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
+                    </svg>
+
+                    <span class="mt-2">+2499999666600</span>
+                </a>
+
+                <a href="#" class="flex flex-col items-center py-3 px-4 text-gray-700 dark:text-gray-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-500">
+                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                        <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
+                        <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
+                    </svg>
+
+                    <span class="mt-2">example@example.com</span>
+                </a>
+            </div>
+            
+            <div class=" mt-6">
+                <div class="md:flex items-center -mx-2">
+                    <div class="mx-2 w-full">
+                        <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2">Name</label>
+
+                        <input class="bg-wbg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="text">
+                    </div>
+
+                    <div class="mx-2 w-full mt-4 md:mt-0">
+                        <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2">E-mail</label>
+
+                        <input class="bg-wbg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email">
+                    </div>
+                </div>
+
+                <div class="mt-4 w-full">
+                    <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2">Message</label>
+
+                    <textarea class="bg-wbg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full h-40 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"></textarea>
+                </div>
+
+                <div class="flex justify-center mt-6">
+                    <button class="bg-gray-700 text-white py-2 px-4 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Send Message</button>
+                </div>
+            </div>
+        </div>`
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/components/ui/Heros/WithImage.vue b/src/components/ui/Heros/WithImage.vue
index e89137f..f99dfc0 100644
--- a/src/components/ui/Heros/WithImage.vue
+++ b/src/components/ui/Heros/WithImage.vue
@@ -2,50 +2,98 @@
     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <header class="bg-white dark:bg-gray-800">
-                <nav class="px-6 py-3 shadow">
-                    <div class="md:flex items-center justify-between">
+                <nav class="border-b dark:border-gray-700">
+                    <div class="container mx-auto px-6 py-4 md:flex md:justify-between md:items-center">
                         <div class="flex justify-between items-center">
                             <div>
-                                <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                            <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                             </div>
-                    
+                            
                             <!-- Mobile menu button -->
-                            <div class="md:hidden">
-                                <button type="button" @click="isOpen = !isOpen" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="Toggle menu">
+                            <div @click="isOpen = !isOpen" class="flex md:hidden">
+                                <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="Toggle menu">
                                     <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
                                         <path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
                                     </svg>
                                 </button>
                             </div>
                         </div>
-                    
+
                         <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
-                        <div :class="!isOpen ? 'hidden' : ''" class="flex flex-col -mx-2 mt-2 md:mt-0 md:flex-row md:block">
-                            <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
-                            <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
-                            <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
+                        <div :class="isOpen ? '' : 'hidden'" class="md:flex items-center">
+                            <div class="flex flex-col space-y-8 mt-4 md:flex-row md:items-center md:mt-0 md:space-y-0 md:space-x-16">
+                                <a class="block text-gray-700 dark:text-gray-200 font-medium hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">glasses Search</a>
+                                <a class="block text-gray-700 dark:text-gray-200 font-medium hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">How it works!</a>
+                                <a class="block text-gray-700 dark:text-gray-200 font-medium hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Why us?</a>
+                                <a class="block text-gray-700 dark:text-gray-200 font-medium hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Contact</a>
+
+                                <button class="flex items-center py-2 px-5 text-center capitalize tracking-wide text-sm bg-gray-700 text-white font-medium rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
+                                    Get in touch
+                                </button>
+                            </div>
                         </div>
                     </div>
                 </nav>
 
-                <div class="md:flex">
-                    <div class="flex items-center justify-center px-6 py-8 md:h-128 w-full md:w-1/2">
-                        <div class="max-w-xl">
-                            <h2 class="text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
-                                
-                            <p class="mt-2 text-sm text-gray-500 dark:text-gray-400 md:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p>
+                <div class="container mx-auto md:h-128 px-6 py-10 md:py-16 flex flex-col space-y-6 md:flex-row md:items-center md:space-x-6">
+                    <div class="w-full md:w-1/2">
+                        <div class="max-w-lg">
+                            <h1 class="text-gray-800 dark:text-white text-2xl font-medium md:text-4xl tracking-wide">Find your premium new glasses exported from US</h1>
+                            <p class="mt-2 text-gray-600 dark:text-gray-300">We work with the best remunated glasses dealers in US to find your new glasses.</p>
+                            <div class="mt-8 grid sm:grid-cols-2 gap-6">
+                                <div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
+                                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                    </svg>
 
-                            <div class="flex mt-6">
-                                <a href="#" class="px-3 py-2 block bg-gray-900 text-white text-xs font-semibold rounded hover:bg-gray-700">Get Started</a>
-                                <a href="#" class="mx-4 px-3 py-2 block bg-gray-200 text-gray-700 text-xs font-semibold rounded hover:bg-gray-300">Learn More</a>
+                                    <span>Premium selection</span>
+                                </div>
+
+                                <div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
+                                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                    </svg>
+
+                                    <span>Insurance</span>
+                                </div>
+
+                                <div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
+                                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                    </svg>
+
+                                    <span>All legal documents</span>
+                                </div>
+
+                                <div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
+                                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                    </svg>
+
+                                    <span>From US glasses dealers</span>
+                                </div>
+
+                                <div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
+                                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                    </svg>
+
+                                    <span>Payment Security</span>
+                                </div>
+
+                                <div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
+                                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                    </svg>
+
+                                    <span>Fast shipping (+ Express)</span>
+                                </div>
                             </div>
                         </div>
                     </div>
-                    
-                    <div class="w-full h-64 md:w-1/2 md:h-auto">
-                        <div class="h-full w-full bg-cover" style="background-image: url(https://images.unsplash.com/photo-1508394522741-82ac9c15ba69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80)">
-                            <div class="h-full w-full bg-black opacity-25"></div>
-                        </div>
+            
+                    <div class="flex items-center justify-center w-full h-72 md:w-1/2">
+                        <img class="max-w-2xl w-full h-full rounded object-cover" src="https://images.unsplash.com/photo-1590412732351-8afb84aa0dd4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="glasses photo">
                     </div>
                 </div>
             </header>
@@ -61,13 +109,13 @@
                 isOpen: false,
                 code: `
         <header class="bg-white dark:bg-gray-800">
-            <nav class="px-6 py-3 shadow">
-                <div class="md:flex items-center justify-between">
+            <nav class="border-b dark:border-gray-700">
+                <div class="container mx-auto px-6 py-4 md:flex md:justify-between md:items-center">
                     <div class="flex justify-between items-center">
                         <div>
-                            <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                        <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                         </div>
-                
+                        
                         <!-- Mobile menu button -->
                         <div class="md:hidden">
                             <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="Toggle menu">
@@ -77,34 +125,82 @@
                             </button>
                         </div>
                     </div>
-                
+
                     <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
-                    <div class="flex flex-col -mx-2 mt-2 md:mt-0 md:flex-row md:block">
-                        <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
-                        <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
-                        <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
+                    <div class="md:flex items-center">
+                        <div class="flex flex-col space-y-8 mt-4 md:flex-row md:items-center md:mt-0 md:space-y-0 md:space-x-16">
+                            <a class="block text-gray-700 dark:text-gray-200 font-medium hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">glasses Search</a>
+                            <a class="block text-gray-700 dark:text-gray-200 font-medium hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">How it works!</a>
+                            <a class="block text-gray-700 dark:text-gray-200 font-medium hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Why us?</a>
+                            <a class="block text-gray-700 dark:text-gray-200 font-medium hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Contact</a>
+
+                            <button class="flex items-center py-2 px-5 text-center capitalize tracking-wide text-sm bg-gray-700 text-white font-medium rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
+                                Get in touch
+                            </button>
+                        </div>
                     </div>
                 </div>
             </nav>
 
-            <div class="md:flex">
-                <div class="flex items-center justify-center px-6 py-8 md:h-128 w-full md:w-1/2">
-                    <div class="max-w-xl">
-                        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
-                            
-                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400 md:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p>
+            <div class="container mx-auto md:h-128 px-6 py-10 md:py-16 flex flex-col space-y-6 md:flex-row md:items-center md:space-x-6">
+                <div class="w-full md:w-1/2">
+                    <div class="max-w-lg">
+                        <h1 class="text-gray-800 dark:text-white text-2xl font-medium md:text-4xl tracking-wide">Find your premium new glasses exported from US</h1>
+                        <p class="mt-2 text-gray-600 dark:text-gray-300">We work with the best remunated glasses dealers in US to find your new glasses.</p>
+                        <div class="mt-8 grid sm:grid-cols-2 gap-6">
+                            <div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
+                                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                </svg>
 
-                        <div class="flex mt-6">
-                            <a href="#" class="px-3 py-2 block bg-gray-900 text-white text-xs font-semibold rounded hover:bg-gray-700">Get Started</a>
-                            <a href="#" class="mx-4 px-3 py-2 block bg-gray-200 text-gray-700 text-xs font-semibold rounded hover:bg-gray-300">Learn More</a>
+                                <span>Premium selection</span>
+                            </div>
+
+                            <div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
+                                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                </svg>
+
+                                <span>Insurance</span>
+                            </div>
+
+                            <div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
+                                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                </svg>
+
+                                <span>All legal documents</span>
+                            </div>
+
+                            <div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
+                                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                </svg>
+
+                                <span>From US glasses dealers</span>
+                            </div>
+
+                            <div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
+                                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                </svg>
+
+                                <span>Payment Security</span>
+                            </div>
+
+                            <div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
+                                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                </svg>
+
+                                <span>Fast shipping (+ Express)</span>
+                            </div>
                         </div>
                     </div>
                 </div>
-                
-                <div class="w-full h-64 md:w-1/2 md:h-auto">
-                    <div class="h-full w-full bg-cover" style="background-image: url(https://images.unsplash.com/photo-1508394522741-82ac9c15ba69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80)">
-                        <div class="h-full w-full bg-black opacity-25"></div>
-                    </div>
+        
+                <div class="flex items-center justify-center w-full h-72 md:w-1/2">
+                    <img class="max-w-2xl w-full h-full rounded object-cover" src="https://images.unsplash.com/photo-1590412732351-8afb84aa0dd4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="glasses photo">
                 </div>
             </div>
         </header>`,
diff --git a/src/components/ui/Heros/WithSideImage.vue b/src/components/ui/Heros/WithSideImage.vue
new file mode 100644
index 0000000..18967d3
--- /dev/null
+++ b/src/components/ui/Heros/WithSideImage.vue
@@ -0,0 +1,114 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <header class="bg-white dark:bg-gray-800">
+                <nav class="px-6 py-3 shadow">
+                    <div class="md:flex items-center justify-between">
+                        <div class="flex justify-between items-center">
+                            <div>
+                                <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                            </div>
+                    
+                            <!-- Mobile menu button -->
+                            <div class="md:hidden">
+                                <button type="button" @click="isOpen = !isOpen" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="Toggle menu">
+                                    <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                                        <path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+                    
+                        <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
+                        <div :class="!isOpen ? 'hidden' : ''" class="flex flex-col -mx-2 mt-2 md:mt-0 md:flex-row md:block">
+                            <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
+                            <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
+                            <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
+                        </div>
+                    </div>
+                </nav>
+
+                <div class="md:flex">
+                    <div class="flex items-center justify-center px-6 py-8 md:h-128 w-full md:w-1/2">
+                        <div class="max-w-xl">
+                            <h2 class="text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
+                                
+                            <p class="mt-2 text-sm text-gray-500 dark:text-gray-400 md:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p>
+
+                            <div class="flex mt-6">
+                                <a href="#" class="px-3 py-2 block bg-gray-900 text-white text-xs font-semibold rounded hover:bg-gray-700">Get Started</a>
+                                <a href="#" class="mx-4 px-3 py-2 block bg-gray-200 text-gray-700 text-xs font-semibold rounded hover:bg-gray-300">Learn More</a>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="w-full h-64 md:w-1/2 md:h-auto">
+                        <div class="h-full w-full bg-cover" style="background-image: url(https://images.unsplash.com/photo-1508394522741-82ac9c15ba69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80)">
+                            <div class="h-full w-full bg-black opacity-25"></div>
+                        </div>
+                    </div>
+                </div>
+            </header>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'With Side Image',
+                isOpen: false,
+                code: `
+        <header class="bg-white dark:bg-gray-800">
+            <nav class="px-6 py-3 shadow">
+                <div class="md:flex items-center justify-between">
+                    <div class="flex justify-between items-center">
+                        <div>
+                            <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                        </div>
+                
+                        <!-- Mobile menu button -->
+                        <div class="md:hidden">
+                            <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="Toggle menu">
+                                <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                                    <path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                
+                    <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
+                    <div class="flex flex-col -mx-2 mt-2 md:mt-0 md:flex-row md:block">
+                        <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
+                        <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
+                        <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
+                    </div>
+                </div>
+            </nav>
+
+            <div class="md:flex">
+                <div class="flex items-center justify-center px-6 py-8 md:h-128 w-full md:w-1/2">
+                    <div class="max-w-xl">
+                        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
+                            
+                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400 md:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p>
+
+                        <div class="flex mt-6">
+                            <a href="#" class="px-3 py-2 block bg-gray-900 text-white text-xs font-semibold rounded hover:bg-gray-700">Get Started</a>
+                            <a href="#" class="mx-4 px-3 py-2 block bg-gray-200 text-gray-700 text-xs font-semibold rounded hover:bg-gray-300">Learn More</a>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="w-full h-64 md:w-1/2 md:h-auto">
+                    <div class="h-full w-full bg-cover" style="background-image: url(https://images.unsplash.com/photo-1508394522741-82ac9c15ba69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80)">
+                        <div class="h-full w-full bg-black opacity-25"></div>
+                    </div>
+                </div>
+            </div>
+        </header>`,
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/components/ui/Sidebars/WithSearch.vue b/src/components/ui/Sidebars/WithSearch.vue
new file mode 100644
index 0000000..01fff97
--- /dev/null
+++ b/src/components/ui/Sidebars/WithSearch.vue
@@ -0,0 +1,151 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div slot="component">
+             <div class="flex flex-col w-64 h-screen bg-white dark:bg-gray-800 px-4 py-8">
+                <h2 class="text-3xl font-semibold text-gray-800 dark:text-white">Brand</h2>
+
+                <input class="mt-6 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="text" placeholder="Search" />
+                
+                <div class="flex flex-col justify-between flex-1 mt-6">
+                    <nav>
+                        <a class="flex items-center rounded py-2 px-4 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200" href="#">
+                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+
+                            <span class="mx-4 font-medium">Dashboard</span>
+                        </a>
+
+                        <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M12 14C8.13401 14 5 17.134 5 21H19C19 17.134 15.866 14 12 14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+
+                            <span class="mx-4 font-medium">Accounts</span>
+                        </a>
+
+                        <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+
+                            <span class="mx-4 font-medium">Tickets</span>
+                        </a>
+
+                        <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+
+                            <span class="mx-4 font-medium">Settings</span>
+                        </a>
+
+                        <hr class="my-6 dark:border-gray-600" />
+
+                        <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+
+                            <span class="mx-4 font-medium">Tickets</span>
+                        </a>
+
+                        <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+
+                            <span class="mx-4 font-medium">Settings</span>
+                        </a>
+                    </nav>
+
+                    <div class="flex items-center -mx-2 px-4">
+                        <img class="mx-2 h-9 w-9 rounded-full object-cover" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="avatar">
+                        <h4 class="mx-2 text-gray-800 dark:text-gray-200 font-medium hover:underline">John Doe</h4>
+                    </div>
+                </div>
+            </div>
+        </div>   
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'With Search',
+                code: `
+        <div class="flex flex-col w-64 h-screen bg-white dark:bg-gray-800 px-4 py-8">
+            <h2 class="text-3xl font-semibold text-gray-800 dark:text-white">Brand</h2>
+
+            <input class="mt-6 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="text" placeholder="Search" />
+            
+            <div class="flex flex-col justify-between flex-1 mt-6">
+                <nav>
+                    <a class="flex items-center rounded py-2 px-4 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200" href="#">
+                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+
+                        <span class="mx-4 font-medium">Dashboard</span>
+                    </a>
+
+                    <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        <path d="M12 14C8.13401 14 5 17.134 5 21H19C19 17.134 15.866 14 12 14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+
+                        <span class="mx-4 font-medium">Accounts</span>
+                    </a>
+
+                    <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+
+                        <span class="mx-4 font-medium">Tickets</span>
+                    </a>
+
+                    <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        <path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+
+                        <span class="mx-4 font-medium">Settings</span>
+                    </a>
+
+                    <hr class="my-6 dark:border-gray-600" />
+
+                    <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+
+                        <span class="mx-4 font-medium">Tickets</span>
+                    </a>
+
+                    <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        <path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+
+                        <span class="mx-4 font-medium">Settings</span>
+                    </a>
+                </nav>
+
+                <div class="flex items-center -mx-2 px-4">
+                    <img class="mx-2 h-9 w-9 rounded-full object-cover" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="avatar">
+                    <h4 class="mx-2 text-gray-800 dark:text-gray-200 font-medium hover:underline">John Doe</h4>
+                </div>
+            </div>
+        </div>`
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/models/Components.js b/src/models/Components.js
index 8564b45..f69addc 100644
--- a/src/models/Components.js
+++ b/src/models/Components.js
@@ -41,7 +41,11 @@ export default [
     },
     {
         name: "Forms",
-        components: [{ name: "Simple" }, { name: "Newsletter" }],
+        components: [
+            { name: "Simple" },
+            { name: "Contact" },
+            { name: "Newsletter" },
+        ],
     },
     {
         name: "Dropdowns",
@@ -61,10 +65,15 @@ export default [
         components: [
             { name: "ECommerce" },
             { name: "WithImage" },
+            { name: "WithSideImage" },
             { name: "WithBGImage" },
             { name: "WithPattern" },
         ],
     },
+    {
+        name: "Sidebars",
+        components: [{ name: "WithSearch" }],
+    },
     {
         name: "Sections",
         components: [

From 06054f76414da9f9803c35261894ec6bb333f5c4 Mon Sep 17 00:00:00 2001
From: khatabwedaa <khatabwedaa@gmail.com>
Date: Sat, 9 Jan 2021 13:27:51 +0200
Subject: [PATCH 2/8] wip

---
 src/components/ui/Forms/Contact.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/Forms/Contact.vue b/src/components/ui/Forms/Contact.vue
index 682c231..9efda0d 100644
--- a/src/components/ui/Forms/Contact.vue
+++ b/src/components/ui/Forms/Contact.vue
@@ -37,20 +37,20 @@
                         <div class="mx-2 w-full">
                             <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2">Name</label>
 
-                            <input class="bg-wbg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="text">
+                            <input class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="text">
                         </div>
 
                         <div class="mx-2 w-full mt-4 md:mt-0">
                             <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2">E-mail</label>
 
-                            <input class="bg-wbg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email">
+                            <input class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email">
                         </div>
                     </div>
 
                     <div class="mt-4 w-full">
                         <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2">Message</label>
 
-                        <textarea class="bg-wbg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full h-40 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"></textarea>
+                        <textarea class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full h-40 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"></textarea>
                     </div>
 
                     <div class="flex justify-center mt-6">
@@ -104,20 +104,20 @@
                     <div class="mx-2 w-full">
                         <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2">Name</label>
 
-                        <input class="bg-wbg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="text">
+                        <input class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="text">
                     </div>
 
                     <div class="mx-2 w-full mt-4 md:mt-0">
                         <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2">E-mail</label>
 
-                        <input class="bg-wbg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email">
+                        <input class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email">
                     </div>
                 </div>
 
                 <div class="mt-4 w-full">
                     <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2">Message</label>
 
-                    <textarea class="bg-wbg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full h-40 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"></textarea>
+                    <textarea class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full h-40 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"></textarea>
                 </div>
 
                 <div class="flex justify-center mt-6">

From 42440b987f4b368b479bd2dfb485334bff1d9804 Mon Sep 17 00:00:00 2001
From: khatabwedaa <khatabwedaa@gmail.com>
Date: Sun, 10 Jan 2021 10:27:04 +0200
Subject: [PATCH 3/8] Add pattern to header

---
 src/assets/css/custom-utilities.css |  4 ++
 src/assets/svg/hero-pattern.svg     |  1 +
 src/components/Header.vue           | 68 ++++++++++++++---------------
 3 files changed, 38 insertions(+), 35 deletions(-)
 create mode 100644 src/assets/svg/hero-pattern.svg

diff --git a/src/assets/css/custom-utilities.css b/src/assets/css/custom-utilities.css
index 0604f90..61f8c7d 100644
--- a/src/assets/css/custom-utilities.css
+++ b/src/assets/css/custom-utilities.css
@@ -2,6 +2,10 @@
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%23a0aec0' fill-opacity='0.1' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E");
 }
 
+.body-pattern {
+    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20.5V18H0v-2h20v-2H0v-2h20v-2H0V8h20V6H0V4h20V2H0V0h22v20h2V0h2v20h2V0h2v20h2V0h2v20h2V0h2v20h2v2H20v-1.5zM0 20h2v20H0V20zm4 0h2v20H4V20zm4 0h2v20H8V20zm4 0h2v20h-2V20zm4 0h2v20h-2V20zm4 4h20v2H20v-2zm0 4h20v2H20v-2zm0 4h20v2H20v-2zm0 4h20v2H20v-2z' fill='%2349494b' fill-opacity='0.04' fill-rule='evenodd'/%3E%3C/svg%3E");
+}
+
 ::-webkit-scrollbar {
     width: 7px;
     height: 7px;
diff --git a/src/assets/svg/hero-pattern.svg b/src/assets/svg/hero-pattern.svg
new file mode 100644
index 0000000..6f6cf46
--- /dev/null
+++ b/src/assets/svg/hero-pattern.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="400" width="400" viewBox="0 0 400 400"><g fill="none" fill-rule="evenodd"><polygon fill="#0C1E29" points="0 0 100 0 100 100 25 100 0 100"/><polygon fill="#0C1E29" points="200 0 400 0 400 200 250 200 200 200"/><polygon fill="#0C1E29" points="100 0 200 0 200 100 125 100 100 100"/><rect width="100" height="50" fill="#10222E"/><rect width="50" height="10" x="150" fill="#10222E"/><rect width="50" height="10" x="150" y="20" fill="#10222E"/><rect width="50" height="10" x="150" y="40" fill="#10222E"/><rect width="50" height="10" x="150" y="60" fill="#10222E"/><rect width="50" height="10" x="150" y="80" fill="#10222E"/><rect width="100" height="100" x="300" fill="#142936"/><rect width="50" height="50" x="300" y="50" fill="#0C1E29"/><rect width="50" height="50" x="350" fill="#0C1E29"/><polygon fill="#10222E" points="350 50 400 50 350 100"/><polygon fill="#142936" points="0 50 25 50 75 100 0 100"/><rect width="50" height="100" x="100" fill="#142936"/><rect width="100" height="100" x="200" y="100" fill="#10222E"/><rect width="100" height="100" y="100" fill="#0C1E29"/><rect width="100" height="100" y="200" fill="#10222E"/><rect width="100" height="100" y="300" fill="#10222E"/><rect width="100" height="100" x="100" y="300" fill="#10222E"/><rect width="200" height="5" y="305" fill="#142936"/><rect width="200" height="5" y="315" fill="#142936"/><rect width="200" height="5" y="325" fill="#142936"/><rect width="200" height="5" y="335" fill="#142936"/><rect width="200" height="5" y="345" fill="#142936"/><rect width="200" height="5" y="355" fill="#142936"/><rect width="200" height="5" y="365" fill="#142936"/><rect width="200" height="5" y="375" fill="#142936"/><rect width="200" height="5" y="385" fill="#142936"/><rect width="200" height="5" y="395" fill="#142936"/><path fill="#0C1E29" d="M0 400c0-55.23 44.77-100 100-100s100 44.77 100 100H0z"/><path fill="#10222E" d="M.5 390c.16-1.68.37-3.35.62-5h197.76c.25 1.65.46 3.32.63 5H.49zm-.38 5h199.76c.08 1.66.12 3.32.12 5H0c0-1.68.04-3.34.12-5zM2 380c.34-1.68.73-3.35 1.15-5h193.7c.42 1.65.8 3.32 1.15 5H2zm2.58-10c.53-1.69 1.1-3.35 1.72-5h187.4a99.23 99.23 0 0 1 1.72 5H4.58zm3.74-10c.74-1.7 1.52-3.36 2.35-5h178.66c.83 1.64 1.61 3.3 2.35 5H8.32zm5.06-10c.98-1.7 2.01-3.37 3.09-5h167.06c1.08 1.63 2.1 3.3 3.1 5H13.37zm6.61-10c1.29-1.71 2.63-3.38 4.01-5h152c1.38 1.62 2.72 3.29 4 5H20zm8.6-10c1.7-1.73 3.45-3.4 5.26-5h132.3c1.81 1.6 3.57 3.27 5.26 5H28.6zm11.4-10c2.36-1.77 4.8-3.44 7.3-5H152.7c2.52 1.56 4.95 3.23 7.31 5H39.99zm16.37-10a99.35 99.35 0 0 1 12.33-5h62.62a99.35 99.35 0 0 1 12.33 5H56.36z"/><path fill="#142936" d="M50 400a50 50 0 0 1 100 0H50z"/><path fill="#10222E" d="M75 400a25 25 0 1 1 50 0H75z"/><rect width="100" height="100" x="300" y="300" fill="#10222E"/><polygon fill="#0C1E29" points="350 350 400 350 400 400 300 400"/><rect width="100" height="100" x="200" y="300" fill="#0C1E29"/><rect width="100" height="100" x="300" y="200" fill="#0C1E29"/><polygon fill="#142936" points="350 250 350 200 300 250"/><rect width="100" height="100" x="200" y="200" fill="#10222E"/><path fill="#0C1E29" d="M290 200v100h-10V200h10zm-20 0v100h-10V200h10zm-20 0v100h-10V200h10zm-20 0v100h-10V200h10zm-20 0v100h-10V200h10z"/><rect width="50" height="2" x="350" y="250" fill="#142936"/><rect width="50" height="2" x="350" y="260" fill="#142936"/><rect width="50" height="2" x="350" y="270" fill="#142936"/><rect width="50" height="2" x="350" y="280" fill="#142936"/><rect width="50" height="2" x="350" y="290" fill="#142936"/><rect width="50" height="25" x="350" y="200" fill="#10222E"/><path fill="#142936" d="M292 200v100h-2V200h2zm-20 0v100h-2V200h2zm-20 0v100h-2V200h2zm-20 0v100h-2V200h2zm-20 0v100h-2V200h2z"/><path fill="#142936" d="M350 250v100a50 50 0 0 1 0-100z"/><path fill="#10222E" d="M300 300a50 50 0 0 1 50-50v50h-50z"/><path fill="#0C1E29" d="M100 300H0V200c55.23 0 100 44.77 100 100z"/><circle cx="12.5" cy="287.5" r="2.5" fill="#142936"/><circle cx="12.5" cy="272.5" r="2.5" fill="#142936"/><circle cx="12.5" cy="257.5" r="2.5" fill="#142936"/><circle cx="12.5" cy="242.5" r="2.5" fill="#142936"/><circle cx="12.5" cy="227.5" r="2.5" fill="#142936"/><circle cx="12.5" cy="212.5" r="2.5" fill="#142936"/><circle cx="27.5" cy="287.5" r="2.5" fill="#142936"/><circle cx="27.5" cy="272.5" r="2.5" fill="#142936"/><circle cx="27.5" cy="257.5" r="2.5" fill="#142936"/><circle cx="27.5" cy="242.5" r="2.5" fill="#142936"/><circle cx="27.5" cy="227.5" r="2.5" fill="#142936"/><circle cx="42.5" cy="287.5" r="2.5" fill="#142936"/><circle cx="42.5" cy="272.5" r="2.5" fill="#142936"/><circle cx="42.5" cy="257.5" r="2.5" fill="#142936"/><circle cx="42.5" cy="242.5" r="2.5" fill="#142936"/><circle cx="42.5" cy="227.5" r="2.5" fill="#142936"/><circle cx="57.5" cy="287.5" r="2.5" fill="#142936"/><circle cx="57.5" cy="272.5" r="2.5" fill="#142936"/><circle cx="57.5" cy="257.5" r="2.5" fill="#142936"/><circle cx="57.5" cy="242.5" r="2.5" fill="#142936"/><circle cx="72.5" cy="287.5" r="2.5" fill="#142936"/><circle cx="72.5" cy="272.5" r="2.5" fill="#142936"/><circle cx="72.5" cy="257.5" r="2.5" fill="#142936"/><circle cx="87.5" cy="287.5" r="2.5" fill="#142936"/><rect width="100" height="100" x="100" y="100" fill="#0C1E29"/><rect width="100" height="100" x="100" y="200" fill="#142936"/><polygon fill="#10222E" points="125 275 175 225 225 275" transform="rotate(-90 175 250)"/><polygon fill="#0C1E29" points="75 275 125 225 175 275" transform="rotate(-90 125 250)"/><polygon fill="#10222E" points="100 100 200 100 100 200"/><polygon fill="#10222E" points="300 100 400 200 400 100"/><polygon fill="#142936" points="350 150 400 200 300 200"/><circle cx="115" cy="20" r="5" fill="#10222E"/><circle cx="135" cy="20" r="5" fill="#10222E"/><circle cx="115" cy="40" r="5" fill="#10222E"/><circle cx="135" cy="40" r="5" fill="#10222E"/><circle cx="115" cy="60" r="5" fill="#10222E"/><circle cx="135" cy="60" r="5" fill="#10222E"/><circle cx="115" cy="80" r="5" fill="#10222E"/><circle cx="135" cy="80" r="5" fill="#10222E"/><circle cx="235" cy="335" r="5" fill="#142936"/><circle cx="265" cy="335" r="5" fill="#142936"/><circle cx="235" cy="365" r="5" fill="#142936"/><circle cx="265" cy="365" r="5" fill="#142936"/><path fill="#0C1E29" d="M200 0c55.23 0 100 44.77 100 100s-44.77 100-100 100V0z"/><path fill="#10222E" d="M300 100H200V0c55.23 0 100 44.77 100 100z"/><path fill="#142936" fill-rule="nonzero" d="M200 13a87 87 0 0 1 0 174v-4a83 83 0 0 0 0-166v-4zm0 20a67 67 0 0 1 0 134v-4a63 63 0 0 0 0-126v-4zm0 20a47 47 0 0 1 0 94v-4a43 43 0 0 0 0-86v-4zm0 20a27 27 0 0 1 0 54v-4a23 23 0 0 0 0-46v-4z"/><circle cx="325" cy="75" r="10" fill="#142936"/><rect width="25" height="50" x="300" fill="#10222E"/><rect width="2" height="100" y="100" fill="#142936"/><rect width="2" height="100" x="10" y="100" fill="#142936"/><rect width="2" height="100" x="20" y="100" fill="#142936"/><rect width="2" height="100" x="30" y="100" fill="#142936"/><rect width="2" height="100" x="40" y="100" fill="#142936"/><rect width="2" height="100" x="50" y="100" fill="#142936"/><rect width="2" height="100" x="60" y="100" fill="#142936"/><rect width="2" height="100" x="70" y="100" fill="#142936"/><rect width="2" height="100" x="80" y="100" fill="#142936"/><rect width="2" height="100" x="90" y="100" fill="#142936"/><circle cx="150" cy="150" r="30" fill="#142936"/><circle cx="150" cy="150" r="26" fill="#10222E"/><path fill="#0C1E29" d="M131.62 168.38a26 26 0 1 1 36.76-36.76l-36.76 36.76z"/></g></svg>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index d96f4d0..0a2bcd4 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,5 +1,5 @@
 <template>
-    <header class="bg-gray-800 dark:bg-gray-900 border-b-4 border-blue-500">
+    <header class="bg-gray-900 pattern border-b-4 border-blue-500">
         <nav>
             <div class="container mx-auto px-6 py-4">
                 <div class="flex justify-between items-center">
@@ -20,47 +20,45 @@
             </div>
         </nav>
 
-        <div>
-            <div class="container mx-auto px-6 py-8 md:py-0">
-                <div class="md:flex">
-                    <div class="flex items-center w-full md:w-1/2 md:h-112">
-                        <div class="max-w-lg text-white">
-                            <div class="text-xs font-light">Simple UI Starter</div>
+        <div class="container mx-auto px-6 py-8 md:py-0">
+            <div class="md:flex">
+                <div class="flex items-center w-full md:w-1/2 md:h-128">
+                    <div class="max-w-lg text-white">
+                        <div class="text-xs font-light">Simple UI Starter</div>
 
-                            <h1 class="font-semibold text-2xl mt-3 text-white md:text-3xl">Meraki <span class="text-blue-400">UI </span> Components</h1>
-                            
-                            <p class="mt-3 text-gray-300">
-                                Beautiful <a href="https://tailwindcss.com" class="text-blue-400 hover:underline font-normal">Tailwindcss</a> 
-                                components that support RTL languages & fully responsive based on Flexbox & CSS Grid. Built by 
-                                <a href="https://twitter.com/khatabwedaa" class="text-blue-400 hover:underline">@khatabwedaa</a> &
-                                <a href="https://twitter.com/miaababikir" class="text-blue-400 hover:underline">@miaababikir</a>
-                            </p>
+                        <h1 class="font-semibold text-2xl mt-3 text-white md:text-3xl">Meraki <span class="text-blue-400">UI </span> Components</h1>
+                        
+                        <p class="mt-3 text-gray-300">
+                            Beautiful <a href="https://tailwindcss.com" class="text-blue-400 hover:underline font-normal">Tailwindcss</a> 
+                            components that support RTL languages & fully responsive based on Flexbox & CSS Grid. Built by 
+                            <a href="https://twitter.com/khatabwedaa" class="text-blue-400 hover:underline">@khatabwedaa</a> &
+                            <a href="https://twitter.com/miaababikir" class="text-blue-400 hover:underline">@miaababikir</a>
+                        </p>
 
-                            <div class="flex flex-wrap items-center mt-4">
-                                <a class="flex text-white hover:underline cursor-pointer">
-                                    <svg class="h-5 w-5 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                        <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" />
-                                    </svg>
+                        <div class="flex flex-wrap items-center mt-4">
+                            <a class="flex text-white hover:underline cursor-pointer">
+                                <svg class="h-5 w-5 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" />
+                                </svg>
 
-                                    <p class="mx-2 text-sm">{{ components_count }} Components</p>
-                                </a>
+                                <p class="mx-2 text-sm">{{ components_count }} Components</p>
+                            </a>
 
-                                <a class="flex text-white hover:underline ml-2" href="https://github.com/merakiui/merakiui/blob/master/LICENSE">
-                                    <svg class="h-5 w-5 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                        <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1.323l3.954 1.582 1.599-.8a1 1 0 01.894 1.79l-1.233.616 1.738 5.42a1 1 0 01-.285 1.05A3.989 3.989 0 0115 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.715-5.349L11 6.477V16h2a1 1 0 110 2H7a1 1 0 110-2h2V6.477L6.237 7.582l1.715 5.349a1 1 0 01-.285 1.05A3.989 3.989 0 015 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.738-5.42-1.233-.617a1 1 0 01.894-1.788l1.599.799L9 4.323V3a1 1 0 011-1zm-5 8.274l-.818 2.552c.25.112.526.174.818.174.292 0 .569-.062.818-.174L5 10.274zm10 0l-.818 2.552c.25.112.526.174.818.174.292 0 .569-.062.818-.174L15 10.274z" clip-rule="evenodd" />
-                                    </svg>
-
-                                    <p class="mx-2 text-sm">MIT Licensed</p>
-                                </a>
-                            </div>
+                            <a class="flex text-white hover:underline ml-2" href="https://github.com/merakiui/merakiui/blob/master/LICENSE">
+                                <svg class="h-5 w-5 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1.323l3.954 1.582 1.599-.8a1 1 0 01.894 1.79l-1.233.616 1.738 5.42a1 1 0 01-.285 1.05A3.989 3.989 0 0115 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.715-5.349L11 6.477V16h2a1 1 0 110 2H7a1 1 0 110-2h2V6.477L6.237 7.582l1.715 5.349a1 1 0 01-.285 1.05A3.989 3.989 0 015 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.738-5.42-1.233-.617a1 1 0 01.894-1.788l1.599.799L9 4.323V3a1 1 0 011-1zm-5 8.274l-.818 2.552c.25.112.526.174.818.174.292 0 .569-.062.818-.174L5 10.274zm10 0l-.818 2.552c.25.112.526.174.818.174.292 0 .569-.062.818-.174L15 10.274z" clip-rule="evenodd" />
+                                </svg>
 
+                                <p class="mx-2 text-sm">MIT Licensed</p>
+                            </a>
                         </div>
+
                     </div>
-                    
-                    <div class="mt-6 w-full md:w-1/2 flex justify-center md:justify-end items-center md:mt-0">
-                        <div class="w-full max-w-md">
-                            <img src="../assets/svg/Responsive-bro.svg" alt="moon">
-                        </div>
+                </div>
+                
+                <div class="mt-6 w-full md:w-1/2 flex justify-center md:justify-end items-center md:mt-0">
+                    <div class="w-full max-w-md">
+                        <img src="../assets/svg/Responsive-bro.svg" alt="moon">
                     </div>
                 </div>
             </div>

From 5f3821cb6b1ae1f3bab302c24aebb660006121b6 Mon Sep 17 00:00:00 2001
From: khatabwedaa <khatabwedaa@gmail.com>
Date: Mon, 18 Jan 2021 14:40:32 +0200
Subject: [PATCH 4/8] Update styles

---
 src/assets/css/custom-utilities.css                     | 4 ----
 src/components/ui/Authentication/LoginWithSideImage.vue | 4 ++--
 src/components/ui/Buttons/Primary.vue                   | 4 ++--
 src/components/ui/Dropdowns/Notification.vue            | 2 +-
 src/components/ui/Heros/WithImage.vue                   | 8 ++++----
 src/components/ui/Heros/WithPattern.vue                 | 7 +++++++
 src/components/ui/Navbars/ECommerce.vue                 | 2 +-
 src/components/ui/Navbars/WithAvatar.vue                | 2 +-
 src/components/ui/Navbars/WithCategories.vue            | 2 +-
 src/components/ui/Navbars/WithSearch.vue                | 2 +-
 tailwind.config.js                                      | 3 ---
 11 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/assets/css/custom-utilities.css b/src/assets/css/custom-utilities.css
index 61f8c7d..0604f90 100644
--- a/src/assets/css/custom-utilities.css
+++ b/src/assets/css/custom-utilities.css
@@ -2,10 +2,6 @@
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%23a0aec0' fill-opacity='0.1' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E");
 }
 
-.body-pattern {
-    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20.5V18H0v-2h20v-2H0v-2h20v-2H0V8h20V6H0V4h20V2H0V0h22v20h2V0h2v20h2V0h2v20h2V0h2v20h2V0h2v20h2v2H20v-1.5zM0 20h2v20H0V20zm4 0h2v20H4V20zm4 0h2v20H8V20zm4 0h2v20h-2V20zm4 0h2v20h-2V20zm4 4h20v2H20v-2zm0 4h20v2H20v-2zm0 4h20v2H20v-2zm0 4h20v2H20v-2z' fill='%2349494b' fill-opacity='0.04' fill-rule='evenodd'/%3E%3C/svg%3E");
-}
-
 ::-webkit-scrollbar {
     width: 7px;
     height: 7px;
diff --git a/src/components/ui/Authentication/LoginWithSideImage.vue b/src/components/ui/Authentication/LoginWithSideImage.vue
index ccd3512..0731094 100644
--- a/src/components/ui/Authentication/LoginWithSideImage.vue
+++ b/src/components/ui/Authentication/LoginWithSideImage.vue
@@ -70,7 +70,7 @@
                 name: 'Login With Side Image',
                 code: `
         <div class="flex max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden lg:max-w-4xl">
-            <div class="hidden lg:block lg:w-1/2 bg-cover" style="background-image:url('https://images.unsplash.com/photo-1602610411365-76e8c2a88e18?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=333&q=80')"></div>
+            <div class="hidden lg:block lg:w-1/2 bg-cover" style="background-image:url('https://images.unsplash.com/photo-1606660265514-358ebbadc80d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1575&q=80')"></div>
             
             <div class="w-full py-8 px-6 md:px-8 lg:w-1/2">
                 <h2 class="text-2xl font-semibold text-gray-700 dark:text-white text-center">Brand</h2>
@@ -109,7 +109,7 @@
                         <a href="#" class="text-xs text-gray-500 dark:text-gray-300 hover:underline">Forget Password?</a>
                     </div>
 
-                    <input id="loggingPassword" class="bg-wbg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password">
+                    <input id="loggingPassword" class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password">
                 </div>
 
                 <div class="mt-8">
diff --git a/src/components/ui/Buttons/Primary.vue b/src/components/ui/Buttons/Primary.vue
index 296e87f..582e495 100644
--- a/src/components/ui/Buttons/Primary.vue
+++ b/src/components/ui/Buttons/Primary.vue
@@ -1,7 +1,7 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-8 flex items-center justify-center" slot="component">
-            <button class="flex items-center py-2 px-4 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
+            <button class="py-2 px-4 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
                 Primary
             </button>
         </div>
@@ -14,7 +14,7 @@
             return {
                 name: 'Primary',
                 code: `
-        <button class="flex items-center py-2 px-4 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
+        <button class="py-2 px-4 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
             Primary
         </button>`
             }
diff --git a/src/components/ui/Dropdowns/Notification.vue b/src/components/ui/Dropdowns/Notification.vue
index 8b71428..b065fcf 100644
--- a/src/components/ui/Dropdowns/Notification.vue
+++ b/src/components/ui/Dropdowns/Notification.vue
@@ -59,7 +59,7 @@
             </button>
 
             <!-- Dropdown menu -->
-            <div class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg overflow-hidden z-20" style="width:20rem;">
+            <div class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg overflow-hidden z-20">
                 <div class="py-2">
                     <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700 -mx-2">
                         <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
diff --git a/src/components/ui/Heros/WithImage.vue b/src/components/ui/Heros/WithImage.vue
index f99dfc0..6b127dd 100644
--- a/src/components/ui/Heros/WithImage.vue
+++ b/src/components/ui/Heros/WithImage.vue
@@ -92,8 +92,8 @@
                         </div>
                     </div>
             
-                    <div class="flex items-center justify-center w-full h-72 md:w-1/2">
-                        <img class="max-w-2xl w-full h-full rounded object-cover" src="https://images.unsplash.com/photo-1590412732351-8afb84aa0dd4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="glasses photo">
+                    <div class="flex items-center justify-center w-full h-96 md:w-1/2">
+                        <img class="max-w-2xl w-full h-full rounded object-cover" src="https://images.unsplash.com/photo-1555181126-cf46a03827c0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="glasses photo">
                     </div>
                 </div>
             </header>
@@ -199,8 +199,8 @@
                     </div>
                 </div>
         
-                <div class="flex items-center justify-center w-full h-72 md:w-1/2">
-                    <img class="max-w-2xl w-full h-full rounded object-cover" src="https://images.unsplash.com/photo-1590412732351-8afb84aa0dd4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="glasses photo">
+                <div class="flex items-center justify-center w-full h-96 md:w-1/2">
+                    <img class="max-w-2xl w-full h-full rounded object-cover" src="https://images.unsplash.com/photo-1555181126-cf46a03827c0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="glasses photo">
                 </div>
             </div>
         </header>`,
diff --git a/src/components/ui/Heros/WithPattern.vue b/src/components/ui/Heros/WithPattern.vue
index 336b2e6..be18bac 100644
--- a/src/components/ui/Heros/WithPattern.vue
+++ b/src/components/ui/Heros/WithPattern.vue
@@ -58,6 +58,13 @@
             return {
                 name: 'With Pattern',
                 code: `
+        <!-- Require css -->
+        <style>
+        .pattern {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%23a0aec0' fill-opacity='0.1' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E");
+        }
+        </style>
+
         <header class="pattern bg-gray-900">
             <div class="container mx-auto px-6">
                 <nav class="flex flex-col py-2 sm:flex-row sm:justify-between sm:items-center">
diff --git a/src/components/ui/Navbars/ECommerce.vue b/src/components/ui/Navbars/ECommerce.vue
index a40d148..9623ae1 100644
--- a/src/components/ui/Navbars/ECommerce.vue
+++ b/src/components/ui/Navbars/ECommerce.vue
@@ -57,7 +57,7 @@
                     
                     <!-- Mobile menu button -->
                     <div class="flex md:hidden">
-                        <button type="button" class=""text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
+                        <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
                             <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
                                 <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
                             </svg>
diff --git a/src/components/ui/Navbars/WithAvatar.vue b/src/components/ui/Navbars/WithAvatar.vue
index fefb666..a906066 100644
--- a/src/components/ui/Navbars/WithAvatar.vue
+++ b/src/components/ui/Navbars/WithAvatar.vue
@@ -77,7 +77,7 @@
                     </div>
 
                     <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
-                    <div class="hidden md:flex md:items-center md:justify-between flex-1">
+                    <div class="md:flex md:items-center md:justify-between flex-1">
                         <div class="flex flex-col -mx-4 md:flex-row md:items-center md:mx-8">
                             <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Join Slack</a>
                             <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Browse Topics</a>
diff --git a/src/components/ui/Navbars/WithCategories.vue b/src/components/ui/Navbars/WithCategories.vue
index fef38c5..8dd54b5 100644
--- a/src/components/ui/Navbars/WithCategories.vue
+++ b/src/components/ui/Navbars/WithCategories.vue
@@ -112,7 +112,7 @@
                     </div>
 
                     <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
-                    <div class="hidden md:flex items-center">
+                    <div class="md:flex items-center">
                         <div class="flex flex-col mt-2 md:flex-row md:mt-0 md:mx-1">
                             <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Home</a>
                             <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Blog</a>
diff --git a/src/components/ui/Navbars/WithSearch.vue b/src/components/ui/Navbars/WithSearch.vue
index 678bc33..527f113 100644
--- a/src/components/ui/Navbars/WithSearch.vue
+++ b/src/components/ui/Navbars/WithSearch.vue
@@ -61,7 +61,7 @@
                 </div>
 
                 <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
-                <div class="w-full hidden md:flex md:items-center md:justify-between">
+                <div class="w-full md:flex md:items-center md:justify-between">
                     <div class="flex flex-col -mx-4 px-2 py-3 md:flex-row md:mx-0 md:py-0">
                         <a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">Home</a>
                         <a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">About</a>
diff --git a/tailwind.config.js b/tailwind.config.js
index 1f5f3c8..9ea1de1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,9 +7,6 @@ module.exports = {
                 roboto: ["Roboto"],
             },
             spacing: {
-                80: "20rem",
-                96: "24rem",
-                112: "28rem",
                 128: "32rem",
             },
         },

From 80f89a81a4e03627423dba3dc62d8de472090fc7 Mon Sep 17 00:00:00 2001
From: khatabwedaa <khatabwedaa@gmail.com>
Date: Wed, 27 Jan 2021 19:17:04 +0200
Subject: [PATCH 5/8] Change dark mode key name

---
 src/App.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 0618607..a5fc435 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -35,7 +35,7 @@ export default {
 
     data() {
         return {
-            darkMode: JSON.parse(localStorage.getItem("merakiuiDarkMode")) || false,
+            darkMode: JSON.parse(localStorage.getItem("darkMode")) || false,
             og: "https://merakiui.com" + require("./assets/merakiui-og.png"),
         };
     },
@@ -70,7 +70,7 @@ export default {
 
     watch: {
 		darkMode() {
-			localStorage.setItem("merakiuiDarkMode", this.darkMode);
+			localStorage.setItem("darkMode", this.darkMode);
 			console.log('Night Mode: ' + this.darkMode);
 		}
 	},

From 0d4a61c1b80e31af644b48938074bb68025bfac3 Mon Sep 17 00:00:00 2001
From: khatabwedaa <khatabwedaa@gmail.com>
Date: Wed, 27 Jan 2021 19:51:57 +0200
Subject: [PATCH 6/8] Add with avatar sidebar

---
 src/components/Main.vue                   |   2 +
 src/components/ui/Sidebars/WithAvatar.vue | 111 ++++++++++++++++++++++
 src/components/ui/Sidebars/WithSearch.vue |   4 +-
 src/models/Components.js                  |   2 +-
 4 files changed, 116 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ui/Sidebars/WithAvatar.vue

diff --git a/src/components/Main.vue b/src/components/Main.vue
index 8013d8c..bff383f 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -83,6 +83,7 @@ import HerosWithBGImage from "./ui/Heros/WithBGImage";
 import HerosWithPattern from "./ui/Heros/WithPattern";
 // Sidebars
 import SidebarsWithSearch from "./ui/Sidebars/WithSearch";
+import SidebarsWithAvatar from "./ui/Sidebars/WithAvatar";
 // Sections
 import SectionsAboutMe from "./ui/Sections/AboutMe";
 import SectionsFeature from "./ui/Sections/Feature";
@@ -137,6 +138,7 @@ export default {
         HerosWithSideImage,
         HerosWithBGImage,
         HerosWithPattern,
+        SidebarsWithAvatar,
         SidebarsWithSearch,
         SectionsAboutMe,
         SectionsFeature,
diff --git a/src/components/ui/Sidebars/WithAvatar.vue b/src/components/ui/Sidebars/WithAvatar.vue
new file mode 100644
index 0000000..c1b62e2
--- /dev/null
+++ b/src/components/ui/Sidebars/WithAvatar.vue
@@ -0,0 +1,111 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div slot="component">
+            <div class="flex flex-col w-64 h-screen border-r bg-white dark:bg-gray-800 dark:border-gray-600 py-8">
+                <h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-white">Brand</h2>
+
+                <div class="flex flex-col items-center -mx-2 mt-6">
+                    <img class="mx-2 h-24 w-24 rounded-full object-cover" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="avatar">
+                    <h4 class="mt-2 mx-2 text-gray-800 dark:text-gray-200 font-medium hover:underline">John Doe</h4>
+                    <p class="mt-1 mx-2 text-gray-600 dark:text-gray-400 text-sm font-medium hover:underline">john@example.com</p>
+                </div>
+                
+                <div class="flex flex-col justify-between flex-1 mt-6">
+                    <nav>
+                        <a class="flex items-center  py-2 px-4 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200" href="#">
+                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+
+                            <span class="mx-4 font-medium">Dashboard</span>
+                        </a>
+
+                        <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400  hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M12 14C8.13401 14 5 17.134 5 21H19C19 17.134 15.866 14 12 14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+
+                            <span class="mx-4 font-medium">Accounts</span>
+                        </a>
+
+                        <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400  hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+
+                            <span class="mx-4 font-medium">Tickets</span>
+                        </a>
+
+                        <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400  hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+
+                            <span class="mx-4 font-medium">Settings</span>
+                        </a>
+                    </nav>
+                </div>
+            </div>
+        </div>   
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'With Avatar',
+                code: `
+        <div class="flex flex-col w-64 h-screen border-r bg-white dark:bg-gray-800 dark:border-gray-600 py-8">
+            <h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-white">Brand</h2>
+
+            <div class="flex flex-col items-center -mx-2 mt-6">
+                <img class="mx-2 h-24 w-24 rounded-full object-cover" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="avatar">
+                <h4 class="mt-2 mx-2 text-gray-800 dark:text-gray-200 font-medium hover:underline">John Doe</h4>
+                <p class="mt-1 mx-2 text-gray-600 dark:text-gray-400 text-sm font-medium hover:underline">john@example.com</p>
+            </div>
+            
+            <div class="flex flex-col justify-between flex-1 mt-6">
+                <nav>
+                    <a class="flex items-center  py-2 px-4 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200" href="#">
+                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+
+                        <span class="mx-4 font-medium">Dashboard</span>
+                    </a>
+
+                    <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400  hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        <path d="M12 14C8.13401 14 5 17.134 5 21H19C19 17.134 15.866 14 12 14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+
+                        <span class="mx-4 font-medium">Accounts</span>
+                    </a>
+
+                    <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400  hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+
+                        <span class="mx-4 font-medium">Tickets</span>
+                    </a>
+
+                    <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400  hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        <path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+
+                        <span class="mx-4 font-medium">Settings</span>
+                    </a>
+                </nav>
+            </div>
+        </div>`
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/components/ui/Sidebars/WithSearch.vue b/src/components/ui/Sidebars/WithSearch.vue
index 01fff97..525bdef 100644
--- a/src/components/ui/Sidebars/WithSearch.vue
+++ b/src/components/ui/Sidebars/WithSearch.vue
@@ -1,7 +1,7 @@
 <template>
     <view-component :name="name" :code="code">
         <div slot="component">
-             <div class="flex flex-col w-64 h-screen bg-white dark:bg-gray-800 px-4 py-8">
+             <div class="flex flex-col w-64 h-screen border-r bg-white dark:bg-gray-800 dark:border-gray-600 px-4 py-8">
                 <h2 class="text-3xl font-semibold text-gray-800 dark:text-white">Brand</h2>
 
                 <input class="mt-6 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="text" placeholder="Search" />
@@ -78,7 +78,7 @@
             return {
                 name: 'With Search',
                 code: `
-        <div class="flex flex-col w-64 h-screen bg-white dark:bg-gray-800 px-4 py-8">
+        <div class="flex flex-col w-64 h-screen border-r bg-white dark:bg-gray-800 dark:border-gray-600 px-4 py-8">
             <h2 class="text-3xl font-semibold text-gray-800 dark:text-white">Brand</h2>
 
             <input class="mt-6 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="text" placeholder="Search" />
diff --git a/src/models/Components.js b/src/models/Components.js
index f69addc..f514f89 100644
--- a/src/models/Components.js
+++ b/src/models/Components.js
@@ -72,7 +72,7 @@ export default [
     },
     {
         name: "Sidebars",
-        components: [{ name: "WithSearch" }],
+        components: [{ name: "WithSearch" }, { name: "WithAvatar" }],
     },
     {
         name: "Sections",

From 9eb517d299c3868d08853154b41ec87948a69ded Mon Sep 17 00:00:00 2001
From: khatabwedaa <khatabwedaa@gmail.com>
Date: Fri, 29 Jan 2021 11:49:01 +0200
Subject: [PATCH 7/8] Add form search, simple newsletter & fix forms components

---
 src/components/Header.vue                    |  2 +-
 src/components/Main.vue                      |  4 +
 src/components/ui/Forms/Contact.vue          |  8 +-
 src/components/ui/Forms/Newsletter.vue       |  8 +-
 src/components/ui/Forms/Search.vue           | 96 ++++++++++++++++++++
 src/components/ui/Forms/Simple.vue           |  8 +-
 src/components/ui/Forms/SimpleNewsletter.vue | 45 +++++++++
 src/models/Components.js                     |  2 +
 8 files changed, 160 insertions(+), 13 deletions(-)
 create mode 100644 src/components/ui/Forms/Search.vue
 create mode 100644 src/components/ui/Forms/SimpleNewsletter.vue

diff --git a/src/components/Header.vue b/src/components/Header.vue
index 7bacd9d..a0817ab 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -70,7 +70,7 @@
 export default {
     data() {
         return {
-            components_count: 46,
+            components_count: 49,
             SHARE_LINK: `https://twitter.com/intent/tweet?text=${encodeURIComponent(
             'Check out Meraki UI Awesome @tailwindcss Components that support RTL and fully responsive by @khatabwedaa and @miaababikir 🔥.'
             )}&url=${encodeURIComponent('https://merakiui.com')}`
diff --git a/src/components/Main.vue b/src/components/Main.vue
index bff383f..7c27f19 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -68,7 +68,9 @@ import DropdownsSimple from "./ui/Dropdowns/Simple";
 import DropdownsNotification from "./ui/Dropdowns/Notification";
 // Forms
 import FormsNewsletter from "./ui/Forms/Newsletter";
+import FormsSimpleNewsletter from "./ui/Forms/SimpleNewsletter";
 import FormsSimple from "./ui/Forms/Simple";
+import FormsSearch from "./ui/Forms/Search";
 import FormsContact from "./ui/Forms/Contact";
 // Navbars
 import NavbarsECommerce from "./ui/Navbars/ECommerce";
@@ -127,7 +129,9 @@ export default {
         DropdownsSimple,
         DropdownsNotification,
         FormsNewsletter,
+        FormsSimpleNewsletter,
         FormsSimple,
+        FormsSearch,
         FormsContact,
         NavbarsECommerce,
         NavbarsWithAvatar,
diff --git a/src/components/ui/Forms/Contact.vue b/src/components/ui/Forms/Contact.vue
index 9efda0d..69fd5f7 100644
--- a/src/components/ui/Forms/Contact.vue
+++ b/src/components/ui/Forms/Contact.vue
@@ -1,7 +1,7 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="max-w-2xl w-full mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md px-6 py-4">
+            <section class="max-w-2xl w-full mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md px-6 py-4">
                 <h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-white">Get in touch</h2>
                 <p class="text-gray-600 dark:text-gray-400 text-center mt-3">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
                 
@@ -57,7 +57,7 @@
                         <button class="bg-gray-700 text-white py-2 px-4 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Send Message</button>
                     </div>
                 </div>
-            </div>
+            </section>
         </div>   
     </view-component>
 </template>
@@ -68,7 +68,7 @@
             return {
                 name: 'Contact',
                 code: `
-        <div class="max-w-2xl w-full mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md px-6 py-4">
+        <section class="max-w-2xl w-full mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md px-6 py-4">
             <h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-white">Get in touch</h2>
             <p class="text-gray-600 dark:text-gray-400 text-center mt-3">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
             
@@ -124,7 +124,7 @@
                     <button class="bg-gray-700 text-white py-2 px-4 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Send Message</button>
                 </div>
             </div>
-        </div>`
+        </section>`
             }
         }
     }
diff --git a/src/components/ui/Forms/Newsletter.vue b/src/components/ui/Forms/Newsletter.vue
index 85a226a..e54ded3 100644
--- a/src/components/ui/Forms/Newsletter.vue
+++ b/src/components/ui/Forms/Newsletter.vue
@@ -1,7 +1,7 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="flex flex-col max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48">
+            <section class="flex flex-col max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48">
                 <div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700 md:dark:bg-gray-800">
                     <div class="py-6 px-6 md:px-8 md:py-0">
                         <h2 class="text-gray-700 dark:text-white text-lg font-bold md:text-gray-100">Sign Up For <span class="text-blue-600 dark:text-blue-400 md:text-blue-300">Project</span> Updates</h2>
@@ -19,7 +19,7 @@
                         </div>
                     </form>
                 </div>
-            </div>
+            </section>
         </div>   
     </view-component>
 </template>
@@ -30,7 +30,7 @@
             return {
                 name: 'Newsletter',
                 code: `
-        <div class="flex flex-col max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48">
+        <section class="flex flex-col max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48">
             <div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700 md:dark:bg-gray-800">
                 <div class="py-6 px-6 md:px-8 md:py-0">
                     <h2 class="text-gray-700 dark:text-white text-lg font-bold md:text-gray-100">Sign Up For <span class="text-blue-600 dark:text-blue-400 md:text-blue-300">Project</span> Updates</h2>
@@ -48,7 +48,7 @@
                     </div>
                 </form>
             </div>
-        </div>`
+        </section>`
             }
         }
     }
diff --git a/src/components/ui/Forms/Search.vue b/src/components/ui/Forms/Search.vue
new file mode 100644
index 0000000..0246905
--- /dev/null
+++ b/src/components/ui/Forms/Search.vue
@@ -0,0 +1,96 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="px-3 pt-6 pb-80" slot="component">
+            <section class="max-w-md w-full mx-auto px-5 py-4 relative rounded-md">
+                <div class="relative">
+                    <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
+                        <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                            <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                        </svg>
+                    </span>
+
+                    <input type="text" v-model="keyword" class="pl-10 pr-4 py-3 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Type Something">
+                </div>
+
+                <div v-if="jobsSearch" class="absolute inset-x-0 mt-4 mx-5 px-6 py-3 max-h-72 overflow-y-auto bg-white dark:bg-gray-800 border border-gray-300 dark:border-transparent rounded-md">
+                    <a v-for="job in jobsSearch" :key="job.title" href="#" class="block py-1">
+                        <h3 class="text-gray-700 dark:text-gray-100 font-medium hover:underline" v-text="job.title"></h3>
+                        <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm" v-text="job.date"></p>
+                    </a>
+                </div>
+            </section>
+        </div>
+    </view-component>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            name: 'Search',
+            keyword: '',
+            jobs: [
+                { 
+                    title: 'Software engineer',
+                    date: '02/04/2020'
+                },
+                { 
+                    title: 'Front End Developer',
+                    date: '01/03/2020'
+                },
+                { 
+                    title: 'HR Lead',
+                    date: '30/2/2020'
+                },
+                { 
+                    title: 'Systems engineer',
+                    date: '15/1/2020'
+                },
+                { 
+                    title: 'Web Developer',
+                    date: '02/04/2020'
+                },
+                { 
+                    title: 'UI/UX',
+                    date: '01/03/2020'
+                },
+                { 
+                    title: 'Projects manager',
+                    date: '30/2/2020'
+                },
+            ],
+            code: `
+        <section class="max-w-md w-full mx-auto px-5 py-4 relative rounded-md">
+            <div class="relative">
+                <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
+                    <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                        <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    </svg>
+                </span>
+
+                <input type="text" class="pl-10 pr-4 py-3 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
+            </div>
+
+            <div class="absolute inset-x-0 mt-4 mx-5 px-6 py-3 max-h-72 overflow-y-auto bg-white dark:bg-gray-800 border border-gray-300 dark:border-transparent rounded-md">
+                <a href="#" class="block py-1">
+                    <h3 class="text-gray-700 dark:text-gray-100 font-medium hover:underline">Software engineer</h3>
+                    <p class="mt-2 text-gray-500 dark:text-gray-400 text-sm">02/04/2020</p>
+                </a>
+            </div>
+        </section>`
+        }
+    },
+
+    computed: {
+        jobsSearch() {
+            if (this.keyword) {
+                return this.jobs.filter((job) => {
+                            return job.title.toLowerCase().includes(this.keyword);
+                        });
+            }
+
+            return this.jobs;
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/ui/Forms/Simple.vue b/src/components/ui/Forms/Simple.vue
index 9b27405..c549e6e 100644
--- a/src/components/ui/Forms/Simple.vue
+++ b/src/components/ui/Forms/Simple.vue
@@ -1,7 +1,7 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="max-w-4xl p-6 mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md">
+            <section class="max-w-4xl p-6 mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md">
                 <h2 class="text-lg text-gray-700 dark:text-white font-semibold capitalize">Account settings</h2>
                 
                 <form>
@@ -31,7 +31,7 @@
                         <button class="bg-gray-700 text-white py-2 px-4 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Update Account Information</button>
                     </div>
                 </form>
-            </div>
+            </section>
         </div>
     </view-component>
 </template>
@@ -42,7 +42,7 @@
             return {
                 name: 'Simple',
                 code: `
-        <div class="max-w-4xl p-6 mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md">
+        <section class="max-w-4xl p-6 mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md">
             <h2 class="text-lg text-gray-700 dark:text-white font-semibold capitalize">Account settings</h2>
             
             <form>
@@ -72,7 +72,7 @@
                     <button class="bg-gray-700 text-white py-2 px-4 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Update Account Information</button>
                 </div>
             </form>
-        </div>`
+        </section>`
             }
         }
     }
diff --git a/src/components/ui/Forms/SimpleNewsletter.vue b/src/components/ui/Forms/SimpleNewsletter.vue
new file mode 100644
index 0000000..6056731
--- /dev/null
+++ b/src/components/ui/Forms/SimpleNewsletter.vue
@@ -0,0 +1,45 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <section class="bg-white dark:bg-gray-800">
+                <div class="max-w-3xl mx-auto px-6 py-16 text-center">
+                    <h1 class="text-3xl font-semibold text-gray-800 dark:text-gray-100">Want to see Back in action?</h1>
+                    <p class="max-w-md mx-auto mt-5 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, minus tempora nemo quos</p>
+
+                    <div class="flex flex-col space-y-3 sm:space-y-0 sm:flex-row sm:justify-center sm:space-x-4 mt-8">
+                        <input id="email" type="text" class="py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Email Address">
+                        
+                        <button class="py-2 px-4 capitalize tracking-wide bg-indigo-700 text-sm text-white font-medium rounded-md hover:bg-indigo-600 focus:outline-none focus:bg-indigo-600">
+                            Get Started
+                        </button>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Simple Newsletter',
+                code: `
+        <section class="bg-white dark:bg-gray-800">
+            <div class="max-w-3xl mx-auto px-6 py-16 text-center">
+                <h1 class="text-3xl font-semibold text-gray-800 dark:text-gray-100">Want to see Back in action?</h1>
+                <p class="max-w-md mx-auto mt-5 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, minus tempora nemo quos</p>
+
+                <div class="flex flex-col space-y-3 sm:space-y-0 sm:flex-row sm:justify-center sm:space-x-4 mt-8">
+                    <input id="email" type="text" class="py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Email Address">
+                    
+                    <button class="py-2 px-4 capitalize tracking-wide bg-indigo-700 text-sm text-white font-medium rounded-md hover:bg-indigo-600 focus:outline-none focus:bg-indigo-600">
+                        Get Started
+                    </button>
+                </div>
+            </div>
+        </section>`
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/models/Components.js b/src/models/Components.js
index f514f89..83fb6d1 100644
--- a/src/models/Components.js
+++ b/src/models/Components.js
@@ -43,7 +43,9 @@ export default [
         name: "Forms",
         components: [
             { name: "Simple" },
+            { name: "Search" },
             { name: "Contact" },
+            { name: "SimpleNewsletter" },
             { name: "Newsletter" },
         ],
     },

From adeec33f60660c8588b42d28043b3b84e898f75f Mon Sep 17 00:00:00 2001
From: khatabwedaa <khatabwedaa@gmail.com>
Date: Fri, 29 Jan 2021 12:03:06 +0200
Subject: [PATCH 8/8] Update search inputs

---
 src/components/ui/Navbars/WithCategories.vue | 40 ++++++++++++++++++--
 src/components/ui/Navbars/WithSearch.vue     | 22 ++++++++---
 src/components/ui/Sidebars/WithSearch.vue    | 20 +++++++++-
 3 files changed, 71 insertions(+), 11 deletions(-)

diff --git a/src/components/ui/Navbars/WithCategories.vue b/src/components/ui/Navbars/WithCategories.vue
index 8dd54b5..41faba8 100644
--- a/src/components/ui/Navbars/WithCategories.vue
+++ b/src/components/ui/Navbars/WithCategories.vue
@@ -10,7 +10,15 @@
 
                                 <!-- Search input on desktop screen -->
                                 <div class="mx-10 hidden md:block">
-                                    <input type="text" class="w-32 lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-900 rounded-md placeholder-gray-500 dark:placeholder-gray-200 border border-transparent focus:outline-none focus:bg-white focus:ring focus:border-blue-400" placeholder="Search" aria-label="Search">
+                                    <div class="relative">
+                                        <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
+                                            <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                                                <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                                            </svg>
+                                        </span>
+
+                                        <input type="text" class="pl-10 pr-4 py-2 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
+                                    </div>
                                 </div>
                             </div>
 
@@ -40,7 +48,15 @@
 
                             <!-- Search input on mobile screen -->
                             <div class="mt-3 md:hidden">
-                                <input type="text" class="w-full px-4 py-3 leading-tight text-sm text-gray-700 bg-gray-100 rounded-md placeholder-gray-500 focus:outline-none focus:bg-white focus:shadow-outline" placeholder="Search" aria-label="Search">
+                               <div class="relative">
+                                    <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
+                                        <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                                            <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                                        </svg>
+                                    </span>
+
+                                    <input type="text" class="pl-10 pr-4 py-2 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -97,7 +113,15 @@
 
                             <!-- Search input on desktop screen -->
                             <div class="mx-10 hidden md:block">
-                                <input type="text" class="w-32 lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-900 rounded-md placeholder-gray-500 dark:placeholder-gray-200 border border-transparent focus:outline-none focus:bg-white focus:ring focus:border-blue-400" placeholder="Search" aria-label="Search">
+                                <div class="relative">
+                                    <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
+                                        <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                                            <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                                        </svg>
+                                    </span>
+
+                                    <input type="text" class="pl-10 pr-4 py-2 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
+                                </div>
                             </div>
                         </div>
 
@@ -127,7 +151,15 @@
 
                         <!-- Search input on mobile screen -->
                         <div class="mt-3 md:hidden">
-                            <input type="text" class="w-full px-4 py-3 leading-tight text-sm text-gray-700 bg-gray-100 rounded-md placeholder-gray-500 focus:outline-none focus:bg-white focus:shadow-outline" placeholder="Search" aria-label="Search">
+                            <div class="relative">
+                                <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
+                                    <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                                        <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                                    </svg>
+                                </span>
+
+                                <input type="text" class="pl-10 pr-4 py-2 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/src/components/ui/Navbars/WithSearch.vue b/src/components/ui/Navbars/WithSearch.vue
index 527f113..e0fbe5f 100644
--- a/src/components/ui/Navbars/WithSearch.vue
+++ b/src/components/ui/Navbars/WithSearch.vue
@@ -25,9 +25,15 @@
                             <a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">About</a>
                             <a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">Contact</a>
                         </div>
-                        
-                        <div>
-                            <input type="text" class="w-full lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-900 rounded-md placeholder-gray-500 dark:placeholder-gray-200 border border-transparent focus:outline-none focus:bg-white focus:ring focus:border-blue-400" placeholder="Search" aria-label="Search">
+
+                        <div class="relative">
+                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
+                                <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                                    <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                                </svg>
+                            </span>
+
+                            <input type="text" class="pl-10 pr-4 py-2 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
                         </div>
                     </div>
                 </div>
@@ -68,8 +74,14 @@
                         <a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">Contact</a>
                     </div>
                     
-                    <div>
-                        <input type="text" class="w-full lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-900 rounded-md placeholder-gray-500 dark:placeholder-gray-200 border border-transparent focus:outline-none focus:bg-white focus:ring focus:border-blue-400" placeholder="Search" aria-label="Search">
+                    <div class="relative">
+                        <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
+                            <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                                <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                            </svg>
+                        </span>
+
+                        <input type="text" class="pl-10 pr-4 py-3 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
                     </div>
                 </div>
             </div>
diff --git a/src/components/ui/Sidebars/WithSearch.vue b/src/components/ui/Sidebars/WithSearch.vue
index 525bdef..19e5852 100644
--- a/src/components/ui/Sidebars/WithSearch.vue
+++ b/src/components/ui/Sidebars/WithSearch.vue
@@ -4,7 +4,15 @@
              <div class="flex flex-col w-64 h-screen border-r bg-white dark:bg-gray-800 dark:border-gray-600 px-4 py-8">
                 <h2 class="text-3xl font-semibold text-gray-800 dark:text-white">Brand</h2>
 
-                <input class="mt-6 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="text" placeholder="Search" />
+                <div class="relative mt-6">
+                    <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
+                        <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                            <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                        </svg>
+                    </span>
+
+                    <input type="text" class="pl-10 pr-4 py-2 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
+                </div>
                 
                 <div class="flex flex-col justify-between flex-1 mt-6">
                     <nav>
@@ -81,7 +89,15 @@
         <div class="flex flex-col w-64 h-screen border-r bg-white dark:bg-gray-800 dark:border-gray-600 px-4 py-8">
             <h2 class="text-3xl font-semibold text-gray-800 dark:text-white">Brand</h2>
 
-            <input class="mt-6 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="text" placeholder="Search" />
+            <div class="relative mt-6">
+                <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
+                    <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                        <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    </svg>
+                </span>
+
+                <input type="text" class="pl-10 pr-4 py-3 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
+            </div>
             
             <div class="flex flex-col justify-between flex-1 mt-6">
                 <nav>