From 0f1ded226968d30270559637f8ced64e0dd5e3ca Mon Sep 17 00:00:00 2001
From: root <root@opencode.lan>
Date: Mon, 13 Apr 2026 19:56:51 +0500
Subject: [PATCH] feat: stacked card effect on home hero carousel (desktop sm+)

---
 ui/src/routes/+page.svelte | 32 ++++++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/ui/src/routes/+page.svelte b/ui/src/routes/+page.svelte
index f77777d..a618b69 100644
--- a/ui/src/routes/+page.svelte
+++ b/ui/src/routes/+page.svelte
@@ -136,12 +136,40 @@
 
 <!-- ── Hero carousel ──────────────────────────────────────────────────────────── -->
 {#if heroBook}
+{@const stackBook1 = heroBooks[(heroIndex + 1) % heroBooks.length]}
+{@const stackBook2 = heroBooks[(heroIndex + 2) % heroBooks.length]}
 <section class="mb-6">
 	<div class="relative">
-		<!-- Card — swipe to navigate -->
+		<!-- Stack layer 2 (furthest back) — only shown on sm+ when there are 3+ books -->
+		{#if heroBooks.length >= 3}
+			<div class="hidden sm:block absolute inset-0 rounded-xl overflow-hidden pointer-events-none origin-bottom
+				translate-y-[-6px] translate-x-[10px] scale-[0.94] opacity-40 z-0">
+				{#if stackBook2.book.cover}
+					<img src={stackBook2.book.cover} alt="" aria-hidden="true"
+						class="w-full h-full object-cover" loading="lazy" />
+				{:else}
+					<div class="w-full h-full bg-(--color-surface-2)"></div>
+				{/if}
+			</div>
+		{/if}
+
+		<!-- Stack layer 1 (one behind front) — only shown on sm+ when there are 2+ books -->
+		{#if heroBooks.length >= 2}
+			<div class="hidden sm:block absolute inset-0 rounded-xl overflow-hidden pointer-events-none origin-bottom
+				translate-y-[-3px] translate-x-[5px] scale-[0.97] opacity-60 z-[1]">
+				{#if stackBook1.book.cover}
+					<img src={stackBook1.book.cover} alt="" aria-hidden="true"
+						class="w-full h-full object-cover" loading="lazy" />
+				{:else}
+					<div class="w-full h-full bg-(--color-surface-2)"></div>
+				{/if}
+			</div>
+		{/if}
+
+		<!-- Front card — swipe to navigate -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
-			class="group relative flex gap-0 rounded-xl overflow-hidden bg-(--color-surface-2) border border-(--color-border) hover:border-(--color-brand)/50 transition-all"
+			class="group relative flex gap-0 rounded-xl overflow-hidden bg-(--color-surface-2) border border-(--color-border) hover:border-(--color-brand)/50 transition-all z-[2]"
 			ontouchstart={onSwipeStart}
 			ontouchend={onSwipeEnd}
 		>