From a931d03b2262e0c264544b24523b5514460a8339 Mon Sep 17 00:00:00 2001
From: khatabwedaa <khatabwedaa@gmail.com>
Date: Wed, 6 May 2020 23:45:45 +0200
Subject: [PATCH] add all Cards components

---
 src/components/UI/Cards/ArticleCard.vue       |  7 +--
 .../UI/Cards/ArticleCardWithImage.vue         | 25 ++++++----
 .../UI/Cards/{Product.vue => ProductCard.vue} |  8 ++--
 .../UI/Cards/ProductCardWithEvaluation.vue    | 46 ++++++++++++++++++
 .../UI/Cards/ProductWithEvaluation.vue        | 48 -------------------
 .../{Testimonial.vue => TestimonialCard.vue}  |  5 +-
 src/components/UI/Cards/UserCard.vue          | 22 +++++++++
 .../UI/Cards/UserCardWithDetails.vue          | 45 +++++++++++++++++
 src/components/UI/Cards/UserDetails.vue       | 46 ------------------
 9 files changed, 138 insertions(+), 114 deletions(-)
 rename src/components/UI/Cards/{Product.vue => ProductCard.vue} (73%)
 create mode 100644 src/components/UI/Cards/ProductCardWithEvaluation.vue
 delete mode 100644 src/components/UI/Cards/ProductWithEvaluation.vue
 rename src/components/UI/Cards/{Testimonial.vue => TestimonialCard.vue} (95%)
 create mode 100644 src/components/UI/Cards/UserCard.vue
 create mode 100644 src/components/UI/Cards/UserCardWithDetails.vue
 delete mode 100644 src/components/UI/Cards/UserDetails.vue

diff --git a/src/components/UI/Cards/ArticleCard.vue b/src/components/UI/Cards/ArticleCard.vue
index 2160f79..209652a 100644
--- a/src/components/UI/Cards/ArticleCard.vue
+++ b/src/components/UI/Cards/ArticleCard.vue
@@ -1,17 +1,19 @@
 <template>
     <div :id="name | toId">
-        <div class="max-w-3xl mx-auto px-10 py-6 bg-white rounded-lg shadow-md">
+        <div class="max-w-2xl mx-auto px-8 py-4 bg-white rounded-lg shadow-md">
             <div class="flex justify-between items-center">
                 <span class="font-light text-gray-600">Mar 10, 2019</span>
                 <a class="px-2 py-1 bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500" href="#">Design</a>
             </div>
+
             <div class="mt-2">
-                <a class="text-2xl text-gray-700 font-bold hover:text-gray-600" href="#">Accessibility tools for
+                <a class="text-2xl text-gray-700 font-bold hover:text-gray-600 hover:underline" href="#">Accessibility tools for
                     designers and developers</a>
                 <p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora expedita
                     dicta totam aspernatur doloremque. Excepturi iste iusto eos enim reprehenderit nisi, accusamus
                     delectus nihil quis facere in modi ratione libero!</p>
             </div>
+            
             <div class="flex justify-between items-center mt-4">
                 <a class="text-blue-600 hover:underline" href="#">Read more</a>
                 <div>
@@ -28,7 +30,6 @@
 </template>
 
 <script>
