tercul-frontend/attached_assets/Pasted--0-Why-refocus-Tercul-already-owns-a-huge-literary-corpus-the-real-win-is-to-turn-that-ar-1746067044326.txt

## 0 · Why refocus?

Tercul already owns a **huge literary corpus**; the real win is to turn that archive into an **immersive reading-and-discovery experience**.  
So let’s zoom-in on:

* **Content hierarchy** – how the information is structured.  
* **Functionality & user journeys** – what people can *do* with it.  
* **UX/UI behaviour** – how it *feels* and *looks* while they do it.  

---

## 1 · Key Personas & Goals

| Persona | Core Jobs-to-Be-Done | “Delight me if…” |
|---------|---------------------|------------------|
| **Casual Reader** | Find a poem/story quickly, read comfortably on phone, share a quote. | Font slider, dark-mode, swipe navigation. |
| **Student / Scholar** | Compare translations, cite correctly, track reading list. | Side-by-side view, line numbers, export citation. |
| **Translator / Contributor** | Upload text, link it to original, get feedback. | Draft-review workflow, version diff, karma points. |
| **Curious Polyglot** | Jump between languages, learn vocabulary in context. | One-click language switch, inline glossary. |

---

## 2 · Content Taxonomy

```
Author
  ↳ Works (original)
        ↳ Translations
            ↳ Annotations/Comments
  ↳ Timeline (life events)
Tag
  • Genre
  • Era / Period
  • Language
  • Country
Collection (curated sets, e.g. “Silver Age poets”, “Women in Philosophy”)
User asset
  • Bookmark
  • Follow
  • Contribution (draft / published)
```

*Keep tags poly-hierarchical (a work can be “Poetry” **and** “Romanticism” **and** “German”).*

---

## 3 · Information Architecture (Site Map)

```
/                 — Landing / Discovery hub
  ├─ /explore     — Faceted search & filters
  ├─ /authors     — Directory
  │    └─ /[slug] — Author profile
  ├─ /works       — All works list
  │    └─ /[slug] — Reading view
  │        └─ /compare/[translationId] — Side-by-side
  ├─ /collections — Curated thematic sets
  ├─ /submit      — Contribution wizard (auth only)
  ├─ /profile     — User bookshelf & contributions
  └─ /about, /faq — Static info
```

---

## 4 · Core User Journeys & Required Functionality

| Journey | Page touch-points | Must-have interactions |
|---------|------------------|------------------------|
| **Quick search & read** | `/` → type → `/works/[slug]` | Global search bar with autosuggest (title/author/tag). |
| **Deep dive into an author** | `/authors` → `/authors/[slug]` → list of works → read | Sticky author header, timeline scroller, “next work” queue. |
| **Compare translations** | `/works/[slug]` → “Compare” tab → side-by-side | Sync scroll, highlight different lines, toggle annotations. |
| **Save for later** | Any work → bookmark icon | Requires lightweight bookshelf in profile (no sign-up friction: local first, cloud sync after login). |
| **Contribute text** | `/submit` wizard → preview → submit | Multi-step form, inline validation, progress indicator, autosave draft. |
| **Browse by theme** | `/collections` or `/explore?genre=Poetry` | Filter chips, result count badges, infinite scroll. |

---

## 5 · Page-Level UX & UI Guidelines

### 5.1 Landing / Discovery

* **Hero carousel** with one powerful quote, alternates every visit.  
* **Three discovery blocks**: _Featured Authors_, _Trending Works_, _Recently Translated_.  
* **Search input** centre-stage; shows suggestions in 300 ms.  
* Visual emphasis on *typography* – treat it like a magazine cover, not a tech site.

### 5.2 Author Profile

* **Banner**: name, portrait (or initials), life dates, country flag icons.  
* **Sticky tab bar**: _Works · Translations · Timeline · About_.  
* **Grid / list switcher** for works (poems benefit from compact grid, novels from list).  
* **Follow button** with small follower count for social proof.

### 5.3 Work Reading View

| UI block | Purpose |
|----------|---------|
| **Header** | Title, author chip (clickable), original language chip, bookmark ♥. |
| **Context sidebar** (collapsible on mobile) | Translator, year, tags, estimated reading time, share icons. |
| **Main text area** | Fluid column ≤65 ch, auto line numbers on hover, copy-link-to-line. |
| **Translation tabs** | Pill buttons with language + translator name, unread indicator. |
| **Footer bar** | Progress (%) slider, next/prev work arrows. |

### 5.4 Side-by-Side Compare

* Two resizable panes.  
* Hovering a line highlights corresponding line on other pane (use alignment index).  
* Inline comment markers ◌; clicking shows annotation drawer.  
* Keyboard shortcuts: `← →` switch translations, `↑ ↓` line sync.

### 5.5 Explore (Faceted Search)

* Left rail filters: Language ▲▼, Genre, Period (timeline slider), Popularity toggle.  
* Central results: masonry cards with thumbnail, snippet, tag chips.  
* Sticky “Save search” button (stores to profile, gives shareable URL).  

### 5.6 Contribution Wizard

1. **Select action**: New original · New translation · Edit existing.  
2. **Upload / Paste** content with live preview.  
3. **Metadata**: language, original author (typeahead), tags.  
4. **Preview & diff** (if translation).  
5. **Submit** → Confirmation with expected review SLA.  

UX guardrails: autosave every 10 s, leave-page warning, progress dots.

---

## 6 · Visual & Interaction Principles

| Principle | Application |
|-----------|-------------|
| **“Text is king”** | Large serif body font (e.g. Literata), generous line-height, dynamic font-size slider. |
| **Zen reading** | Distraction-free toggle hides nav & sidebars. |
| **Soft heritage palette** | Cream background, muted accent colours (ink, russet, sage) evoke library feel. |
| **Micro-feedback** | Haptic-style subtle icon bounce on bookmark, shimmer skeletons while loading. |
| **Inclusive design** |  Contrast ratio ≥ 4.5:1, keyboard focus rings, prefers-reduced-motion respects. |
| **Mobile first** | Thumb-reachable FAB for bookmark/share, swipe gestures for next/prev. |

---

## 7 · Gamified Engagement Layer (Optional + Phase 2)

* **Reading streaks** → encourages daily habit.  
* **Contributor karma & badges** → surfaces reliable translators.  
* **Public collections** → users curate lists (“Top 20 Gothic Poems”).  
* **Quote cards generator** → shareable image with line & background.  

---

## 8 · Content Governance & Workflow

1. **Style guide** for biographies (word count, tone, citation rules).  
2. **Translation guidelines** (license, source check, alignment format).  
3. **Role matrix** – reader (default), contributor (upload), reviewer (approve), editor (merge).  
4. **Version history** retained forever; changelog visible under “Revisions” tab.  

---

### Immediate Non-technical Action Items

1. **Card-sort workshop** with sample users to validate taxonomy & filter labels.  
2. **Low-fidelity wireframes** of the five primary pages; iterate on layout before styling.  
3. **Copy audit** – ensure every page has concise, welcoming microcopy (empty states, tooltips).  
4. **Define success metrics**: time on text, completion rate, search-to-read conversion, contributor cycle time.  
5. **Prepare content migration map**: current URLs → new slugs; plan redirects and metadata enrichment.

---

With this content-first blueprint, you can brief designers and writers **before** touching any code, ensuring the new Tercul UI feels like a beautifully curated library rather than just “a website rewritten in React.”