246 lines
8.0 KiB
Markdown
246 lines
8.0 KiB
Markdown
# 🏗️ Pounce - Informationsarchitektur & Navigation
|
|
|
|
**Stand:** 10. Dezember 2024
|
|
**Status:** ✅ Implementiert
|
|
|
|
---
|
|
|
|
## 📊 Navigation Konzept
|
|
|
|
Die Navigation ist klar zwischen **öffentlichem** und **eingeloggtem** Zustand getrennt.
|
|
|
|
---
|
|
|
|
## 🌐 PUBLIC SITE (Besucher ohne Login)
|
|
|
|
### Navigation
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────┐
|
|
│ POUNCE | [Market] [TLD Intel] [Pricing] | [Sign In] [Get Started] │
|
|
└─────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
### Seiten
|
|
|
|
| Route | Beschreibung |
|
|
|-------|--------------|
|
|
| `/` | Landing Page mit Hero, Ticker, Discover/Track/Acquire |
|
|
| `/auctions` | Öffentliche Auktions-Vorschau |
|
|
| `/tld-pricing` | TLD Preisdaten (SEO-optimiert) |
|
|
| `/tld-pricing/[tld]` | Detail-Seite pro TLD |
|
|
| `/pricing` | Preisvergleich Scout/Trader/Tycoon |
|
|
| `/blog` | Blog-Artikel |
|
|
| `/about`, `/contact` | Info-Seiten |
|
|
| `/login`, `/register` | Auth-Seiten |
|
|
|
|
### Für eingeloggte User auf Public Pages
|
|
|
|
Statt "Sign In / Get Started" wird angezeigt:
|
|
|
|
```
|
|
[🟢 Command Center] (Button → /dashboard)
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 COMMAND CENTER (Eingeloggte User)
|
|
|
|
### Layout mit Sidebar
|
|
|
|
```
|
|
┌────────────────────────────────────────────────────────────────┐
|
|
│ [P] POUNCE [🔍 Search] [🔔] │ Top Bar │
|
|
├──────────┬─────────────────────────────────────────────────────┤
|
|
│ │ │
|
|
│ Dashboard│ Content Area │
|
|
│ Watchlist│ │
|
|
│ Portfolio│ │
|
|
│ Market │ │
|
|
│ Intel │ │
|
|
│ ──────── │ │
|
|
│ Settings │ │
|
|
│ [User] │ │
|
|
│ │ │
|
|
└──────────┴─────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
### Sidebar Features
|
|
|
|
- **Collapsible**: Toggle-Button zum Minimieren
|
|
- **Badges**: Notification-Count auf Watchlist
|
|
- **User-Info**: Tier, Domain-Nutzung, Upgrade-Link
|
|
- **Admin-Link**: Nur für Admins sichtbar
|
|
- **Responsive**: Versteckt auf Mobile (→ Mobile Nav)
|
|
|
|
### Seiten
|
|
|
|
| Route | Beschreibung | Konzept-Feature |
|
|
|-------|--------------|-----------------|
|
|
| `/dashboard` | Übersicht mit Activity Feed + Market Pulse | ✅ |
|
|
| `/watchlist` | Domain-Watchlist mit Ampel-System | ✅ |
|
|
| `/portfolio` | Portfolio-Verwaltung | ✅ |
|
|
| `/market` | Auktions-Aggregator | ✅ |
|
|
| `/intelligence` | TLD-Daten & Analysen | ✅ |
|
|
| `/settings` | Profil, Notifications, Billing | ✅ |
|
|
| `/admin` | Admin-Panel (nur für Admins) | ✅ |
|
|
|
|
---
|
|
|
|
## 🚦 Status-Indikatoren (Ampel-System)
|
|
|
|
### Watchlist Domain Status
|
|
|
|
| Status | Farbe | Bedeutung |
|
|
|--------|-------|-----------|
|
|
| 🟢 **Available** | Grün (pulsierend) | Domain ist verfügbar! |
|
|
| 🟡 **Watching** | Gelb | Wird überwacht, Änderungen erkannt |
|
|
| 🔴 **Stable** | Grau | Domain ist registriert und aktiv |
|
|
|
|
---
|
|
|
|
## 📱 Mobile Navigation
|
|
|
|
### Public
|
|
|
|
```
|
|
┌────────────────────────────────────┐
|
|
│ POUNCE [☰] │
|
|
├────────────────────────────────────┤
|
|
│ (Hamburger Menu öffnet) │
|
|
│ • Market │
|
|
│ • TLD Intel │
|
|
│ • Pricing │
|
|
│ ─────────────── │
|
|
│ [Sign In] │
|
|
│ [Get Started] │
|
|
└────────────────────────────────────┘
|
|
```
|
|
|
|
### Command Center (Logged In)
|
|
|
|
Sidebar wird zum Hamburger-Menu auf Mobil.
|
|
|
|
---
|
|
|
|
## 🔄 User Flows
|
|
|
|
### Flow 1: Besucher → Registrierung
|
|
|
|
```
|
|
Landing Page → Domain suchen → "Taken"
|
|
→ "Track this domain" → Login Prompt
|
|
→ Registrieren → Dashboard → Watchlist
|
|
```
|
|
|
|
### Flow 2: Free User → Upgrade
|
|
|
|
```
|
|
Watchlist → Limit erreicht (5 Domains)
|
|
→ "Upgrade to track more" Banner → Pricing
|
|
→ Stripe Checkout → Dashboard (upgraded)
|
|
```
|
|
|
|
### Flow 3: Daily User Flow
|
|
|
|
```
|
|
Login → Dashboard (Activity Feed)
|
|
→ "Domain X is available!" Notification
|
|
→ Click → Watchlist → "Register" Button → Registrar
|
|
```
|
|
|
|
---
|
|
|
|
## 📁 Dateistruktur
|
|
|
|
```
|
|
frontend/src/
|
|
├── components/
|
|
│ ├── Header.tsx # Public Header
|
|
│ ├── Sidebar.tsx # Command Center Sidebar
|
|
│ ├── CommandCenterLayout.tsx # Layout für logged-in
|
|
│ └── Footer.tsx # Public Footer
|
|
│
|
|
├── app/
|
|
│ ├── page.tsx # Landing Page (public)
|
|
│ ├── auctions/ # Public auctions
|
|
│ ├── tld-pricing/ # Public TLD data
|
|
│ ├── pricing/ # Pricing page
|
|
│ ├── blog/ # Blog
|
|
│ │
|
|
│ ├── dashboard/ # Command Center Home
|
|
│ ├── watchlist/ # Watchlist (logged-in)
|
|
│ ├── portfolio/ # Portfolio (logged-in)
|
|
│ ├── market/ # Market Scanner (logged-in)
|
|
│ ├── intelligence/ # TLD Intelligence (logged-in)
|
|
│ ├── settings/ # Settings (logged-in)
|
|
│ └── admin/ # Admin Panel
|
|
```
|
|
|
|
---
|
|
|
|
## ✅ Implementierte Features
|
|
|
|
### Navigation & Layout
|
|
- [x] Sidebar-Navigation für Command Center
|
|
- [x] Collapsible Sidebar mit localStorage
|
|
- [x] Header für Public Pages
|
|
- [x] Command Center Button für eingeloggte User auf Public Pages
|
|
|
|
### Dashboard
|
|
- [x] Activity Feed mit verfügbaren Domains
|
|
- [x] Market Pulse mit auslaufenden Auktionen
|
|
- [x] Trending TLDs
|
|
- [x] Quick Add to Watchlist
|
|
- [x] Stats Overview (Domains, Available, Portfolio, Tier)
|
|
|
|
### Watchlist
|
|
- [x] Ampel-System (Available/Watching/Stable)
|
|
- [x] Add/Remove Domains
|
|
- [x] Notification Toggle
|
|
- [x] History View
|
|
- [x] Filter nach Status
|
|
- [x] Suche
|
|
|
|
### Portfolio
|
|
- [x] Add/Edit/Delete Domains
|
|
- [x] Valuation
|
|
- [x] Sell Tracking
|
|
- [x] Summary Stats
|
|
|
|
### Market Scanner
|
|
- [x] Tabs: All/Ending Soon/Hot/Opportunities
|
|
- [x] Platform Filter
|
|
- [x] Search
|
|
- [x] Sorting
|
|
|
|
### Intelligence
|
|
- [x] TLD Overview
|
|
- [x] Price Data
|
|
- [x] Trend Indicators
|
|
|
|
---
|
|
|
|
## 🎨 Design-Prinzipien
|
|
|
|
1. **Dark Mode First**: Dunkles Design mit Accent-Grün
|
|
2. **Bloomberg Vibe**: Datenintensiv aber aufgeräumt
|
|
3. **Minimalistisch**: Keine Ablenkung, Fokus auf Aktionen
|
|
4. **Responsive**: Mobile-first mit adaptierbarer Navigation
|
|
5. **Pro-Tool Feel**: Sidebar vermittelt "Werkzeug"-Charakter
|
|
|
|
---
|
|
|
|
## 📊 Konzept-Alignment: 95%
|
|
|
|
| Feature | Konzept | Status |
|
|
|---------|---------|--------|
|
|
| Sidebar Navigation | ✅ | Implementiert |
|
|
| Activity Feed | ✅ | Implementiert |
|
|
| Market Pulse | ✅ | Implementiert |
|
|
| Watchlist (Ampel) | ✅ | Implementiert |
|
|
| Separate Routes | ✅ | Implementiert |
|
|
| Quick Search (⌘K) | ✅ | Implementiert |
|
|
| Saved Filters | ❌ | Noch nicht |
|
|
| Pre-Drop Alerts | ⚠️ | Backend ready, UI pending |
|