VC Phi

A professional venture capital platform built with Next.js 15, React 19, Tailwind CSS, and Supabase. Designed for wealth managers, family offices, and investor relations teams.

Design Philosophy: "The Sovereign Standard"

• Palette: Abyss (#040D12), Boardroom (#183D3D), Growth (#5C8374), Parchment (#93B1A6)
• Typography: Playfair Display (display), Inter (body)
• Dark-first design with atmospheric gradients and institutional gravitas
• Weighty 800ms+ reveal animations for deliberate, professional feel
• Principle: "Trust Through Restraint" — authority through measured confidence

Features

• Blog/Insights — Category-filtered articles with rich content rendering
• Portfolio Showcase — Investment portfolio with status tracking, metrics (MOIC, IRR), and category filtering
• Investors Section — LP relations with type categorization and partnership details
• Team Directory — Leadership profiles with bios and social links
• AI Integration — Portfolio optimization and content assistance via Claude API
• Dashboard — Admin interface for managing all content
• Full Authentication — Email/password auth with profile management

Tech Stack

• Framework: Next.js 15 (App Router)
• UI: React 19 + Tailwind CSS
• Database: Supabase (PostgreSQL with RLS)
• AI: Claude API (Anthropic)
• Icons: Lucide React
• Charts: Recharts

Quick Start

1. Clone the repository
2. Install dependencies:

   npm install

3. Copy .env.example to .env.local and configure:

   cp .env.example .env.local

4. Start development server:

   npm run dev

The app runs in demo mode when Supabase is not configured, using built-in sample data.

Environment Variables

Variable	Description
NEXT_PUBLIC_SUPABASE_URL	Your Supabase project URL
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY	Supabase publishable (anon) key
SUPABASE_SECRET_KEY	Supabase secret (service role) key
ANTHROPIC_API_KEY	Claude API key for AI features

Database Setup

Run the schema in supabase/schema.sql against your Supabase project. The schema includes:

• 10 tables with Row Level Security (RLS)
• Automatic profile creation trigger
• Seed data for development

Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── api/               # API routes (claude, upload)
│   ├── auth/              # Authentication page
│   ├── blog/              # Blog listing and detail
│   ├── dashboard/         # Admin dashboard
│   ├── investors/         # LP directory
│   ├── portfolio/         # Investment portfolio
│   └── team/              # Team directory
├── components/
│   ├── ai/                # AI-powered components
│   ├── blog/              # Blog components
│   ├── dashboard/         # Dashboard components
│   ├── investors/         # Investor components
│   ├── landing/           # Homepage sections
│   ├── portfolio/         # Portfolio components
│   ├── shared/            # Shared components
│   └── team/              # Team components
└── lib/                   # Utilities and contexts
    ├── auth-context.tsx   # Authentication provider
    ├── demo-data.ts       # Sample data for demo mode
    ├── supabase.ts        # Supabase client
    ├── types.ts           # TypeScript interfaces
    └── utils.ts           # Utility functions

Demo Mode

When Supabase credentials are not configured, the app automatically runs in demo mode with:

• Sample team members (5 profiles)
• Sample portfolio companies (5 investments)
• Sample blog posts (4 articles)
• Sample investors (4 LPs)
• Full navigation and UI functionality

License

MIT