project-0390c427

As a user, I want to sign in to the platform so that I can access personalized features. Implement the Login page based on the existing JSX design (v2). Includes: centered glassmorphism login card on the animated starfield background, Hebrew RTL form fields (email + password), gold-gradient CTA button, link to signup, and error state handling. Connects to: Dashboard page on successful admin login, Home page on successful user login.

As a user, I want to experience the Living Tarot Deck homepage so that I feel immersed in a mystical environment on first visit. Implement the Home page based on the existing JSX design (v2). Includes: NavBar with RTL Hebrew links, HeroLivingDeck with 3D floating card deck animation (CSS transforms / Three.js), FeaturedCardSpotlight (Card of the Day with flip animation), PlatformIntro (3-column feature highlights), InteractivePreviewStrip (fan/arc card carousel with parallax), BookletTeaser (split layout with page-turn animation), CustomizationShowcase (live color/theme picker), FavoritesAndSharing panel, Testimonials carousel, CallToAction band, and Footer. Fully responsive RTL. Follows from Home page design v2.

As a user, I want to read and interact with the digital booklet so that I can explore tarot knowledge in an immersive format. Implement the Booklet page based on the existing JSX design (v2). Includes: BookletNavBar with chapter breadcrumb and progress indicator, BookletHero (cinematic header with floating open-book illustration), ChapterIndex (horizontally scrollable chapter pills), BookletSidebar (sticky TOC with search), BookletViewer (two-page spread with page-turn animation, Hebrew drop-caps, pull-quotes, inline card thumbnails), PageAnnotations (collapsible notes panel), RelatedCards (contextual card strip), BookletShareSave (save + social share band), and BookletFooter with reading progress bar. Flows from: Home page, Tarot Cards page. Flows to: Share page.

As a user, I want to share specific tarot cards or booklet pages on social media or via a link so that I can spread the experience. Implement the Share page based on the existing JSX design (v2). Includes: RTL layout, shareable card/page preview, social share buttons (WhatsApp, Instagram, link-copy) styled in gold and silver, share link generator, and a ״שתף״ CTA. Flows from: Tarot Cards page, Booklet page.

As a user, I want to view and manage my saved favorite tarot cards and booklet pages so that I can quickly access content I love. Implement the Favorites page based on the existing JSX design (v2). Includes: RTL header, a grid of saved tarot card thumbnails with gold bookmark icons, bookmarked booklet pages list, hover sparkle microinteraction, remove-from-favorites action, and quick share buttons. Flows from: Tarot Cards page (save card action).

As a user, I want to browse and interact with tarot cards digitally so that I can explore the deck and customize cards. Implement the Tarot Cards page based on the existing JSX design (v2). Includes: RTL NavBar, a browsable grid of tarot card thumbnails with hover glow/tilt effect, card flip animation on click revealing Hebrew keyword and description, customization panel (color/theme picker per card), and favorite/save action. Flows from: Home page. Flows to: Favorites page, Share page.

As a user, I want to use backend APIs for sharing content so that I can generate shareable links and share to social media. Implement FastAPI endpoints: POST /share/card/{id} (generate shareable link for a card), POST /share/booklet-page/{id} (generate shareable link for a booklet page), GET /share/{token} (resolve share token to content). Supports Share page.

As a user, I want to use backend APIs for the booklet so that I can browse pages, save annotations, and track reading progress. Implement FastAPI endpoints: GET /booklet/chapters (list), GET /booklet/chapters/{id}/pages (paginated), GET /booklet/pages/{id} (page detail with related cards), POST /booklet/pages/{id}/annotations (save note), GET /booklet/pages/{id}/annotations (list notes), DELETE /booklet/annotations/{id}, GET /booklet/progress (reading progress for current user), POST /booklet/pages/{id}/save (bookmark page). Supports Booklet page.

