feat: add "Contribute" section to encourage open source participation

app/components/Layout/Footer/index.jsx

@@ -2,43 +2,39 @@ import React from "react";
 import "./Footer.css";
 import { FaLinkedinIn, FaGithub } from "react-icons/fa";
 import { BsTwitterX } from "react-icons/bs";
+import { SOCIAL_LINKS } from "@/constants/links";
+
+const iconMap = {
+  "GitHub": <FaGithub />,
+  "Twitter/X": <BsTwitterX />,
+  "LinkedIn": <FaLinkedinIn />,
+};
 
 const Footer = () => {
   const currentYear = new Date().getFullYear();
 
   return (
-    <footer className="footer">
+    <footer className="footer" role="contentinfo">
       <div className="footer-container">
-        <div className="copyright">&copy; {currentYear}</div>
+        <p className="copyright">&copy; {currentYear}</p>
+
         <div className="footer-socials">
-          <a
-            href="https://github.com/AOSSIE-Org"
-            rel="noopener noreferrer"
-            target="_blank"
-            aria-label="GitHub"
-          >
-            <FaGithub />
-          </a>
-          <a
-            href="https://x.com/aossie_org"
-            rel="noopener noreferrer"
-            target="_blank"
-            aria-label="Twitter/X"
-          >
-            <BsTwitterX />
-          </a>
-          <a
-            href="https://www.linkedin.com/company/aossie"
-            rel="noopener noreferrer"
-            target="_blank"
-            aria-label="LinkedIn"
-          >
-            <FaLinkedinIn />
-          </a>
+          {SOCIAL_LINKS.map((link, index) => (
+            <a
+              key={index}
+              href={link.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label={link.name}
+              title={`Visit ${link.name}`}
+            >
+              {iconMap[link.name]}
+            </a>
+          ))}
         </div>
       </div>
     </footer>
   );
 };
 
-export default Footer;
+export default Footer;

app/components/Layout/NavBar/Navbar.css

@@ -22,6 +22,10 @@
 }
 
 .navbar-logo {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0; 
   display: flex;
   align-items: center;
   font-size: 1.2rem;
@@ -156,4 +160,5 @@
 .download-btn:focus {
   outline: 2px solid #FFC107;
   outline-offset: 3px;
-}
+}
+

app/components/Layout/NavBar/index.jsx

@@ -3,33 +3,34 @@ import React, { useState } from "react";
 import "./Navbar.css";
 import { FaGithub, FaExternalLinkAlt } from "react-icons/fa";
 import Logo from "@/assets/resonate_logo_white.svg";
