From 0ea7b4dfdc9bbeafaa6816e1c52eb3995e92a77a Mon Sep 17 00:00:00 2001
From: Alohe <alemalohe@gmail.com>
Date: Mon, 12 Aug 2024 12:14:09 +0300
Subject: [PATCH] Source code ad

---
 assets/css/style.css     |  4 +--
 assets/css/style.min.css | 54 +++++++++++++++++++---------------------
 assets/js/main.js        |  2 +-
 index.html               | 53 +++++++++++++++++++--------------------
 4 files changed, 55 insertions(+), 58 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index b9ffbf0..c8c48ad 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -58,8 +58,8 @@ textarea:focus {
 }
 
 .gazer__img {
-  width: 30px !important;
-  height: 30px !important;
+  width: 40px !important;
+  height: 40px !important;
   border-radius: 10px;
   object-fit: cover;
 }
diff --git a/assets/css/style.min.css b/assets/css/style.min.css
index 5f44899..fe08806 100644
--- a/assets/css/style.min.css
+++ b/assets/css/style.min.css
@@ -689,6 +689,10 @@ video {
   width: 100%;
 }
 
+.max-w-3xl {
+  max-width: 48rem;
+}
+
 .max-w-md {
   max-width: 28rem;
 }
@@ -701,6 +705,14 @@ video {
   max-width: 36rem;
 }
 
+.max-w-5xl {
+  max-width: 64rem;
+}
+
+.max-w-lg {
+  max-width: 32rem;
+}
+
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -715,6 +727,10 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.flex-col {
+  flex-direction: column;
+}
+
 .flex-wrap {
   flex-wrap: wrap;
 }
@@ -739,6 +755,10 @@ video {
   gap: 1rem;
 }
 
+.gap-5 {
+  gap: 1.25rem;
+}
+
 .rounded-2xl {
   border-radius: 1rem;
 }
@@ -863,11 +883,6 @@ video {
   line-height: 1rem;
 }
 
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
-
 .font-bold {
   font-weight: 700;
 }
@@ -986,8 +1001,8 @@ textarea:focus {
 }
 
 .gazer__img {
-  width: 30px !important;
-  height: 30px !important;
+  width: 40px !important;
+  height: 40px !important;
   border-radius: 10px;
   -o-object-fit: cover;
      object-fit: cover;
@@ -1286,35 +1301,18 @@ textarea:focus {
   height: 1em;
 }
 
-.hover\:bg-\[\#0d99ff\]:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(13 153 255 / var(--tw-bg-opacity));
-}
-
-.hover\:opacity-90:hover {
-  opacity: 0.9;
-}
-
-.hover\:opacity-70:hover {
-  opacity: 0.7;
-}
-
 .hover\:opacity-80:hover {
   opacity: 0.8;
 }
 
-.group:hover .group-hover\:opacity-100 {
-  opacity: 1;
-}
-
-.group:hover .group-hover\:opacity-20 {
-  opacity: 0.2;
-}
-
 .group:hover .group-hover\:opacity-0 {
   opacity: 0;
 }
 
+.group:hover .group-hover\:opacity-100 {
+  opacity: 1;
+}
+
 @media (min-width: 640px) {
   .sm\:block {
     display: block;
diff --git a/assets/js/main.js b/assets/js/main.js
index 99db156..0a3a24e 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -249,7 +249,7 @@ async function fetchGithubStarCount() {
     .then((res) => res.json())
     .then((data) => {
       document.querySelectorAll(".github-stars").forEach((el) => {
-        el.innerHTML = data.stargazers_count || 39;
+        el.innerHTML = data.stargazers_count || 197;
       });
     });
 }
diff --git a/index.html b/index.html
index e634261..26cff20 100644
--- a/index.html
+++ b/index.html
@@ -118,7 +118,7 @@
 
               <span
                 class="bg-white text-[#0d99ff] pr-1 pl-1 text-sm rounded-xl ml-2 hidden sm:block group-hover:opacity-0 transition-all duration-300 ease-in-out"
-                >34.4k</span
+                >35.3k</span
               >
 
               <span
@@ -169,7 +169,7 @@ <h1 class="text-sm font-semibold mt-10">Avatars</h1>
         <div class="images"></div>
 
         <!-- source -->
-        <div class="max-w-md mx-auto mt-10">
+        <div class="max-w-lg mx-auto mt-10 grid gap-5">
           <p>
             The images are sourced from the
             <a
@@ -181,6 +181,28 @@ <h1 class="text-sm font-semibold mt-10">Avatars</h1>
             website. The images are free to use and can be downloaded from the
             website.
           </p>
+
+          <p class="text-center">
+            You can also get the source code on
+            <a
+              href="https://copyui.com/templates/avatars"
+              target="_blank"
+              class="text-[#0d99ff] font-bold"
+            >
+              CopyUI.com</a
+            >
+            for $12.99
+          </p>
+
+          <p class="text-center">
+            The plugin was built by
+            <a
+              href="https://twitter.com/alemalohe"
+              target="_blank"
+              class="font-bold text-[#0d99ff]"
+              >Alohe</a
+            >
+          </p>
         </div>
       </div>
 
@@ -210,21 +232,9 @@ <h1 class="text-sm font-semibold mt-10">Avatars</h1>
       </div>
     </div>
 
-    <div>
-      <p class="text-center pb-5">
-        The plugin was built by
-        <a
-          href="https://twitter.com/alemalohe"
-          target="_blank"
-          class="font-bold text-[#0d99ff]"
-          >Alohe</a
-        >
-      </p>
-    </div>
-
     <!-- stargazers profiles -->
-    <div class="grid place-content-center text-center my-10 max-w-xl mx-auto">
-      <h1 class="text-sm font-semibold">Supporters</h1>
+    <div class="grid place-content-center text-center my-10 max-w-5xl mx-auto">
+      <h1 class="text-xl font-semibold">Supporters</h1>
       <div
         class="flex flex-wrap gap-2 justify-center mt-5"
         id="stargazers"
@@ -270,16 +280,6 @@ <h1 class="text-sm font-semibold mb-5">Sponsors</h1>
               class="w-10 h-10"
             />
           </a>
-          <a
-            href="https://www.boostedlaunch.com?ref=avatars"
-            class="text-[#000000] font-bold"
-            target="_blank"
-          >
-            <img
-              src="https://boostedlaunch.com/favicon.ico"
-              alt="CopyUI"
-              class="w-10 h-10"
-          /></a>
           <a
             href="https://x.com/alemalohe"
             class="text-[#000000] font-bold p-2 bg-black/5 rounded-xl w-10 h-10"
@@ -288,7 +288,6 @@ <h1 class="text-sm font-semibold mb-5">Sponsors</h1>
             <i class="fas fa-plus"></i>
           </a>
         </div>
-        <!-- <p class="mt-5 text-black/50">&copy; Alohe. 2024</p> -->
       </div>
     </div>