feat: add support section to README, implement donation modal, and enhance routing with new dashboard and not found pages. Update sitemap for improved SEO and adjust navigation links to point to the dashboard. Introduce new package card component for better package management and enhance error handling in various components.

README.md

@@ -14,6 +14,7 @@
   <a href="#features">Features</a> ·
   <a href="#supported-exams">Exams</a> ·
   <a href="#project-structure">Structure</a> ·
+  <a href="#support">Support</a> ·
   <a href="#license">License</a>
 </p>
 
@@ -277,6 +278,13 @@ Contributions are welcome! Before opening a PR:
 
 For AI-related changes, see the **AI Generation Context** section in `AGENTS.md` — adding a new question format touches schemas, prompts, attempt normalization, and frontend constants.
 
+## Support
+
+If you find Labas helpful and want to support its ongoing development, consider buying the creator a coffee! Your support helps cover API and hosting costs. ☕
+
+- **[Saweria](https://saweria.co/rogasper)** (Indonesian supporters)
+- **[Ko-fi](https://ko-fi.com/rogasper)** (International)
+
 ## License
 
 This project is licensed under the **[GNU Affero General Public License v3.0 (AGPL-3.0)](./LICENSE)**.

apps/server/src/index.ts

@@ -59,7 +59,7 @@ app.use(
 app.get("/sitemap.xml", (c) => {
   const baseUrl = "https://labas.rogasper.com";
   const urls = [
-    { loc: `${baseUrl}/landing`, changefreq: "weekly", priority: "0.8" },
+    { loc: `${baseUrl}/`, changefreq: "weekly", priority: "1.0" },
   ];
   const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

apps/web/src/components/DonationModal.tsx

@@ -0,0 +1,58 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@labas/ui/components/dialog";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+
+export function DonationModal({
+  isOpen,
+  onOpenChange,
+  triggerAction
+}: {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  triggerAction: "exam" | "generate" | null;
+}) {
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px] p-6 rounded-[var(--radius-xl)] bg-[var(--pure-white)] border-2 border-[var(--oat-border)]">
+        <DialogHeader>
+          <div className="mx-auto w-16 h-16 bg-[var(--pomegranate-400)]/10 rounded-full flex items-center justify-center mb-2">
+            <MaterialIcon name="favorite" className="text-4xl text-[var(--pomegranate-400)]" />
+          </div>
+          <DialogTitle className="text-center text-2xl font-headline font-extrabold text-[var(--clay-black)]">
+            Dukung Labas!
+          </DialogTitle>
+          <DialogDescription className="text-center text-base text-[var(--warm-charcoal)] pt-2 leading-relaxed">
+            Selamat, kamu baru saja menyelesaikan {triggerAction === "exam" ? "latihan soal" : "generate soal AI"}! 🎉
+            <br/><br/>
+            Jika Labas membantumu, dukung kami untuk menutupi biaya server & mengembangkan fitur baru dengan mentraktir kopi. ☕
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col gap-3 mt-6">
+          <a
+            href="https://saweria.co/rogasper"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="w-full flex items-center justify-center gap-2 py-3.5 px-4 rounded-[var(--radius-lg)] font-bold transition-all bg-[#F3B63A] text-black hover:brightness-95 clay-shadow clay-hover"
+          >
+            <MaterialIcon name="favorite" className="text-xl" />
+            Support via Saweria
+          </a>
+          <a
+            href="https://ko-fi.com/rogasper"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="w-full flex items-center justify-center gap-2 py-3.5 px-4 rounded-[var(--radius-lg)] font-bold transition-all bg-[#13C3FF] text-white hover:brightness-95 clay-shadow clay-hover"
+          >
+            <MaterialIcon name="local_cafe" className="text-xl" />
+            Support via Ko-fi
+          </a>
+          <button
+            onClick={() => onOpenChange(false)}
+            className="mt-3 text-sm text-[var(--warm-silver)] hover:text-[var(--clay-black)] font-semibold transition-colors"
+          >
+            Mungkin Nanti Saja
+          </button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/src/components/ErrorFallback.tsx

@@ -25,7 +25,7 @@ export function ErrorFallback({ error, reset }: { error: Error; reset?: () => vo
             </Button>
           )}
           <Button
-            onClick={() => window.location.href = "/"}
+            onClick={() => { window.location.href = "/dashboard"; }}
             className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)]"
           >
             Ke Dashboard

apps/web/src/components/NotFoundPage.tsx

@@ -0,0 +1,37 @@
+import { Link } from "@tanstack/react-router";
+import { Button } from "@labas/ui/components/button";
+
+export function NotFoundPage() {
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center bg-[var(--warm-cream)] px-6 py-12">
+      <img
+        src="/not_found.png"
+        alt=""
+        className="mb-8 w-full max-w-sm h-auto object-contain"
+      />
+      <div className="max-w-md text-center">
+        <h1 className="text-3xl font-headline font-bold text-[var(--clay-black)] mb-3">
+          Halaman Tidak Ditemukan
+        </h1>
+        <p className="text-base text-[var(--warm-charcoal)] mb-8">
+          Halaman yang kamu cari tidak ada atau sudah dipindahkan.
+        </p>
+        <div className="flex flex-col sm:flex-row gap-3 justify-center">
+          <Button
+            render={<Link to="/" />}
+            className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)] h-12 px-8"
+          >
+            Ke Beranda
+          </Button>
+          <Button
+            render={<Link to="/login" />}
+            variant="outline"
+            className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] h-12 px-8 bg-[var(--pure-white)]"
+          >
+            Masuk
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/bank/CalloutCard.tsx

@@ -3,11 +3,12 @@ import { MaterialIcon } from "@/components/ui/MaterialIcon";
 
 interface CalloutCardProps {
   privateCount: number;
+  label?: string;
   onPublishAll: () => void;
   onDismiss: () => void;
 }
 
-export function CalloutCard({ privateCount, onPublishAll, onDismiss }: CalloutCardProps) {
+export function CalloutCard({ privateCount, label = "soal", onPublishAll, onDismiss }: CalloutCardProps) {
   if (privateCount <= 0) return null;
 
   return (
@@ -20,7 +21,7 @@ export function CalloutCard({ privateCount, onPublishAll, onDismiss }: CalloutCa
         </div>
         <div className="flex-1 min-w-0">
           <p className="text-sm font-semibold text-[var(--clay-black)]">
-            Kamu punya <span className="text-[var(--slushie-800)]">{privateCount} soal privat</span>
+            Kamu punya <span className="text-[var(--slushie-800)]">{privateCount} {label} privat</span>
           </p>
           <p className="text-xs text-[var(--warm-charcoal)] mt-1 leading-relaxed">
             Soal privat hanya bisa kamu lihat. Jadikan publik agar soal bisa muncul di daftar paket soal dan diakses pengguna lain.

apps/web/src/components/bank/QuestionCard.tsx

@@ -117,15 +117,31 @@ export function QuestionCard({
             <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
               <button
                 onClick={onTogglePublic}
-                title={q.isPublic ? "Klik untuk jadikan privat" : "Klik untuk jadikan publik"}
-                className={`text-xs font-semibold px-3 py-1.5 rounded-full transition-colors cursor-pointer flex items-center gap-1 ${
+                aria-label={q.isPublic ? "Jadikan privat" : "Jadikan publik"}
+                className={`group text-xs font-semibold px-3 py-1.5 rounded-full transition-all cursor-pointer flex items-center gap-1 ${
                   q.isPublic
-                    ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]"
-                    : "bg-[var(--slushie-500)]/15 text-[var(--slushie-800)]"
+                    ? "bg-[var(--matcha-300)] text-[var(--matcha-800)] hover:bg-[var(--pomegranate-400)]/15 hover:text-[var(--pomegranate-600)]"
+                    : "bg-[var(--slushie-500)]/15 text-[var(--slushie-800)] hover:bg-[var(--matcha-300)] hover:text-[var(--matcha-800)]"
                 }`}
               >
-                {!q.isPublic && <MaterialIcon name="lock" className="text-xs" />}
-                {q.isPublic ? "Publik" : "Privat"}
+                {/* Default state icon */}
+                <MaterialIcon
+                  name={q.isPublic ? "public" : "lock"}
+                  className="text-xs group-hover:hidden"
+                />
+                {/* Hover state icon (shows intent) */}
+                <MaterialIcon
+                  name={q.isPublic ? "lock" : "public"}
+                  className="text-xs hidden group-hover:inline"
+                />
+                {/* Default label */}
+                <span className="group-hover:hidden">
+                  {q.isPublic ? "Publik" : "Privat"}
+                </span>
+                {/* Hover label (shows what will happen) */}
+                <span className="hidden group-hover:inline">
+                  {q.isPublic ? "Jadikan Privat" : "Jadikan Publik"}
+                </span>
               </button>
               <button
                 onClick={onDelete}

apps/web/src/components/bank/SoalBrowser.tsx

@@ -24,7 +24,8 @@ interface SoalBrowserProps {
   onLoadMore: () => void;
   onClearFilters: () => void;
   onBulkPublish?: (ids: string[]) => void;
-  onPublishAllPrivate?: (ids: string[]) => void;
+  onPublishAllPrivate?: () => void;
+  totalPrivateCount?: number;
 }
 
 export function SoalBrowser({
@@ -46,6 +47,7 @@ export function SoalBrowser({
   onClearFilters,
   onBulkPublish,
   onPublishAllPrivate,
+  totalPrivateCount,
 }: SoalBrowserProps) {
   const sentinelRef = useRef<HTMLDivElement>(null);
   const isLocked = (q: Question) => !!lockedExamType && q.examTypeId !== lockedExamType;
@@ -64,19 +66,16 @@ export function SoalBrowser({
     ? localStorage.getItem("labas-bank-private-callout-dismissed") === "true"
     : false;
 
-  const privateQuestions = questions.filter(
-    (q) => !q.isPublic && q.creatorUserId === userId,
-  );
+  const privateCount = totalPrivateCount ?? 0;
 
   const handleDismissCallout = () => {
     localStorage.setItem("labas-bank-private-callout-dismissed", "true");
-    // Force re-render by toggling a state
     setBulkMode((prev) => prev);
   };
 
   const handlePublishAllPrivate = () => {
-    if (onPublishAllPrivate && privateQuestions.length > 0) {
-      onPublishAllPrivate(privateQuestions.map((q) => q.id));
+    if (onPublishAllPrivate && privateCount > 0) {
+      onPublishAllPrivate();
     }
   };
 
@@ -148,74 +147,69 @@ export function SoalBrowser({
   // ── Bulk mode toolbar ──
   const renderBulkToolbar = () => {
     if (!onBulkPublish || tab !== "mine") return null;
+    if (!bulkMode) {
+      return (
+        <button
+          onClick={() => setBulkMode(true)}
+          className="text-xs font-semibold text-[var(--matcha-600)] hover:text-[var(--matcha-800)] transition-colors cursor-pointer flex items-center gap-1 mb-2"
+        >
+          <MaterialIcon name="select_all" className="text-sm" />
+          Pilih Banyak
+        </button>
+      );
+    }
     return (
       <div className="flex items-center justify-between mb-4 p-3 rounded-[var(--radius-lg)] bg-[var(--oat-light)] border-2 border-[var(--oat-border)]">
-        {bulkMode ? (
-          <>
-            <div className="flex items-center gap-3">
-              <button
-                onClick={clearSelection}
-                className="text-xs font-semibold text-[var(--warm-charcoal)] hover:text-[var(--clay-black)] transition-colors cursor-pointer"
-              >
-                Batalkan ({selectedIds.size})
-              </button>
-              <button
-                onClick={selectAll}
-                className="text-xs font-semibold text-[var(--matcha-600)] hover:text-[var(--matcha-800)] transition-colors cursor-pointer"
-              >
-                Pilih Semua
-              </button>
-            </div>
-            <div className="flex items-center gap-2">
-              <Button
-                size="sm"
-                disabled={selectedIds.size === 0}
-                onClick={handleBulkPublish}
-                className="rounded-[var(--radius-lg)] bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] text-xs cursor-pointer"
-              >
-                <MaterialIcon name="public" className="text-xs mr-1" />
-                Jadikan Publik ({selectedIds.size})
-              </Button>
-              <button
-                onClick={() => { setBulkMode(false); setSelectedIds(new Set()); }}
-                className="text-xs text-[var(--warm-charcoal)] hover:text-[var(--clay-black)] transition-colors cursor-pointer font-semibold ml-2"
-              >
-                Selesai
-              </button>
-            </div>
-          </>
-        ) : (
-          <>
-            <span className="text-xs font-semibold text-[var(--warm-charcoal)]">
-              {questions.length} soal
-            </span>
-            <button
-              onClick={() => setBulkMode(true)}
-              className="text-xs font-semibold text-[var(--matcha-600)] hover:text-[var(--matcha-800)] transition-colors cursor-pointer flex items-center gap-1"
-            >
-              <MaterialIcon name="select_all" className="text-sm" />
-              Pilih Banyak
-            </button>
-          </>
-        )}
+        <div className="flex items-center gap-3">
+          <button
+            onClick={clearSelection}
+            className="text-xs font-semibold text-[var(--warm-charcoal)] hover:text-[var(--clay-black)] transition-colors cursor-pointer"
+          >
+            Batalkan ({selectedIds.size})
+          </button>
+          <button
+            onClick={selectAll}
+            className="text-xs font-semibold text-[var(--matcha-600)] hover:text-[var(--matcha-800)] transition-colors cursor-pointer"
+          >
+            Pilih Semua
+          </button>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            size="sm"
+            disabled={selectedIds.size === 0}
+            onClick={handleBulkPublish}
+            className="rounded-[var(--radius-lg)] bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] text-xs cursor-pointer"
+          >
+            <MaterialIcon name="public" className="text-xs mr-1" />
+            Jadikan Publik ({selectedIds.size})
+          </Button>
+          <button
+            onClick={() => { setBulkMode(false); setSelectedIds(new Set()); }}
+            className="text-xs text-[var(--warm-charcoal)] hover:text-[var(--clay-black)] transition-colors cursor-pointer font-semibold ml-2"
+          >
+            Selesai
+          </button>
+        </div>
       </div>
     );
   };
 
   return (
     <>
+      {(onBulkPublish && tab === "mine") || (tab === "mine" && privateCount > 0 && !calloutDismissed) ? (
+        <div className="flex flex-col gap-3 mb-2">
+          {renderBulkToolbar()}
+          {tab === "mine" && privateCount > 0 && !calloutDismissed && (
+            <CalloutCard
+              privateCount={privateCount}
+              onPublishAll={handlePublishAllPrivate}
+              onDismiss={handleDismissCallout}
+            />
+          )}
+        </div>
+      ) : null}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        {renderBulkToolbar()}
-        <div className="md:col-span-2" />
-
-        {tab === "mine" && privateQuestions.length > 0 && !calloutDismissed && (
-          <CalloutCard
-            privateCount={privateQuestions.length}
-            onPublishAll={handlePublishAllPrivate}
-            onDismiss={handleDismissCallout}
-          />
-        )}
-
         {questions[0] && (
           <div className="md:col-span-2">
             <QuestionCard

apps/web/src/components/packages/PackageCard.tsx

@@ -0,0 +1,189 @@
+import { Link, useNavigate } from "@tanstack/react-router";
+import { Button } from "@labas/ui/components/button";
+import { Card, CardContent } from "@labas/ui/components/card";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { toast } from "sonner";
+
+export interface PackageItem {
+  id: string;
+  title: string;
+  description?: string | null;
+  examTypeName?: string | null;
+  isPublic: boolean;
+  creatorUserId?: string | null;
+  totalQuestions: number;
+  totalSections: number;
+  estimatedDurationMin?: number | null;
+  usageCount: number;
+  avgRating?: number | null;
+}
+
+interface PackageCardProps {
+  pkg: PackageItem;
+  isOwner: boolean;
+  bulkMode: boolean;
+  isSelected: boolean;
+  isTogglePending?: boolean;
+  onToggleSelect: () => void;
+  onTogglePublic: () => void;
+}
+
+export function PackageCard({
+  pkg,
+  isOwner,
+  bulkMode,
+  isSelected,
+  isTogglePending = false,
+  onToggleSelect,
+  onTogglePublic,
+}: PackageCardProps) {
+  const navigate = useNavigate();
+  const isPrivate = isOwner && !pkg.isPublic;
+
+  return (
+    <Card
+      className={`clay-shadow clay-hover bg-[var(--pure-white)] border-2 rounded-[var(--radius-xl)] h-full flex flex-col ${
+        bulkMode && isSelected
+          ? "border-[var(--matcha-600)] ring-2 ring-[var(--matcha-400)]"
+          : isPrivate && !bulkMode
+            ? "border-[var(--oat-border)] border-l-[var(--warm-charcoal)] border-l-4"
+            : "border-[var(--oat-border)]"
+      }`}
+    >
+      <CardContent className="p-5 flex flex-col h-full">
+        {/* Clickable content area */}
+        <div
+          className="block flex-1 cursor-pointer"
+          onClick={bulkMode ? onToggleSelect : undefined}
+        >
+          <Link
+            to="/package/$id"
+            params={{ id: pkg.id }}
+            className={bulkMode ? "pointer-events-none" : ""}
+          >
+            <div className="flex items-start justify-between mb-3">
+              <div className="flex gap-2 flex-wrap">
+                {bulkMode && (
+                  <span className={`px-2 py-1 rounded-full text-[10px] font-semibold flex items-center gap-1 ${
+                    isSelected
+                      ? "bg-[var(--matcha-600)] text-[var(--pure-white)]"
+                      : "bg-[var(--oat-light)] text-[var(--warm-charcoal)]"
+                  }`}>
+                    <MaterialIcon name={isSelected ? "check_circle" : "radio_button_unchecked"} className="text-xs" />
+                    {isSelected ? "Terpilih" : "Pilih"}
+                  </span>
+                )}
+                {pkg.examTypeName && (
+                  <span className="inline-flex items-center px-2.5 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-xs font-semibold leading-none whitespace-nowrap">
+                    {pkg.examTypeName}
+                  </span>
+                )}
+              </div>
+              {pkg.avgRating && (
+                <div className="flex items-center gap-1 text-[var(--lemon-700)] shrink-0">
+                  <MaterialIcon name="star" className="text-sm" />
+                  <span className="text-xs font-bold">{pkg.avgRating}</span>
+                </div>
+              )}
+            </div>
+
+            <h3 className="font-headline text-lg font-bold text-[var(--clay-black)] mb-2 line-clamp-2">
+              {pkg.title}
+            </h3>
+
+            {pkg.description && (
+              <p className="text-sm text-[var(--warm-charcoal)] line-clamp-2 mb-4">
+                {pkg.description}
+              </p>
+            )}
+          </Link>
+
+          <div className="flex items-center justify-between mt-auto pt-3 border-t border-[var(--oat-border)]">
+            <div className="flex gap-3 text-xs text-[var(--warm-charcoal)]">
+              <span className="flex items-center gap-1">
+                <MaterialIcon name="quiz" className="text-xs" />
+                {pkg.totalQuestions}
+              </span>
+              <span className="flex items-center gap-1">
+                <MaterialIcon name="folder" className="text-xs" />
+                {pkg.totalSections}
+              </span>
+              {pkg.estimatedDurationMin && (
+                <span className="flex items-center gap-1">
+                  <MaterialIcon name="timer" className="text-xs" />
+                  {pkg.estimatedDurationMin}m
+                </span>
+              )}
+            </div>
+            <span className="text-xs text-[var(--warm-silver)]">
+              {pkg.usageCount}x digunakan
+            </span>
+          </div>
+        </div>
+
+        {/* Owner actions */}
+        {isOwner && !bulkMode && (
+          <div className="mt-3 pt-3 border-t border-[var(--oat-border)] flex items-center justify-between">
+            <button
+              onClick={onTogglePublic}
+              disabled={isTogglePending}
+              aria-label={pkg.isPublic ? "Jadikan privat" : "Jadikan publik"}
+              className={`group text-xs font-semibold px-3 py-1.5 rounded-full transition-all cursor-pointer flex items-center gap-1 disabled:opacity-50 disabled:cursor-not-allowed ${
+                pkg.isPublic
+                  ? "bg-[var(--matcha-300)] text-[var(--matcha-800)] hover:bg-[var(--pomegranate-400)]/15 hover:text-[var(--pomegranate-600)]"
+                  : "bg-[var(--slushie-500)]/15 text-[var(--slushie-800)] hover:bg-[var(--matcha-300)] hover:text-[var(--matcha-800)]"
+              }`}
+            >
+              {/* Default icon */}
+              <MaterialIcon
+                name={pkg.isPublic ? "public" : "lock"}
+                className="text-xs group-hover:hidden"
+              />
+              {/* Hover icon (shows intent) */}
+              <MaterialIcon
+                name={pkg.isPublic ? "lock" : "public"}
+                className="text-xs hidden group-hover:inline"
+              />
+              {/* Default label */}
+              <span className="group-hover:hidden">
+                {pkg.isPublic ? "Publik" : "Privat"}
+              </span>
+              {/* Hover label */}
+              <span className="hidden group-hover:inline">
+                {pkg.isPublic ? "Jadikan Privat" : "Jadikan Publik"}
+              </span>
+            </button>
+
+            {pkg.isPublic && (
+              <button
+                onClick={() => {
+                  const url = `${window.location.origin}/package/${pkg.id}`;
+                  navigator.clipboard.writeText(url);
+                  toast.success("Link paket disalin!");
+                }}
+                className="text-xs text-[var(--matcha-600)] hover:bg-[var(--matcha-300)]/20 px-3 py-1.5 rounded-full transition-colors flex items-center gap-1 cursor-pointer"
+              >
+                <MaterialIcon name="share" className="text-xs" />
+                Bagikan
+              </button>
+            )}
+          </div>
+        )}
+
+        {/* CTA */}
+        {!bulkMode && (
+          <div className="mt-3 pt-3 border-t border-[var(--oat-border)]">
+            <Button
+              className="w-full bg-[var(--matcha-600)] text-[var(--pure-white)] hover:bg-[var(--matcha-800)] clay-hover rounded-[var(--radius-lg)]"
+              onClick={() => navigate({ to: "/package/$id/take", params: { id: pkg.id } })}
+              size="xl"
+            >
+              <MaterialIcon name="play_arrow" className="mr-2" />
+              Mulai Latihan
+            </Button>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

apps/web/src/components/routes/BankPage.tsx

@@ -89,6 +89,14 @@ export function BankComponent() {
     ? { isPublic: visibilityFilter === "public" }
     : {};
 
+  const privateCountQuery = useQuery(
+    trpc.question.list.queryOptions(
+      { creatorUserId: userId ?? "", isPublic: false, limit: 1 },
+      { enabled: !!userId && mode === "soal" },
+    ),
+  );
+  const totalPrivateCount = privateCountQuery.data?.total ?? 0;
+
   const questionQuery = useQuery(
     trpc.question.list.queryOptions(
       {
@@ -163,7 +171,14 @@ export function BankComponent() {
   const bulkPublish = useMutation(
     trpc.question.bulkPublish.mutationOptions({
       onSuccess: (data) => {
-        questionQuery.refetch();
+        // Reset accumulated infinite-scroll state so refetch shows fresh data
+        setAllQuestions([]);
+        if (offset !== 0) {
+          setOffset(0);
+        } else {
+          questionQuery.refetch();
+        }
+        privateCountQuery.refetch();
         if (data.skipped > 0) {
           toast.success(
             `${data.updated} soal dipublikasikan, ${data.skipped} dilewati`,
@@ -179,6 +194,20 @@ export function BankComponent() {
     }),
   );
 
+  const handlePublishAllPrivate = async () => {
+    if (!userId || totalPrivateCount === 0) return;
+    const allPrivate = await queryClient.fetchQuery(
+      trpc.question.list.queryOptions({
+        creatorUserId: userId,
+        isPublic: false,
+        limit: totalPrivateCount,
+        offset: 0,
+      }),
+    );
+    const ids = (allPrivate.questions ?? []).map((q) => q.id);
+    if (ids.length > 0) bulkPublish.mutate({ ids });
+  };
+
   // ── Navigation helpers ──
   const setMode = (newMode: Mode) => {
     navigate({
@@ -480,7 +509,8 @@ export function BankComponent() {
                 }}
                 onClearFilters={clearFilters}
                 onBulkPublish={(ids) => bulkPublish.mutate({ ids })}
-                onPublishAllPrivate={(ids) => bulkPublish.mutate({ ids })}
+                onPublishAllPrivate={handlePublishAllPrivate}
+                totalPrivateCount={totalPrivateCount}
               />
             ) : (
               <SectionBrowser

apps/web/src/components/routes/HistoryPage.tsx

@@ -118,7 +118,7 @@ export function HistoryComponent() {
       {/* Header */}
       <div className="mb-8">
         <div className="flex items-center gap-2 text-sm text-[var(--warm-charcoal)] mb-4">
-          <Link to="/" className="hover:text-[var(--clay-black)] transition-colors">
+          <Link to="/dashboard" className="hover:text-[var(--clay-black)] transition-colors">
             Beranda
           </Link>
           <MaterialIcon name="chevron_right" className="text-xs" />

apps/web/src/components/routes/LandingPage.tsx

@@ -1,22 +1,8 @@
-import { createFileRoute, Link, redirect } from "@tanstack/react-router";
+import { Link } from "@tanstack/react-router";
 import { Button } from "@labas/ui/components/button";
 import { Card, CardContent } from "@labas/ui/components/card";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { useState } from "react";
-import { authClient } from "@/lib/auth-client";
-
-export const Route = createFileRoute("/landing")({
-  beforeLoad: async () => {
-    try {
-      const session = await authClient.getSession();
-      if (session?.data) {
-        throw redirect({ to: "/", replace: true });
-      }
-    } catch (e) {
-      if (e instanceof Response) throw e;
-    }
-  },
-});
 
 function FaqItem({ question, answer, isDark }: { question: string; answer: string; isDark?: boolean }) {
   const [isOpen, setIsOpen] = useState(false);
@@ -60,6 +46,10 @@ export function LandingPage() {
           <span className="font-headline font-semibold text-2xl tracking-[-0.64px] text-[var(--clay-black)] hidden sm:block">Labas</span>
         </div>
         <div className="flex items-center gap-2 sm:gap-4">
+          <a href="https://saweria.co/rogasper" target="_blank" rel="noopener noreferrer" className="text-[var(--warm-charcoal)] hover:text-[var(--pomegranate-400)] transition-colors p-2 hidden md:flex items-center gap-2" aria-label="Support via Saweria">
+            <MaterialIcon name="favorite" className="text-xl" />
+            <span className="font-semibold text-base">Support</span>
+          </a>
           <a href="https://github.com/rogasper/labas-bahasa" target="_blank" rel="noopener noreferrer" className="text-[var(--warm-charcoal)] hover:text-[var(--clay-black)] transition-colors p-2 hidden sm:flex items-center gap-2" aria-label="GitHub Repository">
             <svg viewBox="0 0 24 24" className="w-6 h-6 fill-current" aria-hidden="true">
               <path fillRule="evenodd" clipRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
@@ -497,6 +487,14 @@ export function LandingPage() {
               <MaterialIcon name="code" />
               <span className="font-semibold">GitHub</span>
             </a>
+            <a href="https://saweria.co/rogasper" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 hover:text-[var(--pomegranate-400)] transition-colors">
+              <MaterialIcon name="favorite" />
+              <span className="font-semibold">Saweria</span>
+            </a>
+            <a href="https://ko-fi.com/rogasper" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 hover:text-[var(--pomegranate-400)] transition-colors">
+              <MaterialIcon name="local_cafe" />
+              <span className="font-semibold">Ko-fi</span>
+            </a>
             <a href="https://rogasper.com" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 hover:text-[var(--matcha-700)] transition-colors">
               <MaterialIcon name="language" />
               <span className="font-semibold">rogasper.com</span>

apps/web/src/components/routes/PackagesPage.tsx

@@ -1,12 +1,12 @@
 import { useState, useEffect, useCallback } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
-import { createFileRoute, redirect, Link, useNavigate } from "@tanstack/react-router";
+import { createFileRoute, redirect, Link } from "@tanstack/react-router";
 import { z } from "zod";
 import { authClient } from "@/lib/auth-client";
-import { trpc } from "@/utils/trpc";
+import { trpc, queryClient } from "@/utils/trpc";
 import { Input } from "@labas/ui/components/input";
 import { Button } from "@labas/ui/components/button";
-import { Card, CardContent } from "@labas/ui/components/card";
+import { Card } from "@labas/ui/components/card";
 import {
   Tabs,
   TabsList,
@@ -23,6 +23,7 @@ import {
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { GettingStartedCard } from "@/components/GettingStartedCard";
 import { CalloutCard } from "@/components/bank/CalloutCard";
+import { PackageCard } from "@/components/packages/PackageCard";
 import { PageTour, TourHelpButton } from "@/components/TourGuide";
 import type { Step } from "react-joyride";
 import { toast } from "sonner";
@@ -49,7 +50,6 @@ export const Route = createFileRoute("/packages")({
 type Tab = "all" | "mine";
 
 export function PackagesComponent() {
-  const routerNavigate = useNavigate();
   const search = Route.useSearch();
   const navigate = Route.useNavigate();
   const { data: session } = authClient.useSession();
@@ -92,6 +92,14 @@ export function PackagesComponent() {
     ),
   );
 
+  const privateCountQuery = useQuery(
+    trpc.package.myPackages.queryOptions(
+      { isPublic: false, limit: 1 },
+      { enabled: !!userId && tab === "mine" },
+    ),
+  );
+  const totalPrivateCount = privateCountQuery.data?.total ?? 0;
+
   const query = tab === "all" ? allQuery : mineQuery;
   const packages = query.data?.packages ?? [];
   const total = query.data?.total ?? 0;
@@ -113,6 +121,7 @@ export function PackagesComponent() {
     trpc.package.bulkPublish.mutationOptions({
       onSuccess: (data) => {
         query.refetch();
+        privateCountQuery.refetch();
         setBulkMode(false);
         setSelectedIds(new Set());
         if (data.skipped > 0) {
@@ -159,17 +168,22 @@ export function PackagesComponent() {
   const [calloutDismissed, setCalloutDismissed] = useState(
     typeof window !== "undefined" && localStorage.getItem("labas-packages-private-callout-dismissed") === "true",
   );
-  const privatePackages = packages.filter(
-    (p) => !p.isPublic && p.creatorUserId === userId,
-  );
 
   const handleDismissCallout = () => {
     localStorage.setItem("labas-packages-private-callout-dismissed", "true");
     setCalloutDismissed(true);
   };
 
-  const handlePublishAllPrivate = () => {
-    const ids = privatePackages.map((p) => p.id);
+  const handlePublishAllPrivate = async () => {
+    if (!userId || totalPrivateCount === 0) return;
+    const allPrivate = await queryClient.fetchQuery(
+      trpc.package.myPackages.queryOptions({
+        isPublic: false,
+        limit: totalPrivateCount,
+        offset: 0,
+      }),
+    );
+    const ids = (allPrivate.packages ?? []).map((p) => p.id);
     if (ids.length > 0) bulkPublish.mutate({ ids });
   };
 
@@ -317,25 +331,23 @@ export function PackagesComponent() {
               </div>
             </>
           ) : (
-            <>
-              <span className="text-sm text-[var(--warm-charcoal)]">{packages.length} paket</span>
-              <button
-                onClick={() => setBulkMode(true)}
-                className="text-xs font-semibold text-[var(--matcha-600)] hover:text-[var(--matcha-800)] transition-colors flex items-center gap-1"
-              >
-                <MaterialIcon name="select_all" className="text-sm" />
-                Pilih Banyak
-              </button>
-            </>
+            <button
+              onClick={() => setBulkMode(true)}
+              className="text-xs font-semibold text-[var(--matcha-600)] hover:text-[var(--matcha-800)] transition-colors flex items-center gap-1 ml-auto"
+            >
+              <MaterialIcon name="select_all" className="text-sm" />
+              Pilih Banyak
+            </button>
           )}
         </div>
       )}
 
       {/* Private package callout */}
-      {tab === "mine" && privatePackages.length > 0 && !calloutDismissed && (
+      {tab === "mine" && totalPrivateCount > 0 && !calloutDismissed && (
         <div className="mb-6">
           <CalloutCard
-            privateCount={privatePackages.length}
+            privateCount={totalPrivateCount}
+            label="paket"
             onPublishAll={handlePublishAllPrivate}
             onDismiss={handleDismissCallout}
           />
@@ -378,144 +390,17 @@ export function PackagesComponent() {
           <div data-tour="packages-list" className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             {packages.map((pkg) => {
               const isOwner = pkg.creatorUserId === userId;
-              const isSelected = selectedIds.has(pkg.id);
               return (
-                <Card
+                <PackageCard
                   key={pkg.id}
-                  className={`clay-shadow clay-hover bg-[var(--pure-white)] border-2 rounded-[var(--radius-xl)] h-full flex flex-col ${
-                    bulkMode && isSelected
-                      ? "border-[var(--matcha-600)] ring-2 ring-[var(--matcha-400)]"
-                      : isOwner && !pkg.isPublic && !bulkMode
-                        ? "border-[var(--oat-border)] border-l-[var(--warm-charcoal)] border-l-4"
-                        : "border-[var(--oat-border)]"
-                  }`}
-                >
-                  <CardContent className="p-5 flex flex-col h-full">
-                    <div
-                      className="block flex-1 cursor-pointer"
-                      onClick={bulkMode ? () => toggleSelect(pkg.id) : undefined}
-                    >
-                      <Link
-                        to="/package/$id"
-                        params={{ id: pkg.id }}
-                        className={bulkMode ? "pointer-events-none" : ""}
-                      >
-                      <div className="flex items-start justify-between mb-3">
-                        <div className="flex gap-2 flex-wrap">
-                          {bulkMode && (
-                            <span className={`px-2 py-1 rounded-full text-[10px] font-semibold flex items-center gap-1 ${
-                              isSelected
-                                ? "bg-[var(--matcha-600)] text-[var(--pure-white)]"
-                                : "bg-[var(--oat-light)] text-[var(--warm-charcoal)]"
-                            }`}>
-                              <MaterialIcon name={isSelected ? "check_circle" : "radio_button_unchecked"} className="text-xs" />
-                              {isSelected ? "Terpilih" : "Pilih"}
-                            </span>
-                          )}
-                          <span className="inline-flex items-center px-2.5 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-xs font-semibold leading-none whitespace-nowrap">
-                            {pkg.examTypeName}
-                          </span>
-                          {isOwner && !bulkMode && (
-                            <span
-                              className={`px-2 py-1 rounded-full text-[10px] font-semibold flex items-center gap-1 ${
-                                pkg.isPublic
-                                  ? "bg-[var(--slushie-500)]/20 text-[var(--slushie-800)]"
-                                  : "bg-[var(--slushie-500)]/15 text-[var(--slushie-800)]"
-                              }`}
-                            >
-                              {!pkg.isPublic && <MaterialIcon name="lock" className="text-[10px]" />}
-                              {pkg.isPublic ? "Publik" : "Privat"}
-                            </span>
-                          )}
-                        </div>
-                        {pkg.avgRating && (
-                          <div className="flex items-center gap-1 text-[var(--lemon-700)]">
-                            <MaterialIcon name="star" className="text-sm" />
-                            <span className="text-xs font-bold">{pkg.avgRating}</span>
-                          </div>
-                        )}
-                      </div>
-
-                      <h3 className="font-headline text-lg font-bold text-[var(--clay-black)] mb-2 line-clamp-2">
-                        {pkg.title}
-                      </h3>
-
-                      {pkg.description && (
-                        <p className="text-sm text-[var(--warm-charcoal)] line-clamp-2 mb-4">
-                          {pkg.description}
-                        </p>
-                      )}
-                      </Link>
-
-                      <div className="flex items-center justify-between mt-auto pt-3 border-t border-[var(--oat-border)]">
-                        <div className="flex gap-3 text-xs text-[var(--warm-charcoal)]">
-                          <span className="flex items-center gap-1">
-                            <MaterialIcon name="quiz" className="text-xs" />
-                            {pkg.totalQuestions}
-                          </span>
-                          <span className="flex items-center gap-1">
-                            <MaterialIcon name="folder" className="text-xs" />
-                            {pkg.totalSections}
-                          </span>
-                          {pkg.estimatedDurationMin && (
-                            <span className="flex items-center gap-1">
-                              <MaterialIcon name="timer" className="text-xs" />
-                              {pkg.estimatedDurationMin}m
-                            </span>
-                          )}
-                        </div>
-                        <span className="text-xs text-[var(--warm-silver)]">
-                          {pkg.usageCount}x digunakan
-                        </span>
-                      </div>
-                    </div>
-
-                    {/* Owner actions */}
-                    {isOwner && !bulkMode && (
-                      <div className="mt-3 pt-3 border-t border-[var(--oat-border)] flex items-center justify-between">
-                        <button
-                          onClick={() => togglePublic(pkg.id, pkg.isPublic)}
-                          disabled={updateMutation.isPending}
-                          title={pkg.isPublic ? "Klik untuk jadikan privat" : "Klik untuk jadikan publik"}
-                          className={`text-xs font-semibold px-3 py-1.5 rounded-full transition-colors flex items-center gap-1 cursor-pointer ${
-                            pkg.isPublic
-                              ? "bg-[var(--matcha-300)] text-[var(--matcha-800)]"
-                              : "bg-[var(--slushie-500)]/15 text-[var(--slushie-800)]"
-                          }`}
-                        >
-                          {!pkg.isPublic && <MaterialIcon name="lock" className="text-xs" />}
-                          {pkg.isPublic ? "Publik" : "Privat"}
-                        </button>
-                        {pkg.isPublic && (
-                          <button
-                            onClick={() => {
-                              const url = `${window.location.origin}/package/${pkg.id}`;
-                            navigator.clipboard.writeText(url);
-                            toast.success("Link paket disalin!");
-                            }}
-                            className="text-xs text-[var(--matcha-600)] hover:bg-[var(--matcha-300)]/20 px-3 py-1.5 rounded-full transition-colors flex items-center gap-1"
-                          >
-                            <MaterialIcon name="share" className="text-xs" />
-                            Bagikan
-                          </button>
-                        )}
-                      </div>
-                    )}
-
-                    {!bulkMode && (
-                      <div className="mt-3 pt-3 border-t border-[var(--oat-border)]">
-                        <Button
-                          className="w-full bg-[var(--matcha-600)] text-[var(--pure-white)] hover:bg-[var(--matcha-800)] clay-hover rounded-[var(--radius-lg)]"
-                          onClick={() => routerNavigate({ to: '/package/$id/take', params: { id: pkg.id } })}
-                          size="xl"
-                        >
-                          <MaterialIcon name="play_arrow" className="mr-2" />
-                          Mulai Latihan
-                        </Button>
-                      </div>
-                    )}
-                  </CardContent>
-                </Card>
+                  pkg={pkg}
+                  isOwner={isOwner}
+                  bulkMode={bulkMode}
+                  isSelected={selectedIds.has(pkg.id)}
+                  isTogglePending={updateMutation.isPending}
+                  onToggleSelect={() => toggleSelect(pkg.id)}
+                  onTogglePublic={() => togglePublic(pkg.id, pkg.isPublic)}
+                />
               );
             })}
           </div>

apps/web/src/components/routes/SettingsPage.tsx

@@ -280,7 +280,7 @@ export function RouteComponent() {
     <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-5xl mx-auto bg-[var(--warm-cream)]">
       <section className="mb-10">
         <div className="flex items-center gap-2 text-sm text-[var(--warm-charcoal)] mb-4">
-          <Link to="/" className="hover:text-[var(--clay-black)] transition-colors">Beranda</Link>
+          <Link to="/dashboard" className="hover:text-[var(--clay-black)] transition-colors">Beranda</Link>
           <MaterialIcon name="chevron_right" className="text-xs" />
           <span className="text-[var(--clay-black)] font-medium">Pengaturan</span>
         </div>

apps/web/src/components/sidebar.tsx

@@ -19,7 +19,7 @@ interface NavGroup {
 
 const navGroups: NavGroup[] = [
   {
-    items: [{ to: "/", label: "Dashboard", icon: "dashboard" }],
+    items: [{ to: "/dashboard", label: "Dashboard", icon: "dashboard" }],
   },
   {
     label: "Generate",
@@ -54,7 +54,7 @@ const bottomItems: NavItem[] = [
 ];
 
 const mobileNavItems: NavItem[] = [
-  { to: "/", label: "Dashboard", icon: "dashboard" },
+  { to: "/dashboard", label: "Dashboard", icon: "dashboard" },
   { to: "/generate", label: "AI Lab", icon: "auto_awesome" },
   { to: "/jobs", label: "Jobs", icon: "schedule" },
   { to: "/bank", label: "Buat", icon: "database" },
@@ -66,7 +66,7 @@ function NavIcon({ name }: { name: string }) {
 }
 
 function NavLink({ item, isActive, collapsed }: { item: NavItem; isActive: boolean; collapsed: boolean }) {
-  const tourAttr = item.to !== "/" ? { "data-tour": `nav-${item.to.replace("/", "")}` } : {};
+  const tourAttr = item.to !== "/dashboard" ? { "data-tour": `nav-${item.to.replace("/", "")}` } : {};
   return (
     <Link
       to={item.to}
@@ -99,7 +99,7 @@ export function Sidebar() {
 
   async function handleSignOut() {
     await authClient.signOut();
-    navigate({ to: "/landing" });
+    navigate({ to: "/" });
   }
 
   return (

apps/web/src/components/sign-in-form.tsx

@@ -13,7 +13,7 @@ import Loader from "./loader";
 
 export default function SignInForm({ onSwitchToSignUp }: { onSwitchToSignUp: () => void }) {
   const navigate = useNavigate({
-    from: "/",
+    from: "/login",
   });
   const { isPending } = authClient.useSession();
 
@@ -30,7 +30,7 @@ export default function SignInForm({ onSwitchToSignUp }: { onSwitchToSignUp: ()
         },
         {
           onSuccess: () => {
-            navigate({ to: "/" });
+            navigate({ to: "/dashboard" });
             toast.success("Sign in successful");
           },
           onError: (error) => {

apps/web/src/hooks/use-generation-jobs.ts

@@ -92,6 +92,7 @@ export function useGenerationJobs() {
 
     if (status === "completed_partial" && data.resultJson) {
       setResult(baseResult);
+      localStorage.setItem("pendingDonationPrompt", "generate");
       if (data.errorMessage) {
         setError(data.errorMessage as string);
       }
@@ -99,6 +100,7 @@ export function useGenerationJobs() {
 
     if (status === "completed" && data.resultJson) {
       setResult(baseResult);
+      localStorage.setItem("pendingDonationPrompt", "generate");
     }
 
     if (status === "failed") {

apps/web/src/hooks/use-test-session.ts

@@ -211,6 +211,7 @@ export function useTestSession(packageId: string, existingAttemptId?: string) {
   const handleFinish = useCallback(async () => {
     if (!attemptId) return;
     setIsFinished(true);
+    localStorage.setItem("pendingDonationPrompt", "exam");
     await finishMutation.mutateAsync({ attemptId });
     clearElapsedTime(attemptId);
     clearMarkedQuestions(attemptId);

apps/web/src/lib/route-shell.ts

@@ -0,0 +1,7 @@
+export type RouteShell = "public" | "fullscreen" | "app";
+
+export const routeShell = {
+  public: { shell: "public" as const },
+  fullscreen: { shell: "fullscreen" as const },
+  app: { shell: "app" as const },
+};

apps/web/src/routeTree.gen.ts

@@ -21,9 +21,11 @@ import { Route as JobsRouteImport } from './routes/jobs'
 import { Route as HistoryRouteImport } from './routes/history'
 import { Route as GenerateRouteImport } from './routes/generate'
 import { Route as ForgotPasswordRouteImport } from './routes/forgot-password'
+import { Route as DashboardRouteImport } from './routes/dashboard'
 import { Route as BankRouteImport } from './routes/bank'
 import { Route as AnalyticsRouteImport } from './routes/analytics'
 import { Route as AdminRouteImport } from './routes/admin'
+import { Route as SplatRouteImport } from './routes/$'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as AdminIndexRouteImport } from './routes/admin.index'
 import { Route as ProfileUserIdRouteImport } from './routes/profile.$userId'
@@ -77,7 +79,7 @@ const LandingRoute = LandingRouteImport.update({
   id: '/landing',
   path: '/landing',
   getParentRoute: () => rootRouteImport,
-} as any).lazy(() => import('./routes/landing.lazy').then((d) => d.Route))
+} as any)
 const JobsRoute = JobsRouteImport.update({
   id: '/jobs',
   path: '/jobs',
@@ -98,6 +100,11 @@ const ForgotPasswordRoute = ForgotPasswordRouteImport.update({
   path: '/forgot-password',
   getParentRoute: () => rootRouteImport,
 } as any)
+const DashboardRoute = DashboardRouteImport.update({
+  id: '/dashboard',
+  path: '/dashboard',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const BankRoute = BankRouteImport.update({
   id: '/bank',
   path: '/bank',
@@ -113,11 +120,16 @@ const AdminRoute = AdminRouteImport.update({
   path: '/admin',
   getParentRoute: () => rootRouteImport,
 } as any)
+const SplatRoute = SplatRouteImport.update({
+  id: '/$',
+  path: '/$',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const IndexRoute = IndexRouteImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => rootRouteImport,
-} as any)
+} as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route))
 const AdminIndexRoute = AdminIndexRouteImport.update({
   id: '/',
   path: '/',
@@ -182,9 +194,11 @@ const PackageIdAttemptAttemptIdRoute =
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/$': typeof SplatRoute
   '/admin': typeof AdminRouteWithChildren
   '/analytics': typeof AnalyticsRoute
   '/bank': typeof BankRoute
+  '/dashboard': typeof DashboardRoute
   '/forgot-password': typeof ForgotPasswordRoute
   '/generate': typeof GenerateRoute
   '/history': typeof HistoryRoute
@@ -212,8 +226,10 @@ export interface FileRoutesByFullPath {
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/$': typeof SplatRoute
   '/analytics': typeof AnalyticsRoute
   '/bank': typeof BankRoute
+  '/dashboard': typeof DashboardRoute
   '/forgot-password': typeof ForgotPasswordRoute
   '/generate': typeof GenerateRoute
   '/history': typeof HistoryRoute
@@ -241,9 +257,11 @@ export interface FileRoutesByTo {
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
+  '/$': typeof SplatRoute
   '/admin': typeof AdminRouteWithChildren
   '/analytics': typeof AnalyticsRoute
   '/bank': typeof BankRoute
+  '/dashboard': typeof DashboardRoute
   '/forgot-password': typeof ForgotPasswordRoute
   '/generate': typeof GenerateRoute
   '/history': typeof HistoryRoute
@@ -273,9 +291,11 @@ export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
+    | '/$'
     | '/admin'
     | '/analytics'
     | '/bank'
+    | '/dashboard'
     | '/forgot-password'
     | '/generate'
     | '/history'
@@ -303,8 +323,10 @@ export interface FileRouteTypes {
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
+    | '/$'
     | '/analytics'
     | '/bank'
+    | '/dashboard'
     | '/forgot-password'
     | '/generate'
     | '/history'
@@ -331,9 +353,11 @@ export interface FileRouteTypes {
   id:
     | '__root__'
     | '/'
+    | '/$'
     | '/admin'
     | '/analytics'
     | '/bank'
+    | '/dashboard'
     | '/forgot-password'
     | '/generate'
     | '/history'
@@ -362,9 +386,11 @@ export interface FileRouteTypes {
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
+  SplatRoute: typeof SplatRoute
   AdminRoute: typeof AdminRouteWithChildren
   AnalyticsRoute: typeof AnalyticsRoute
   BankRoute: typeof BankRoute
+  DashboardRoute: typeof DashboardRoute
   ForgotPasswordRoute: typeof ForgotPasswordRoute
   GenerateRoute: typeof GenerateRoute
   HistoryRoute: typeof HistoryRoute
@@ -468,6 +494,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ForgotPasswordRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/dashboard': {
+      id: '/dashboard'
+      path: '/dashboard'
+      fullPath: '/dashboard'
+      preLoaderRoute: typeof DashboardRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/bank': {
       id: '/bank'
       path: '/bank'
@@ -489,6 +522,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AdminRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/$': {
+      id: '/$'
+      path: '/$'
+      fullPath: '/$'
+      preLoaderRoute: typeof SplatRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/': {
       id: '/'
       path: '/'
@@ -621,9 +661,11 @@ const PackageIdRouteWithChildren = PackageIdRoute._addFileChildren(
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
+  SplatRoute: SplatRoute,
   AdminRoute: AdminRouteWithChildren,
   AnalyticsRoute: AnalyticsRoute,
   BankRoute: BankRoute,
+  DashboardRoute: DashboardRoute,
   ForgotPasswordRoute: ForgotPasswordRoute,
   GenerateRoute: GenerateRoute,
   HistoryRoute: HistoryRoute,

apps/web/src/routes/$.tsx

@@ -0,0 +1,8 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { routeShell } from "@/lib/route-shell";
+import { NotFoundPage } from "@/components/NotFoundPage";
+
+export const Route = createFileRoute("/$")({
+  staticData: routeShell.public,
+  component: NotFoundPage,
+});

apps/web/src/routes/__root.tsx

@@ -9,6 +9,7 @@ import { ThemeProvider } from "@/components/theme-provider";
 import { useSidebar } from "@/hooks/use-sidebar";
 import { GlobalGenerationProgress } from "@/components/generate/GlobalGenerationProgress";
 import { ErrorFallback } from "@/components/ErrorFallback";
+import type { RouteShell } from "@/lib/route-shell";
 import type { trpc } from "@/utils/trpc";
 
 function SkipLink() {
@@ -29,6 +30,14 @@ export interface RouterAppContext {
   queryClient: QueryClient;
 }
 
+function resolveShell(matches: { staticData?: unknown }[]): RouteShell {
+  for (let i = matches.length - 1; i >= 0; i--) {
+    const shell = (matches[i]?.staticData as { shell?: RouteShell } | undefined)?.shell;
+    if (shell) return shell;
+  }
+  return "app";
+}
+
 export const Route = createRootRouteWithContext<RouterAppContext>()({
   component: RootComponent,
   errorComponent: ({ error, reset }) => <ErrorFallback error={error} reset={reset} />,
@@ -82,18 +91,7 @@ export const Route = createRootRouteWithContext<RouterAppContext>()({
 
 function RootComponent() {
   const { collapsed } = useSidebar();
-  const matches = useRouterState({ select: (s) => s.matches });
-  const isFullScreen = matches.some(
-    (m) =>
-      m.routeId === "/package/$id/take" ||
-      m.routeId === "/package/$id/attempt/$attemptId" ||
-      m.routeId === "/login" ||
-      m.routeId === "/setup-avatar" ||
-      m.routeId === "/verify-email" ||
-      m.routeId === "/forgot-password" ||
-      m.routeId.startsWith("/admin"),
-  );
-  const isLanding = matches.some((m) => m.routeId === "/landing");
+  const shell = useRouterState({ select: (s) => resolveShell(s.matches) });
 
   return (
     <>
@@ -105,11 +103,11 @@ function RootComponent() {
         disableTransitionOnChange
         storageKey="labas-theme"
       >
-        {isFullScreen ? (
+        {shell === "fullscreen" ? (
           <div className="h-screen bg-background text-on-surface flex flex-col overflow-y-auto relative">
             <Outlet />
           </div>
-        ) : isLanding ? (
+        ) : shell === "public" ? (
           <div className="min-h-screen bg-background text-on-surface relative">
             <Outlet />
           </div>

apps/web/src/routes/admin.tsx

@@ -3,8 +3,10 @@ import { useQuery } from "@tanstack/react-query";
 import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { routeShell } from "@/lib/route-shell";
 
 export const Route = createFileRoute("/admin")({
+  staticData: routeShell.fullscreen,
   component: AdminLayout,
   beforeLoad: async () => {
     const session = await authClient.getSession();
@@ -45,7 +47,7 @@ function AdminLayout() {
         <MaterialIcon name="gpp_bad" className="text-6xl text-[var(--clay-red)]" />
         <h1 className="text-2xl font-headline font-bold text-[var(--clay-black)]">Access Denied</h1>
         <p className="text-[var(--warm-charcoal)]">Only admins can access this page.</p>
-        <Link to="/" className="text-[var(--matcha-700)] underline">Back to Dashboard</Link>
+        <Link to="/dashboard" className="text-[var(--matcha-700)] underline">Back to Dashboard</Link>
       </div>
     );
   }
@@ -55,7 +57,7 @@ function AdminLayout() {
       <div className="flex">
         <aside className="w-56 shrink-0 min-h-screen border-r border-[var(--oat-border)] bg-[var(--pure-white)] px-4 py-6 flex flex-col">
           <div className="mb-6 px-2">
-            <Link to="/" className="flex items-center gap-2">
+            <Link to="/dashboard" className="flex items-center gap-2">
               <span className="material-symbols-outlined text-[var(--clay-black)]">arrow_back</span>
               <span className="text-sm text-[var(--warm-charcoal)]">Back to App</span>
             </Link>

apps/web/src/routes/analytics.tsx

@@ -59,7 +59,7 @@ function AnalyticsComponent() {
       {/* Header */}
       <div className="mb-8">
         <div className="flex items-center gap-2 text-sm text-[var(--warm-charcoal)] mb-4">
-          <Link to="/" className="hover:text-[var(--clay-black)] transition-colors">
+          <Link to="/dashboard" className="hover:text-[var(--clay-black)] transition-colors">
             Beranda
           </Link>
           <MaterialIcon name="chevron_right" className="text-xs" />

apps/web/src/routes/attempt.$id.tsx

@@ -168,216 +168,244 @@ function AttemptResultComponent() {
   }
 
   return (
-    <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-4xl mx-auto bg-[var(--warm-cream)]">
-      {/* Breadcrumb */}
-      <div className="flex items-center gap-2 text-sm text-[var(--warm-charcoal)] mb-6">
-        <Link to="/packages" className="hover:text-[var(--clay-black)] transition-colors">
-          Paket
-        </Link>
-        <MaterialIcon name="chevron_right" className="text-xs" />
-        <span className="text-[var(--clay-black)] font-medium">Hasil Latihan</span>
-      </div>
-
-      {/* Score Header */}
-      <div className="mb-8">
-        <h1 className="text-3xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight mb-4">
-          Hasil Latihan
-        </h1>
+    <div className="min-h-screen pb-32 bg-[var(--warm-cream)]">
+      {/* Sticky header */}
+      <div className="sticky top-0 z-20 bg-[var(--warm-cream)]/95 backdrop-blur-sm border-b border-[var(--oat-border)] shadow-sm">
+        <div className="px-6 md:px-12 lg:px-16 max-w-4xl mx-auto pt-4 pb-4">
+          {/* Breadcrumb */}
+          <div className="flex items-center gap-2 text-xs text-[var(--warm-charcoal)] mb-3">
+            <Link to="/packages" className="hover:text-[var(--clay-black)] transition-colors">
+              Paket
+            </Link>
+            <MaterialIcon name="chevron_right" className="text-[10px]" />
+            <span className="text-[var(--clay-black)] font-medium">Hasil Latihan</span>
+          </div>
 
-        <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] overflow-hidden">
-          <CardContent className="p-6">
-            <div className="flex flex-col md:flex-row items-center gap-6">
-              {/* Big Score Circle */}
-              <div className="w-32 h-32 rounded-full border-4 border-[var(--matcha-500)] flex flex-col items-center justify-center bg-[var(--matcha-100)]">
-                <span className="text-3xl font-headline font-extrabold text-[var(--matcha-800)]">
-                  {percentage}%
-                </span>
-                <span className="text-xs text-[var(--matcha-700)] font-medium">
-                  {questionStats.correct}/{questionStats.total}
-                </span>
+          {/* Title + score summary + actions */}
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <div className="flex items-center gap-3 min-w-0">
+              <div className={`w-12 h-12 rounded-full border-2 flex items-center justify-center shrink-0 font-headline font-extrabold text-sm ${
+                percentage >= 80
+                  ? "border-[var(--matcha-500)] bg-[var(--matcha-100)] text-[var(--matcha-800)]"
+                  : percentage >= 60
+                    ? "border-[var(--lemon-500)] bg-[var(--lemon-100)] text-[var(--lemon-800)]"
+                    : "border-[var(--pomegranate-400)] bg-[var(--pomegranate-50)] text-[var(--pomegranate-700)]"
+              }`}>
+                {percentage}%
               </div>
-
-              <div className="flex-1 space-y-2 text-center md:text-left">
-                <p className="text-lg font-semibold text-[var(--clay-black)]">
-                  {percentage >= 80
-                    ? "Sempurna!"
-                    : percentage >= 60
-                      ? "Bagus, terus berlatih!"
-                      : percentage >= 40
-                        ? "Perlu latihan lebih"
-                        : "Jangan menyerah, coba lagi!"}
+              <div>
+                <h1 className="text-lg font-headline font-extrabold text-[var(--clay-black)] leading-tight">
+                  Hasil Latihan
+                </h1>
+                <p className="text-xs text-[var(--warm-charcoal)]">
+                  {questionStats.correct}/{questionStats.total} benar · {formatTime(durationSec)}
                 </p>
-                <div className="flex flex-wrap gap-4 text-sm text-[var(--warm-charcoal)] justify-center md:justify-start">
-                  <span className="flex items-center gap-1">
-                    <MaterialIcon name="timer" className="text-sm" />
-                    {formatTime(durationSec)}
-                  </span>
-                  <span className="flex items-center gap-1">
-                    <MaterialIcon name="quiz" className="text-sm" />
-                    {questionStats.total} soal
-                  </span>
-                  <span className="flex items-center gap-1">
-                    <MaterialIcon name="check_circle" className="text-sm text-[var(--matcha-600)]" />
-                    {questionStats.correct} benar
+              </div>
+            </div>
+
+            {/* Actions */}
+            <div className="flex items-center gap-2 shrink-0">
+              <Link to="/package/$id/take" params={{ id: attempt.packageId! }}>
+                <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]">
+                  <MaterialIcon name="replay" />
+                  <span className="ml-1.5">Coba Lagi</span>
+                </Button>
+              </Link>
+              <Link to="/packages">
+                <Button
+                  variant="outline"
+                  className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
+                >
+                  <MaterialIcon name="arrow_back" />
+                  <span className="ml-1.5 hidden sm:inline">Kembali</span>
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="px-6 md:px-12 lg:px-16 max-w-4xl mx-auto pt-8">
+        {/* Score Card */}
+        <div className="mb-8">
+          <Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] overflow-hidden">
+            <CardContent className="p-6">
+              <div className="flex flex-col md:flex-row items-center gap-6">
+                {/* Big Score Circle */}
+                <div className="w-32 h-32 rounded-full border-4 border-[var(--matcha-500)] flex flex-col items-center justify-center bg-[var(--matcha-100)]">
+                  <span className="text-3xl font-headline font-extrabold text-[var(--matcha-800)]">
+                    {percentage}%
                   </span>
-                  <span className="flex items-center gap-1">
-                    <MaterialIcon name="cancel" className="text-sm text-[var(--pomegranate-400)]" />
-                    {questionStats.wrong} salah
+                  <span className="text-xs text-[var(--matcha-700)] font-medium">
+                    {questionStats.correct}/{questionStats.total}
                   </span>
                 </div>
 
-                {/* Package Rating */}
-                <div className="flex items-center gap-2 justify-center md:justify-start pt-2">
-                  <span className="text-xs text-[var(--warm-charcoal)]">Nilai paket:</span>
-                  <div className="flex gap-0.5">
-                    {[1, 2, 3, 4, 5].map((star) => (
-                      <button
-                        key={star}
-                        onClick={() => ratePackageMutation.mutate({ packageId: attempt.packageId!, score: star })}
-                        aria-label={`Nilai ${star} bintang`}
-                        className="transition-transform hover:scale-110"
-                      >
-                        <MaterialIcon
-                          name={(packageRatingQuery.data?.myRating ?? 0) >= star ? "star" : "star_outline"}
-                          className={`text-lg ${(packageRatingQuery.data?.myRating ?? 0) >= star ? "text-[var(--lemon-500)]" : "text-[var(--oat-border)]"}`}
-                        />
-                      </button>
-                    ))}
-                  </div>
-                  {packageRatingQuery.data?.avgRating && (
-                    <span className="text-xs text-[var(--warm-charcoal)]">
-                      {packageRatingQuery.data.avgRating}/5
+                <div className="flex-1 space-y-2 text-center md:text-left">
+                  <p className="text-lg font-semibold text-[var(--clay-black)]">
+                    {percentage >= 80
+                      ? "Sempurna!"
+                      : percentage >= 60
+                        ? "Bagus, terus berlatih!"
+                        : percentage >= 40
+                          ? "Perlu latihan lebih"
+                          : "Jangan menyerah, coba lagi!"}
+                  </p>
+                  <div className="flex flex-wrap gap-4 text-sm text-[var(--warm-charcoal)] justify-center md:justify-start">
+                    <span className="flex items-center gap-1">
+                      <MaterialIcon name="timer" className="text-sm" />
+                      {formatTime(durationSec)}
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <MaterialIcon name="quiz" className="text-sm" />
+                      {questionStats.total} soal
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <MaterialIcon name="check_circle" className="text-sm text-[var(--matcha-600)]" />
+                      {questionStats.correct} benar
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <MaterialIcon name="cancel" className="text-sm text-[var(--pomegranate-400)]" />
+                      {questionStats.wrong} salah
                     </span>
-                  )}
+                  </div>
+
+                  {/* Package Rating */}
+                  <div className="flex items-center gap-2 justify-center md:justify-start pt-2">
+                    <span className="text-xs text-[var(--warm-charcoal)]">Nilai paket:</span>
+                    <div className="flex gap-0.5">
+                      {[1, 2, 3, 4, 5].map((star) => (
+                        <button
+                          key={star}
+                          onClick={() => ratePackageMutation.mutate({ packageId: attempt.packageId!, score: star })}
+                          aria-label={`Nilai ${star} bintang`}
+                          className="p-1 transition-transform hover:scale-110 cursor-pointer"
+                        >
+                          <MaterialIcon
+                            name={(packageRatingQuery.data?.myRating ?? 0) >= star ? "star" : "star_outline"}
+                            className={`text-xl ${(packageRatingQuery.data?.myRating ?? 0) >= star ? "text-[var(--lemon-500)]" : "text-[var(--oat-border)]"}`}
+                          />
+                        </button>
+                      ))}
+                    </div>
+                    {packageRatingQuery.data?.avgRating && (
+                      <span className="text-xs text-[var(--warm-charcoal)]">
+                        {packageRatingQuery.data.avgRating}/5
+                      </span>
+                    )}
+                  </div>
                 </div>
               </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
+            </CardContent>
+          </Card>
+        </div>
 
-      {/* Section Breakdown */}
-      <div className="mb-8">
-        <h2 className="text-xl font-headline font-bold text-[var(--clay-black)] mb-4">Per Section</h2>
-        <div className="space-y-3">
-          {attempt.sections.map((sec) => {
-            const secPct = sec.maxScore && sec.maxScore > 0
-              ? Math.round(((sec.score ?? 0) / sec.maxScore) * 100)
-              : 0;
-            return (
-              <Card key={sec.id} className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
-                <CardContent className="p-4">
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <p className="font-semibold text-[var(--clay-black)]">{sec.title}</p>
-                      <p className="text-sm text-[var(--warm-charcoal)]">
-                        {sec.score ?? 0}/{sec.maxScore ?? 0} benar
-                      </p>
-                      {sec.timeSpentSec != null && (
-                        <p className="text-xs text-[var(--warm-silver)] mt-1 flex items-center gap-1">
-                          <MaterialIcon name="timer" className="text-xs" />
-                          {formatTime(sec.timeSpentSec)}
+        {/* Section Breakdown */}
+        <div className="mb-8">
+          <h2 className="text-xl font-headline font-bold text-[var(--clay-black)] mb-4">Per Section</h2>
+          <div className="space-y-3">
+            {attempt.sections.map((sec) => {
+              const secPct = sec.maxScore && sec.maxScore > 0
+                ? Math.round(((sec.score ?? 0) / sec.maxScore) * 100)
+                : 0;
+              return (
+                <Card key={sec.id} className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+                  <CardContent className="p-4">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <p className="font-semibold text-[var(--clay-black)]">{sec.title}</p>
+                        <p className="text-sm text-[var(--warm-charcoal)]">
+                          {sec.score ?? 0}/{sec.maxScore ?? 0} benar
                         </p>
-                      )}
-                    </div>
-                    <div className="w-16 h-16 rounded-full border-2 border-[var(--matcha-400)] flex items-center justify-center bg-[var(--matcha-50)]">
-                      <span className="text-lg font-bold text-[var(--matcha-700)]">{secPct}%</span>
+                        {sec.timeSpentSec != null && (
+                          <p className="text-xs text-[var(--warm-silver)] mt-1 flex items-center gap-1">
+                            <MaterialIcon name="timer" className="text-xs" />
+                            {formatTime(sec.timeSpentSec)}
+                          </p>
+                        )}
+                      </div>
+                      <div className="w-16 h-16 rounded-full border-2 border-[var(--matcha-400)] flex items-center justify-center bg-[var(--matcha-50)]">
+                        <span className="text-lg font-bold text-[var(--matcha-700)]">{secPct}%</span>
+                      </div>
                     </div>
-                  </div>
-                </CardContent>
-              </Card>
-            );
-          })}
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
         </div>
-      </div>
 
-      {/* Skill Breakdown */}
-      <div className="mb-8">
-        <h2 className="text-xl font-headline font-bold text-[var(--clay-black)] mb-4">
-          Kemampuan per Topik
-          <span className="ml-2 text-sm font-normal text-[var(--warm-charcoal)]">Klik topik untuk filter soal</span>
-        </h2>
-        <SkillBreakdown
-          questions={allQuestions.map(({ q, ans }) => ({
-            skillTags: q.skillTags ?? [],
-            isCorrect: ans?.isCorrect ?? null,
-          }))}
-          onSkillClick={toggleSkill}
-          activeSkills={filterSkills}
-        />
-      </div>
+        {/* Skill Breakdown */}
+        <div className="mb-8">
+          <h2 className="text-xl font-headline font-bold text-[var(--clay-black)] mb-1">
+            Kemampuan per Topik
+          </h2>
+          <p className="text-sm text-[var(--warm-charcoal)] mb-4">Klik topik untuk filter soal</p>
+          <SkillBreakdown
+            questions={allQuestions.map(({ q, ans }) => ({
+              skillTags: q.skillTags ?? [],
+              isCorrect: ans?.isCorrect ?? null,
+            }))}
+            onSkillClick={toggleSkill}
+            activeSkills={filterSkills}
+          />
+        </div>
 
-      {/* Question Review */}
-      <div className="mb-8">
-        <h2 className="text-xl font-headline font-bold text-[var(--clay-black)] mb-4">
-          Pembahasan Soal
-          {filterStatus !== "all" && (
-            <span className="ml-2 text-sm font-normal text-[var(--warm-charcoal)]">
-              ({filteredQuestions.length} soal)
-            </span>
-          )}
-        </h2>
+        {/* Question Review */}
+        <div className="mb-8">
+          <div className="flex items-baseline gap-2 mb-4">
+            <h2 className="text-xl font-headline font-bold text-[var(--clay-black)]">
+              Pembahasan Soal
+            </h2>
+            {filterStatus !== "all" && (
+              <span className="text-sm text-[var(--warm-charcoal)]">
+                {filteredQuestions.length} soal
+              </span>
+            )}
+          </div>
 
-        <ReviewFilterBar
-          filterStatus={filterStatus}
-          setFilterStatus={setFilterStatus}
-          filterSkills={filterSkills}
-          setFilterSkills={setFilterSkills}
-          questions={allQuestions.map(({ q, ans }) => ({
-            skillTags: q.skillTags ?? [],
-            isCorrect: ans?.isCorrect,
-          }))}
-          markedCount={partialCount}
-          allExpanded={allExpanded}
-          onToggleAllExpanded={toggleAllExpanded}
-        />
+          <ReviewFilterBar
+            filterStatus={filterStatus}
+            setFilterStatus={setFilterStatus}
+            filterSkills={filterSkills}
+            setFilterSkills={setFilterSkills}
+            questions={allQuestions.map(({ q, ans }) => ({
+              skillTags: q.skillTags ?? [],
+              isCorrect: ans?.isCorrect,
+            }))}
+            markedCount={partialCount}
+            allExpanded={allExpanded}
+            onToggleAllExpanded={toggleAllExpanded}
+          />
 
-        <div className="space-y-3">
-          {filteredQuestions.map(({ q, secIdx, qIdx, ans }) => (
-            <QuestionReviewCard
-              key={q.id}
-              q={q}
-              secIdx={secIdx}
-              qIdx={qIdx}
-              ans={ans}
-              userId={session?.user.id}
-              isExpanded={expandedIds.has(q.id)}
-              onToggleExpand={() => toggleExpand(q.id)}
-            />
-          ))}
-          {filteredQuestions.length === 0 && (
-            <div className="text-center py-12">
-              <MaterialIcon name="search_off" className="text-4xl text-[var(--warm-silver)] mx-auto mb-3" />
-              <p className="text-sm text-[var(--warm-charcoal)]">Tidak ada soal yang sesuai filter.</p>
-              <button
-                onClick={() => { setFilterStatus("all"); setFilterSkills([]); }}
-                className="text-sm text-[var(--matcha-600)] font-semibold mt-2 hover:underline"
-              >
-                Reset filter
-              </button>
-            </div>
-          )}
+          <div className="space-y-3">
+            {filteredQuestions.map(({ q, secIdx, qIdx, ans }) => (
+              <QuestionReviewCard
+                key={q.id}
+                q={q}
+                secIdx={secIdx}
+                qIdx={qIdx}
+                ans={ans}
+                userId={session?.user.id}
+                isExpanded={expandedIds.has(q.id)}
+                onToggleExpand={() => toggleExpand(q.id)}
+              />
+            ))}
+            {filteredQuestions.length === 0 && (
+              <div className="text-center py-12">
+                <MaterialIcon name="search_off" className="text-4xl text-[var(--warm-silver)] mx-auto mb-3" />
+                <p className="text-sm text-[var(--warm-charcoal)]">Tidak ada soal yang sesuai filter.</p>
+                <button
+                  onClick={() => { setFilterStatus("all"); setFilterSkills([]); }}
+                  className="text-sm text-[var(--matcha-600)] font-semibold mt-2 hover:underline cursor-pointer"
+                >
+                  Reset filter
+                </button>
+              </div>
+            )}
+          </div>
         </div>
       </div>
-
-      {/* Actions */}
-      <div className="flex gap-3">
-        <Link to="/package/$id/take" params={{ id: attempt.packageId! }}>
-          <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]">
-            <MaterialIcon name="replay" />
-            <span className="ml-2">Coba Lagi</span>
-          </Button>
-        </Link>
-        <Link to="/packages">
-          <Button
-            variant="outline"
-            className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
-          >
-            <MaterialIcon name="arrow_back" />
-            <span className="ml-2">Kembali ke Paket</span>
-          </Button>
-        </Link>
-      </div>
     </div>
   );
 }

apps/web/src/routes/dashboard.tsx

@@ -0,0 +1,429 @@
+import { useState, useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { createFileRoute, redirect, Link } from "@tanstack/react-router";
+import { authClient } from "@/lib/auth-client";
+import { routeShell } from "@/lib/route-shell";
+import { trpc } from "@/utils/trpc";
+import { Button } from "@labas/ui/components/button";
+import { Card, CardContent } from "@labas/ui/components/card";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { TourGuide } from "@/components/TourGuide";
+import { DonationModal } from "@/components/DonationModal";
+
+export const Route = createFileRoute("/dashboard")({
+  staticData: routeShell.app,
+  component: HomeComponent,
+  beforeLoad: async () => {
+    const session = await authClient.getSession();
+    if (!session.data) {
+      throw redirect({ to: "/login" });
+    }
+    if (!session.data.user.emailVerified) {
+      throw redirect({ to: "/verify-email", search: { email: session.data.user.email } });
+    }
+    if (!session.data.user.image) {
+      throw redirect({ to: "/setup-avatar" });
+    }
+    return { session };
+  },
+});
+
+function formatDateShort(dateStr: string | Date | null) {
+  if (!dateStr) return "-";
+  const d = new Date(dateStr);
+  return d.toLocaleDateString("id-ID", { day: "numeric", month: "short" });
+}
+
+function HomeComponent() {
+  const { session } = Route.useRouteContext();
+  const [donationModalOpen, setDonationModalOpen] = useState(false);
+  const [donationTrigger, setDonationTrigger] = useState<"exam" | "generate" | null>(null);
+
+  useEffect(() => {
+    const prompt = localStorage.getItem("pendingDonationPrompt") as "exam" | "generate" | null;
+    const lastPromptStr = localStorage.getItem("lastDonationPromptTime");
+    const lastPromptTime = lastPromptStr ? parseInt(lastPromptStr, 10) : 0;
+    
+    // 24 hours cooldown
+    const COOLDOWN = 24 * 60 * 60 * 1000;
+    const now = Date.now();
+
+    if (prompt) {
+      localStorage.removeItem("pendingDonationPrompt");
+      
+      if (now - lastPromptTime > COOLDOWN) {
+        setDonationTrigger(prompt);
+        setDonationModalOpen(true);
+        localStorage.setItem("lastDonationPromptTime", now.toString());
+      }
+    }
+  }, []);
+
+  const overview = useQuery(trpc.stats.overview.queryOptions());
+  const recentAttempts = useQuery(
+    trpc.attempt.myAttempts.queryOptions({ limit: 5, offset: 0 }),
+  );
+  const featured = useQuery(
+    trpc.admin.listFeatured.queryOptions(),
+  );
+
+  const stats = overview.data;
+  const attempts = recentAttempts.data?.attempts ?? [];
+  const featuredPkg = featured.data?.packages ?? [];
+  const featuredQ = featured.data?.questions ?? [];
+  const hasFeatured = featuredPkg.length > 0 || featuredQ.length > 0;
+
+  const isNewUser = !stats || (stats.completedAttempts === 0 && stats.totalQuestionsAnswered === 0);
+
+  return (
+    <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-6xl mx-auto bg-[var(--warm-cream)]">
+      <DonationModal
+        isOpen={donationModalOpen}
+        onOpenChange={setDonationModalOpen}
+        triggerAction={donationTrigger}
+      />
+      {/* Header */}
+      <section className="mb-8">
+        <h1 className="text-4xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight">
+          Halo, {session.data?.user.name ?? "Pengguna"}!
+        </h1>
+        <p className="text-lg text-[var(--warm-charcoal)] mt-1">
+          {isNewUser ? "Siap mulai belajar? Pilih langkah di bawah ini." : "Lanjutkan latihanmu!"}
+        </p>
+      </section>
+
+      {/* Quick Start Banner for New Users */}
+      {isNewUser && (
+        <Card className="mb-8 bg-gradient-to-br from-[var(--matcha-300)]/40 to-[var(--slushie-500)]/30 border-2 border-[var(--matcha-400)] rounded-[var(--radius-xl)]">
+          <CardContent className="p-6 md:p-8">
+            <div className="flex flex-col md:flex-row items-start md:items-center gap-4 md:gap-8">
+              <div className="shrink-0">
+                <div className="h-16 w-16 bg-[var(--clay-black)] rounded-[var(--radius-2xl)] flex items-center justify-center">
+                  <MaterialIcon name="rocket_launch" className="text-3xl text-[var(--pure-white)]" />
+                </div>
+              </div>
+              <div className="flex-1">
+                <h2 className="text-xl font-headline font-bold text-[var(--clay-black)] mb-1">
+                  Selamat Datang di Labas
+                </h2>
+                <p className="text-sm text-[var(--warm-charcoal)] mb-4">
+                  Platform latihan ujian bahasa berbasis AI. Ikuti 3 langkah mudah untuk memulai:
+                </p>
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+                  <Link to="/generate" className="flex items-center gap-3 p-3 rounded-[var(--radius-lg)] bg-[var(--pure-white)] border-2 border-[var(--oat-border)] hover:border-[var(--matcha-400)] transition-all group clay-hover">
+                    <div className="h-9 w-9 bg-[var(--matcha-300)] rounded-[var(--radius-md)] flex items-center justify-center shrink-0">
+                      <span className="text-xs font-black text-[var(--matcha-800)]">1</span>
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-bold text-[var(--clay-black)] group-hover:text-[var(--matcha-800)]">Generate Soal</p>
+                      <p className="text-xs text-[var(--warm-charcoal)]">Buat soal dengan AI</p>
+                    </div>
+                    <MaterialIcon name="chevron_right" className="text-sm text-[var(--warm-silver)] group-hover:text-[var(--matcha-800)]" />
+                  </Link>
+                  <Link to="/bank" className="flex items-center gap-3 p-3 rounded-[var(--radius-lg)] bg-[var(--pure-white)] border-2 border-[var(--oat-border)] hover:border-[var(--slushie-500)] transition-all group clay-hover">
+                    <div className="h-9 w-9 bg-[var(--slushie-500)]/30 rounded-[var(--radius-md)] flex items-center justify-center shrink-0">
+                      <span className="text-xs font-black text-[var(--slushie-800)]">2</span>
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-bold text-[var(--clay-black)] group-hover:text-[var(--slushie-800)]">Buat Paket</p>
+                      <p className="text-xs text-[var(--warm-charcoal)]">Kumpulkan soal latihan</p>
+                    </div>
+                    <MaterialIcon name="chevron_right" className="text-sm text-[var(--warm-silver)] group-hover:text-[var(--slushie-800)]" />
+                  </Link>
+                  <Link to="/packages" className="flex items-center gap-3 p-3 rounded-[var(--radius-lg)] bg-[var(--pure-white)] border-2 border-[var(--oat-border)] hover:border-[var(--lemon-600)] transition-all group clay-hover">
+                    <div className="h-9 w-9 bg-[var(--lemon-400)]/50 rounded-[var(--radius-md)] flex items-center justify-center shrink-0">
+                      <span className="text-xs font-black text-[var(--lemon-800)]">3</span>
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-bold text-[var(--clay-black)] group-hover:text-[var(--lemon-800)]">Mulai Latihan</p>
+                      <p className="text-xs text-[var(--warm-charcoal)]">Kerjakan paket soal</p>
+                    </div>
+                    <MaterialIcon name="chevron_right" className="text-sm text-[var(--warm-silver)] group-hover:text-[var(--lemon-800)]" />
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Quick Stats */}
+      <div data-tour="dashboard-stats" className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-10">
+        <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+          <CardContent className="p-5">
+            <div className="flex items-center gap-3">
+              <div className="h-11 w-11 bg-[var(--matcha-300)] rounded-[var(--radius-lg)] flex items-center justify-center">
+                <MaterialIcon name="assignment" className="text-lg text-[var(--matcha-800)]" />
+              </div>
+              <div>
+                <p className="text-sm text-[var(--warm-charcoal)]">Latihan Selesai</p>
+                <p className="text-xl font-bold text-[var(--clay-black)] font-headline">
+                  {stats?.completedAttempts ?? 0}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+          <CardContent className="p-5">
+            <div className="flex items-center gap-3">
+              <div className="h-11 w-11 bg-[var(--slushie-500)] rounded-[var(--radius-lg)] flex items-center justify-center">
+                <MaterialIcon name="timer" className="text-lg text-[var(--clay-black)]" />
+              </div>
+              <div>
+                <p className="text-sm text-[var(--warm-charcoal)]">Waktu Latihan</p>
+                <p className="text-xl font-bold text-[var(--clay-black)] font-headline">
+                  {stats ? `${Math.round(stats.totalTimeSpentSec / 60)}m` : "0m"}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+          <CardContent className="p-5">
+            <div className="flex items-center gap-3">
+              <div className="h-11 w-11 bg-[var(--lemon-400)] rounded-[var(--radius-lg)] flex items-center justify-center">
+                <MaterialIcon name="quiz" className="text-lg text-[var(--lemon-800)]" />
+              </div>
+              <div>
+                <p className="text-sm text-[var(--warm-charcoal)]">Soal Terjawab</p>
+                <p className="text-xl font-bold text-[var(--clay-black)] font-headline">
+                  {stats?.totalQuestionsAnswered ?? 0}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
+          <CardContent className="p-5">
+            <div className="flex items-center gap-3">
+              <div className="h-11 w-11 bg-[var(--pomegranate-400)]/30 rounded-[var(--radius-lg)] flex items-center justify-center">
+                <MaterialIcon name="trending_up" className="text-lg text-[var(--pomegranate-600)]" />
+              </div>
+              <div>
+                <p className="text-sm text-[var(--warm-charcoal)]">Akurasi</p>
+                <p className="text-xl font-bold text-[var(--clay-black)] font-headline">
+                  {stats ? `${stats.overallAccuracyPct}%` : "-"}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Quick Actions */}
+      <div className="flex flex-col sm:flex-row gap-3 mb-10">
+        <Link to="/generate" className="flex-1">
+          <Button className="w-full bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)] h-12 clay-shadow clay-hover text-base">
+            <MaterialIcon name="auto_awesome" className="text-xl" />
+            <span className="ml-2">Generate Soal Baru</span>
+          </Button>
+        </Link>
+        <Link to="/packages" className="flex-1">
+          <Button variant="outline" className="w-full rounded-[var(--radius-lg)] h-12 border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)] hover:bg-[var(--oat-light)] clay-hover text-base">
+            <MaterialIcon name="folder" className="text-xl" />
+            <span className="ml-2">Mulai Latihan</span>
+          </Button>
+        </Link>
+        <Link to="/analytics" className="flex-1">
+          <Button variant="outline" className="w-full rounded-[var(--radius-lg)] h-12 border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)] hover:bg-[var(--oat-light)] clay-hover text-base">
+            <MaterialIcon name="analytics" className="text-xl" />
+            <span className="ml-2">Lihat Analitik</span>
+          </Button>
+        </Link>
+      </div>
+
+      {/* Editor's Pick */}
+      {hasFeatured && (
+        <section className="mb-10">
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center gap-2">
+              <MaterialIcon name="star" className="text-[var(--sunbeam-600)]" />
+              <h2 className="text-xl font-headline font-bold text-[var(--clay-black)]">
+                Editor's Pick
+              </h2>
+            </div>
+            <Link to="/packages" className="text-sm text-[var(--matcha-600)] font-semibold hover:underline">
+              Lihat Semua
+            </Link>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {featuredPkg.slice(0, 3).map((pkg) => (
+              <Link key={pkg.id} to="/package/$id" params={{ id: pkg.id }} className="block">
+                <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full transition-all hover:border-[var(--matcha-400)]">
+                  <CardContent className="p-5">
+                    <div className="flex items-start justify-between gap-2 mb-3">
+                      <span className="px-2 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-xs font-semibold shrink-0">
+                        {pkg.examTypeName}
+                      </span>
+                      <span className="text-xs text-[var(--warm-silver)] whitespace-nowrap">
+                        {pkg.usageCount}x digunakan
+                      </span>
+                    </div>
+                    <h3 className="font-headline text-base font-bold text-[var(--clay-black)] mb-1 line-clamp-2">
+                      {pkg.title}
+                    </h3>
+                    {pkg.description && (
+                      <p className="text-xs text-[var(--warm-charcoal)] line-clamp-2 mb-3">
+                        {pkg.description}
+                      </p>
+                    )}
+                    <div className="flex items-center justify-between pt-3 border-t border-[var(--oat-border)]">
+                      <div className="flex gap-3 text-xs text-[var(--warm-charcoal)]">
+                        <span className="flex items-center gap-1">
+                          <MaterialIcon name="quiz" className="text-xs" />
+                          {pkg.totalQuestions}
+                        </span>
+                        <span className="flex items-center gap-1">
+                          <MaterialIcon name="folder" className="text-xs" />
+                          {pkg.totalSections}
+                        </span>
+                        {pkg.estimatedDurationMin && (
+                          <span className="flex items-center gap-1">
+                            <MaterialIcon name="timer" className="text-xs" />
+                            {pkg.estimatedDurationMin}m
+                          </span>
+                        )}
+                      </div>
+                      <MaterialIcon name="play_circle" className="text-xl text-[var(--matcha-600)]" />
+                    </div>
+                  </CardContent>
+                </Card>
+              </Link>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Recent Attempts */}
+      {attempts.length > 0 && (
+        <section className="mb-10">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-xl font-headline font-bold text-[var(--clay-black)]">
+              Latihan Terakhir
+            </h2>
+            <Link to="/history" className="text-sm text-[var(--matcha-600)] font-semibold hover:underline">
+              Lihat Semua
+            </Link>
+          </div>
+          <div className="space-y-3">
+            {attempts.map((a) => {
+              const pct =
+                a.maxScore && a.maxScore > 0 && a.totalScore != null
+                  ? Math.round((a.totalScore / a.maxScore) * 100)
+                  : null;
+              return (
+                <Card
+                  key={a.id}
+                  className="bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] hover:border-[var(--matcha-400)] transition-colors"
+                >
+                  <CardContent className="p-4">
+                    <div className="flex items-center justify-between gap-4">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-1">
+                          {a.status === "completed" ? (
+                            <MaterialIcon name="check_circle" className="text-[var(--matcha-600)] text-sm" />
+                          ) : a.status === "abandoned" ? (
+                            <MaterialIcon name="cancel" className="text-[var(--warm-silver)] text-sm" />
+                          ) : (
+                            <MaterialIcon name="hourglass_top" className="text-[var(--slushie-600)] text-sm" />
+                          )}
+                          <span className="text-sm font-semibold text-[var(--clay-black)] truncate">
+                            {a.packageTitle ?? "Paket tidak diketahui"}
+                          </span>
+                          {a.examTypeName && (
+                            <span className="px-2 py-0.5 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-[10px] font-semibold shrink-0">
+                              {a.examTypeName}
+                            </span>
+                          )}
+                        </div>
+                        <div className="text-xs text-[var(--warm-charcoal)]">
+                          {formatDateShort(a.startedAt)}
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-4 shrink-0">
+                        {pct != null && (
+                          <div className="text-right">
+                            <div className="text-lg font-headline font-bold text-[var(--clay-black)]">
+                              {pct}%
+                            </div>
+                            <div className="text-xs text-[var(--warm-charcoal)]">
+                              {a.totalScore}/{a.maxScore}
+                            </div>
+                          </div>
+                        )}
+                        {a.status === "completed" && (
+                          <Link to="/attempt/$id" params={{ id: a.id }}>
+                            <Button
+                              variant="outline"
+                              className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover text-sm"
+                            >
+                              Hasil
+                            </Button>
+                          </Link>
+                        )}
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
+        </section>
+      )}
+
+      {/* Feature Cards - simplified, only show if new user */}
+      {isNewUser && (
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <Link to="/bank" className="block">
+            <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full">
+              <CardContent className="p-5">
+                <div className="flex items-center gap-3 mb-3">
+                  <div className="h-9 w-9 bg-[var(--slushie-500)] rounded-[var(--radius-md)] flex items-center justify-center">
+                    <MaterialIcon name="database" className="text-lg text-[var(--clay-black)]" />
+                  </div>
+                  <h3 className="font-headline font-bold text-[var(--clay-black)]">Bank Soal</h3>
+                </div>
+                <p className="text-xs text-[var(--warm-charcoal)]">
+                  Simpan, publikasikan, dan buat paket dari soal pilihan.
+                </p>
+              </CardContent>
+            </Card>
+          </Link>
+          <Link to="/history" className="block">
+            <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full">
+              <CardContent className="p-5">
+                <div className="flex items-center gap-3 mb-3">
+                  <div className="h-9 w-9 bg-[var(--lemon-400)] rounded-[var(--radius-md)] flex items-center justify-center">
+                    <MaterialIcon name="history" className="text-lg text-[var(--lemon-800)]" />
+                  </div>
+                  <h3 className="font-headline font-bold text-[var(--clay-black)]">Riwayat</h3>
+                </div>
+                <p className="text-xs text-[var(--warm-charcoal)]">
+                  Lihat kembali hasil dan progres latihan kamu.
+                </p>
+              </CardContent>
+            </Card>
+          </Link>
+          <Link to="/settings" className="block">
+            <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full">
+              <CardContent className="p-5">
+                <div className="flex items-center gap-3 mb-3">
+                  <div className="h-9 w-9 bg-[var(--oat-light)] rounded-[var(--radius-md)] flex items-center justify-center">
+                    <MaterialIcon name="settings" className="text-lg text-[var(--warm-charcoal)]" />
+                  </div>
+                  <h3 className="font-headline font-bold text-[var(--clay-black)]">Pengaturan</h3>
+                </div>
+                <p className="text-xs text-[var(--warm-charcoal)]">
+                  Kelola API key dan preferensi akun kamu.
+                </p>
+              </CardContent>
+            </Card>
+          </Link>
+        </div>
+      )}
+
+      <TourGuide />
+    </div>
+  );
+}

apps/web/src/routes/forgot-password.tsx

@@ -8,8 +8,10 @@ import { Label } from "@labas/ui/components/label";
 import { toast } from "sonner";
 import { getErrorMessage } from "@/lib/error-utils";
 import { trpc } from "@/utils/trpc";
+import { routeShell } from "@/lib/route-shell";
 
 export const Route = createFileRoute("/forgot-password")({
+  staticData: routeShell.public,
   component: RouteComponent,
 });
 

apps/web/src/routes/{landing.lazy.tsx → index.lazy.tsx}

@@ -1,6 +1,6 @@
 import { createLazyFileRoute } from "@tanstack/react-router";
 import { LandingPage } from "@/components/routes/LandingPage";
 
-export const Route = createLazyFileRoute("/landing")({
+export const Route = createLazyFileRoute("/")({
   component: LandingPage,
 });

apps/web/src/routes/index.tsx

@@ -1,397 +1,29 @@
-import { useQuery } from "@tanstack/react-query";
-import { createFileRoute, redirect, Link } from "@tanstack/react-router";
+import { createFileRoute, redirect } from "@tanstack/react-router";
 import { authClient } from "@/lib/auth-client";
-import { trpc } from "@/utils/trpc";
-import { Button } from "@labas/ui/components/button";
-import { Card, CardContent } from "@labas/ui/components/card";
-import { MaterialIcon } from "@/components/ui/MaterialIcon";
-import { TourGuide } from "@/components/TourGuide";
+import { routeShell } from "@/lib/route-shell";
 
 export const Route = createFileRoute("/")({
-  component: HomeComponent,
+  staticData: routeShell.public,
+  head: () => ({
+    meta: [
+      { title: "Labas — AI-Powered Exam Practice Platform" },
+      { name: "description", content: "Generate AI-powered practice questions for JLPT, TOPIK, TOAFL, and more. Practice smarter with adaptive test preparation." },
+      { property: "og:title", content: "Labas — AI-Powered Exam Practice Platform" },
+      { property: "og:description", content: "Generate AI-powered practice questions for JLPT, TOPIK, TOAFL, and more. Practice smarter with adaptive test preparation." },
+      { property: "og:url", content: "https://labas.rogasper.com/" },
+    ],
+    links: [
+      { rel: "canonical", href: "https://labas.rogasper.com/" },
+    ],
+  }),
   beforeLoad: async () => {
-    const session = await authClient.getSession();
-    if (!session.data) {
-      throw redirect({ to: "/landing" });
+    try {
+      const session = await authClient.getSession();
+      if (session?.data) {
+        throw redirect({ to: "/dashboard", replace: true });
+      }
+    } catch (e) {
+      if (e instanceof Response) throw e;
     }
-    if (!session.data.user.emailVerified) {
-      throw redirect({ to: "/verify-email", search: { email: session.data.user.email } });
-    }
-    if (!session.data.user.image) {
-      throw redirect({ to: "/setup-avatar" });
-    }
-    return { session };
   },
 });
-
-function formatDateShort(dateStr: string | Date | null) {
-  if (!dateStr) return "-";
-  const d = new Date(dateStr);
-  return d.toLocaleDateString("id-ID", { day: "numeric", month: "short" });
-}
-
-function HomeComponent() {
-  const { session } = Route.useRouteContext();
-  const overview = useQuery(trpc.stats.overview.queryOptions());
-  const recentAttempts = useQuery(
-    trpc.attempt.myAttempts.queryOptions({ limit: 5, offset: 0 }),
-  );
-  const featured = useQuery(
-    trpc.admin.listFeatured.queryOptions(),
-  );
-
-  const stats = overview.data;
-  const attempts = recentAttempts.data?.attempts ?? [];
-  const featuredPkg = featured.data?.packages ?? [];
-  const featuredQ = featured.data?.questions ?? [];
-  const hasFeatured = featuredPkg.length > 0 || featuredQ.length > 0;
-
-  const isNewUser = !stats || (stats.completedAttempts === 0 && stats.totalQuestionsAnswered === 0);
-
-  return (
-    <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-6xl mx-auto bg-[var(--warm-cream)]">
-      {/* Header */}
-      <section className="mb-8">
-        <h1 className="text-4xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight">
-          Halo, {session.data?.user.name ?? "Pengguna"}!
-        </h1>
-        <p className="text-lg text-[var(--warm-charcoal)] mt-1">
-          {isNewUser ? "Siap mulai belajar? Pilih langkah di bawah ini." : "Lanjutkan latihanmu!"}
-        </p>
-      </section>
-
-      {/* Quick Start Banner for New Users */}
-      {isNewUser && (
-        <Card className="mb-8 bg-gradient-to-br from-[var(--matcha-300)]/40 to-[var(--slushie-500)]/30 border-2 border-[var(--matcha-400)] rounded-[var(--radius-xl)]">
-          <CardContent className="p-6 md:p-8">
-            <div className="flex flex-col md:flex-row items-start md:items-center gap-4 md:gap-8">
-              <div className="shrink-0">
-                <div className="h-16 w-16 bg-[var(--clay-black)] rounded-[var(--radius-2xl)] flex items-center justify-center">
-                  <MaterialIcon name="rocket_launch" className="text-3xl text-[var(--pure-white)]" />
-                </div>
-              </div>
-              <div className="flex-1">
-                <h2 className="text-xl font-headline font-bold text-[var(--clay-black)] mb-1">
-                  Selamat Datang di Labas
-                </h2>
-                <p className="text-sm text-[var(--warm-charcoal)] mb-4">
-                  Platform latihan ujian bahasa berbasis AI. Ikuti 3 langkah mudah untuk memulai:
-                </p>
-                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
-                  <Link to="/generate" className="flex items-center gap-3 p-3 rounded-[var(--radius-lg)] bg-[var(--pure-white)] border-2 border-[var(--oat-border)] hover:border-[var(--matcha-400)] transition-all group clay-hover">
-                    <div className="h-9 w-9 bg-[var(--matcha-300)] rounded-[var(--radius-md)] flex items-center justify-center shrink-0">
-                      <span className="text-xs font-black text-[var(--matcha-800)]">1</span>
-                    </div>
-                    <div className="flex-1 min-w-0">
-                      <p className="text-sm font-bold text-[var(--clay-black)] group-hover:text-[var(--matcha-800)]">Generate Soal</p>
-                      <p className="text-xs text-[var(--warm-charcoal)]">Buat soal dengan AI</p>
-                    </div>
-                    <MaterialIcon name="chevron_right" className="text-sm text-[var(--warm-silver)] group-hover:text-[var(--matcha-800)]" />
-                  </Link>
-                  <Link to="/bank" className="flex items-center gap-3 p-3 rounded-[var(--radius-lg)] bg-[var(--pure-white)] border-2 border-[var(--oat-border)] hover:border-[var(--slushie-500)] transition-all group clay-hover">
-                    <div className="h-9 w-9 bg-[var(--slushie-500)]/30 rounded-[var(--radius-md)] flex items-center justify-center shrink-0">
-                      <span className="text-xs font-black text-[var(--slushie-800)]">2</span>
-                    </div>
-                    <div className="flex-1 min-w-0">
-                      <p className="text-sm font-bold text-[var(--clay-black)] group-hover:text-[var(--slushie-800)]">Buat Paket</p>
-                      <p className="text-xs text-[var(--warm-charcoal)]">Kumpulkan soal latihan</p>
-                    </div>
-                    <MaterialIcon name="chevron_right" className="text-sm text-[var(--warm-silver)] group-hover:text-[var(--slushie-800)]" />
-                  </Link>
-                  <Link to="/packages" className="flex items-center gap-3 p-3 rounded-[var(--radius-lg)] bg-[var(--pure-white)] border-2 border-[var(--oat-border)] hover:border-[var(--lemon-600)] transition-all group clay-hover">
-                    <div className="h-9 w-9 bg-[var(--lemon-400)]/50 rounded-[var(--radius-md)] flex items-center justify-center shrink-0">
-                      <span className="text-xs font-black text-[var(--lemon-800)]">3</span>
-                    </div>
-                    <div className="flex-1 min-w-0">
-                      <p className="text-sm font-bold text-[var(--clay-black)] group-hover:text-[var(--lemon-800)]">Mulai Latihan</p>
-                      <p className="text-xs text-[var(--warm-charcoal)]">Kerjakan paket soal</p>
-                    </div>
-                    <MaterialIcon name="chevron_right" className="text-sm text-[var(--warm-silver)] group-hover:text-[var(--lemon-800)]" />
-                  </Link>
-                </div>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Quick Stats */}
-      <div data-tour="dashboard-stats" className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-10">
-        <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
-          <CardContent className="p-5">
-            <div className="flex items-center gap-3">
-              <div className="h-11 w-11 bg-[var(--matcha-300)] rounded-[var(--radius-lg)] flex items-center justify-center">
-                <MaterialIcon name="assignment" className="text-lg text-[var(--matcha-800)]" />
-              </div>
-              <div>
-                <p className="text-sm text-[var(--warm-charcoal)]">Latihan Selesai</p>
-                <p className="text-xl font-bold text-[var(--clay-black)] font-headline">
-                  {stats?.completedAttempts ?? 0}
-                </p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
-          <CardContent className="p-5">
-            <div className="flex items-center gap-3">
-              <div className="h-11 w-11 bg-[var(--slushie-500)] rounded-[var(--radius-lg)] flex items-center justify-center">
-                <MaterialIcon name="timer" className="text-lg text-[var(--clay-black)]" />
-              </div>
-              <div>
-                <p className="text-sm text-[var(--warm-charcoal)]">Waktu Latihan</p>
-                <p className="text-xl font-bold text-[var(--clay-black)] font-headline">
-                  {stats ? `${Math.round(stats.totalTimeSpentSec / 60)}m` : "0m"}
-                </p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
-          <CardContent className="p-5">
-            <div className="flex items-center gap-3">
-              <div className="h-11 w-11 bg-[var(--lemon-400)] rounded-[var(--radius-lg)] flex items-center justify-center">
-                <MaterialIcon name="quiz" className="text-lg text-[var(--lemon-800)]" />
-              </div>
-              <div>
-                <p className="text-sm text-[var(--warm-charcoal)]">Soal Terjawab</p>
-                <p className="text-xl font-bold text-[var(--clay-black)] font-headline">
-                  {stats?.totalQuestionsAnswered ?? 0}
-                </p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
-          <CardContent className="p-5">
-            <div className="flex items-center gap-3">
-              <div className="h-11 w-11 bg-[var(--pomegranate-400)]/30 rounded-[var(--radius-lg)] flex items-center justify-center">
-                <MaterialIcon name="trending_up" className="text-lg text-[var(--pomegranate-600)]" />
-              </div>
-              <div>
-                <p className="text-sm text-[var(--warm-charcoal)]">Akurasi</p>
-                <p className="text-xl font-bold text-[var(--clay-black)] font-headline">
-                  {stats ? `${stats.overallAccuracyPct}%` : "-"}
-                </p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Quick Actions */}
-      <div className="flex flex-col sm:flex-row gap-3 mb-10">
-        <Link to="/generate" className="flex-1">
-          <Button className="w-full bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] rounded-[var(--radius-lg)] h-12 clay-shadow clay-hover text-base">
-            <MaterialIcon name="auto_awesome" className="text-xl" />
-            <span className="ml-2">Generate Soal Baru</span>
-          </Button>
-        </Link>
-        <Link to="/packages" className="flex-1">
-          <Button variant="outline" className="w-full rounded-[var(--radius-lg)] h-12 border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)] hover:bg-[var(--oat-light)] clay-hover text-base">
-            <MaterialIcon name="folder" className="text-xl" />
-            <span className="ml-2">Mulai Latihan</span>
-          </Button>
-        </Link>
-        <Link to="/analytics" className="flex-1">
-          <Button variant="outline" className="w-full rounded-[var(--radius-lg)] h-12 border-2 border-[var(--oat-border)] bg-[var(--pure-white)] text-[var(--clay-black)] hover:bg-[var(--oat-light)] clay-hover text-base">
-            <MaterialIcon name="analytics" className="text-xl" />
-            <span className="ml-2">Lihat Analitik</span>
-          </Button>
-        </Link>
-      </div>
-
-      {/* Editor's Pick */}
-      {hasFeatured && (
-        <section className="mb-10">
-          <div className="flex items-center justify-between mb-4">
-            <div className="flex items-center gap-2">
-              <MaterialIcon name="star" className="text-[var(--sunbeam-600)]" />
-              <h2 className="text-xl font-headline font-bold text-[var(--clay-black)]">
-                Editor's Pick
-              </h2>
-            </div>
-            <Link to="/packages" className="text-sm text-[var(--matcha-600)] font-semibold hover:underline">
-              Lihat Semua
-            </Link>
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            {featuredPkg.slice(0, 3).map((pkg) => (
-              <Link key={pkg.id} to="/package/$id" params={{ id: pkg.id }} className="block">
-                <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full transition-all hover:border-[var(--matcha-400)]">
-                  <CardContent className="p-5">
-                    <div className="flex items-start justify-between gap-2 mb-3">
-                      <span className="px-2 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-xs font-semibold shrink-0">
-                        {pkg.examTypeName}
-                      </span>
-                      <span className="text-xs text-[var(--warm-silver)] whitespace-nowrap">
-                        {pkg.usageCount}x digunakan
-                      </span>
-                    </div>
-                    <h3 className="font-headline text-base font-bold text-[var(--clay-black)] mb-1 line-clamp-2">
-                      {pkg.title}
-                    </h3>
-                    {pkg.description && (
-                      <p className="text-xs text-[var(--warm-charcoal)] line-clamp-2 mb-3">
-                        {pkg.description}
-                      </p>
-                    )}
-                    <div className="flex items-center justify-between pt-3 border-t border-[var(--oat-border)]">
-                      <div className="flex gap-3 text-xs text-[var(--warm-charcoal)]">
-                        <span className="flex items-center gap-1">
-                          <MaterialIcon name="quiz" className="text-xs" />
-                          {pkg.totalQuestions}
-                        </span>
-                        <span className="flex items-center gap-1">
-                          <MaterialIcon name="folder" className="text-xs" />
-                          {pkg.totalSections}
-                        </span>
-                        {pkg.estimatedDurationMin && (
-                          <span className="flex items-center gap-1">
-                            <MaterialIcon name="timer" className="text-xs" />
-                            {pkg.estimatedDurationMin}m
-                          </span>
-                        )}
-                      </div>
-                      <MaterialIcon name="play_circle" className="text-xl text-[var(--matcha-600)]" />
-                    </div>
-                  </CardContent>
-                </Card>
-              </Link>
-            ))}
-          </div>
-        </section>
-      )}
-
-      {/* Recent Attempts */}
-      {attempts.length > 0 && (
-        <section className="mb-10">
-          <div className="flex items-center justify-between mb-4">
-            <h2 className="text-xl font-headline font-bold text-[var(--clay-black)]">
-              Latihan Terakhir
-            </h2>
-            <Link to="/history" className="text-sm text-[var(--matcha-600)] font-semibold hover:underline">
-              Lihat Semua
-            </Link>
-          </div>
-          <div className="space-y-3">
-            {attempts.map((a) => {
-              const pct =
-                a.maxScore && a.maxScore > 0 && a.totalScore != null
-                  ? Math.round((a.totalScore / a.maxScore) * 100)
-                  : null;
-              return (
-                <Card
-                  key={a.id}
-                  className="bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] hover:border-[var(--matcha-400)] transition-colors"
-                >
-                  <CardContent className="p-4">
-                    <div className="flex items-center justify-between gap-4">
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center gap-2 mb-1">
-                          {a.status === "completed" ? (
-                            <MaterialIcon name="check_circle" className="text-[var(--matcha-600)] text-sm" />
-                          ) : a.status === "abandoned" ? (
-                            <MaterialIcon name="cancel" className="text-[var(--warm-silver)] text-sm" />
-                          ) : (
-                            <MaterialIcon name="hourglass_top" className="text-[var(--slushie-600)] text-sm" />
-                          )}
-                          <span className="text-sm font-semibold text-[var(--clay-black)] truncate">
-                            {a.packageTitle ?? "Paket tidak diketahui"}
-                          </span>
-                          {a.examTypeName && (
-                            <span className="px-2 py-0.5 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-[10px] font-semibold shrink-0">
-                              {a.examTypeName}
-                            </span>
-                          )}
-                        </div>
-                        <div className="text-xs text-[var(--warm-charcoal)]">
-                          {formatDateShort(a.startedAt)}
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-4 shrink-0">
-                        {pct != null && (
-                          <div className="text-right">
-                            <div className="text-lg font-headline font-bold text-[var(--clay-black)]">
-                              {pct}%
-                            </div>
-                            <div className="text-xs text-[var(--warm-charcoal)]">
-                              {a.totalScore}/{a.maxScore}
-                            </div>
-                          </div>
-                        )}
-                        {a.status === "completed" && (
-                          <Link to="/attempt/$id" params={{ id: a.id }}>
-                            <Button
-                              variant="outline"
-                              className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover text-sm"
-                            >
-                              Hasil
-                            </Button>
-                          </Link>
-                        )}
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              );
-            })}
-          </div>
-        </section>
-      )}
-
-      {/* Feature Cards - simplified, only show if new user */}
-      {isNewUser && (
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <Link to="/bank" className="block">
-            <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full">
-              <CardContent className="p-5">
-                <div className="flex items-center gap-3 mb-3">
-                  <div className="h-9 w-9 bg-[var(--slushie-500)] rounded-[var(--radius-md)] flex items-center justify-center">
-                    <MaterialIcon name="database" className="text-lg text-[var(--clay-black)]" />
-                  </div>
-                  <h3 className="font-headline font-bold text-[var(--clay-black)]">Bank Soal</h3>
-                </div>
-                <p className="text-xs text-[var(--warm-charcoal)]">
-                  Simpan, publikasikan, dan buat paket dari soal pilihan.
-                </p>
-              </CardContent>
-            </Card>
-          </Link>
-          <Link to="/history" className="block">
-            <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full">
-              <CardContent className="p-5">
-                <div className="flex items-center gap-3 mb-3">
-                  <div className="h-9 w-9 bg-[var(--lemon-400)] rounded-[var(--radius-md)] flex items-center justify-center">
-                    <MaterialIcon name="history" className="text-lg text-[var(--lemon-800)]" />
-                  </div>
-                  <h3 className="font-headline font-bold text-[var(--clay-black)]">Riwayat</h3>
-                </div>
-                <p className="text-xs text-[var(--warm-charcoal)]">
-                  Lihat kembali hasil dan progres latihan kamu.
-                </p>
-              </CardContent>
-            </Card>
-          </Link>
-          <Link to="/settings" className="block">
-            <Card className="clay-shadow clay-hover bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)] h-full">
-              <CardContent className="p-5">
-                <div className="flex items-center gap-3 mb-3">
-                  <div className="h-9 w-9 bg-[var(--oat-light)] rounded-[var(--radius-md)] flex items-center justify-center">
-                    <MaterialIcon name="settings" className="text-lg text-[var(--warm-charcoal)]" />
-                  </div>
-                  <h3 className="font-headline font-bold text-[var(--clay-black)]">Pengaturan</h3>
-                </div>
-                <p className="text-xs text-[var(--warm-charcoal)]">
-                  Kelola API key dan preferensi akun kamu.
-                </p>
-              </CardContent>
-            </Card>
-          </Link>
-        </div>
-      )}
-
-      <TourGuide />
-    </div>
-  );
-}

apps/web/src/routes/landing.tsx

@@ -1,27 +1,9 @@
 import { createFileRoute, redirect } from "@tanstack/react-router";
-import { authClient } from "@/lib/auth-client";
+import { routeShell } from "@/lib/route-shell";
 
 export const Route = createFileRoute("/landing")({
-  head: () => ({
-    meta: [
-      { title: "Labas — AI-Powered Exam Practice Platform" },
-      { name: "description", content: "Generate AI-powered practice questions for JLPT, TOPIK, TOAFL, and more. Practice smarter with adaptive test preparation." },
-      { property: "og:title", content: "Labas — AI-Powered Exam Practice Platform" },
-      { property: "og:description", content: "Generate AI-powered practice questions for JLPT, TOPIK, TOAFL, and more. Practice smarter with adaptive test preparation." },
-      { property: "og:url", content: "https://labas.rogasper.com/landing" },
-    ],
-    links: [
-      { rel: "canonical", href: "https://labas.rogasper.com/landing" },
-    ],
-  }),
-  beforeLoad: async () => {
-    try {
-      const session = await authClient.getSession();
-      if (session?.data) {
-        throw redirect({ to: "/", replace: true });
-      }
-    } catch (e) {
-      if (e instanceof Response) throw e;
-    }
+  staticData: routeShell.public,
+  beforeLoad: () => {
+    throw redirect({ to: "/", replace: true });
   },
 });

apps/web/src/routes/leaderboard.tsx

@@ -73,7 +73,7 @@ function LeaderboardPage() {
       {/* Header */}
       <div className="mb-8">
         <div className="flex items-center gap-2 text-sm text-[var(--warm-charcoal)] mb-4">
-          <Link to="/" className="hover:text-[var(--clay-black)] transition-colors">
+          <Link to="/dashboard" className="hover:text-[var(--clay-black)] transition-colors">
             Beranda
           </Link>
           <MaterialIcon name="chevron_right" className="text-xs" />

apps/web/src/routes/login.tsx

@@ -3,8 +3,10 @@ import { useState } from "react";
 
 import SignInForm from "@/components/sign-in-form";
 import SignUpForm from "@/components/sign-up-form";
+import { routeShell } from "@/lib/route-shell";
 
 export const Route = createFileRoute("/login")({
+  staticData: routeShell.public,
   component: RouteComponent,
 });
 

apps/web/src/routes/me.tsx

@@ -55,7 +55,7 @@ function MeComponent() {
       {/* Header */}
       <div className="mb-8">
         <div className="flex items-center gap-2 text-sm text-[var(--warm-charcoal)] mb-4">
-          <Link to="/" className="hover:text-[var(--clay-black)] transition-colors">
+          <Link to="/dashboard" className="hover:text-[var(--clay-black)] transition-colors">
             Beranda
           </Link>
           <MaterialIcon name="chevron_right" className="text-xs" />

apps/web/src/routes/package.$id.attempt.$attemptId.tsx

@@ -6,8 +6,10 @@ import { useTestSession } from "@/hooks/use-test-session";
 import { Button } from "@labas/ui/components/button";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { AttemptTestView } from "@/components/test/AttemptTestView";
+import { routeShell } from "@/lib/route-shell";
 
 export const Route = createFileRoute("/package/$id/attempt/$attemptId")({
+  staticData: routeShell.fullscreen,
   component: ContinueAttemptComponent,
   beforeLoad: async () => {
     const session = await authClient.getSession();

apps/web/src/routes/package.$id.index.tsx

@@ -65,73 +65,111 @@ function PackageDetailComponent() {
   const totalQuestions = pkg.sections.reduce((sum, sec) => sum + sec.questions.length, 0);
 
   return (
-    <div className="min-h-screen pt-8 pb-32 px-6 md:px-12 lg:px-16 max-w-4xl mx-auto bg-[var(--warm-cream)]">
-      {/* Breadcrumb */}
-      <div className="flex items-center gap-2 text-sm text-[var(--warm-charcoal)] mb-6">
-        <Link to="/bank" className="hover:text-[var(--clay-black)] transition-colors">Bank Soal</Link>
-        <MaterialIcon name="chevron_right" className="text-xs" />
-        <span className="text-[var(--clay-black)] font-medium">Detail Paket</span>
-      </div>
+    <div className="min-h-screen pb-32 bg-[var(--warm-cream)]">
+      {/* Sticky header */}
+      <div className="sticky top-0 z-20 bg-[var(--warm-cream)]/95 backdrop-blur-sm border-b border-[var(--oat-border)] shadow-sm">
+        <div className="px-6 md:px-12 lg:px-16 max-w-4xl mx-auto pt-4 pb-4">
+          {/* Breadcrumb */}
+          <div className="flex items-center gap-2 text-xs text-[var(--warm-charcoal)] mb-3">
+            <Link to="/bank" className="hover:text-[var(--clay-black)] transition-colors">Bank Soal</Link>
+            <MaterialIcon name="chevron_right" className="text-[10px]" />
+            <span className="text-[var(--clay-black)] font-medium truncate max-w-[240px]">{pkg.title}</span>
+          </div>
 
-      {/* Header */}
-      <div className="mb-8">
-        <div className="flex flex-wrap items-start justify-between gap-4 mb-4">
-          <div>
-            <h1 className="text-3xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight">
-              {pkg.title}
-            </h1>
-            {pkg.description && (
-              <p className="text-[var(--warm-charcoal)] mt-2">{pkg.description}</p>
-            )}
+          {/* Title row + actions */}
+          <div className="flex flex-wrap items-start justify-between gap-3">
+            <div className="flex-1 min-w-0">
+              <div className="flex flex-wrap items-center gap-2 mb-1">
+                <span className="px-2.5 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-xs font-semibold">
+                  {pkg.examTypeName}
+                </span>
+                {pkg.isPublic ? (
+                  <span className="px-2.5 py-1 rounded-full bg-[var(--slushie-500)]/20 text-[var(--slushie-800)] text-xs font-semibold">
+                    Publik
+                  </span>
+                ) : (
+                  <span className="px-2.5 py-1 rounded-full bg-[var(--oat-light)] text-[var(--warm-charcoal)] text-xs font-semibold">
+                    Privat
+                  </span>
+                )}
+              </div>
+              <h1 className="text-2xl font-headline font-extrabold text-[var(--clay-black)] tracking-tight leading-tight">
+                {pkg.title}
+              </h1>
+              {pkg.description && (
+                <p className="text-sm text-[var(--warm-charcoal)] mt-1 line-clamp-1">{pkg.description}</p>
+              )}
+            </div>
+
+            {/* Action buttons */}
+            <div className="flex items-center gap-2 shrink-0">
+              <Link to="/package/$id/take" params={{ id }}>
+                <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]">
+                  <MaterialIcon name="play_arrow" />
+                  <span className="ml-1.5">Mulai Latihan</span>
+                </Button>
+              </Link>
+              {pkg.isPublic && (
+                <Button
+                  variant="outline"
+                  onClick={() => {
+                    const url = `${window.location.origin}/package/${id}`;
+                    navigator.clipboard.writeText(url);
+                    toast.success("Link paket disalin ke clipboard!");
+                  }}
+                  className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
+                >
+                  <MaterialIcon name="share" />
+                  <span className="ml-1.5 hidden sm:inline">Bagikan</span>
+                </Button>
+              )}
+              {isOwner && (
+                <Button
+                  variant="outline"
+                  onClick={() => setIsEditOpen(true)}
+                  className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
+                >
+                  <MaterialIcon name="edit" />
+                  <span className="ml-1.5 hidden sm:inline">Edit Paket</span>
+                </Button>
+              )}
+            </div>
           </div>
-          <div className="flex gap-2">
-            <span className="px-3 py-1.5 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-sm font-semibold">
-              {pkg.examTypeName}
+
+          {/* Stats row */}
+          <div className="flex flex-wrap gap-4 text-xs text-[var(--warm-charcoal)] mt-3">
+            <Link
+              to="/profile/$userId"
+              params={{ userId: pkg.creatorUserId }}
+              className="flex items-center gap-1 hover:text-[var(--clay-black)] transition-colors"
+            >
+              <MaterialIcon name="person" className="text-xs" />
+              {pkg.creatorName ?? "Anonim"}
+            </Link>
+            <span className="flex items-center gap-1">
+              <MaterialIcon name="quiz" className="text-xs" />
+              {totalQuestions} soal
             </span>
-            {pkg.isPublic ? (
-              <span className="px-3 py-1.5 rounded-full bg-[var(--slushie-500)]/20 text-[var(--slushie-800)] text-sm font-semibold">
-                Publik
-              </span>
-            ) : (
-              <span className="px-3 py-1.5 rounded-full bg-[var(--oat-light)] text-[var(--warm-charcoal)] text-sm font-semibold">
-                Privat
+            <span className="flex items-center gap-1">
+              <MaterialIcon name="folder" className="text-xs" />
+              {pkg.totalSections} section
+            </span>
+            {pkg.estimatedDurationMin && (
+              <span className="flex items-center gap-1">
+                <MaterialIcon name="timer" className="text-xs" />
+                {pkg.estimatedDurationMin} menit
               </span>
             )}
-          </div>
-        </div>
-
-        <div className="flex flex-wrap gap-4 text-sm text-[var(--warm-charcoal)]">
-          <Link
-            to="/profile/$userId"
-            params={{ userId: pkg.creatorUserId }}
-            className="flex items-center gap-1 hover:text-[var(--clay-black)] transition-colors"
-          >
-            <MaterialIcon name="person" className="text-sm" />
-            {pkg.creatorName ?? "Anonim"}
-          </Link>
-          <span className="flex items-center gap-1">
-            <MaterialIcon name="quiz" className="text-sm" />
-            {totalQuestions} soal
-          </span>
-          <span className="flex items-center gap-1">
-            <MaterialIcon name="folder" className="text-sm" />
-            {pkg.totalSections} section
-          </span>
-          {pkg.estimatedDurationMin && (
             <span className="flex items-center gap-1">
-              <MaterialIcon name="timer" className="text-sm" />
-              {pkg.estimatedDurationMin} menit
+              <MaterialIcon name="trending_up" className="text-xs" />
+              {pkg.usageCount}x digunakan
             </span>
-          )}
-          <span className="flex items-center gap-1">
-            <MaterialIcon name="trending_up" className="text-sm" />
-            {pkg.usageCount}x digunakan
-          </span>
+          </div>
         </div>
       </div>
 
       {/* Sections */}
-      <div className="space-y-6">
+      <div className="px-6 md:px-12 lg:px-16 max-w-4xl mx-auto pt-8 space-y-6">
         {pkg.sections.map((section) => (
           <Card key={section.id} className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
             <CardContent className="p-6">
@@ -181,40 +219,6 @@ function PackageDetailComponent() {
         ))}
       </div>
 
-      {/* Actions */}
-      <div className="flex gap-3 mt-8">
-        <Link to="/package/$id/take" params={{ id }}>
-          <Button className="bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]">
-            <MaterialIcon name="play_arrow" />
-            <span className="ml-2">Mulai Latihan</span>
-          </Button>
-        </Link>
-        {pkg.isPublic && (
-          <Button
-            variant="outline"
-            onClick={() => {
-              const url = `${window.location.origin}/package/${id}`;
-              navigator.clipboard.writeText(url);
-              toast.success("Link paket disalin ke clipboard!");
-            }}
-            className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
-          >
-            <MaterialIcon name="share" />
-            <span className="ml-2">Bagikan</span>
-          </Button>
-        )}
-        {isOwner && (
-          <Button
-            variant="outline"
-            onClick={() => setIsEditOpen(true)}
-            className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
-          >
-            <MaterialIcon name="edit" />
-            <span className="ml-2">Edit Paket</span>
-          </Button>
-        )}
-      </div>
-
       {isEditOpen && pkg && (
         <EditPackageModal
           initialTitle={pkg.title}

apps/web/src/routes/package.$id.take.tsx

@@ -8,8 +8,10 @@ import { Button } from "@labas/ui/components/button";
 import { Card, CardContent } from "@labas/ui/components/card";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { AttemptTestView } from "@/components/test/AttemptTestView";
+import { routeShell } from "@/lib/route-shell";
 
 export const Route = createFileRoute("/package/$id/take")({
+  staticData: routeShell.fullscreen,
   component: TakeTestComponent,
   beforeLoad: async () => {
     const session = await authClient.getSession();

apps/web/src/routes/setup-avatar.tsx

@@ -19,12 +19,14 @@ import {
   HAIR_COLORS,
   type DiceBearLoreleiOptions,
 } from "@/lib/avatar-url";
+import { routeShell } from "@/lib/route-shell";
 
 function generateRandomSeeds(count: number): string[] {
   return Array.from({ length: count }, () => randomSeed());
 }
 
 export const Route = createFileRoute("/setup-avatar")({
+  staticData: routeShell.public,
   component: SetupAvatarComponent,
   validateSearch: (
     search: Record<string, unknown>,
@@ -38,7 +40,7 @@ export const Route = createFileRoute("/setup-avatar")({
       throw redirect({ to: "/login" });
     }
     if (!search.redirectTo && session.data.user.image) {
-      throw redirect({ to: "/" });
+      throw redirect({ to: "/dashboard" });
     }
     return { session };
   },
@@ -86,7 +88,7 @@ function SetupAvatarComponent() {
 
   const handleSave = useCallback(async () => {
     await updateMutation.mutateAsync({ image: avatarUrl });
-    navigate({ to: redirectTo || "/" });
+    navigate({ to: redirectTo || "/dashboard" });
   }, [avatarUrl, updateMutation, navigate, redirectTo]);
 
   const quickPickUrls = useMemo(

apps/web/src/routes/verify-email.tsx

@@ -8,6 +8,7 @@ import { toast } from "sonner";
 import { getErrorMessage } from "@/lib/error-utils";
 import { authClient } from "@/lib/auth-client";
 import { trpc } from "@/utils/trpc";
+import { routeShell } from "@/lib/route-shell";
 import { z } from "zod";
 
 const searchSchema = z.object({
@@ -15,6 +16,7 @@ const searchSchema = z.object({
 });
 
 export const Route = createFileRoute("/verify-email")({
+  staticData: routeShell.public,
   component: RouteComponent,
   validateSearch: searchSchema,
   beforeLoad: async ({ search }) => {
@@ -102,7 +104,7 @@ function RouteComponent() {
       toast.success("Email berhasil diverifikasi!");
       const session = await authClient.getSession();
       if (session.data) {
-        navigate({ to: "/" });
+        navigate({ to: "/dashboard" });
       } else {
         navigate({ to: "/login" });
       }