refactor: Improve readability and organization of index.html

index.html

@@ -171,7 +171,8 @@
         <div class="max-w-md mx-auto mb-10">
           <h1 class="text-xl font-semibold mt-10">Avatars</h1>
           <p class="text-black/50 text-sm mt-2">
-            You can copy and paste the avatars into your project, or download the images and host them on your server.
+            You can copy and paste the avatars into your project, or download
+            the images and host them on your server.
           </p>
         </div>
         <div class="images"></div>
@@ -218,31 +219,6 @@ <h1 class="text-xl font-semibold mt-10">Avatars</h1>
       </div>
     </div>
 
-    <!-- stargazers profiles -->
-    <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"
-      ></div>
-      <!-- star button -->
-      <a
-        class="bg-black text-white pl-6 pr-5 py-2 rounded-xl mt-5 flex items-center gap-2 font-bold text-sm w-fit mx-auto"
-        href="https://github.com/alohe/avatars"
-        target="_blank"
-      >
-        <i class="fab fa-github text-xl"></i> Star
-
-        <span
-          class="bg-white text-black pr-1 pl-1 text-xs rounded-xl github-stars"
-        ></span>
-      </a>
-
-      <small class="text-black/50 text-sm mt-2 block">
-        Leave a star on GitHub to see yourself here
-      </small>
-    </div>
-
     <div class="grid text-center my-10 max-w-sm mx-auto">
       <h1 class="text-sm font-semibold mb-5">Sponsors</h1>
       <div class="text-center">
@@ -301,25 +277,8 @@ <h1 class="text-sm font-semibold mb-5">Sponsors</h1>
             <i class="fas fa-plus"></i>
           </a>
         </div>
-
-        <p class="text-center mt-10">
-          You can also get the code on
-          <a
-            href="https://copyui.com/templates/avatars"
-            target="_blank"
-            class="text-[#0d99ff] font-bold"
-          >
-            CopyUI.com</a
-          >
-        </p>
       </div>
 
-      <footer class="text-center mt-10">
-        <p class="text-black/50 text-sm">
-          &copy; 2024 Avatars. All rights reserved.
-        </p>
-      </footer>
-
       <a
         href="https://x.com/alemalohe"
         target="_blank"
@@ -342,6 +301,37 @@ <h1 class="text-sm font-semibold mb-5">Sponsors</h1>
       </a>
     </div>
 
+    <!-- stargazers profiles -->
+    <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"
+      ></div>
+      <!-- star button -->
+      <a
+        class="bg-black text-white pl-6 pr-5 py-2 rounded-xl mt-5 flex items-center gap-2 font-bold text-sm w-fit mx-auto"
+        href="https://github.com/alohe/avatars"
+        target="_blank"
+      >
+        <i class="fab fa-github text-xl"></i> Star
+
+        <span
+          class="bg-white text-black pr-1 pl-1 text-xs rounded-xl github-stars"
+        ></span>
+      </a>
+
+      <small class="text-black/50 text-sm mt-2 block">
+        Leave a star on GitHub to see yourself here
+      </small>
+    </div>
+
+    <footer class="text-center mt-10">
+      <p class="text-black/50 text-sm">
+        &copy; 2024 Avatars. All rights reserved.
+      </p>
+    </footer>
+
     <!-- JavaScript -->
     <script src="assets/js/main.js" preload></script>
     <script