Landing Page Architecture
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Morty landing page is a modern, responsive web application built using Next.js and React. It serves as the primary informational portal for the Morty project, an autonomous AI coding loop. The architecture is designed to communicate Morty's capabilities, supported AI engines, and usage patterns to developers while providing a streamlined installation experience through interactive components.
The landing page follows a component-based structure, utilizing Tailwind CSS for styling and Next.js for routing and metadata management. It highlights key technical features such as parallel execution via git worktrees, project-specific rule enforcement, and browser automation capabilities.
Technical Framework and Dependencies
The landing page is built on the Next.js 16 framework and leverages the latest React 19 features. It is a private package named ralphy-landing (reflecting the project's previous branding).
| Dependency | Purpose |
|---|---|
next (^16.0.0) | Core framework for SSR and routing |
react (^19.0.0) | UI library for component development |
tailwindcss (^4.0.0) | Utility-first CSS framework for styling |
@vercel/analytics | Usage tracking and performance monitoring |
lucide-react | Icon library for UI elements |
Sources: landing/package.json:1-25, landing/app/layout.tsx:1-5
Component Hierarchy and Layout
The architecture follows a standard Next.js App Router pattern where the root layout wraps the main entry point.
Root Layout
The RootLayout component establishes the global HTML structure, sets the language to English, and integrates Vercel Analytics. It also manages the global CSS and font styles.
Sources: landing/app/layout.tsx:81-93
Page Structure
The main landing page is composed of several modular sections integrated within a single <main> tag.
The diagram shows the top-down component hierarchy of the landing page.
Sources: landing/app/page.tsx:32-41
Key Functional Components
Hero Section
The Hero component is a client-side interactive section that introduces the product and provides a primary call-to-action (CTA). It features:
- Version Badging: Displays the current npm version (v5.0.0).
- Interactive Install: A button that copies the command
npm install -g morty-clito the user's clipboard using thenavigator.clipboardAPI. - State Management: Uses React
useStateto handle the "copied" feedback state.
Sources: landing/components/hero.tsx:1-60
Features and Logic
The Features section details the internal mechanics of the Morty CLI. It highlights several architectural capabilities of the underlying system:
- Task Sources: Sequential or parallel processing of Markdown PRDs, YAML, or GitHub Issues.
- Parallel Worktrees: Use of git worktrees to run multiple agents in isolation.
- Project Rules: Integration of a
.morty/directory for boundary and rule definitions. - Test/Lint Integration: Automated verification steps during the coding loop.
Sources: landing/components/features.tsx:1-45
Quickstart Guide
The Quickstart component provides code snippets for common CLI operations, categorized by usage type.
| Category | Command Examples |
|---|---|
| Single Task | morty "add dark mode toggle" |
| Task List | morty --prd PRD.md |
| Parallel | morty --prd PRD.md --parallel --max-parallel 5 |
| Configuration | morty --init, morty --add-rule "..." |
Sources: landing/components/quickstart.tsx:1-55
SEO and Metadata Architecture
The landing page implements extensive metadata and Schema.org structured data to optimize for search engines and social sharing.
Metadata Definition
The metadata object in the layout defines OpenGraph tags, Twitter Card information, and canonical URLs. It specifies a metadataBase of https://morty.goshen.fyi.
Sources: landing/app/layout.tsx:5-79
Structured Data (JSON-LD)
The application injects a SoftwareApplication schema to explicitly define the project's category, operating systems, and authoring organization.
The diagram represents the JSON-LD schema structure used for SEO.
Sources: landing/app/page.tsx:7-27
Summary
The Landing Page Architecture for Morty leverages a modular React structure within the Next.js framework to deliver a performance-oriented developer landing page. By combining static informational components with interactive elements like the Hero CTA and Quickstart guide, the architecture provides a comprehensive overview of the Morty AI coding loop's technical capabilities.