# Project Mycelium Website

A multi-page website for Project Mycelium built with React, Vite, TypeScript, and Tailwind CSS.

## Tech Stack

- **Framework**: React 19
- **Build Tool**: Vite 7
- **Language**: TypeScript
- **Styling**: Tailwind CSS 4
- **Routing**: React Router DOM 7
- **Animations**: Framer Motion 11

## Project Structure

```
src/
├── components/          # Shared components
│   ├── AnimatedSection.tsx
│   ├── Button.tsx
│   ├── CircleBackground.tsx
│   ├── Container.tsx
│   ├── Header.tsx
│   ├── Layout.tsx
│   └── Logo.tsx
├── pages/              # Page-specific components
│   ├── home/           # Home page blocks
│   ├── cloud/          # Cloud page blocks
│   ├── network/        # Network page blocks
│   │   ├── animations/ # SVG animations
│   │   ├── Hero.tsx
│   │   ├── About.tsx
│   │   ├── Features.tsx
│   │   ├── PrimaryFeatures.tsx
│   │   ├── SecondaryFeatures.tsx
│   │   ├── CallToAction.tsx
│   │   └── NetworkPage.tsx
│   └── agents/         # Agents page blocks
├── styles/
│   └── tailwind.css    # Tailwind configuration
└── App.tsx            # Main app with routing
```

## Pages

- **Home** (`/`) - Main landing page with placeholder content
- **Cloud** (`/cloud`) - Mycelium Cloud information (placeholder)
- **Network** (`/network`) - Full Network page with:
  - Hero section
  - Our Mission (About)
  - Core Components (Features with animations)
  - How It Works
  - Roadmap
  - Call to Action
- **Agents** (`/agents`) - Mycelium Agents information (placeholder)

## Development

Install dependencies:
```bash
npm install
```

Run development server:
```bash
npm run dev
```

Build for production:
```bash
npm run build
```

Preview production build:
```bash
npm run preview
```

## Styling

The project follows the same styling conventions as the source Mycelium website:
- **Font**: Inter (Google Fonts)
- **Colors**: Custom gray scale and cyan accent
- **Animations**: Framer Motion with reduced motion support
- **Design**: Tailwind CSS with custom theme extensions

## Migration Notes

This website consolidates multiple one-pager sites into a single multi-page application. The Network page contains fully migrated content from the original www_mycelium_net repository, including:
- All animated SVG components
- Responsive layouts
- Hover effects and transitions
- Accessibility features