From 4dd1b9c7d6a871a760cf6134cab03e37fc830c68 Mon Sep 17 00:00:00 2001
From: gabeeeboii <59292284+gabeeeboii@users.noreply.github.com>
Date: Tue, 19 Jul 2022 10:23:43 -0600
Subject: [PATCH] QOL Update 1

*Added donation banner
*Redesigned "powered by" banner
*Updated text colors above "get RetroDeck" btn
---
 docs/index.html | 33 +++++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 6dced346..171879b5 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -46,7 +46,7 @@
                     <li class="nav-item"><a class="nav-link" href="https://github.com/XargonWan/RetroDECK/wiki" style="color: rgb(49,52,55);" target="_blank">wiki</a></li>
                     <li class="nav-item"><a class="nav-link" href="https://github.com/XargonWan/RetroDECK-cooker/" style="color: rgb(49,52,55);" target="_blank">cooker</a></li>
                     <li class="nav-item"><a class="nav-link" href="https://github.com/XargonWan/RetroDECK" target="_blank" style="color: rgb(49,52,55);">github</a></li>
-                    <li class="nav-item"><a class="nav-link" href="https://www.patreon.com/RetroDECK" target="_blank" style="color: rgb(49,52,55);"><strong>patreon</strong></a></li>
+                    <li class="nav-item"><a class="nav-link" href="https://www.patreon.com/RetroDECK" target="_blank" style="color: rgb(49,52,55);">patreon</a></li>
                     <li class="nav-item"><a class="nav-link" href="https://discord.gg/tbmBpJbpur" target="_blank" style="color: rgb(49,52,55);">connect with us</a></li>
                 </ul>
             </div>
@@ -58,22 +58,23 @@
             <!-- Start: Intro -->
             <div class="intro">
                 <h2 class="text-center" style="font-size: 60px;margin-bottom: 0px;"><img class="img-fluid" src="assets/img/SSLM.png" style="margin-bottom: 25px;"></h2>
-                <p class="text-center" style="font-size: 20px;color: rgb(218,218,218);">RetroDeck is an easy and fancy environment for managing and launching your retro games on Steam Deck without relying on custom firmware. </p>
+                <p class="text-center" style="font-size: 20px;color: rgb(255,255,255);">RetroDeck is an easy and fancy environment for managing and launching your retro games on Steam Deck without relying on custom firmware. </p>
             </div><!-- End: Intro -->
             <!-- Start: Buttons -->
             <div class="buttons" style="margin-bottom: 0px;"><a class="btn btn-secondary" role="button" target="_blank" style="color: black;background: white;border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;" href="https://flathub.org/apps/details/net.retrodeck.retrodeck"><i class="fas fa-download"></i>&nbsp;Get retrodeck</a></div><!-- End: Buttons -->
         </div>
     </section><!-- End: Highlight Clean -->
-    <!-- Start: Highlight Clean -->
-    <section class="highlight-clean" style="background: linear-gradient(-95deg, #1a9fff, #946beb);">
+    <!-- Start: Banner Color -->
+    <section class="py-4 py-xl-5">
         <div class="container">
-            <!-- Start: Intro -->
-            <div class="intro" style="margin-bottom: 0px;">
-                <h2 class="text-center" style="color: rgb(255,255,255);">POWERED BY EMULATIONSTATION-DE<br></h2>
-                <p class="text-center" style="color: rgb(255,255,255);margin-bottom: 0px;">RetroDeck teamed up with ES-DE to bring you the best retro launcher out there!<br></p>
-            </div><!-- End: Intro -->
+            <div class="text-white bg-primary border rounded border-0 border-primary d-flex flex-column justify-content-between align-items-center align-items-sm-center align-items-md-center flex-lg-row justify-content-lg-center justify-content-xl-center justify-content-xxl-center p-4 p-md-5" style="background: linear-gradient(-95deg, #1a9fff, #946beb);">
+                <div class="pb-2 pb-lg-1">
+                    <h2 class="fw-bold mb-2" style="color: rgb(255,255,255);text-align: center;">POWERED BY EMULATIONSTATION-DE</h2>
+                    <p class="mb-0" style="color: rgb(255,255,255);text-align: center;">RetroDeck teamed up with ES-DE to bring you the best retro launcher out there!</p>
+                </div>
+            </div>
         </div>
-    </section><!-- End: Highlight Clean -->
+    </section><!-- End: Banner Color -->
     <!-- Start: Features Clean -->
     <section id="features" class="features-clean">
         <div class="container">
@@ -133,6 +134,18 @@
             </div><!-- End: Photos -->
         </div>
     </section><!-- End: Lightbox Gallery -->
+    <!-- Start: Banner Color -->
+    <section class="py-4 py-xl-5">
+        <div class="container">
+            <div class="text-white bg-primary border rounded border-0 border-primary d-flex flex-column justify-content-between flex-lg-row p-4 p-md-5" style="background: linear-gradient(-95deg, #1a9fff, #946beb);">
+                <div class="pb-2 pb-lg-1">
+                    <h2 class="fw-bold mb-2" style="color: rgb(255,255,255);">Support us oN patreon!</h2>
+                    <p class="mb-0" style="color: rgb(255,255,255);">Help us keep our servers running by donating to our Patreon! Did we mention you get donor benefits?</p>
+                </div>
+                <div class="my-2"><a class="btn btn-light fs-5 py-2 px-4" role="button" href="https://www.patreon.com/RetroDECK" target="_blank">donate</a></div>
+            </div>
+        </div>
+    </section><!-- End: Banner Color -->
     <!-- Start: Footer Basic -->
     <footer class="footer-basic">
         <!-- Start: Social Icons -->