Landing Page Website
Relevant source files
The following files were used as context for generating this wiki page:
The Landing Page Website is a standalone web application designed to promote and distribute the Messenger Unleashed desktop client. It provides a visual overview of the application's features, including privacy controls, customization options, and power-user tools, while serving as the primary distribution hub for macOS and Windows installers.
Built using the Next.js framework, the landing page is structured as a modern, responsive single-page application (SPA). It leverages React for UI components and CSS Modules for styling, ensuring a high-performance experience that aligns with the "native feel" of the desktop application it represents.
Sources: landing-page/package.json:11-15, landing-page/src/app/HomeClient.tsx:95-101, landing-page/layout.tsx:4-15
Architecture and Framework
The website is constructed using Next.js 16.1.0 and React 19.2.3. It utilizes a client-side component architecture for interactive elements and an optimized layout system for SEO and metadata management.
Component Structure
The primary logic resides in HomeClient.tsx, which acts as the main entry point for the landing page content. It manages state for interactive features like version-based download links and clipboard operations.
The diagram above shows the hierarchical structure of the landing page components within the Next.js App Router.
Sources: landing-page/package.json:11-15, landing-page/src/app/HomeClient.tsx:1-133
Key Systems and Logic
Dynamic Versioning and Download Resolution
The landing page dynamically calculates download URLs based on the current version of the application. It specifically targets the GitHub release repository for both macOS and Windows artifacts.
| Platform | Distribution Method | URL / Command |
|---|---|---|
| macOS | Shell Script | curl -fsSL .../install.sh | bash |
| Windows | EXE Installer | .../releases/download/v{version}/Messenger.Unleashed.Setup.{version}.exe |
Sources: landing-page/src/app/HomeClient.tsx:88-93
Interactive Features Logic
The page includes several client-side interactions managed via React hooks:
- Version Normalization: Processes the version string to remove prefixes (like 'v') for URL construction.
- Intersection Observer: Used to trigger CSS animations (e.g.,
animateInandvisibleclasses) as the user scrolls through feature cards. - Clipboard API: Facilitates the copying of the macOS installation command to the user's clipboard.
The sequence diagram illustrates the logic for the "Copy to Clipboard" functionality for the macOS installation script.
Sources: landing-page/src/app/HomeClient.tsx:103-131, landing-page/src/app/page.module.css:760-773
Feature Presentation
The landing page categorizes the desktop application's capabilities into four primary areas:
Privacy and Security
- Read Receipt Blocking: Prevents others from seeing message read status.
- Typing Indicator Hiding: Suppresses the "typing..." bubble during composition.
- Clipboard Sanitizer: Strips tracking metadata from pasted content.
- Active Status Blocking: Allows users to appear offline while seeing others.
Customization
- Theme Engine: Showcases 17+ built-in themes (OLED Dark, Nord, Dracula, etc.).
- Theme Creator: Links to an external tool at
mstheme.pcstyle.dev. - CSS Injection: Mentions the ability to fine-tune pixels with custom styles.
Productivity and Tools
- Scheduled Messages: Configurable delay timers for message delivery.
- Keyboard Navigation: Conversation switching via
Cmd/Ctrl + Up/Down. - Quick Replies: Templates for fast communication.
Sources: landing-page/src/app/HomeClient.tsx:185-285
Configuration and Metadata
The project uses a centralized metadata configuration for SEO and social sharing (Open Graph).
| Field | Value | Source |
|---|---|---|
| Title | Messenger Unleashed — Messenger, but better. | layout.tsx |
| Description | Supercharged desktop client with privacy and power-user tools. | layout.tsx |
| License | MIT Licensed | HomeClient.tsx |
| Keywords | messenger, desktop, electron, privacy, themes | layout.tsx |
Sources: landing-page/src/app/layout.tsx:4-15, landing-page/src/app/HomeClient.tsx:148
Styling and Animation
The visual identity is defined in page.module.css, which uses CSS variables for consistent theming and complex animations for user engagement.
Animation System
The site uses @keyframes for various effects:
- Pulse: Used for the version badge dot to indicate "live" status.
- FloatY: Applied to floating badges in the hero section for a dynamic feel.
- AnimateIn: A scroll-triggered fade-and-slide effect for sections.
Sources: landing-page/src/app/page.module.css:98-102, landing-page/src/app/page.module.css:218-221, landing-page/src/app/page.module.css:751-760
The Landing Page Website serves as a robust entry point for the Messenger Unleashed ecosystem, combining modern web frameworks with clear technical documentation and distribution logic to support the desktop application's user base.