As a user, I want to use backend APIs for tarot cards so that I can browse, flip, customize, and save cards. Implement FastAPI endpoints: GET /cards (list with filters), GET /cards/{id} (card detail + keyword), POST /cards/{id}/favorite (save to favorites), DELETE /cards/{id}/favorite (unsave), GET /favorites (user's saved cards), PATCH /cards/{id}/customize (save color/theme preference). Supports Tarot Cards page, Favorites page, and Home page card spotlight.

As an admin, I want to view an overview of platform activity so that I can manage content and monitor usage. Implement the Dashboard page based on the existing JSX design (v2). Includes: DashboardTopBar (sticky glassmorphism, RTL, admin avatar, logout), DashboardSidebar (admin profile card, RTL Hebrew nav items with celestial icons, active state highlight, mobile drawer), OverviewStatsStrip (4 animated stat cards: total cards, booklet pages, active users, favorites), DailyCardWidget (set Card of the Day, flip interaction), RecentUploadsPanel (card thumbnails + booklet pages list), ContentManagerTable (tabbed data table), FavoritesSnapshot (popular favorites scroll row), ActivityFeed (chronological event timeline), DashboardFooter. Flows from: Login page.

As an admin, I want to upload new tarot card designs and booklet content so that users can access fresh material. Implement the Upload page based on the existing JSX design (v2). Includes: AdminNavBar (sticky glassmorphism RTL, admin badge in crimson, nav links, avatar, logout, mobile hamburger drawer), UploadPageHeader (Hebrew page title with breadcrumb), UploadSidebar (stats panel, content-type nav tabs, upload tips accordion; collapses to tab strip on mobile), UploadTypeSelector (two-tile toggle: Tarot Card vs Booklet Page), FileDropZone (dashed gold border, drag-over animation, thumbnail preview row), MetadataForm (RTL Hebrew fields: name, keyword, description, category, serial number, tags, save draft + upload CTA), UploadProgressPanel (progress bar, status, success/error states), RecentUploadsTable (last 10 uploads with edit/delete actions). Flows from: Dashboard page. Flows to: Content Manager page.

As an admin, I want to use backend APIs for the dashboard overview so that I can see platform-wide statistics and recent activity. Implement FastAPI endpoints: GET /admin/dashboard/stats (total cards, booklet pages, active users today, total favorites), GET /admin/dashboard/activity (recent activity feed with timestamps in Asia/Jerusalem timezone), GET /admin/dashboard/popular-favorites (top favorited cards), GET /admin/cards/daily (get current Card of the Day), PUT /admin/cards/daily (set Card of the Day). Supports Dashboard page.

As an admin, I want to edit and manage all uploaded tarot cards and booklet content so that the platform stays accurate and up to date. Implement the Content Manager page based on the existing JSX design (v2). Includes: RTL tabbed data table (Tarot Cards | Booklet), thumbnail preview, Hebrew name, category, upload date, status badges (published/draft in emerald/silver), inline edit and delete actions, sortable column headers with gold sort arrows, search bar with gold-bordered input, pagination in gold, and empty state illustration. Flows from: Upload page.

As an admin, I want to use backend APIs for uploading and managing content so that I can add and edit tarot cards and booklet pages. Implement FastAPI endpoints: POST /admin/cards (upload card with image + metadata), PATCH /admin/cards/{id} (edit card), DELETE /admin/cards/{id} (delete card), POST /admin/booklet/pages (upload booklet page), PATCH /admin/booklet/pages/{id} (edit page), DELETE /admin/booklet/pages/{id} (delete page), GET /admin/uploads/recent (last 10 uploads), GET /admin/stats (overview stats: total cards, pages, active users, favorites count). Supports Upload page and Content Manager page.

As a frontend developer, I want to wire all pages to their respective backend API endpoints so that the application uses live data instead of mock/static content. Connect: Home page to cards API and daily card endpoint; Tarot Cards page to cards list/detail/favorite APIs; Booklet page to booklet chapters/pages/progress APIs; Favorites page to favorites API; Share page to share link API; Dashboard page to admin stats/activity/daily-card APIs; Upload page to admin upload API; Content Manager page to admin CRUD APIs. Implement Axios/fetch service layer with RTL-aware Hebrew error messages and loading states.