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

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:

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