WKRÓTCE — DESIGN CONCEPTS

Home Pass 2B · Trail Complete

Full-width Editorial Teaser

Large image, editorial scrim, emotional announcement. Carousel scales for 2+.

390px — in context (Klasyki tail → Wkrótce → BottomNav)

↑ Klasyki shelf

Wszystkie

Wkrótce· następne rozdziały

KolekcjeMapaDziennikProfil

Viewport widths — single collection

390px

360px

320px

Multiple collections — horizontal carousel (85% width, snap proximity, peek)

390px — 2 collections

390px — 3 collections

Content edge cases

Long name (2-line clamp)

Long tagline (2-line clamp)

No image (placeholder)

Low quality image

Light image

Dark image

Interaction states

Pressed (scale 0.98, opacity 0.94)

Keyboard focus-visible (ecru outline)

Advantages

✓Full-width image creates emotional impact — feels like an announcement, not a placeholder

✓No empty space at 1 collection — card fills the content width

✓Editorial gradient scrim provides text readability without blur or glass

✓Clock icon communicates "soon" — replaces padlock "forbidden" semantics

✓Carousel scales naturally for 2+ — same card, 85% width with peek

✓Strong visual finish for Home — completes the page with intention

Risks

!Card height ~224px (16:10 at 358px) adds length to Home — mitigatable with 16:9 (~201px)

!Light images need sufficient scrim — gradient starts at 30%, reaches 92% at bottom

!Carousel at 3+ collections may feel repetitive — each card is visually heavy

!Less scannable than a compact list — user sees one card at a time

Compact Editorial Announcement

Low-weight row, image tile + text + arrow. Vertical stack for 2+.

390px — in context

↑ Klasyki shelf

Wszystkie

Wkrótce· następne rozdziały

KolekcjeMapaDziennikProfil

Viewport widths — single collection

390px

360px

320px

Multiple collections — vertical stack (10px gap)

390px — 2 collections

390px — 3 collections

Content edge cases

Long name (2-line clamp)

Long tagline (1-line clamp)

No image (placeholder)

Low quality image

Light image

Dark image

Interaction states

Pressed (scale 0.98, opacity 0.94)

Keyboard focus-visible (ecru outline)

Advantages

✓Low visual weight — does not compete with Klasyki shelf above

✓Compact (~120px) — Home stays short even with multiple collections

✓Vertical stack is predictable and scannable — all collections visible at once

✓Surface treatment (#1A3D2A + border) matches existing card language

✓Works at all viewport widths without layout shift

Risks

!May feel too subtle for a "coming soon" announcement — low emotional impact

!Stack at 2+ could feel like a settings list, not an editorial tease

!96px image tile does not showcase the collection theme effectively

!Less differentiation from regular collection cards — could be missed

⚙

Detail Specification

Side-by-side measurements for both concepts

PropertyConcept AConcept B

Width (single)calc(100% - 32px)calc(100% - 32px)

Width (multi)85% carousel100% stack

Heightaspect-ratio 16:10 (~224px)~120px

Border radius14px14px

Padding16px (overlay)12px

Imagefull-bleed 16:1096×96px tile

Image radius14px (card)10px

Status text11px/400 #E9502511px/400 muted

Name18px/500 #F8EEE515px/500 #F8EEE5

Tagline13px/300, 2-line12px/300, 1-line

IconClock 14pxClock 11px

Arrow18px orange16px orange

Surfaceimage + scrim#1A3D2A + border

Scrimgradient 30%→92%none

Section gap32px32px

BottomNav clearance96px96px

Semantic<button> + aria-label<button> + aria-label

⇄

Concept Comparison

Criteria-based evaluation

CriterionAB

Emotional impactHigh — large image, editorialMedium — compact tile

ScannabilityMedium — one at a timeHigh — list view

Home length+~224px / card+~120px / card

1 collection✓ Ideal — fills width✓ Good — compact

2+ collectionsCarousel with peekVertical stack

Visual weightMedium-highLow — doesn’t compete

Image treatmentFull-bleed + scrim96px tile

Locked semanticsClock + "Wkrótce"Clock + "Wkrótce"

Accessibilitybutton + aria-labelbutton + aria-label

ImplementationNew card + carouselNew card + stack

Risk: placeholder feelLow — image dominatesMedium — could feel like settings

✓

Final Recommendation

Recommended concept + rationale

Concept A— Full-width Editorial Teaser

Concept A solves the core problem: the current 150px blurred card with a padlock reads as a technical placeholder. A full-width image with an editorial gradient scrim creates a real announcement feel — the user sees a destination, not a lock.

Why A over B:

✓At 1 collection (common case), fills the width — no 200px empty gap

✓Clock icon replaces padlock — "soon" not "forbidden"

✓Carousel is one adaptive system: 1 = full width, 2+ = 85% carousel with peek

✓Emotional weight completes Home — the last section should feel intentional

What not to choose:

Concept B as primary — too subtle for a "coming soon" section. A hybrid system (A for 1, B for 2+) creates two different components — avoid.

…

Shared Edge States

Loading, Error, Empty — same behavior for both concepts

LoadingSection not rendered. Page shows «ładowanie...» text at top. Same as current behavior — no skeleton needed for Wkrótce specifically.

ErrorSection not rendered. Error message shown at top of collections container. Same as current behavior.

Empty (0 collections)Section hidden entirely: locked.length === 0 → block evaluates false. No empty-state UI needed — the page simply ends after the previous section.

Before modalVisually identical to default state. No pre-modal visual change — modal opens on tap, card returns to default on close.