feat(webapp): enhance landing page with mobile menu and animation

- Added a mobile menu with toggle functionality to the landing page component.
- Implemented animations for the mobile menu using Angular animations.
- Updated the AI Chatbot feature status to "Available Now" and added a call-to-action button.
- Improved user experience with responsive design adjustments for mobile navigation.

Author: dalenguyen

webapp/src/app/components/landing-page.component.ts

@@ -131,6 +131,72 @@ import { AnalyticsService } from '../services/analytics.service'
               <span class="ml-1 bg-blue-500 text-white text-xs px-1.5 py-0.5 rounded-full">BETA</span>
             </a>
           </div>
+
+          <!-- Mobile Menu Button -->
+          <button
+            class="md:hidden text-gray-600 focus:outline-none hover:text-blue-600 transition duration-300"
+            (click)="toggleMobileMenu()"
+            aria-label="Toggle menu"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                *ngIf="!isMobileMenuOpen()"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M4 6h16M4 12h16M4 18h16"
+              />
+              <path
+                *ngIf="isMobileMenuOpen()"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+
+        <!-- Mobile Menu -->
+        <div
+          *ngIf="isMobileMenuOpen()"
+          [@mobileMenuAnimation]
+          class="md:hidden mt-3 border-t border-gray-200 pt-3"
+        >
+          <div class="flex flex-col space-y-3">
+            <a
+              href="#features"
+              class="text-gray-600 hover:text-blue-600 transition duration-300 py-1"
+              (click)="closeMobileMenu()"
+              >Features</a
+            >
+            <a
+              href="#about"
+              class="text-gray-600 hover:text-blue-600 transition duration-300 py-1"
+              (click)="closeMobileMenu()"
+              >About</a
+            >
+            <a
+              href="#contact"
+              class="text-gray-600 hover:text-blue-600 transition duration-300 py-1"
+              (click)="closeMobileMenu()"
+              >Contact</a
+            >
+            <a
+              routerLink="chat"
+              class="text-blue-600 hover:text-blue-800 transition duration-300 flex items-center py-1"
+              (click)="closeMobileMenu()"
+              >
+              <span>Chat</span>
+              <span class="ml-1 bg-blue-500 text-white text-xs px-1.5 py-0.5 rounded-full">BETA</span>
+            </a>
+          </div>
         </div>
       </nav>