Landing Page Application
Relevant source files
The following files were used as context for generating this wiki page:
The Landing Page Application is a separate Next.js-based marketing and documentation site for KamehaDB. It serves as the public-facing portal to showcase the project's features, provide installation instructions, and host a dynamic changelog derived from the repository's root metadata.
Unlike the core desktop application and sidecar, the landing site is managed independently using npm and maintains its own dependency tree and lockfile outside of the primary pnpm workspace. Its primary scope includes SEO optimization, brand representation, and providing a gateway for users to download the cross-platform database GUI.
Sources: AGENTS.md:16-24, landing/package.json:1-10
Architecture and Framework
The application is built using the Next.js App Router and utilizes React 19. It is styled with Tailwind CSS v4 and incorporates motion animations via the motion (Framer Motion) library.
Technology Stack
| Category | Technology |
|---|---|
| Framework | Next.js 16.2.6 |
| Runtime | React 19.2.4 |
| Styling | Tailwind CSS 4, Lucide React, Tabler Icons |
| Animations | Motion (Framer Motion) |
| Theming | next-themes |
Sources: landing/package.json:11-26, landing/src/app/layout.tsx:1-10
Workspace Relationship
As noted in the project's architectural guidelines, the landing/ directory is not part of the pnpm workspace used by @kamehadb/desktop and @kamehadb/sidecar. It requires explicit npm commands or specific root scripts that target the prefix.
# Running the landing site in development
npm --prefix landing run dev
Sources: AGENTS.md:29-32, AGENTS.md:73
Components and UI Logic
The UI is structured around a centralized layout that provides consistent navigation and theming across different routes, such as the home page and the changelog.
Navigation and Theming
The navigation bar is a fixed, backdrop-blurred element containing the project logo, internal links, a GitHub CTA, and a ThemeToggle component. The ThemeToggle interacts with next-themes to support light, dark, and system color modes.
Sources: landing/src/components/home-view.tsx:130-165, landing/src/app/layout.tsx:100-110
Home View Features
The main landing page (home-view.tsx) utilizes several specialized components to demonstrate application functionality:
- TerminalTypewriter: Simulates a terminal environment cycling through SQL, MongoDB, and Redis queries to illustrate multi-engine support.
- Compare Component: A visual slider used to show the relationship between the AI chat panel and the resulting SQL output.
- Feature Grid: Displays technical capabilities such as Schema Visualization and AI Query Generation.
Sources: landing/src/components/home-view.tsx:88-125, landing/src/components/home-view.tsx:392-414
Component Interaction Flow
The following diagram illustrates how the Landing Application organizes its views and shared UI components:
Dynamic Changelog System
The landing/src/app/changelog/page.tsx implements a custom parser to transform the repository's root CHANGELOG.md into a structured web view.
Parsing Logic
The parseChangelog function processes raw text by identifying Markdown patterns:
- Releases: Identified by
## [Version] — Date. - Sections: Identified by
### [Type](e.g., Added, Fixed, Changed). - Groups: Optional sub-headings identified by
####. - Items: Bullet points converted into clickable nodes.
The parser handles multi-line descriptions and item continuations to ensure formatting consistency.
Sources: landing/src/app/changelog/page.tsx:31-137
File Resolution
The application must locate the CHANGELOG.md file dynamically depending on the execution context (local development vs. production build).
function resolveChangelogPath(): string {
const rootPath = path.join(process.cwd(), 'CHANGELOG.md');
if (fs.existsSync(rootPath)) return rootPath;
const landingPath = path.join(process.cwd(), '..', 'CHANGELOG.md');
if (fs.existsSync(landingPath)) return landingPath;
throw new Error('Unable to locate CHANGELOG.md');
}
Sources: landing/src/app/changelog/page.tsx:190-201
SEO and Metadata Configuration
The application implements comprehensive SEO strategies using Next.js Metadata API and JSON-LD structured data.
Metadata Properties
| Property | Value / Description |
|---|---|
| Title Template | `%s |
| OpenGraph | Images at /og-image.png, locale en_US |
summary_large_image card | |
| Robots | Indexing enabled with max-image-preview: large |
Sources: landing/src/app/layout.tsx:10-60
Structured Data (JSON-LD)
The RootLayout injects a SoftwareApplication schema to improve search engine visibility for the desktop app. It defines the application category as DeveloperApplication and specifies Windows, macOS, Linux as the target operating systems.
Sources: landing/src/app/layout.tsx:81-105
Conclusion
The Landing Page Application serves as the essential bridge between the technical implementation of KamehaDB and its user base. By leveraging Next.js for high-performance delivery and custom parsers for documentation synchronization, it ensures that project updates and features are presented in a visually engaging and SEO-optimized manner.