diff --git a/src/features/onboarding/components/onboarding-form.tsx b/src/features/onboarding/components/onboarding-form.tsx index 7db4fcf..a6f0d17 100644 --- a/src/features/onboarding/components/onboarding-form.tsx +++ b/src/features/onboarding/components/onboarding-form.tsx @@ -1,7 +1,7 @@ import { useForm } from "@tanstack/react-form"; import { useNavigate } from "@tanstack/react-router"; -import { ClipboardList, Loader2, Lock, Route } from "lucide-react"; -import { useEffect, useState } from "react"; +import { Loader2, Lock, Route, Smartphone } from "lucide-react"; +import { useEffect, useMemo, useState } from "react"; import { Button } from "@/shared/components/ui/button"; import { Input } from "@/shared/components/ui/input"; import { Label } from "@/shared/components/ui/label"; @@ -10,6 +10,13 @@ import { dbExec } from "@/shared/hooks/use-db"; import { GKV_KASSEN } from "@/shared/lib/gkv-kassen"; import { cn } from "@/shared/lib/utils"; +function detectPlatform(): "ios" | "android" | "unknown" { + const ua = navigator.userAgent; + if (/iPad|iPhone|iPod/.test(ua)) return "ios"; + if (/Android/.test(ua)) return "android"; + return "unknown"; +} + export function OnboardingForm() { const navigate = useNavigate(); const [step, setStep] = useState(0); @@ -47,8 +54,8 @@ export function OnboardingForm() { return (
- {step === 0 && } - {step === 1 && } + {step === 0 && } + {step === 1 && } {step === 2 && ( <>
@@ -172,7 +179,7 @@ export function OnboardingForm() { ); } -function IntroScreen1() { +function IntroScreen() { return (
@@ -184,41 +191,86 @@ function IntroScreen1() { hilft dir, Kontaktversuche zu dokumentieren, Absagen festzuhalten und deinen Kostenerstattungsantrag vorzubereiten.

-
-
- -

- Verwalte deine Therapeutensuche an einem Ort — vom Erstgespräch bis - zum fertigen Antrag. -

-
+

+ Einen Therapieplatz zu finden dauert oft Wochen oder Monate. Der Weg ist + bürokratisch und braucht Ausdauer. TherapyFinder behält den Überblick, + damit du dich auf das Wesentliche konzentrieren kannst. +

+
+ +

+ Alle Daten bleiben auf deinem Gerät — es gibt keine Accounts und keine + Cloud. +

); } -function IntroScreen2() { +function InstallScreen() { + const platform = useMemo(() => detectPlatform(), []); + return (
- +
-

Dein Begleiter im Prozess

+

Als App installieren

- Einen Therapieplatz zu finden dauert oft Wochen oder Monate. Der Weg ist - bürokratisch und braucht Ausdauer. TherapyFinder behält den Überblick, - damit du dich auf das Wesentliche konzentrieren kannst. + Füge TherapyFinder zu deinem Home-Bildschirm hinzu, damit du die App + jederzeit wie eine normale App öffnen kannst — auch offline.

-

- Alle Daten bleiben auf deinem Gerät — es gibt keine Accounts und keine - Cloud. + + {platform === "ios" && ( +

+

So geht's auf dem iPhone/iPad:

+
    +
  1. + Tippe auf das Teilen-Symbol{" "} + + ⎙ + +
  2. +
  3. Wähle „Zum Home-Bildschirm"
  4. +
  5. Tippe auf „Hinzufügen"
  6. +
+
+ )} + + {platform === "android" && ( +
+

So geht's auf Android:

+
    +
  1. + Tippe auf das Menü {" "} + oben rechts +
  2. +
  3. Wähle „Zum Startbildschirm hinzufügen"
  4. +
  5. Bestätige mit „Hinzufügen"
  6. +
+
+ )} + + {platform === "unknown" && ( +
+

So geht's:

+

+ Nutze die „Zum Home-Bildschirm hinzufügen"-Funktion deines Browsers, + um TherapyFinder als App zu installieren. +

+
+ )} + +

+ Wichtig: Installiere die App jetzt, bevor du Daten eingibst. Nach der + Installation startet der Prozess von vorne.

); } function DotIndicator({ current }: { current: number }) { - const dots = ["intro", "motivation", "form"] as const; + const dots = ["intro", "install", "form"] as const; return (
{dots.map((id, i) => (