Merge pull request #276 from AOSSIE-Org/dev

New Release

Author: M4dhav

.github/dependabot.yml

@@ -1,11 +1,15 @@
-# To get started with Dependabot version updates, you'll need to specify which
-# package ecosystems to update and where the package manifests are located.
-# Please see the documentation for all configuration options:
-# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
-
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: "npm"
+    directory: "/"
     schedule:
-      interval: "weekly"
+      interval: "monthly"
+    open-pull-requests-limit: 5
+    labels:
+      - "dependencies"
+      - "security"
+    ignore:
+      - dependency-name: "*"
+        update-types:
+          - "version-update:semver-major"
+    security-updates: true

app/components/DownloadApp/DownloadApp.css

@@ -84,3 +84,75 @@
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 }
 
+.download-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3.5rem;
+  margin-top: 2.5rem;
+}
+
+.download-actions .store-buttons {
+  display: flex;
+  justify-content: center;
+  flex-wrap: nowrap;
+}
+
+/* QR wrapper */
+.qr-code-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* Glow container */
+.qr-glow-container {
+  padding: 10px;
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+
+  box-shadow:
+    0 0 25px rgba(255, 255, 255, 0.18),
+    inset 0 0 12px rgba(255, 255, 255, 0.06);
+
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.qr-glow-container:hover {
+  transform: scale(1.03);
+  box-shadow:
+    0 0 40px rgba(255, 255, 255, 0.3),
+    inset 0 0 18px rgba(255, 255, 255, 0.12);
+}
+
+.qr-code-img {
+  width: 170px;
+  height: 170px;
+  border-radius: 12px;
+  display: block;
+  border: 3px solid #ffffff;
+}
+
+.qr-label {
+  margin-top: 14px;
+  font-size: 0.85rem;
+  letter-spacing: 1.4px;
+  text-transform: uppercase;
+  color: #bdbdbd;
+  font-weight: 600;
+}
+
+/* Mobile */
+@media (max-width: 768px) {
+  .download-actions {
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .qr-code-img {
+    width: 150px;
+    height: 150px;
+  }
+}

app/components/DownloadApp/DownloadApp.jsx

@@ -2,17 +2,33 @@ import './DownloadApp.css';
 import StoreButton from './StoreButton';
 
 const DownloadApp = () => {
+  const playStoreUrl ='https://play.google.com/store/apps/details?id=com.resonate.resonate';
+
   return (
     <section className="download-app-section">
       <div className="download-app-card">
-        <h2>Get the Resonate Mobile app.</h2>
-        <div className="store-buttons">
-          <StoreButton 
-            store="google" 
-            url="https://play.google.com/store/apps/details?id=com.resonate.resonate" 
-          />
+        <div className="download-text-wrapper">
+          <h2>Get the Resonate Mobile app.</h2>
+
+          <div className="download-actions">
+            <div className="store-buttons">
+              <StoreButton store="google" url={playStoreUrl} />
+            </div>
+
+            <div className="qr-code-wrapper">
+              <div className="qr-glow-container">
+                <img
+                  src="/qr_code.png"
+                  alt="Scan to download"
+                  className="qr-code-img"
+                />
+              </div>
+              <p className="qr-label">Scan to Download</p>
+            </div>
+          </div>
         </div>
       </div>
+
     </section>
   );
 };

public/index.html

@@ -4,11 +4,15 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/resonate_logo_white.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#FFC107" />
     <meta
       name="description"
       content="Resonate is an Open Source social voice platform maintained by AOSSIE. Join rooms, talk to people, and connect with the community."
     />
+    <meta 
+      name="keywords" 
+      content="Resonate, Open Source, Social Voice Platform, AOSSIE, Social Audio, Community" 
+    />
 
     <!--  Security Headers -->
 

public/manifest.json

@@ -20,6 +20,6 @@
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "theme_color": "#FFC107",
+  "background_color": "#FFFFFF"
 }