# GeekBrain.io VC Fund Website - Design Specification

## Overview

A single-page futuristic website for GeekBrain.io, a VC fund. The site establishes brand presence with a cyber/terminal aesthetic featuring particle backgrounds, glitch text effects, and glowing UI elements.

## Tech Stack

| Component | Technology |
|-----------|------------|
| Framework | Next.js 14 (App Router) |
| Styling | Tailwind CSS with custom utilities |
| Particles | @tsparticles/react + tsparticles |
| Animation | CSS keyframes + IntersectionObserver |
| Fonts | Space Grotesk (headings), Inter (body) |
| Deployment | Vercel or Netlify |

## Project Structure

```
geekbrain-site/
├── app/
│   ├── layout.tsx          # Root layout with dark theme, fonts
│   ├── page.tsx            # Single page with all sections
│   └── globals.css         # Tailwind imports + custom animations
├── components/
│   ├── Hero.tsx            # Animated hero with GlitchText
│   ├── About.tsx           # Glassmorphism card with fund info
│   ├── Contact.tsx         # LinkedIn social link
│   ├── ParticleBackground.tsx  # Full-screen particle canvas
│   ├── GlitchText.tsx      # Reusable glitch component
│   └── GlowButton.tsx      # Reusable glow button (future use)
├── tailwind.config.ts      # Custom glow utilities, colors
├── next.config.js
└── package.json
```

## Color System

**Theme:** Dark mode, blue-dominant, cyber aesthetic

| Name | Hex | Usage |
|------|-----|-------|
| Background | `#050510` | Page background |
| Primary | `#0088ff` | Main glows, highlights |
| Secondary | `#00ddff` | Bright accents, hover states |
| Tertiary | `#6600ff` | Subtle contrast, depth |
| Text Primary | `#ffffff` | Headings |
| Text Secondary | `#8899bb` | Body text |

## Visual Effects

### Particle Background

- 80-120 particles, 2-3px radius
- Blue/cyan color (`#0088ff`, `#00ddff`)
- Connected lines between nearby particles (150px distance)
- Slow drift movement (speed 0.5)
- Mouse repel on hover, attract on click
- Pauses when tab hidden for performance

### Glitch Text Effect

- 3-layer approach: base + ::before + ::after pseudo-elements
- Color split: white (base), cyan, deep blue
- 2.5s animation loop with intermittent glitch
- Intensity controlled via CSS custom properties
- Applied to main headline "GEEKBRAIN.IO"

### Glow Effects

Custom Tailwind utilities:
- `.glow-blue` - Blue box-shadow glow
- `.glow-cyan` - Cyan box-shadow glow
- `.text-glow-blue` - Blue text-shadow
- `.animate-pulse-glow` - Subtle pulsing animation
- 300ms transitions for hover states

## Sections

### Hero Section

**Content:**
- Headline: `GEEKBRAIN.IO` (GlitchText component, glitch effect)
- Tagline: "Backing the builders of tomorrow"
- Scroll indicator: Subtle animated arrow pointing down

**Layout:**
- Full viewport height
- Centered content
- Transparent background (particles visible)
- Fade-in animation on load

### About Section

**Content:**
- Heading: "About"
- Body (placeholder):
  > GeekBrain.io is a venture fund focused on technical founders building transformative technologies. We believe the best companies are built by engineers who deeply understand the problems they're solving. Our team brings decades of technical expertise to help founders navigate the journey from prototype to scale.

**Layout:**
- Glassmorphism card: `rgba(0, 40, 80, 0.3)` background
- Blue glow border on hover
- Fade-in animation on scroll
- Readable over particle background

### Contact Section

**Content:**
- Heading: "Connect"
- LinkedIn icon link with glow effect

**Layout:**
- Centered, horizontal arrangement
- Icon: Blue glow on hover, subtle pulse
- Fade-in animation on scroll

## Components

### GlitchText

```tsx
interface GlitchTextProps {
  text: string;
  as?: 'h1' | 'h2' | 'h3' | 'span';
  intensity?: 'subtle' | 'normal' | 'aggressive';
}
```

### GlowButton

```tsx
interface GlowButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
  href?: string;
  variant?: 'primary' | 'secondary';
}
```

### ParticleBackground

- Full-screen canvas component
- Uses tsparticles Slim preset as base
- Custom configuration for blue/cyan theme
- Z-index: -1 (behind all content)

## Animation Strategy

| Element | Trigger | Animation |
|---------|---------|-----------|
| Particles | Continuous | Drift, connect, interact |
| GlitchText | Continuous (loop) | Glitch effect every 2.5s |
| Hero content | Page load | Fade in, slight translate up |
| About card | Scroll into view | Fade in, translate up |
| Contact icons | Scroll into view | Fade in staggered |

## Performance Considerations

- Particles pause when tab not visible
- CSS animations preferred over JS where possible
- IntersectionObserver for scroll animations (not scroll listeners)
- Lazy load fonts with `next/font`
- Static generation (no server-side rendering needed)

## Future Expansion

The Next.js architecture supports easy additions:
- Portfolio page (when investments exist)
- Incubation page (when incubating companies)
- Contact form (if needed later)
- Blog/News section
- Team page

## Deployment

- Build: `npm run build` (Next.js static export)
- Deploy: Vercel (recommended) or Netlify
- Domain: Configure DNS for geekbrain.io
- HTTPS: Automatic with Vercel/Netlify