37 lines
991 B
Markdown
37 lines
991 B
Markdown
## Guardpot Dashboard Tanıtım Turu (React + Vite)
|
||
|
||
Step-by-step tıklanabilir bir onboarding bileşeni ile dashboard ekran görüntüsü üzerinde eğitim turu sunar.
|
||
|
||
### Çalıştırma
|
||
|
||
```bash
|
||
cd onboarding-demo
|
||
npm install
|
||
npm run dev
|
||
```
|
||
|
||
### Ekran Görüntüsünü Değiştirme
|
||
|
||
- Gerçek görselinizi `src/assets/dashboard.png` dosyasıyla değiştirin. Şu anki dosya bir placeholder metin dosyasıdır; kendi `.png` görselinizi kopyalayın.
|
||
|
||
### Dosyalar
|
||
|
||
- `src/components/OnboardingTour.tsx`: Yüzde bazlı bölgeleri vurgulayan ve popover ile açıklama gösteren tur bileşeni.
|
||
- `src/App.tsx`: Adımların verisini tanımlar ve turu kullanır.
|
||
- `src/App.css`: Stil ve düzen.
|
||
|
||
### Adım Tanımları
|
||
|
||
Her adım için:
|
||
|
||
```ts
|
||
{
|
||
id: string,
|
||
title: string,
|
||
description: string,
|
||
region: { leftPct: number; topPct: number; widthPct: number; heightPct: number }
|
||
}
|
||
```
|
||
|
||
Değerler görüntünün genişlik/yüksekliğine göre ölçeklenir, böylece responsive çalışır.
|