From 467cecff3b4ee4cfe6e82d9760da796d7a4f866c Mon Sep 17 00:00:00 2001
From: khatabwedaa <khatabwedaa@gmail.com>
Date: Thu, 2 Jun 2022 13:12:41 +0200
Subject: [PATCH] Add carbon ads to components page

---
 components/CarbonAds.vue | 4 ++--
 pages/components.vue     | 8 +-------
 pages/index.vue          | 2 +-
 3 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/components/CarbonAds.vue b/components/CarbonAds.vue
index a4c8736..8ca349e 100644
--- a/components/CarbonAds.vue
+++ b/components/CarbonAds.vue
@@ -32,7 +32,7 @@ export default {
 #carbonads {
   display: flex;
   max-width: 330px;
-  background-color: #1e293b;
+  background-color: #ffffff;
   box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1);
   z-index: 100;
   border-radius: .3rem; 
@@ -71,7 +71,7 @@ export default {
 #carbonads .carbon-poweredby {
   display: block;
   padding: 6px 8px;
-  background: #000000;
+  background: #dbdbdb;
   text-align: center;
   text-transform: uppercase;
   letter-spacing: 0.5px;
diff --git a/pages/components.vue b/pages/components.vue
index a6615f0..ab0826a 100644
--- a/pages/components.vue
+++ b/pages/components.vue
@@ -49,13 +49,7 @@
                     </div>
 
                     <section class="flex justify-center mb-16">
-                        <div class="group">
-                            <a target="_blank" href="https://tailgrids.com/?ref=merakiui" class="relative flex items-center max-w-sm p-2 space-x-4 overflow-hidden transition-colors duration-700 transform border border-gray-100 rounded-md group-hover:bg-blue-500">
-                                <img class="h-20 rounded-md" src="https://cdn.tailgrids.com/meraki-tg.svg" alt="">
-                                <h4 class="text-gray-600 group-hover:text-white">Tailwind CSS Components & Templates for Startup and SaaS and Business Sites</h4>
-                                <span class="absolute bottom-0 right-0 px-2 py-1 text-xs text-white bg-blue-500 rounded-tl-md">ADS</span>
-                            </a>
-                        </div>
+                        <carbon-ads></carbon-ads>
                     </section>
 
                     <section v-for="category in list" :key="category.name">
diff --git a/pages/index.vue b/pages/index.vue
index ff3d8a4..888c3e8 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -38,7 +38,7 @@
                     </a>
                 </div>
 
-                <div class="flex justify-center">
+                <div class="flex justify-center text-gray-800">
                     <carbon-ads class="mt-10"></carbon-ads>
                 </div>
             </div>