Add first Path modal to HUB

apps/hub/app/(app)/_components/FirstPath.tsx

@@ -0,0 +1,74 @@
+"use client";
+import { useRef, useEffect, useState } from "react";
+
+export const FirstPath = () => {
+	const modalRef = useRef<HTMLDialogElement>(null);
+	const [selected, setSelected] = useState<"disponent" | "pilot" | null>(null);
+
+	useEffect(() => {
+		if (modalRef.current && !modalRef.current.open) {
+			modalRef.current.showModal();
+		}
+	}, []);
+
+	return (
+		<dialog ref={modalRef} className="modal">
+			<div className="modal-box w-11/12 max-w-5xl">
+				<h3 className="flex items-center gap-2 text-lg font-bold mb-10">Wähle deinen Einstieg!</h3>
+				<p className="mb-8 text-base text-base-content/80 text-center">
+					Willkommen bei Virtual Air Rescue!
+					<br /> Wähle deinen ersten Pfad aus. Du kannst später jederzeit auch den anderen Pfad
+					ausprobieren, wenn du möchtest.
+				</p>
+				<div className="flex flex-col items-center justify-center m-20">
+					<div className="flex gap-6">
+						{/* Disponent Card */}
+						<div
+							className={`cursor-pointer border rounded-lg p-6 w-80 transition-colors ${
+								selected === "disponent" ? "border-info ring-2 ring-info" : "border-base-300"
+							}`}
+							onClick={() => setSelected("disponent")}
+							role="button"
+							tabIndex={0}
+							aria-pressed={selected === "disponent"}
+						>
+							<div className="font-semibold text-lg mb-2">Disponent</div>
+							<div className="text-sm text-base-content/70">
+								Denkt sich realistische Einsatzszenarien aus, koordiniert deren Ablauf und ist die
+								zentrale Schnittstelle zwischen Piloten und bodengebundenen Rettungsmitteln. Er
+								trägt die Verantwortung für einen reibungslosen Ablauf und der erfolgreichen
+								Durchführung der Einsätze.
+							</div>
+						</div>
+						{/* Pilot Card */}
+						<div
+							className={`cursor-pointer border rounded-lg p-6 w-80 transition-colors ${
+								selected === "pilot" ? "border-info ring-2 ring-info" : "border-base-300"
+							}`}
+							onClick={() => setSelected("pilot")}
+							role="button"
+							tabIndex={0}
+							aria-pressed={selected === "pilot"}
+						>
+							<div className="font-semibold text-lg mb-2">Pilot</div>
+							<div className="text-sm text-base-content/70">
+								Fliegt die vom Disponenten erstellten Einsätze und transportiert die Med-Crew sicher
+								zum Einsatzort. Er übernimmt die navigatorische Vorbereitung, achtet auf
+								Wetterentwicklungen und sorgt für die Sicherheit seiner Crew im Flug.
+							</div>
+						</div>
+					</div>
+				</div>
+				<div className="modal-action">
+					<button
+						className="btn btn-info"
+						disabled={!selected}
+						onClick={() => modalRef.current?.close()}
+					>
+						Auswahl Bestätigen
+					</button>
+				</div>
+			</div>
+		</dialog>
+	);
+};

apps/hub/app/(app)/layout.tsx

@@ -3,8 +3,8 @@ import { DiscordLogoIcon, InstagramLogoIcon, ReaderIcon } from "@radix-ui/react-
 import { HorizontalNav, VerticalNav } from "../_components/Nav";
 import { redirect } from "next/navigation";
 import { getServerSession } from "../api/auth/[...nextauth]/auth";
-import { Error } from "_components/Error";
 import { EmailVerification } from "_components/EmailVerification";
+import { FirstPath } from "./_components/FirstPath";
 
 export const metadata: Metadata = {
 	title: "VAR: Hub",
@@ -46,6 +46,7 @@ export default async function RootLayout({
 									<EmailVerification />
 								</div>
 							)}
+							<FirstPath />
 							{children}
 						</div>
 					</div>