+import { NAV_LINKS } from "@/constants/links";
 
 const Navbar = () => {
   const [open, setOpen] = useState(false);
 
-  // Scroll to top and close mobile menu
   const scrollToTop = () => {
     window.scrollTo({ top: 0, behavior: "smooth" });
     setOpen(false);
   };
 
-  // Close menu when a link is clicked
-  const handleLinkClick = () => setOpen(false);
+  const handleLinkClick = () => {
+    setOpen(false);
+  };
 
   return (
-    <nav className="navbar">
+    <nav className="navbar" role="navigation">
       <div className="navbar-container">
         {/* Logo */}
-        <div
+        <button
           className="navbar-logo"
           onClick={scrollToTop}
-          style={{ cursor: "pointer" }}
+          aria-label="Go to homepage"
         >
           <img src={Logo.src} alt="Resonate Logo" className="logo-icon" />
           <span className="logo-text">Resonate</span>
-        </div>
+        </button>
 
-        {/* Hamburger button for mobile */}
+        {/* Hamburger */}
         <button
           className="hamburger"
           onClick={() => setOpen(!open)}
@@ -39,41 +40,43 @@ const Navbar = () => {
           ☰
         </button>
 
-        {/* Navigation links */}
+        {/* Links */}
         <div className={`navbar-links ${open ? "open" : ""}`}>
-          <a
-            href="https://aossie.org"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="nav-link"
-            onClick={handleLinkClick}
-          >
-            AOSSIE <FaExternalLinkAlt size={12} />
-          </a>
-
-          <a
-            href="https://github.com/AOSSIE-Org/Resonate"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="nav-link"
-            onClick={handleLinkClick}
-          >
-            <FaGithub size={20} />
-          </a>
+          {NAV_LINKS.map((link, index) => {
+            if (link.type === "button") {
+              return (
+                <a
+                  key={index}
+                  href={link.url}
+                  className="download-btn"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onClick={handleLinkClick}  
+                >
+                  {link.name}
+                </a>
+              );
+            }
 
-          <a
-            href="https://play.google.com/store/apps/details?id=com.resonate.resonate"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="download-btn"
-            onClick={handleLinkClick}
-          >
-            Download Now
-          </a>
+            return (
+              <a
+                key={index}
+                href={link.url}
+                className="nav-link"
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={handleLinkClick}  
+              >
+                {link.name}
+                {link.external && <FaExternalLinkAlt size={12} />}
+                {link.icon === "github" && <FaGithub size={20} />}
+              </a>
+            );
+          })}
         </div>
       </div>
     </nav>
   );
 };
 
-export default Navbar;
+export default Navbar;

app/components/About/About.jsx → app/components/sections/About/About.jsx

@@ -1,5 +1,5 @@
 import "./About.css";
-import AossieLogo from "../../assets/aossie_logo.png";
+import AossieLogo from "@/assets/aossie_logo.png";
 import { SiGitlab } from "react-icons/si";
 import { FaEnvelope, FaGithub, FaDiscord } from "react-icons/fa";
 import { BsTwitterX } from "react-icons/bs";

app/components/sections/Contribute/Contribute.css

@@ -0,0 +1,38 @@
+.contribute {
+  padding: 60px 20px;
+  background: #111;
+  color: #fff;
+  text-align: center;
+}
+
+.contribute-container {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.contribute h2 {
+  font-size: 2rem;
+  margin-bottom: 20px;
+}
+
+.contribute p {
+  font-size: 1rem;
+  margin-bottom: 30px;
+  line-height: 1.6;
+}
+
+.contribute-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  background: #fff;
+  color: #000;
+  padding: 10px 20px;
+  border-radius: 8px;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.contribute-btn:hover {
+  opacity: 0.85;
+}

app/components/sections/Contribute/Contribute.jsx

@@ -0,0 +1,28 @@
+import "./Contribute.css";
+import { FaGithub } from "react-icons/fa";
+
+const Contribute = () => {
+  return (
+    <section className="contribute">
+      <div className="contribute-container">
+        <h2>Contribute to Resonate</h2>
+        <p>
+          Resonate is an open-source platform built by the community. 
+          You can help improve the project by contributing code, reporting bugs,
+          or suggesting new features.
+        </p>
+
+        <a
+          href="https://github.com/AOSSIE-Org/Resonate"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="contribute-btn"
+        >
+          <FaGithub /> View on GitHub
+        </a>
+      </div>
+    </section>
+  );
+};
+
+export default Contribute;

app/components/Features/Features.jsx → app/components/sections/Features/Features.jsx

@@ -1,8 +1,8 @@
 import "./Features.css";
-import featureImage1 from "../../assets/roomscreen.png";
-import featureImage2 from "../../assets/createrooms.png";
-import featureImage3 from "../../assets/pairchat.png";
-import featureImage4 from "../../assets/chatscreen.png";
+import featureImage1 from "@/assets/roomscreen.png";
+import featureImage2 from "@/assets/createrooms.png";
+import featureImage3 from "@/assets/pairchat.png";
+import featureImage4 from "@/assets/chatscreen.png";
 
 const featuresData = [
   {

app/components/Hero/Hero.jsx → app/components/sections/Hero/Hero.jsx

@@ -1,6 +1,6 @@
 import "./Hero.css";
 import { FaGithub, FaArrowRight } from "react-icons/fa";
-import phoneImage from "../../assets/resonate_app.png";
+import phoneImage from "@/assets/resonate_app.png";
 import Image from "next/image";
 
 const Hero = () => {

app/components/TechStack/TechStack.jsx → app/components/sections/TechStack/TechStack.jsx

@@ -1,6 +1,6 @@
 import "./TechStack.css";
-import flutterLogo from "../../assets/Flutter.png";
-import appwriteLogo from "../../assets/Appwrite.png";
+import flutterLogo from "@/assets/Flutter.png";
+import appwriteLogo from "@/assets/Appwrite.png";
 
 const TechStack = () => {
   return (

app/constants/links.js

@@ -0,0 +1,23 @@
+export const SOCIAL_LINKS = [
+  { name: "GitHub", url: "https://github.com/AOSSIE-Org" },
+  { name: "Twitter/X", url: "https://x.com/aossie_org" },
+  { name: "LinkedIn", url: "https://www.linkedin.com/company/aossie" },
+];
+
+export const NAV_LINKS = [
+  {
+    name: "AOSSIE",
+    url: "https://aossie.org",
+    external: true,
+  },
+  {
+    name: "GitHub",
+    url: "https://github.com/AOSSIE-Org/Resonate",
+    icon: "github",
+  },
+  {
+    name: "Download",
+    url: "https://play.google.com/store/apps/details?id=com.resonate.resonate",
+    type: "button",
+  },
+];

app/page.jsx

@@ -6,11 +6,12 @@ import { ScrollTrigger } from "gsap/ScrollTrigger";
 import Lenis from "lenis";
 
 // Components
-import Hero from "./components/Hero/Hero";
-import Features from "./components/Features/Features";
-import TechStack from "./components/TechStack/TechStack";
-import About from "./components/About/About";
-import DownloadApp from "./components/DownloadApp/DownloadApp";
+import Hero from "@/components/sections/Hero/Hero";
+import Features from "@/components/sections/Features/Features";
+import TechStack from "@/components/sections/TechStack/TechStack";
+import About from "@/components/sections/About/About";
+import DownloadApp from "@/components/sections/DownloadApp/DownloadApp";
+import Contribute from "@/components/sections/Contribute/Contribute";
 
 gsap.registerPlugin(ScrollTrigger);
 
@@ -210,6 +211,33 @@ export default function Home() {
         "-=0.4",
       );
 
+    // Contribute Section Animation
+    const contributeTl = gsap.timeline({
+      scrollTrigger: {
+        trigger: ".contribute",
+        start: "top 80%",
+      },
+    });
+
+    contributeTl
+      .fromTo(
+        ".contribute h2",
+        { y: 40, opacity: 0 },
+        { y: 0, opacity: 1, duration: 0.8, ease: "power3.out" }
+      )
+      .fromTo(
+        ".contribute p",
+        { y: 30, opacity: 0 },
+        { y: 0, opacity: 1, duration: 0.8, ease: "power3.out" },
+        "-=0.5"
+      )
+      .fromTo(
+        ".contribute-btn",
+        { scale: 0.8, opacity: 0 },
+        { scale: 1, opacity: 1, duration: 0.6, ease: "back.out(1.7)" },
+        "-=0.4"
+      );
+
     return () => {
       isActive = false;
       if (rafId != null) {
@@ -227,6 +255,7 @@ export default function Home() {
       <TechStack />
       <About />
       <DownloadApp />
+      <Contribute />
     </div>
   );
 }