Skip to main content
MetaCogna.ai Landing is a marketing and landing site that demonstrates MetaCogna Lab’s engagement model through story-driven hero sections, embedded portal previews, and project galleries.

​
Mission

Metacogna Lab partners with operators who need clear situational awareness across AI initiatives. This landing experience demonstrates how we choreograph executive dashboards, project galleries, and decision logs into a single narrative so prospective partners can glimpse the command center we will build for them.

​
Experience Overview

  • Story-driven content: Hero, methodology, and services sections explain engagement model
  • Embedded portal preview: Real-time decisions, pipelines, and project states
  • Seamless integrations: Contact, login, and HubSpot integrations
  • Handcrafted brand system: Consistent visual identity across all screens

​
Key Features

Hero Section

Story-driven hero with brand identity and value proposition

Project Gallery

Showcase of active projects with status indicators

Portal Dashboard

Embedded preview of executive command center

HubSpot Integration

Lead capture and CRM integration

Login System

Steganographic login with GitHub OAuth

Services Base

Executive operations and solutions design services

​
Technology Stack

​
Frontend

  • React 19 - UI framework
  • Vite - Build tool and dev server
  • Framer Motion - Animations
  • Tailwind CSS - Styling
  • TypeScript - Type safety

​
Backend

  • Cloudflare Workers - Edge functions
  • Workers KV - Key-value storage
  • HubSpot API - CRM integration

​
Quick Start

​
Prerequisites

  • Bun (recommended) or Node.js
  • Gemini API Key (for some features)

​
Installation

cd metacogna.ai-landing
bun install

​
Environment Setup

Create .env.local: 
VITE_GEMINI_API_KEY=your-gemini-key

​
Development

# Start dev server
bun run dev

# Build for production
bun run build

# Preview production build
bun run preview

​
Testing

# Type checking
bun run lint

​
Project Structure

metacogna.ai-landing/
├── components/          # React components
│   ├── HeroSection.tsx
│   ├── PortalDashboard.tsx
│   ├── ProjectGallery.tsx
│   ├── ProjectGrid.tsx
│   └── PaperComponents.tsx
├── services/           # Service layer
│   ├── portalService.ts
│   ├── authService.ts
│   └── pdfGenerator.ts
├── workers/            # Cloudflare Workers
│   ├── gateway.ts
│   ├── lead-ingest.ts
│   └── worker.js
├── data/               # Static data
│   └── profile.ts
└── docs/               # Documentation