Add support sections

README.md

@@ -188,6 +188,19 @@ Contributions to tududi are welcome! Whether it's bug fixes, new features, docum
 - Translation guidelines
 - Pull request checklist
 
+## 💖 Support the Project
+
+If you find tududi useful, consider supporting its development:
+
+<p align="center">
+  <a href="https://github.com/sponsors/chrisvel"><img src="https://img.shields.io/badge/GitHub_Sponsors-Support-ea4aaa?logo=githubsponsors&logoColor=white&style=for-the-badge" alt="GitHub Sponsors"></a>
+  <a href="https://www.patreon.com/ChrisVeleris"><img src="https://img.shields.io/badge/Patreon-Support-F96854?logo=patreon&logoColor=white&style=for-the-badge" alt="Patreon"></a>
+  <a href="https://coff.ee/chrisveleris"><img src="https://img.shields.io/badge/Buy_Me_a_Coffee-Support-FFDD00?logo=buymeacoffee&logoColor=black&style=for-the-badge" alt="Buy Me a Coffee"></a>
+  <a href="https://www.paypal.com/donate/?hosted_button_id=QEQCKLXPB6XAE"><img src="https://img.shields.io/badge/PayPal-Donate-0070BA?logo=paypal&logoColor=white&style=for-the-badge" alt="PayPal"></a>
+</p>
+
+Your support helps keep tududi free, open-source, and actively maintained. Every contribution — big or small — makes a difference!
+
 ## 📜 License
 
 This project is licensed under the [MIT License](LICENSE).

index.html

@@ -1741,6 +1741,95 @@
         </div>
     </section>
 
+    <section class="sponsor" style="padding: 100px 0; background: linear-gradient(135deg, var(--primary-color) 0%, #1565c0 100%); color: white; position: relative; overflow: hidden;">
+        <style>
+            .sponsor::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="sponsor-grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23sponsor-grid)"/></svg>');
+                opacity: 0.3;
+            }
+            .sponsor-grid {
+                display: grid;
+                grid-template-columns: repeat(4, 1fr);
+                gap: 20px;
+                max-width: 800px;
+                margin: 0 auto;
+            }
+            .sponsor-link {
+                background: rgba(255, 255, 255, 0.1);
+                backdrop-filter: blur(10px);
+                border: 1px solid rgba(255, 255, 255, 0.2);
+                border-radius: 15px;
+                padding: 20px 15px;
+                text-align: center;
+                text-decoration: none;
+                color: white;
+                font-weight: 600;
+                font-size: 0.95rem;
+                transition: all 0.3s ease;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 10px;
+            }
+            .sponsor-link:hover {
+                transform: translateY(-5px) scale(1.02);
+                background: rgba(255, 255, 255, 0.2);
+                border-color: rgba(255, 255, 255, 0.4);
+                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+                color: white;
+            }
+            .sponsor-link i {
+                font-size: 1.8rem;
+                filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+            }
+            .sponsor-link span {
+                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+            }
+            @media (max-width: 768px) {
+                .sponsor-grid {
+                    grid-template-columns: repeat(2, 1fr);
+                    gap: 15px;
+                }
+                .sponsor-link {
+                    padding: 15px 10px;
+                }
+                .sponsor-link i {
+                    font-size: 1.5rem;
+                }
+            }
+        </style>
+        <div class="container" style="position: relative; z-index: 1;">
+            <div class="section-header" style="margin-bottom: 60px;">
+                <h2 style="color: white; font-size: 2.8rem; margin-bottom: 20px;">Support tududi</h2>
+                <p style="color: rgba(255, 255, 255, 0.9); font-size: 1.2rem;"><strong>tududi</strong> is free and open-source. If it helps you stay productive, consider supporting its development — every contribution keeps the project alive and growing.</p>
+            </div>
+            <div class="sponsor-grid">
+                <a href="https://github.com/sponsors/chrisvel" class="sponsor-link">
+                    <i class="fab fa-github"></i>
+                    <span>GitHub Sponsors</span>
+                </a>
+                <a href="https://www.patreon.com/ChrisVeleris" class="sponsor-link">
+                    <i class="fab fa-patreon"></i>
+                    <span>Patreon</span>
+                </a>
+                <a href="https://coff.ee/chrisveleris" class="sponsor-link">
+                    <i class="fas fa-mug-hot"></i>
+                    <span>Buy Me a Coffee</span>
+                </a>
+                <a href="https://www.paypal.com/donate/?hosted_button_id=QEQCKLXPB6XAE" class="sponsor-link">
+                    <i class="fab fa-paypal"></i>
+                    <span>PayPal</span>
+                </a>
+            </div>
+        </div>
+    </section>
+
     <section class="cta">
         <div class="container">
             <h2>Take Control of Your Productivity</h2>