5a31f52310
Services: Admin-Lehrer, Backend-Lehrer, Studio v2, Website, Klausur-Service, School-Service, Voice-Service, Geo-Service, BreakPilot Drive, Agent-Core Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
145 lines
3.3 KiB
Markdown
145 lines
3.3 KiB
Markdown
# BreakPilot Website
|
|
|
|
Marketing- und Pricing-Website fuer BreakPilot mit Stripe Checkout Integration.
|
|
|
|
## Tech Stack
|
|
|
|
- **Framework:** Next.js 15.1.6
|
|
- **Styling:** Tailwind CSS 3.4
|
|
- **Language:** TypeScript 5.7
|
|
- **Payment:** Stripe Checkout (via Billing Service)
|
|
|
|
## Lokale Entwicklung
|
|
|
|
### Voraussetzungen
|
|
|
|
- Node.js 20+
|
|
- npm oder yarn
|
|
|
|
### Installation
|
|
|
|
```bash
|
|
cd website
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
Website ist dann unter http://localhost:3000 erreichbar.
|
|
|
|
## Docker
|
|
|
|
### Build
|
|
|
|
```bash
|
|
docker build -t breakpilot-website \
|
|
--build-arg NEXT_PUBLIC_BILLING_API_URL=http://localhost:8083 \
|
|
--build-arg NEXT_PUBLIC_APP_URL=http://localhost:8000 \
|
|
.
|
|
```
|
|
|
|
### Run
|
|
|
|
```bash
|
|
docker run -p 3000:3000 breakpilot-website
|
|
```
|
|
|
|
### Mit Docker Compose
|
|
|
|
```bash
|
|
# Aus dem Root-Verzeichnis
|
|
docker compose up -d website
|
|
```
|
|
|
|
## Umgebungsvariablen
|
|
|
|
| Variable | Beschreibung | Default |
|
|
|----------|--------------|---------|
|
|
| `NEXT_PUBLIC_BILLING_API_URL` | URL zum Billing Service | `http://localhost:8083` |
|
|
| `NEXT_PUBLIC_APP_URL` | URL zur BreakPilot App | `http://localhost:8000` |
|
|
| `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY` | Stripe Public Key | - |
|
|
|
|
### Build-Zeit vs. Runtime
|
|
|
|
NEXT_PUBLIC_* Variablen werden zur Build-Zeit eingebettet. Fuer Docker:
|
|
|
|
```bash
|
|
docker build \
|
|
--build-arg NEXT_PUBLIC_BILLING_API_URL=https://api.breakpilot.de \
|
|
--build-arg NEXT_PUBLIC_APP_URL=https://app.breakpilot.de \
|
|
--build-arg NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_xxx \
|
|
.
|
|
```
|
|
|
|
## Stripe Integration
|
|
|
|
### Flow
|
|
|
|
1. Nutzer waehlt Plan auf der Pricing-Seite
|
|
2. Nutzer gibt E-Mail ein
|
|
3. Website ruft `POST /api/v1/billing/trial/start` am Billing Service auf
|
|
4. Billing Service erstellt Stripe Checkout Session
|
|
5. Nutzer wird zu Stripe Checkout weitergeleitet
|
|
6. Nach Zahlung: Redirect zu `/success?session_id=xxx`
|
|
7. Success-Seite zeigt Bestaetigung und leitet zur App weiter
|
|
|
|
### API Endpunkt
|
|
|
|
```
|
|
POST /api/v1/billing/trial/start
|
|
Content-Type: application/json
|
|
|
|
{
|
|
"plan_id": "basic" | "standard" | "premium",
|
|
"email": "user@example.com"
|
|
}
|
|
|
|
Response:
|
|
{
|
|
"checkout_url": "https://checkout.stripe.com/..."
|
|
}
|
|
```
|
|
|
|
## Seiten
|
|
|
|
| Route | Beschreibung |
|
|
|-------|--------------|
|
|
| `/` | Landing Page mit Hero, Pricing, Trust-Sektion |
|
|
| `/success` | Erfolgsseite nach Stripe Checkout |
|
|
| `/cancel` | Abbruchseite wenn Checkout abgebrochen |
|
|
|
|
## Produktion
|
|
|
|
### Empfohlene Konfiguration
|
|
|
|
```env
|
|
NEXT_PUBLIC_BILLING_API_URL=https://api.breakpilot.de
|
|
NEXT_PUBLIC_APP_URL=https://app.breakpilot.de
|
|
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_xxx
|
|
```
|
|
|
|
### SSL/TLS
|
|
|
|
Fuer Produktion sollte ein Reverse Proxy (nginx, Traefik) mit SSL verwendet werden.
|
|
|
|
## Projektstruktur
|
|
|
|
```
|
|
website/
|
|
├── app/
|
|
│ ├── globals.css # Tailwind + Custom Styles
|
|
│ ├── layout.tsx # Root Layout
|
|
│ ├── page.tsx # Landing Page
|
|
│ ├── success/
|
|
│ │ └── page.tsx # Checkout Erfolgsseite
|
|
│ └── cancel/
|
|
│ └── page.tsx # Checkout Abbruchseite
|
|
├── components/
|
|
│ ├── Header.tsx # Navigation
|
|
│ ├── PricingSection.tsx # Pricing Cards + Modal
|
|
│ └── Footer.tsx # Footer
|
|
├── Dockerfile # Multi-stage Docker Build
|
|
├── next.config.mjs # Next.js Konfiguration
|
|
├── tailwind.config.ts # Tailwind mit BreakPilot Farben
|
|
└── package.json
|
|
```
|