## 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.