Kleo Landing Page

A Next.js 15 landing page built with TypeScript and Tailwind CSS.

Getting Started

First, install the dependencies:

npm install

Then, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Project Structure

• app/ - Next.js App Router directory
  • layout.tsx - Root layout with font configuration
  • page.tsx - Main landing page
  • globals.css - Global styles and Tailwind directives
• tailwind.config.ts - Tailwind CSS configuration with custom design system
• next.config.mjs - Next.js configuration
• .cursor/rules/index.mdc - AI coding rules for this project

Design System

Typography

• Heading font: Sora (H1: 56px, H2: 48px, H3: 40px)
• Body font: Inter (Body: 20px, Caption: 16px)

Colors

• deep-space-blue: #090909
• atomic-tangerine: #ff6b35
• amber-honey: #eca406
• cetacean-blue: #01091C
• oxford-blue: #061A4B
• anti-flash-white: #F2F2F2

Guidelines & Conventions

This project follows a few basic guidelines to keep the codebase consistent:

• Language & stack

  • Next.js 15 with the App Router.
  • TypeScript for all components and utilities.
  • Tailwind CSS as the main styling solution.

• Components

  • Prefer small, focused functional components.
  • Reusable UI lives under src/components/.
  • Shared utilities live under src/lib/.

• Design system

  • Use the colors and typography tokens defined in tailwind.config.ts.
  • Prefer semantic naming and consistent spacing.

• Commits & branches

  • Use short, descriptive commit messages (inspired by Conventional Commits): feat: …, fix: …, chore: …, docs: ….
  • Work on feature branches: feat/..., fix/..., chore/....

For more details, see CONTRIBUTING.md.