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">
@@ -14,6 +15,7 @@ const DownloadApp = () => {
           <div className="download-actions">
             <div className="store-buttons">
               <StoreButton store="google" url={playStoreUrl} />
+
             </div>
 
             <div className="qr-code-wrapper">

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

@@ -39,8 +39,12 @@ const Navbar = () => {
           aria-label="Toggle navigation"
           aria-expanded={open}
         >
-          ☰
+          <span />
+          <span />
+          <span />
+
         </button>
+
 
         {/* Navigation links */}
         <div className={`navbar-links ${open ? "open" : ""}`}>