Updated styles etc. For the donate button (#16)

Signed-off-by: Roger Barker <pendletonroger@gmail.com>

Author: rbarker-dev

public/index.html

@@ -31,7 +31,7 @@
                         <a href="#configure-custom-props" class="dropdown-item">Configure Custom Properties</a>
                     </div>
                 </div>
-                <a href="#support" class="nav-item">Support PWC</a>
+                <a href="#support" class="nav-item">Support the Devs</a>
             </div>
         </div>
     </nav>
@@ -310,8 +310,14 @@ <h3>
 
     <section id="support" class="section">
         <div class="container">
-            <h2>Support PWC</h2>
+            <h2>Support Pandas Who Code</h2>
             <p>Help us continue building amazing tools for the community.</p>
+            <div id="donate" class="support-item">
+                <a href="https://www.paypal.com/donate/?business=Q2D7BPHDKJQV2&no_recurring=0&item_name=Support+the+development+efforts+behind+Pandas+Who+Code&currency_code=USD" class="support-link" target="_blank" rel="noopener noreferrer">
+                    <i class="fab fa-paypal"></i>
+                    <span>Donate with PayPal</span>
+                </a>
+            </div>
         </div>
     </section>
 

public/styles/index.css

@@ -291,6 +291,48 @@ p {
     margin-top: 1rem;
 }
 
+.support-item {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 15px;
+    padding: 2rem;
+    backdrop-filter: blur(10px);
+    margin-bottom: 2rem;
+    transition: transform 0.3s ease;
+    display: inline-block;
+}
+
+.support-item:hover {
+    transform: translateY(-5px);
+    background: rgba(0, 255, 255, 0.1);
+}
+
+.support-link {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1.2rem 2rem;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    border: 2px solid transparent;
+    color: #ffffff;
+    text-decoration: none;
+    font-size: 1.2rem;
+}
+
+.support-link:hover {
+    border-color: #00ffff;
+    background: rgba(0, 255, 255, 0.1);
+}
+
+.support-link i {
+    font-size: 1.8rem;
+    color: #00ffff;
+}
+
+.support-link:hover i {
+    transform: scale(1.1);
+}
+
 @media (max-width: 768px) {
     .section {
         padding: 5rem 1rem 3rem;