From 2d9cfcc61226b532a68223c71201bcab557defc7 Mon Sep 17 00:00:00 2001
From: khatabwedaa <khatabwedaa@gmail.com>
Date: Sat, 13 Jun 2020 13:12:57 +0200
Subject: [PATCH] Add hover status to some components

---
 src/components/ui/Footers/Simple.vue          | 12 +++++-----
 .../ui/Footers/WithSubscribeForm.vue          | 22 +++++++++----------
 .../ui/Sections/ParagraphWithImage.vue        |  4 ++--
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/ui/Footers/Simple.vue b/src/components/ui/Footers/Simple.vue
index 206abdb..4522ffb 100644
--- a/src/components/ui/Footers/Simple.vue
+++ b/src/components/ui/Footers/Simple.vue
@@ -1,10 +1,10 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
-            <footer class="flex flex-col justify-between items-center px-6 py-2 bg-gray-800 text-gray-100 sm:flex-row">
-                <a href="#" class="text-xl font-bold">Brand</a>
+            <footer class="flex flex-col justify-between items-center px-6 py-2 bg-gray-800 sm:flex-row">
+                <a href="#" class="text-xl font-bold text-gray-100 hover:text-gray-400">Brand</a>
                 
-                <p class="py-2 sm:py-0">All rights reserved</p>
+                <p class="py-2 text-gray-100 sm:py-0">All rights reserved</p>
 
                 <div class="flex -mx-2">
                     <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Linkden">
@@ -36,10 +36,10 @@
             return {
                 name: 'Simple',
                 code: `
-        <footer class="flex flex-col justify-between items-center px-6 py-2 bg-gray-800 text-gray-100 sm:flex-row">
-            <a href="#" class="text-xl font-bold">Brand</a>
+        <footer class="flex flex-col justify-between items-center px-6 py-2 bg-gray-800 sm:flex-row">
+            <a href="#" class="text-xl font-bold text-gray-100 hover:text-gray-400">Brand</a>
             
-            <p class="py-2 sm:py-0">All rights reserved</p>
+            <p class="py-2 text-gray-100 sm:py-0">All rights reserved</p>
 
             <div class="flex -mx-2">
                 <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Linkden">
diff --git a/src/components/ui/Footers/WithSubscribeForm.vue b/src/components/ui/Footers/WithSubscribeForm.vue
index e136e36..5a554c4 100644
--- a/src/components/ui/Footers/WithSubscribeForm.vue
+++ b/src/components/ui/Footers/WithSubscribeForm.vue
@@ -20,15 +20,15 @@
 
                     <div class="flex flex-col items-center justify-between mt-6 md:flex-row">
                         <div>
-                            <a href="#" class="text-xl font-bold">Brand</a>
+                            <a href="#" class="text-xl font-bold text-gray-100 hover:text-gray-400">Brand</a>
                         </div>
 
                         <div class="flex mt-4 md:m-0">
                             <div class="-mx-4">
-                                <a href="#" class="px-4 text-sm">About</a>
-                                <a href="#" class="px-4 text-sm">Blog</a>
-                                <a href="#" class="px-4 text-sm">News</a>
-                                <a href="#" class="px-4 text-sm">Contact</a>
+                                <a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">About</a>
+                                <a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">Blog</a>
+                                <a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">News</a>
+                                <a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">Contact</a>
                             </div>
                         </div>
                     </div>
@@ -42,7 +42,7 @@
     export default {
         data() {
             return {
-                name: 'Footer With Subscribe Form',
+                name: 'With Subscribe Form',
                 code: `
         <footer class="flex justify-center px-4 text-gray-100 bg-gray-800">
             <div class="container py-6">
@@ -63,15 +63,15 @@
 
                 <div class="flex flex-col items-center justify-between mt-6 md:flex-row">
                     <div>
-                        <a href="#" class="text-xl font-bold">Brand</a>
+                        <a href="#" class="text-xl font-bold text-gray-100 hover:text-gray-400">Brand</a>
                     </div>
 
                     <div class="flex mt-4 md:m-0">
                         <div class="-mx-4">
-                            <a href="#" class="px-4 text-sm">About</a>
-                            <a href="#" class="px-4 text-sm">Blog</a>
-                            <a href="#" class="px-4 text-sm">News</a>
-                            <a href="#" class="px-4 text-sm">Contact</a>
+                            <a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">About</a>
+                            <a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">Blog</a>
+                            <a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">News</a>
+                            <a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">Contact</a>
                         </div>
                     </div>
                 </div>
diff --git a/src/components/ui/Sections/ParagraphWithImage.vue b/src/components/ui/Sections/ParagraphWithImage.vue
index 4ce7ce4..1ca25c5 100644
--- a/src/components/ui/Sections/ParagraphWithImage.vue
+++ b/src/components/ui/Sections/ParagraphWithImage.vue
@@ -12,7 +12,7 @@
                         <p class="mt-4 text-gray-600">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p>
                         
                         <div class="mt-8">
-                            <a href="#" class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded">Start Now</a>
+                            <a href="#" class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded hover:bg-gray-800">Start Now</a>
                         </div>
                     </div>
                 </div>
@@ -38,7 +38,7 @@
                     <p class="mt-4 text-gray-600">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p>
                     
                     <div class="mt-8">
-                        <a href="#" class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded">Start Now</a>
+                        <a href="#" class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded hover:bg-gray-800">Start Now</a>
                     </div>
                 </div>
             </div>