-
     export default {
         data() {
             return {
diff --git a/src/components/UI/Cards/ArticleCardWithImage.vue b/src/components/UI/Cards/ArticleCardWithImage.vue
index adb8fd3..ef51553 100644
--- a/src/components/UI/Cards/ArticleCardWithImage.vue
+++ b/src/components/UI/Cards/ArticleCardWithImage.vue
@@ -1,22 +1,27 @@
 <template>
     <div :id="name | toId">
-        <div class="max-w-2xl mx-auto bg-white overflow-hidden shadow rounded-lg">
+        <div class="max-w-2xl mx-auto bg-white overflow-hidden shadow-md rounded-lg">
             <div>
-                <img class="w-full object-cover h-64 shadow-lg" src="https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
+                <img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
                      alt="Article">
             </div>
+
             <div class="p-6">
                 <div>
-                    <span class="text-blue-600 text-xs uppercase">Product</span>
-                    <h2 class="text-gray-800 font-semibold text-xl mt-2">I Built A Successful Blog In One Year</h2>
+                    <span class="text-blue-600 text-xs font-medium uppercase">Product</span>
+                    <a class="block text-gray-800 font-semibold text-2xl mt-2 hover:text-gray-600 hover:underline" href="#">I Built A Successful Blog In One Year</a>
                     <p class="text-sm text-gray-600 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie parturient et sem ipsum volutpat vel. Natoque sem et aliquam mauris egestas quam volutpat viverra. In pretium nec senectus erat. Et malesuada lobortis.</p>
                 </div>
-                <div class="flex mt-4 items-center">
-                    <img class="h-12 h-12 rounded-full" src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60"
-                         alt="Avatar">
-                    <div class="flex items-center mx-4">
-                        <a href="#" class="text-gray-700 font-semibold">Jone Doe</a>
-                        <span class="text-gray-600 mx-1 text-xs">21 SEP 2015</span>
+
+                <div class="mt-4">
+                    <div class="flex items-center">
+                        <a href="#" class="flex items-center">
+                            <img class="h-10 h-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60"
+                                alt="Avatar">
+                            <span class="mx-2 text-gray-700 font-semibold">Jone Doe</span>
+                        </a>
+                    
+                        <span class="mx-1 text-gray-600 text-xs">21 SEP 2015</span>
                     </div>
                 </div>
             </div>
diff --git a/src/components/UI/Cards/Product.vue b/src/components/UI/Cards/ProductCard.vue
similarity index 73%
rename from src/components/UI/Cards/Product.vue
rename to src/components/UI/Cards/ProductCard.vue
index 46b8094..3626246 100644
--- a/src/components/UI/Cards/Product.vue
+++ b/src/components/UI/Cards/ProductCard.vue
@@ -3,8 +3,7 @@
         <div class="max-w-xs mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
             <div class="px-4 py-2">
                 <h1 class="text-gray-900 font-bold text-3xl uppercase">NIKE AIR</h1>
-                <p class="text-gray-600 text-sm mt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos
-                    quidem sequi illum facere recusandae voluptatibus</p>
+                <p class="text-gray-600 text-sm mt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos quidem sequi illum facere recusandae voluptatibus</p>
             </div>
 
             <img class="h-56 w-full object-cover mt-2"
@@ -13,18 +12,17 @@
 
             <div class="flex items-center justify-between px-4 py-2 bg-gray-900">
                 <h1 class="text-gray-200 font-bold text-xl">$129</h1>
-                <button class="px-3 py-1 bg-gray-200 text-sm text-gray-900 font-semibold rounded">Add to card</button>
+                <button class="px-2 py-1 bg-gray-200 text-xs text-gray-900 font-semibold rounded uppercase hover:bg-gray-400 focus:bg-gray-400">Add to card</button>
             </div>
         </div>
     </div>
 </template>
 
 <script>
-
     export default {
         data() {
             return {
-                name: 'Product',
+                name: 'Product Card',
             }
         }
     }
diff --git a/src/components/UI/Cards/ProductCardWithEvaluation.vue b/src/components/UI/Cards/ProductCardWithEvaluation.vue
new file mode 100644
index 0000000..c84e003
--- /dev/null
+++ b/src/components/UI/Cards/ProductCardWithEvaluation.vue
@@ -0,0 +1,46 @@
+<template>
+    <div :id="name | toId">
+        <div class="flex max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
+            <div class="w-1/3 bg-cover"
+                    style="background-image: url('https://images.unsplash.com/photo-1494726161322-5360d4d0eeae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')"></div>
+
+            <div class="w-2/3 p-4">
+                <h1 class="text-gray-900 font-bold text-2xl">Backpack</h1>
+                <p class="mt-2 text-gray-600 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit In
+                    odit exercitationem fuga id nam quia</p>
+                <div class="flex item-center mt-2">
+                    <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
+                        <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+                    </svg>
+                    <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
+                        <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+                    </svg>
+                    <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
+                        <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+                    </svg>
+                    <svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
+                        <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+                    </svg>
+                    <svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
+                        <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+                    </svg>
+                </div>
+                <div class="flex item-center justify-between mt-3">
+                    <h1 class="text-gray-700 font-bold text-xl">$220</h1>
+                    <button class="px-3 py-2 bg-gray-800 text-white text-xs font-bold uppercase rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Add to Card</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+    export default {
+        data() {
+            return {
+                name: 'Product Card With Evaluation',
+            }
+        }
+    }
+</script>
diff --git a/src/components/UI/Cards/ProductWithEvaluation.vue b/src/components/UI/Cards/ProductWithEvaluation.vue
deleted file mode 100644
index ed64af4..0000000
--- a/src/components/UI/Cards/ProductWithEvaluation.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-        <div :id="name | toId">
-            <div class="flex max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
-                <div class="w-1/3 bg-cover"
-                     style="background-image: url('https://images.unsplash.com/photo-1494726161322-5360d4d0eeae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')"></div>
-
-                <div class="w-2/3 p-4">
-                    <h1 class="text-gray-900 font-bold text-2xl">Backpack</h1>
-                    <p class="mt-2 text-gray-600 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit In
-                        odit exercitationem fuga id nam quia</p>
-                    <div class="flex item-center mt-2">
-                        <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
-                            <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                        </svg>
-                        <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
-                            <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                        </svg>
-                        <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
-                            <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                        </svg>
-                        <svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
-                            <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                        </svg>
-                        <svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
-                            <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                        </svg>
-                    </div>
-                    <div class="flex item-center justify-between mt-3">
-                        <h1 class="text-gray-700 font-bold text-xl">$220</h1>
-                        <button class="px-3 py-2 bg-gray-800 text-white text-xs font-bold uppercase rounded">Add to
-                            Card
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-</template>
-
-<script>
-
-    export default {
-        data() {
-            return {
-                name: 'Product Evaluation',
-            }
-        }
-    }
-</script>
diff --git a/src/components/UI/Cards/Testimonial.vue b/src/components/UI/Cards/TestimonialCard.vue
similarity index 95%
rename from src/components/UI/Cards/Testimonial.vue
rename to src/components/UI/Cards/TestimonialCard.vue
index dc7eb17..1809785 100644
--- a/src/components/UI/Cards/Testimonial.vue
+++ b/src/components/UI/Cards/TestimonialCard.vue
@@ -5,12 +5,14 @@
                 <img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500"
                      src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=76&q=80">
             </div>
+
             <div>
                 <h2 class="text-gray-800 text-3xl font-semibold">Design Tools</h2>
                 <p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores
                     deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a
                     veritatis pariatur minus consequuntur!</p>
             </div>
+            
             <div class="flex justify-end mt-4">
                 <a href="#" class="text-xl font-medium text-indigo-500">John Doe</a>
             </div>
@@ -19,11 +21,10 @@
 </template>
 
 <script>
-
     export default {
         data() {
             return {
-                name: 'Testimonial',
+                name: 'Testimonial Card',
             }
         }
     }
diff --git a/src/components/UI/Cards/UserCard.vue b/src/components/UI/Cards/UserCard.vue
new file mode 100644
index 0000000..198eb81
--- /dev/null
+++ b/src/components/UI/Cards/UserCard.vue
@@ -0,0 +1,22 @@
+<template>
+    <div :id="name | toId">
+        <div class="max-w-xs bg-white shadow-lg rounded-lg overflow-hidden mx-auto">
+            <img class="w-full h-56 object-cover" src="https://images.unsplash.com/photo-1542156822-6924d1a71ace?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="avatar">
+            
+            <div class="py-5 text-center">
+                <a class="block text-2xl text-gray-800 font-bold" href="#">John Doe</a>
+                <span class="text-sm text-gray-700">Software Engineer</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'User Card',
+            }
+        }
+    }
+</script>
diff --git a/src/components/UI/Cards/UserCardWithDetails.vue b/src/components/UI/Cards/UserCardWithDetails.vue
new file mode 100644
index 0000000..25d2a9d
--- /dev/null
+++ b/src/components/UI/Cards/UserCardWithDetails.vue
@@ -0,0 +1,45 @@
+<template>
+    <div :id="name | toId">
+        <div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
+            <img class="w-full h-56 object-cover object-center" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
+            <div class="flex items-center px-6 py-3 bg-gray-900">
+                <svg class="h-6 w-6 text-white fill-current" viewBox="0 0 512 512">
+                    <path d="M256 48C150 48 64 136.2 64 245.1v153.3c0 36.3 28.6 65.7 64 65.7h64V288h-85.3v-42.9c0-84.7 66.8-153.3 149.3-153.3s149.3 68.5 149.3 153.3V288H320v176h64c35.4 0 64-29.3 64-65.7V245.1C448 136.2 362 48 256 48z"/>
+                </svg>
+                <h1 class="mx-3 text-white font-semibold text-lg">Focusing</h1>
+            </div>
+            <div class="py-4 px-6">
+                <h1 class="text-2xl font-semibold text-gray-800">Patterson johnson</h1>
+                <p class="py-2 text-lg text-gray-700">Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI.</p>
+                <div class="flex items-center mt-4 text-gray-700">
+                    <svg class="h-6 w-6 fill-current" viewBox="0 0 512 512">
+                        <path d="M239.208 343.937c-17.78 10.103-38.342 15.876-60.255 15.876-21.909 0-42.467-5.771-60.246-15.87C71.544 358.331 42.643 406 32 448h293.912c-10.639-42-39.537-89.683-86.704-104.063zM178.953 120.035c-58.479 0-105.886 47.394-105.886 105.858 0 58.464 47.407 105.857 105.886 105.857s105.886-47.394 105.886-105.857c0-58.464-47.408-105.858-105.886-105.858zm0 186.488c-33.671 0-62.445-22.513-73.997-50.523H252.95c-11.554 28.011-40.326 50.523-73.997 50.523z"/><g><path d="M322.602 384H480c-10.638-42-39.537-81.691-86.703-96.072-17.781 10.104-38.343 15.873-60.256 15.873-14.823 0-29.024-2.654-42.168-7.49-7.445 12.47-16.927 25.592-27.974 34.906C289.245 341.354 309.146 364 322.602 384zM306.545 200h100.493c-11.554 28-40.327 50.293-73.997 50.293-8.875 0-17.404-1.692-25.375-4.51a128.411 128.411 0 0 1-6.52 25.118c10.066 3.174 20.779 4.862 31.895 4.862 58.479 0 105.886-47.41 105.886-105.872 0-58.465-47.407-105.866-105.886-105.866-37.49 0-70.427 19.703-89.243 49.09C275.607 131.383 298.961 163 306.545 200z"/></g>
+                    </svg>
+                    <h1 class="px-2 text-sm">MerakiTeam</h1>
+                </div>
+                <div class="flex items-center mt-4 text-gray-700">
+                    <svg class="h-6 w-6 fill-current" viewBox="0 0 512 512">
+                        <path d="M256 32c-88.004 0-160 70.557-160 156.801C96 306.4 256 480 256 480s160-173.6 160-291.199C416 102.557 344.004 32 256 32zm0 212.801c-31.996 0-57.144-24.645-57.144-56 0-31.357 25.147-56 57.144-56s57.144 24.643 57.144 56c0 31.355-25.148 56-57.144 56z"/>
+                    </svg>
+                    <h1 class="px-2 text-sm">California</h1>
+                </div>
+                <div class="flex items-center mt-4 text-gray-700">
+                    <svg class="h-6 w-6 fill-current" viewBox="0 0 512 512">
+                        <path d="M437.332 80H74.668C51.199 80 32 99.198 32 122.667v266.666C32 412.802 51.199 432 74.668 432h362.664C460.801 432 480 412.802 480 389.333V122.667C480 99.198 460.801 80 437.332 80zM432 170.667L256 288 80 170.667V128l176 117.333L432 128v42.667z"/>
+                    </svg>
+                    <h1 class="px-2 text-sm">patterson@example.com</h1>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            name: 'User Card With Details',
+        }
+    }
+}
+</script>
diff --git a/src/components/UI/Cards/UserDetails.vue b/src/components/UI/Cards/UserDetails.vue
deleted file mode 100644
index fa3ff5f..0000000
--- a/src/components/UI/Cards/UserDetails.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-        <div :id="name | toId">
-            <div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
-                <img class="w-full h-56 object-cover object-center" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
-                <div class="flex items-center px-6 py-3 bg-gray-900">
-                    <svg class="h-6 w-6 text-white fill-current" viewBox="0 0 512 512">
-                        <path d="M256 48C150 48 64 136.2 64 245.1v153.3c0 36.3 28.6 65.7 64 65.7h64V288h-85.3v-42.9c0-84.7 66.8-153.3 149.3-153.3s149.3 68.5 149.3 153.3V288H320v176h64c35.4 0 64-29.3 64-65.7V245.1C448 136.2 362 48 256 48z"/>
-                    </svg>
-                    <h1 class="mx-3 text-white font-semibold text-lg">Focusing</h1>
-                </div>
-                <div class="py-4 px-6">
-                    <h1 class="text-2xl font-semibold text-gray-800">Patterson johnson</h1>
-                    <p class="py-2 text-lg text-gray-700">Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI.</p>
-                    <div class="flex items-center mt-4 text-gray-700">
-                        <svg class="h-6 w-6 fill-current" viewBox="0 0 512 512">
-                            <path d="M239.208 343.937c-17.78 10.103-38.342 15.876-60.255 15.876-21.909 0-42.467-5.771-60.246-15.87C71.544 358.331 42.643 406 32 448h293.912c-10.639-42-39.537-89.683-86.704-104.063zM178.953 120.035c-58.479 0-105.886 47.394-105.886 105.858 0 58.464 47.407 105.857 105.886 105.857s105.886-47.394 105.886-105.857c0-58.464-47.408-105.858-105.886-105.858zm0 186.488c-33.671 0-62.445-22.513-73.997-50.523H252.95c-11.554 28.011-40.326 50.523-73.997 50.523z"/><g><path d="M322.602 384H480c-10.638-42-39.537-81.691-86.703-96.072-17.781 10.104-38.343 15.873-60.256 15.873-14.823 0-29.024-2.654-42.168-7.49-7.445 12.47-16.927 25.592-27.974 34.906C289.245 341.354 309.146 364 322.602 384zM306.545 200h100.493c-11.554 28-40.327 50.293-73.997 50.293-8.875 0-17.404-1.692-25.375-4.51a128.411 128.411 0 0 1-6.52 25.118c10.066 3.174 20.779 4.862 31.895 4.862 58.479 0 105.886-47.41 105.886-105.872 0-58.465-47.407-105.866-105.886-105.866-37.49 0-70.427 19.703-89.243 49.09C275.607 131.383 298.961 163 306.545 200z"/></g>
-                        </svg>
-                        <h1 class="px-2 text-sm">MerakiTeam</h1>
-                    </div>
-                    <div class="flex items-center mt-4 text-gray-700">
-                        <svg class="h-6 w-6 fill-current" viewBox="0 0 512 512">
-                            <path d="M256 32c-88.004 0-160 70.557-160 156.801C96 306.4 256 480 256 480s160-173.6 160-291.199C416 102.557 344.004 32 256 32zm0 212.801c-31.996 0-57.144-24.645-57.144-56 0-31.357 25.147-56 57.144-56s57.144 24.643 57.144 56c0 31.355-25.148 56-57.144 56z"/>
-                        </svg>
-                        <h1 class="px-2 text-sm">California</h1>
-                    </div>
-                    <div class="flex items-center mt-4 text-gray-700">
-                        <svg class="h-6 w-6 fill-current" viewBox="0 0 512 512">
-                            <path d="M437.332 80H74.668C51.199 80 32 99.198 32 122.667v266.666C32 412.802 51.199 432 74.668 432h362.664C460.801 432 480 412.802 480 389.333V122.667C480 99.198 460.801 80 437.332 80zM432 170.667L256 288 80 170.667V128l176 117.333L432 128v42.667z"/>
-                        </svg>
-                        <h1 class="px-2 text-sm">patterson@example.com</h1>
-                    </div>
-                </div>
-            </div>
-        </div>
-</template>
-
-<script>
-
-export default {
-    data() {
-        return {
-            name: 'User Details',
-        }
-    }
-}
-</script>