feat(ui): Proactive UI/UX Improvements, Responsiveness, and Security Patch

.gitignore

@@ -23,4 +23,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-.next
+.next
+
+.idx

app/components/About/About.css

@@ -1,71 +1,92 @@
 .about {
-  padding: 4rem 0;
-  background-color: white;
+  padding: 80px 0;
+  background-color: #f8f9fa;
 }
 
 .about-container {
   display: flex;
   align-items: center;
   justify-content: center;
-  max-width: 1000px;
+  max-width: 1200px;
   margin: 0 auto;
-  gap: 4rem;
-  padding: 0 20px;
+  gap: 60px;
 }
 
 .about-logo {
-  flex: 1;
-  display: flex;
-  justify-content: center;
+  flex: 0 0 300px;
 }
 
 .about-logo img {
   max-width: 100%;
   height: auto;
-  max-height: 300px;
 }
 
 .about-content {
   flex: 1;
+  max-width: 600px;
 }
 
 .about-content h2 {
   font-size: 2.5rem;
-  line-height: 1.2;
-  margin-bottom: 1.5rem;
-  font-weight: 700;
-  color: #1a1a1a;
+  font-weight: bold;
+  line-height: 1.3;
+  margin-bottom: 20px;
 }
 
 .about-content p {
-  font-size: 1rem;
+  font-size: 1.1rem;
   line-height: 1.6;
+  margin-bottom: 30px;
   color: #555;
-  margin-bottom: 2rem;
-}
-
-.social-links {
-  display: flex;
-  gap: 1.5rem;
 }
 
 .social-links a {
-  color: #888;
-  font-size: 1.5rem;
+  color: #333;
+  font-size: 1.8rem;
+  margin-right: 20px;
   transition: color 0.2s;
 }
 
 .social-links a:hover {
-  color: #1a1a1a;
+  color: #FFC107;
 }
 
