Marketing Landing Page
Relevant source files
The following files were used as context for generating this wiki page:
The Marketing Landing Page serves as the primary entry point for the ATMOS project, designed to provide a high-impact visual introduction to the AI-first workspace. Its purpose is to communicate core value propositions, showcase features, and provide clear calls-to-action (CTA) for prospective users. Within the broader documentation hierarchy, the landing page app is categorized as a Layer 3 application, focusing on user-facing marketing content rather than internal system architecture.
Sources: apps/landing/README.md:9-14, DOCUMENTATION.md:30-45
Architecture Overview
The landing page is built using Next.js 16 and React 19, utilizing the App Router for routing and layout management. It is part of a monorepo structure, consuming shared resources such as UI components and internationalization configurations.
Tech Stack Components
| Technology | Role |
|---|---|
| Next.js 16 | Framework and App Routing |
| React 19 | UI Component Library |
| Tailwind CSS v4 | Styling and Design |
| next-intl | Internationalization (i18n) |
| TypeScript | Type safety and development experience |
| @workspace/ui | Shared UI component package |
Sources: apps/landing/README.md:17-22, apps/landing/README.md:113-117
Application Structure
The application follows a structured directory layout under apps/landing/, separating static assets, internationalization messages, and application logic.
The diagram shows the logical separation of concerns within the landing page application directory.
Sources: apps/landing/README.md:27-58
Core Landing Page Sections
The landing page content is modularized into specific section components located in src/components/sections/. This modularity allows for discrete maintenance of the visual impact and functional areas of the page.
Section Breakdown
| Component | Purpose |
|---|---|
hero-section.tsx | Main visual entry point with headline and primary CTA |
features-section.tsx | Detailed grid or list of product capabilities |
tech-stack-section.tsx | Showcase of underlying technologies (e.g., AI-first approach) |
cta-section.tsx | Final conversion point for user action |
footer.tsx | Navigation links and legal information |
Sources: apps/landing/README.md:63-71
Data Flow for Content Rendering
Content is dynamic based on the user's locale. The application uses next-intl to bridge the gap between static code and translated strings.
The flow shows how a request is processed through the internationalization middleware to retrieve localized content before rendering the component sections.
Sources: apps/landing/README.md:52-54, apps/landing/src/app/[locale]/page.tsx:1-10
Internationalization (i18n)
The landing page supports English and Chinese out of the box. Translation files are stored in a flat JSON structure within the messages/ directory.
Key I18n Translation Fields
The schema for translations covers all visible UI text, organized by component section:
{
"Hero": {
"headline": "AI-first Workspace",
"subheadline": "Boost your productivity",
"cta": "Get Started"
}
}
Sources: apps/landing/README.md:76-88, apps/landing/messages/en.json
Design Principles and Implementation
The landing page is governed by five core design principles to ensure a high-quality user experience:
- Visual Impact: Utilizing animations in the hero section to capture attention.
- Clear CTA: Prominent buttons to guide users toward participation or setup.
- Social Proof: Highlighting feature sets and the tech stack to build trust.
- Mobile-First: Ensuring responsive layouts across all device sizes.
- Performance: Leveraging Next.js features for image optimization and lazy loading.
Sources: apps/landing/README.md:122-127
Implementation Example
The root landing page uses a localized async component structure to fetch messages and render the main view.
// apps/landing/src/app/[locale]/page.tsx
export default async function LandingPage() {
return (
<main>
<HeroSection />
<FeaturesSection />
<TechStackSection />
<CTASection />
<Footer />
</main>
);
}
Note: Simplified representation of the structure evidenced in source files.
Sources: apps/landing/src/app/[locale]/page.tsx:1-20
Summary
The Marketing Landing Page is a performance-optimized, localized application within the ATMOS ecosystem. By leveraging shared monorepo packages (@workspace/ui) and modern frameworks like Next.js 16, it provides a scalable architecture for showcasing the project's features. Its modular component design and strictly defined internationalization workflow ensure that marketing content can be updated independently of core business logic.