Change contribute to donate and add logos for donation buttons! (#297)

* Update stats, remove brave rewards button

* Added logos, changed to donate from contribute

* Back to contribute.html

* Update contribute

* Update style

* Minify SVG files

---------

Co-authored-by: MichaIng <[email protected]>
Co-authored-by: StephanStS <[email protected]>

contribute.html

@@ -52,7 +52,7 @@
 					<a class="nav-link" href="/#download">DOWNLOAD</a>
 					<a class="nav-link" href="/#gettingstarted">GETTING STARTED</a>
 					<a class="nav-link" href="stats.html">STATS</a>
-					<a class="nav-link" href="#contribute">CONTRIBUTE</a>
+					<a class="nav-link" href="#contribute">DONATE</a>
 					<a class="nav-link" href="/#testimonials">TESTIMONIALS</a>
 				</div>
 			</div>
@@ -74,10 +74,30 @@ <h2>Grow in 2022</h2>
 						<br><br>In 2022 we made 13 releases and brought 113 improvements and changes, and fixed 89 bugs. We provided new software titles, support new SBCs and brought many optimisations. There are over <a href="https://dietpi.com/survey/" target="_blank" rel="noopener">120000</a> systems running DietPi.
 						<br><b>Enable us to grow in 2023!</b>
 					</p>
-					<p class="medium-text">
-						<a href="https://www.paypal.com/donate?hosted_button_id=6DVBECXRW3TAA" class="button" target="_blank" rel="noopener">Donate via PayPal</a>
-						<a href="https://www.patreon.com/DietPi" class="button" target="_blank" rel="noopener">Become a Patron</a>
-					</p>
+					<div class="medium-text">
+						<a href="https://www.paypal.com/donate?hosted_button_id=6DVBECXRW3TAA" class="button" target="_blank" rel="noopener">
+							<div style="display: flex;flex-direction: column;justify-content: center;">
+								<div style="display: flex;flex-wrap: wrap;justify-content: center;">
+									<img src="images/contribute/paypal.svg" alt="PayPal Logo" width="32" height="32" loading="lazy">
+									Donate via PayPal
+								</div>
+								<div style="display: flex; gap: 0.5rem; margin-top: 0.5rem; margin-right: auto; margin-left: auto;flex-wrap: wrap;justify-content: center;">
+									<img src="images/contribute/mastercard.svg" alt="Mastercard Logo" width="26" height="16" loading="lazy">
+									<img src="images/contribute/visa.svg" alt="VISA Logo" width="50" height="16" loading="lazy">
+									<img src="images/contribute/american-express.svg" alt="American Express Logo" width="16" height="16" loading="lazy">
+									<img src="images/contribute/discover.svg" alt="Discover Logo" width="42" height="16" loading="lazy">
+								</div>
+							</div>
+						</a>
+						<a href="https://www.patreon.com/DietPi" class="button" target="_blank" rel="noopener" style="min-width: 152px;">
+							<div style="display: flex;flex-direction: column;justify-content: center; height: 100%; margin-left: 0.5rem; margin-right: 0.5rem;">
+								<div style="display: flex;flex-wrap: wrap;justify-content: center;">
+							<img src="images/contribute/patreon.svg" alt="Patreon Logo" width="32" height="32" loading="lazy">
+							Become a Patron
+								</div>
+							</div>
+						</a>
+					</div>
 				</div>
 				<div class="title">
 					<h2>Why contribute to DietPi as an open-source project?</h2>

css/style.css

@@ -147,6 +147,14 @@ a:active {
 	color: #181a1c;
 	padding: 20px;
 	margin-bottom: 20px;
+	display: flex;
+  margin-left: auto;
+  width: auto;
+  margin-right: auto;
+  justify-content: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+  /*align-items: center;*/
 }
 .large-text {
 	line-height: 1.2em;

dietpi-software.html

@@ -52,7 +52,7 @@
 					<a class="nav-link" href="/#download">DOWNLOAD</a>
 					<a class="nav-link" href="/#gettingstarted">GETTING STARTED</a>
 					<a class="nav-link" href="stats.html">STATS</a>
-					<a class="nav-link" href="contribute.html">CONTRIBUTE</a>
+					<a class="nav-link" href="contribute.html">DONATE</a>
 					<a class="nav-link" href="/#testimonials">TESTIMONIALS</a>
 				</div>
 			</div>