-@media (max-width: 768px) {
+/* Responsive Styles */
+@media (max-width: 992px) {
   .about-container {
     flex-direction: column;
     text-align: center;
+    gap: 40px;
+  }
+
+  .about-logo {
+    flex: 0 0 200px; /* Adjust logo size for smaller screens */
+  }
+
+  .about-content h2 {
+    font-size: 2rem;
   }
-
-  .social-links {
-    justify-content: center;
+
+  .about-content p {
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 576px) {
+  .about {
+    padding: 60px 0;
+  }
+
+  .about-logo {
+    flex: 0 0 150px;
+  }
+
+  .about-content h2 {
+    font-size: 1.8rem;
+  }
+
+  .social-links a {
+    font-size: 1.5rem;
+    margin: 0 10px;
   }
 }

app/components/DownloadApp/DownloadApp.jsx

@@ -3,7 +3,8 @@ import './DownloadApp.css';
 import StoreButton from './StoreButton';
 
 const DownloadApp = () => {
-  const playStoreUrl ='https://play.google.com/store/apps/details?id=com.resonate.resonate';
+  const playStoreUrl = 'https://play.google.com/store/apps/details?id=com.resonate.resonate';
+
 
   return (
     <section className="download-app-section">

app/components/Features/Features.css

@@ -5,6 +5,15 @@
   font-family: 'Raleway', sans-serif;
 }
 
+.section-title {
+  font-size: 2.5rem;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 4rem;
+  color: #1a1a1a;
+}
+
+
 .feature-item {
   display: flex;
   align-items: center;
@@ -68,4 +77,8 @@
     gap: 2rem;
     margin-bottom: 4rem;
   }
-}
+  .section-title {
+    font-size: 1.8rem; /* Shrinks the font on mobile */
+    margin-bottom: 2rem;
+  }
+}

app/components/Features/Features.jsx

@@ -37,6 +37,7 @@ const featuresData = [
 const Features = () => {
   return (
     <section className="features">
+      <h2 className="section-title">Features</h2>
       {featuresData.map((feature) => (
         <div
           key={feature.id}

app/components/Layout/NavBar/Navbar.css

@@ -156,4 +156,25 @@
 .download-btn:focus {
   outline: 2px solid #FFC107;
   outline-offset: 3px;
-}
+}
+
+.hamburger span {
+  display: block;
+  width: 25px;
+  height: 3px;
+  margin: 5px auto;
+  background-color: white;
+  transition: all 0.3s ease-in-out;
+}
+
+.hamburger.open span:nth-child(1) {
+  transform: translateY(8px) rotate(45deg);
+}
+
+.hamburger.open span:nth-child(2) {
+  opacity: 0;
+}
+
+.hamburger.open span:nth-child(3) {
+  transform: translateY(-8px) rotate(-45deg);
+}

app/components/Layout/NavBar/index.jsx

@@ -33,17 +33,21 @@ const Navbar = () => {
         </div>
 
         {/* Hamburger button for mobile */}
-        <button
-          className="hamburger"
+       <button
+          type="button"
+          className={`hamburger ${open ? "open" : ""}`}
           onClick={handleToggleMenu}
           aria-label="Toggle navigation"
           aria-expanded={open}
+          aria-controls="navbar-links"
         >
-          ☰
+          <span />
+          <span />
+          <span />
         </button>
 
         {/* Navigation links */}
-        <div className={`navbar-links ${open ? "open" : ""}`}>
+        <div id="navbar-links" className={`navbar-links ${open ? "open" : ""}`}>
           <a
             href="https://aossie.org"
             target="_blank"

app/page.jsx

@@ -139,43 +139,58 @@ export default function Home() {
       );
 
     // About Animation
-    const aboutTl = gsap.timeline({
-      scrollTrigger: {
-        trigger: ".about",
-        start: "top 70%",
+    // Add this at the start of your animations section
+let mm = gsap.matchMedia();
+
+// About Animation with Responsive Handling
+mm.add({
+  // Desktop
+  isDesktop: "(min-width: 769px)",
+  // Mobile
+  isMobile: "(max-width: 768px)"
+}, (context) => {
+  let { isDesktop } = context.conditions;
+
+  const aboutTl = gsap.timeline({
+    scrollTrigger: {
+      trigger: ".about",
+      start: isDesktop ? "top 70%" : "top 85%", // Start slightly later on mobile
+    },
+  });
+
+  aboutTl
+    .fromTo(
+      ".about-logo",
+      // Use x for desktop, y for mobile
+      { x: isDesktop ? -50 : 0, y: isDesktop ? 0 : 30, opacity: 0 },
+      { x: 0, y: 0, opacity: 1, duration: 1, ease: "power3.out" },
+    )
+    .fromTo(
+      ".about-content h2",
+      // Switch horizontal 'x' to vertical 'y' for mobile
+      { x: isDesktop ? 50 : 0, y: isDesktop ? 0 : 20, opacity: 0 },
+      { x: 0, y: 0, opacity: 1, duration: 1, ease: "power3.out" },
+      "-=0.8",
+    )
+    .fromTo(
+      ".about-content p",
+      { x: isDesktop ? 50 : 0, y: isDesktop ? 0 : 20, opacity: 0 },
+      { x: 0, y: 0, opacity: 1, duration: 1, ease: "power3.out" },
+      "-=0.8",
+    )
+    .fromTo(
+      ".social-links a",
+      { y: 20, opacity: 0 },
+      {
+        y: 0,
+        opacity: 1,
+        duration: 0.5,
+        stagger: 0.1,
+        ease: "back.out(1.7)",
       },
-    });
-
-    aboutTl
-      .fromTo(
-        ".about-logo",
-        { x: -50, opacity: 0 },
-        { x: 0, opacity: 1, duration: 1, ease: "power3.out" },
-      )
-      .fromTo(
-        ".about-content h2",
-        { x: 50, opacity: 0 },
-        { x: 0, opacity: 1, duration: 1, ease: "power3.out" },
-        "-=0.8",
-      )
-      .fromTo(
-        ".about-content p",
-        { x: 50, opacity: 0 },
-        { x: 0, opacity: 1, duration: 1, ease: "power3.out" },
-        "-=0.8",
-      )
-      .fromTo(
-        ".social-links a",
-        { y: 20, opacity: 0 },
-        {
-          y: 0,
-          opacity: 1,
-          duration: 0.5,
-          stagger: 0.1,
-          ease: "back.out(1.7)",
-        },
-        "-=0.6",
-      );
+      "-=0.6",
+    );
+});
 
     // Download App Animation
     const downloadTl = gsap.timeline({
@@ -216,6 +231,7 @@ export default function Home() {
         cancelAnimationFrame(rafId);
       }
       lenis.destroy();
+      mm.revert();
       ScrollTrigger.getAll().forEach((t) => t.kill());
     };
   }, []);