Add Discord community section

Author: huycozy

assets/css/style.css

@@ -211,6 +211,35 @@ header {
     opacity: 0.9;
 }
 
+.discord-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.85rem;
+    min-height: 58px;
+    padding: 0.75rem 1.3rem;
+    border: 1px solid rgba(88, 101, 242, 0.36);
+    border-radius: 12px;
+    background: rgba(88, 101, 242, 0.12);
+    color: var(--text-primary);
+    font-weight: 700;
+    line-height: 1;
+    transition: transform 0.2s, border-color 0.2s, background 0.2s;
+}
+
+.discord-button:hover {
+    transform: translateY(-2px);
+    border-color: rgba(88, 101, 242, 0.62);
+    background: rgba(88, 101, 242, 0.2);
+}
+
+.discord-button img {
+    display: block;
+    width: clamp(42px, 9vw, 64px);
+    height: auto;
+    flex-shrink: 0;
+}
+
 .indiehunt-badge {
     display: flex;
     justify-content: center;
@@ -371,6 +400,30 @@ footer {
     color: var(--accent);
 }
 
+.discord-icon-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    border: 1px solid rgba(88, 101, 242, 0.36);
+    border-radius: 12px;
+    background: rgba(88, 101, 242, 0.12);
+    transition: transform 0.2s, border-color 0.2s, background 0.2s;
+}
+
+.discord-icon-link:hover {
+    transform: translateY(-2px);
+    border-color: rgba(88, 101, 242, 0.62);
+    background: rgba(88, 101, 242, 0.2);
+}
+
+.discord-icon-link img {
+    display: block;
+    width: 32px;
+    height: auto;
+}
+
 .social-links {
     display: flex;
     flex-direction: column;
@@ -448,6 +501,27 @@ footer {
     color: var(--text-primary);
 }
 
+.community-section {
+    margin-top: 3rem;
+    padding: 3rem 0 0;
+    border-top: 1px solid var(--card-border);
+    text-align: center;
+}
+
+.community-section h2 {
+    margin-bottom: 1rem;
+}
+
+.community-section h3 {
+    margin-bottom: 0.75rem;
+    font-size: 1.35rem;
+}
+
+.community-section p {
+    max-width: 620px;
+    margin: 0 auto 1.5rem;
+}
+
 /* Mobile Responsive */
 @media (max-width: 768px) {
     h1 {
@@ -470,4 +544,9 @@ footer {
     .policy-content {
         padding: 1.5rem;
     }
+
+    .discord-button {
+        width: min(100%, 320px);
+        min-height: 56px;
+    }
 }

assets/images/Discord.png

@@ -216,8 +216,10 @@ <h2>Your network. Your data. Your control.</h2>
         </section>
 
         <div class="coffee-support" style="text-align: center; padding: 2rem 0; color: #a1a1aa;">
-            💙 If you liked this app, consider <a href="https://buymeacoffee.com/huynguyennovem" target="_blank" rel="noopener" style="color: #007bff; text-decoration: underline;">buying me a coffee</a>
+            💙 If you liked this app, consider <a href="https://buymeacoffee.com/huynguyennovem" target="_blank"
+                rel="noopener" style="color: #007bff; text-decoration: underline;">buying me a coffee</a>
         </div>
+
     </main>
 
     <footer>
@@ -227,6 +229,13 @@ <h2>Your network. Your data. Your control.</h2>
                     <h4>Netshare</h4>
                     <p style="font-size: 0.9rem;">Open source local file sharing.</p>
                 </div>
+                <div class="footer-links">
+                    <h4>Community</h4>
+                    <a href="https://discord.gg/bDuY7qrJE" class="discord-icon-link" target="_blank" rel="noopener"
+                        aria-label="Join the Netshare Discord community">
+                        <img src="assets/images/Discord.png" alt="" aria-hidden="true">
+                    </a>
+                </div>
                 <div class="footer-links">
                     <h4>Legal</h4>
                     <ul>

index.html

@@ -47,6 +47,18 @@ <h3>Contact Us</h3>
                         style="width: 100%; margin-top: 1rem;">Email Us</a>
                 </div>
             </div>
+
+            <section class="community-section">
+                <h2>Community</h2>
+                <h3>Join the Discord community.</h3>
+                <p>Connect with other Netshare users, ask quick questions, and get updates from the project in Discord.
+                </p>
+                <a href="https://discord.gg/bDuY7qrJE" class="discord-button" target="_blank" rel="noopener"
+                    aria-label="Join the Discord community">
+                    <img src="../assets/images/Discord.png" alt="" aria-hidden="true">
+                    <span>Join Discord</span>
+                </a>
+            </section>
         </div>
     </main>