Initial Phoenix Sankofa Cloud setup

- Complete project structure with Next.js frontend
- GraphQL API backend with Apollo Server
- Portal application with NextAuth
- Crossplane Proxmox provider
- GitOps configurations
- CI/CD pipelines
- Testing infrastructure (Vitest, Jest, Go tests)
- Error handling and monitoring
- Security hardening
- UI component library
- Documentation

docs/architecture/README.md

@@ -0,0 +1,85 @@
+# Architecture Diagrams
+
+This directory contains comprehensive architecture diagrams for the Hybrid Cloud Control Plane system.
+
+## Diagrams
+
+### 1. System Overview (`system-overview.svg`)
+High-level view of all system components and their relationships:
+- Cloudflare Zero Trust Layer
+- Custom Portal (Next.js)
+- Kubernetes Control Plane
+- Observability Stack
+- Identity Management (Keycloak)
+- GitOps (ArgoCD)
+- Proxmox Edge Sites
+
+### 2. Data Flow (`data-flow.svg`)
+Detailed data flow diagrams showing:
+- **Authentication Flow**: User → Cloudflare Access → Portal → Keycloak
+- **VM Provisioning Flow**: User → Portal → Crossplane → ArgoCD → Proxmox Provider → Proxmox Site
+- **Monitoring Flow**: Proxmox Node → pve-exporter → Prometheus → Grafana → Portal
+- **Log Aggregation Flow**: Services → Promtail → Loki → Portal
+- **GitOps Deployment Flow**: Developer → Git Repo → ArgoCD → Kubernetes → Crossplane → Infrastructure
+
+### 3. Network Topology (`network-topology.svg`)
+Network architecture showing:
+- Internet connectivity
+- Cloudflare Global Network (200+ edge locations)
+- Control Plane site with all services
+- Three Proxmox sites (US-East, EU-West, APAC)
+- Cloudflare Tunnels connecting all sites
+- Local network addressing (10.0.0.0/16, 10.1.0.0/16, etc.)
+- Security features (Zero Trust, no public IPs, encrypted tunnels)
+
+### 4. Deployment Diagram (`deployment-diagram.svg`)
+Infrastructure layout showing:
+- **Control Plane Cluster**: 3 master nodes, 3 worker nodes, shared storage
+- **Proxmox Site 1**: 3 nodes with Ceph storage cluster (200TB)
+- **Proxmox Site 2**: 3 nodes with ZFS storage pools (80TB)
+- **Proxmox Site 3**: 2 nodes with local storage (40TB)
+- **Network Infrastructure**: Load balancers, routers, DNS, NTP, monitoring, backup
+- **Cloudflare Tunnel Agents**: Per-site tunnel configurations
+
+## Viewing the Diagrams
+
+These SVG files can be viewed in:
+- Web browsers (Chrome, Firefox, Safari, Edge)
+- Vector graphics editors (Inkscape, Adobe Illustrator)
+- Documentation tools (GitHub, GitLab, Confluence)
+- VS Code with SVG preview extensions
+
+## Generating PNG Versions
+
+To convert SVG to PNG for presentations:
+
+```bash
+# Using Inkscape
+inkscape --export-type=png --export-width=2400 system-overview.svg
+
+# Using ImageMagick
+convert -density 300 system-overview.svg system-overview.png
+
+# Using rsvg-convert
+rsvg-convert -w 2400 system-overview.svg > system-overview.png
+```
+
+## Diagram Maintenance
+
+When updating diagrams:
+1. Maintain consistent color scheme
+2. Update component labels when architecture changes
+3. Keep network addresses and IPs accurate
+4. Document new components in this README
+5. Export PNG versions for presentations if needed
+
+## Color Scheme
+
+- **Blue (#326CE5)**: Kubernetes components
+- **Orange (#F38020)**: Cloudflare services
+- **Orange (#E57000)**: Proxmox infrastructure
+- **Teal (#00D4AA)**: Portal and UI components
+- **Red (#E74C3C)**: Authentication/Identity
+- **Gray (#34495E)**: Servers and infrastructure
+- **Light Gray (#ECF0F1)**: Network segments
+