Nexus by Airtable

A production-quality splash landing page for "Nexus by Airtable" — internal apps that act safely.

Features

• Modern Dark Aesthetic - Subtle gradients, glass-morphism cards, and clean typography
• Fully Responsive - Optimized for mobile, tablet, and desktop
• Accessible - ARIA roles, keyboard navigation, and semantic HTML
• Static Export - Fully static, no backend required
• Fast - Minimal dependencies, optimized for performance
• SEO Ready - Meta tags, Open Graph, and sitemap included

Tech Stack

• Next.js 14+ (App Router)
• TypeScript
• Tailwind CSS
• No external fonts (system fonts)
• Minimal dependencies

Getting Started

Prerequisites

• Node.js 18+
• npm 9+

Installation

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:3000 to view the site.

Building for Production

# Build the static site
npm run build

# The output will be in the `out/` directory

Linting

# Run ESLint
npm run lint

Project Structure

├── app/
│   ├── globals.css       # Global styles + Tailwind
│   ├── layout.tsx        # Root layout + SEO metadata
│   ├── page.tsx          # Main landing page
│   └── sitemap.ts        # Dynamic sitemap
├── components/
│   ├── Header.tsx        # Sticky navigation with mobile menu
│   ├── Hero.tsx          # Hero section with execution card
│   ├── ThreePrimitives.tsx  # Feature cards
│   ├── AutonomyDial.tsx  # Interactive autonomy slider
│   ├── HowItWorks.tsx    # 4-step process section
│   ├── Security.tsx      # Security features grid
│   ├── UseCases.tsx      # Tabbed use cases
│   ├── Marketplace.tsx   # Ops Pack tiles
│   ├── Footer.tsx        # CTA + footer navigation
│   ├── Button.tsx        # Reusable button component
│   ├── GlassCard.tsx     # Glass-morphism card
│   └── RevealSection.tsx # Scroll reveal animation
├── public/
│   ├── favicon.svg       # Site favicon
│   └── logo.svg          # Logo placeholder
├── tailwind.config.ts    # Tailwind configuration
├── next.config.ts        # Next.js configuration
└── package.json          # Dependencies

Sections

1. Hero - Main headline, CTAs, trust chips, and execution card visual
2. Three Primitives - Core concepts: Object Model, Sandbox, Autonomy Dial
3. Autonomy Dial - Interactive slider showing autonomy levels 0-4
4. How It Works - 4-step process flow
5. Security & Governance - Enterprise security features
6. Use Cases - Tabbed interface for different use cases
7. Marketplace - Ops Pack tiles preview
8. Footer - CTA section and navigation

Deployment

This is a fully static site. Deploy the out/ directory to any static hosting:

• Vercel: npx vercel
• Netlify: Drag and drop out/ folder
• AWS S3: Upload out/ to S3 bucket with static hosting
• GitHub Pages: Push out/ contents to gh-pages branch

Customization

Colors

Edit tailwind.config.ts to customize the color palette:

colors: {
  nexus: {
    bg: '#0a0a0f',
    accent: '#6366f1',
    // ...
  }
}

Content

Edit the component files in components/ to update copy and content.

Metadata

Edit app/layout.tsx to update SEO metadata, Open Graph tags, etc.

License

Proprietary - Airtable