feat: add shellular

Co-authored-by: Copilot <copilot@github.com>

Author: biraj21

client/components/announcementBanner/index.js

@@ -1,29 +1,42 @@
 import './style.scss';
-import hpLogo from 'res/hp-logo.png';
+import shellularLogo from 'res/shellular-logo.png';
 
 const BANNERS = [
+  {
+    id: 'shellular',
+    logo: shellularLogo,
+    url: 'https://shellular.dev',
+    alt: 'Shellular',
+    badge: 'NEW',
+    mobileTitle: 'Shellular - Remote control for your AI agents & terminals',
+    title: 'Try Shellular',
+    subtitle: 'Access your Codex, Claude Code, OpenCode, terminals, files, and ports from your phone.',
+    cta: 'Get now',
+    theme: 'shellular',
+  },
   {
     id: 'betterkeep',
     logo: 'https://betterkeep.app/icons/logo.png',
     url: 'https://betterkeep.app/welcome?utm_source=acode_announcement_banner',
     alt: 'Better Keep Notes',
     badge: 'NEW',
+    mobileTitle: 'Better Keep Notes - Secure & Private',
     title: 'Introducing Better Keep Notes',
     subtitle: 'A beautiful, private note-taking app. Try it free!',
     cta: 'Learn More',
     theme: 'betterkeep',
   },
-  {
-    id: 'hangingpiece',
-    logo: hpLogo,
-    url: 'https://www.hangingpiece.com?utm_source=acode_announcement_banner',
-    alt: 'Hanging Piece',
-    badge: 'NEW',
-    title: 'Hanging Piece - Claude Code for Chess',
-    subtitle: 'Understand WHY you blundered and HOW to improve!',
-    cta: 'Try Now',
-    theme: 'hangingpiece',
-  },
+  // {
+  //   id: 'hangingpiece',
+  //   logo: hpLogo,
+  //   url: 'https://www.hangingpiece.com?utm_source=acode_announcement_banner',
+  //   alt: 'Hanging Piece',
+  //   badge: 'NEW',
+  //   title: 'Hanging Piece - Claude Code for Chess',
+  //   subtitle: 'Understand WHY you blundered and HOW to improve!',
+  //   cta: 'Try Now',
+  //   theme: 'hangingpiece',
+  // },
 ];
 
 const TOGGLE_INTERVAL = 8000;
@@ -33,6 +46,7 @@ export default function AnnouncementBanner() {
 
   const $logo = <img alt='App Logo' className='announcement-banner__logo' />;
   const $badge = <span className='announcement-banner__new-badge' />;
+  const $mobileTitle = <span className='announcement-banner__mobile-title' />;
   const $title = <span className='announcement-banner__title' />;
   const $subtitle = <span className='announcement-banner__subtitle' />;
   const $ctaText = <span className='announcement-banner__cta-text' />;
@@ -50,6 +64,7 @@ export default function AnnouncementBanner() {
         <div className='announcement-banner__logo-wrapper'>{$logo}</div>
         <div className='announcement-banner__text'>
           {$badge}
+          {$mobileTitle}
           {$title}
           {$subtitle}
         </div>
@@ -110,6 +125,7 @@ export default function AnnouncementBanner() {
       $logo.src = b.logo;
       $logo.alt = b.alt;
       $badge.textContent = b.badge;
+      $mobileTitle.textContent = b.mobileTitle || b.title;
       $title.textContent = b.title;
       $subtitle.textContent = b.subtitle;
       $ctaText.textContent = b.cta;

client/components/announcementBanner/style.scss

@@ -49,6 +49,65 @@
     }
   }
 
+  &--shellular {
+    background: linear-gradient(135deg,
+        #08090b 0%,
+        #0d0d0f 24%,
+        #18181b 56%,
+        #1b1b1f 100%);
+    border-bottom-color: rgba(214, 194, 161, 0.18);
+
+    .announcement-banner__new-badge {
+      background: linear-gradient(135deg, #f1c98d, #d6c2a1);
+      color: #140f0a;
+      box-shadow: 0 2px 10px rgba(214, 194, 161, 0.35);
+    }
+
+    .announcement-banner__title {
+      color: #f5f1e8;
+    }
+
+    .announcement-banner__mobile-title {
+      color: #f5f1e8;
+    }
+
+    .announcement-banner__subtitle {
+      color: rgba(245, 241, 232, 0.78);
+    }
+
+    .announcement-banner__cta {
+      background: linear-gradient(135deg, #d6c2a1, #8a745c);
+      color: #140f0a;
+      box-shadow: 0 4px 15px rgba(138, 116, 92, 0.3);
+    }
+
+    .announcement-banner__logo-wrapper {
+      background: rgba(214, 194, 161, 0.12);
+      box-shadow: 0 4px 15px rgba(20, 15, 10, 0.35);
+    }
+
+    .announcement-banner__indicator.active {
+      background: #f1c98d;
+      box-shadow: 0 0 12px rgba(241, 201, 141, 0.5);
+    }
+
+    .announcement-banner__close {
+      background: rgba(214, 194, 161, 0.12);
+
+      .icon {
+        color: rgba(245, 241, 232, 0.82);
+      }
+
+      &:hover {
+        background: rgba(214, 194, 161, 0.24);
+
+        .icon {
+          color: #f5f1e8;
+        }
+      }
+    }
+  }
+
   &::before {
     content: '';
     position: absolute;
@@ -230,6 +289,14 @@
     letter-spacing: 0.3px;
   }
 
+  &__mobile-title {
+    display: none;
+    color: #fff;
+    font-size: 0.9rem;
+    font-weight: 600;
+    letter-spacing: 0.2px;
+  }
+
   &__subtitle {
     color: rgba(255, 255, 255, 0.7);
     font-size: 0.85rem;
@@ -315,6 +382,12 @@
     }
 
     &__title {
+      display: none;
+      font-size: 0.85rem;
+    }
+
+    &__mobile-title {
+      display: inline;
       font-size: 0.85rem;
     }
 
@@ -354,6 +427,10 @@
       font-size: 0.8rem;
     }
 
+    &__mobile-title {
+      font-size: 0.8rem;
+    }
+
     &__cta {
       padding: 5px 10px;
       font-size: 0.7rem;