feat: establish reservation portal foundation

resources/js/components/page-heading.tsx

@@ -0,0 +1,30 @@
+export function PageHeading({
+    eyebrow,
+    title,
+    description,
+    action,
+}: {
+    eyebrow?: string;
+    title: string;
+    description: string;
+    action?: React.ReactNode;
+}) {
+    return (
+        <div className="flex flex-col gap-4 border-b border-slate-200 pb-6 sm:flex-row sm:items-end sm:justify-between dark:border-slate-800">
+            <div className="max-w-2xl">
+                {eyebrow && (
+                    <p className="mb-2 text-xs font-semibold tracking-[0.16em] text-primary uppercase">
+                        {eyebrow}
+                    </p>
+                )}
+                <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">
+                    {title}
+                </h1>
+                <p className="mt-2 text-sm leading-6 text-muted-foreground">
+                    {description}
+                </p>
+            </div>
+            {action}
+        </div>
+    );
+}