# Handoff: Placeo — Marktplatz-Startseite (Doska Objyavleniy) > Sprache der Oberfläche: **Russisch**. Diese README ist auf Deutsch, alle UI-Texte (Copy) sind exakt auf Russisch angegeben. ## Overview **Placeo** ist ein Online-Marktplatz / Kleinanzeigen-Portal („доска объявлений") — Nutzer kaufen und verkaufen Produkte aller Art (C2C/C2B). Dieses Paket dokumentiert die **Startseite (Desktop-Web)**: Kopfzeile mit Suche, ein Kategorie-Raster („Разделы") und ein Raster empfohlener Anzeigen („Рекомендации для вас"), plus Footer. Außerdem enthalten: das **Placeo-Logo** (Pin-Marke) als Vektor + App-Icon. Visueller Stil: **flach, weiß, rahmenlos** — keine Karten-Rahmen, keine Schatten. Eine markante grüne Markenfarbe (`#87c540`), freundlich-modernes russisches SaaS-Gefühl, großzügige Rundungen. ## About the Design Files Die Dateien in `design/` sind **Design-Referenzen, erstellt in HTML/React (Babel-in-Browser)** — Prototypen, die Aussehen und Verhalten zeigen, **kein Produktionscode zum 1:1-Kopieren**. Aufgabe ist es, diese Designs **in der bestehenden Umgebung des Ziel-Codebase nachzubauen** (React, Vue, Svelte, Next.js o. Ä.) mit dessen etablierten Mustern und Bibliotheken. Existiert noch keine Umgebung, wählen Sie das passendste Framework (Empfehlung: **React + TypeScript**, da der Prototyp bereits komponentenbasiert in React vorliegt) und setzen Sie die Designs dort um. Die Prototypen laden ein externes Design-System-Bundle (`BitcatDesignSystem_6766ea`) und überschreiben dessen azurblaue Markenfarbe per CSS-Variablen auf Grün. **In der Produktion sollten die hier dokumentierten Tokens und Komponenten nativ im Ziel-Design-System umgesetzt werden** — nicht das Bundle einbinden. ## Fidelity **High-fidelity (hifi).** Finale Farben, Typografie, Abstände, Radien und Interaktionen. Pixelgenau nachbauen mit den Bibliotheken/Mustern des Codebase. Wo unten Pixelwerte stehen, sind sie verbindlich. --- ## Screens / Views ### 1. Startseite — `Placeo.html` **Purpose:** Einstieg; Nutzer sucht, stöbert nach Kategorie oder scrollt durch empfohlene Anzeigen. **Layout (Desktop):** - Voller weißer Hintergrund (`#ffffff`). - **Sticky Header** (volle Breite), darunter ein zentrierter Inhaltscontainer: `max-width: 1320px; margin: 0 auto; padding: 0 24px`. - Reihenfolge im Container: Sektion *Разделы* (Kategorien) → Sektion *Рекомендации для вас* (Anzeigen) → „Показать ещё"-Button. - **Footer** volle Breite. #### Komponente: Header - Position: `position: sticky; top: 0; z-index: 100`. Höhe **74px**. Hintergrund `#ffffff`; nach Scroll (>6px) → `rgba(255,255,255,0.85)` + `backdrop-filter: saturate(180%) blur(12px)`. Untere Hairline: `1px solid #e1e9f0`. - Innen: `display:flex; align-items:center; gap:16px`, gleicher Container (max 1320 / padding 0 24). - **Logo** (links): Pin-Marke (SVG, **34px**, Füllung Markenfarbe `#87c540`) + Wortmarke „**Placeo**" in *Onest* 800, **24px**, `letter-spacing: -0.035em`, Farbe `#0b1a26`. Abstand Marke↔Text `gap:9px`. - **Regionswähler** (Ghost-Button): Icon `map-pin` (18) links, Text „**Вся Россия**", Icon `chevron-down` (16) rechts. Textfarbe `#33414e`. - **Suchfeld** (dehnt sich, `flex:1 1 240px; min-width:200px`): Pille, Höhe **46px**, `padding:0 16px`, Rahmen `1.5px solid #cdd8e2`, `border-radius: 999px`. Inhalt: Icon `search` (19, Farbe `#6b7c8c`) + `` Placeholder „**Поиск по объявлениям**" (15px). Fokus: Rahmen → `#87c540` + Focus-Ring `0 0 0 3px rgba(135,197,64,0.35)`. - **Primär-Button** „**Подать объявление**": Icon `plus` (19) links. Verlauf-Füllung `linear-gradient(140deg,#6ea830,#87c540 55%,#a9d962)`, weiße Schrift 600/15px, Höhe **44px**, `border-radius:10px`, leichter Marken-Schatten `0 6px 16px rgba(110,168,48,0.26)`. Hover: `brightness(1.05)`; Press: `translateY(1px) scale(0.99)`. - **Icon-Buttons** (Ghost, 40px, je `gap:4`): `message-circle`, `bell` (mit rotem Punkt 8px `#ef4146` oben rechts), `heart`. Icongröße 21. - **User-Pille**: runde Pille, `border:1.5px solid #e1e9f0`, `border-radius:999px`, `padding:5px 12px 5px 6px`. Inhalt: Avatar-Monogramm 32px (Verlauf-Hintergrund, weiße Initialen „ЕВ") + Vorname „**Евгений**" (14/600). Hover: Rahmen → `#87c540`. #### Komponente: Sektion „Разделы" (Kategorien) - **Sektionstitel** „**Разделы**": *Onest* 800, **24px**, `letter-spacing:-0.02em`, Farbe `#0b1a26`, `margin-bottom:18px`. - **Raster**: `display:grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap:14px`. - **Kachel** (``, flach, **ohne Rahmen/Schatten**): Höhe **110px**, `border-radius:18px`, `padding:16px 18px`, `overflow:hidden`, Hintergrund = **kategoriespezifischer Tint** (s. u.). - **Label** oben links: 15px/600, `line-height:1.25`, Farbe `#0b1a26`, `max-width:66%`. - **Icon** unten rechts (Lucide, Größe **62**, `stroke-width:1.6`), Farbe = **kategoriespezifisches Ink**, `opacity:.9`, Versatz `right:-6px; bottom:-10px`. - Hover: `transform: translateY(-2px); filter: brightness(0.965)` (kein Schatten). - **11 Kategorien** (Label · Lucide-Icon · Tint-Hintergrund · Ink-Icon): 1. Транспорт · `car` · `#eaf1f7` · `#456b91` 2. Недвижимость · `building-2` · `#eef4e6` · `#5e8a35` 3. Работа · `briefcase` · `#f3efe5` · `#8a7330` 4. Услуги · `wrench` · `#eceff3` · `#586a7e` 5. Личные вещи · `shirt` · `#f5ecef` · `#985d72` 6. Для дома и дачи · `sofa` · `#f1ece5` · `#896d4b` 7. Запчасти и аксессуары · `cog` · `#ecedf0` · `#5d6473` 8. Электроника · `smartphone` · `#e8eff3` · `#3f6f8c` 9. Хобби и отдых · `palette` · `#f1ebf3` · `#785a8a` 10. Животные · `paw-print` · `#eef3ea` · `#5b8748` 11. Бизнес и оборудование · `factory` · `#edf0f2` · `#536878` #### Komponente: Sektion „Рекомендации для вас" (Anzeigen) - **Sektionstitel** „**Рекомендации для вас**" (gleicher Stil wie oben), `margin-top:40px`. Rechts daneben Link „**Смотреть все →**" (14.5/600, Markenfarbe `#578a24`/`text-brand`, Icon `arrow-right` 16). - **Raster**: `display:grid; grid-template-columns: repeat(4, 1fr); gap: 26px 18px`. - **Anzeige-Karte** (``, **rahmenlos, ohne Schatten**, Spalten-Flex): - **Thumbnail**: Höhe **188px** (kompakt 150px), `border-radius:14px`, `overflow:hidden`, Hintergrund = Kategorie-Tint. Mittig ein blasses Kategorie-Icon (Lucide, 52, `opacity:.42`, Farbe = Kategorie-Ink). *(In Produktion: hier liegt das Anzeigenfoto; das Icon ist nur Platzhalter.)* - Optionales **Badge** oben links (`top:12;left:12`): Verlauf-Pille, weiße Schrift, z. B. „**Новое**", „**Доставка**". - **Favoriten-Herz** oben rechts (`top:10;right:10`): Kreis 34px, `background: rgba(255,255,255,0.86)`, `backdrop-filter: blur(2px)`, **kein Rahmen/Schatten**. Icon `heart` (18). Inaktiv: Kontur, Farbe `#33414e`. Aktiv: gefüllt `#ef4146`. - **Info** (`padding-top:10px; gap:4px`): - **Preis**: *Onest* 800, **18.5px**, `letter-spacing:-0.02em`, `#0b1a26`. Format: russische Tausender-Trennung mit schmalem Leerzeichen + „ ₽", z. B. „55 000 ₽". Ohne Preis → „**Договорная**". - **Titel**: *Golos Text* 14.5px, Farbe `#33414e`, 2 Zeilen mit Ellipsis (`-webkit-line-clamp:2`). - **Meta**: Icon `map-pin` (14) + Stadt + „·" + Datum, 13px, `#6b7c8c`. - Hover: `.listing-thumb { filter: brightness(0.98) }`. - **„Показать ещё"-Button** zentriert darunter (`margin-top:30px`): sekundär (weiß, dezenter Rahmen `1.5px #e1e9f0`), Größe lg, Icon `chevron-down` rechts. **Beispiel-Datensatz (12 Anzeigen)** — `cat` · `icon`(falls abweichend) · Titel · Preis · Stadt · Datum · optionales Badge: 1. electronics · `smartphone` · „iPhone 13, 128 ГБ, отличное состояние" · 55000 · Москва · сегодня · **Доставка** 2. realty · `building-2` · „2-комн. квартира, 54 м², 7/12 этаж" · 6200000 · Казань · вчера 3. transport · `car-front` · „Toyota Camry 2.5 AT, 2019, 78 000 км" · 1890000 · Краснодар · 12 июня 4. home · `sofa` · „Угловой диван «Осло», раскладной" · 24900 · Санкт-Петербург · 13 июня 5. hobby · `bike` · „Велосипед горный Merida Big.Nine" · 18500 · Екатеринбург · 11 июня 6. personal · `shirt` · „Куртка зимняя мужская, новая, L" · 4200 · Новосибирск · сегодня · **Новое** 7. electronics · `laptop` · „Ноутбук ASUS ZenBook 14, i5, 16 ГБ" · 62000 · Москва · вчера 8. animals · `cat` · „Котёнок британский, привит" · 15000 · Уфа · 10 июня 9. services · `plug-zap` · „Услуги электрика, выезд по городу" · — (Договорная) · Самара · 12 июня 10. parts · `disc-3` · „Колёса R17 в сборе, комплект 4 шт." · 32000 · Челябинск · 9 июня 11. hobby · `guitar` · „Гитара акустическая Yamaha F310" · 11900 · Пермь · 13 июня 12. home · `refrigerator` · „Холодильник Bosch, No Frost, 2 м" · 27500 · Воронеж · 8 июня #### Komponente: Footer - `border-top:1px solid #e1e9f0`, Hintergrund `#ffffff`. Container max 1320, `padding:44px 24px 40px`. - Raster `grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:32px`: - Spalte 1: Pin-Marke (30) + „Placeo" (Onest 800, 21px) + Claim „**Покупайте и продавайте что угодно рядом с домом. Доска объявлений для всех.**" (14px, `#6b7c8c`, max 280px). - „**Placeo**": О проекте · Вакансии · Реклама · Контакты - „**Помощь**": Как продавать · Как покупать · Безопасность · Поддержка - „**Разделы**": Транспорт · Недвижимость · Работа · Электроника - Links 14px `#6b7c8c`, Hover → `#578a24`. - Untere Leiste (`border-top:1px solid #e1e9f0`): „**© 2026 Placeo — доска объявлений**" (13px, `#9babbb`). ### 2. Logo — `Placeo Logo.html` (+ `assets/`) - **Marke = Ort-Pin** (Tropfenform mit rundem Negativraum). Quell-SVG-Pfad (viewBox `0 0 48 48`, `fill-rule:evenodd`): `M24 3.5C15.4 3.5 8.5 10.4 8.5 19c0 8.7 11 19.6 14.3 22.6a1.8 1.8 0 0 0 2.4 0C28.5 38.6 39.5 27.7 39.5 19 39.5 10.4 32.6 3.5 24 3.5Zm0 21a5.6 5.6 0 1 1 0-11.2 5.6 5.6 0 0 1 0 11.2Z` - Füllung: Markengrün `#87c540` (folgt der Markenfarbe). Weiß auf dunklen/grünen Flächen. - Wortmarke: *Onest* 800, `letter-spacing:-0.035em`, Ink `#1b241a` / `#0b1a26`. - Dateien: `assets/placeo-mark.svg` (Marke), `assets/placeo-logo.svg` (Marke + Wortmarke), `assets/placeo-icon.png` (512px App-Icon: Verlauf-Squircle, Radius ~116, weißer Pin). - `Placeo Logo.html` zeigt zusätzlich 5 verworfene Alternativ-Konzepte (B–F) — nur zur Referenz; **Konzept A (Pin) ist final**. --- ## Interactions & Behavior - **Favoriten-Toggle**: jede Anzeige-Karte hat lokalen Boolean `fav`; Klick auf das Herz schaltet Kontur ↔ gefülltes Rot (`#ef4146`). `e.preventDefault()` da Karte ein `` ist. In Produktion an Backend/Account binden. - **Sticky Header**: Listener auf `window.scroll`; bei `scrollY>6` translucent + Blur + Hairline-Rahmen. Übergang `220ms`. - **Hover-States**: Kategorie-Kachel hebt sich (`translateY(-2px)` + leichte Abdunklung); Anzeige-Thumb leicht abgedunkelt; Buttons heller (`brightness(1.05)`), Press `translateY(1px) scale(0.99)`. - **Übergänge/Easing**: Standard `cubic-bezier(0.22,1,0.36,1)`; verspielt `cubic-bezier(0.34,1.56,0.64,1)` (Toggles). Dauer 140 / 220 / 360 ms. `prefers-reduced-motion: reduce` respektieren. - **Responsiv** (Breakpoints im Prototyp): `≤1040px` → Anzeigen-Raster 3 Spalten; `≤720px` → Kategorien 2 Spalten, Anzeigen 2 Spalten. Header ist für Desktop (~≥1180px) ausgelegt; bei sehr schmaler Breite Such-/Icon-Bereich neu anordnen (Suche unter die Logo-Zeile umbrechen). - **Suche / Sektionslinks** sind im Prototyp nicht funktional (Platzhalter) — in Produktion mit Routing/Suche verdrahten. ## State Management - Pro Anzeige-Karte: `fav: boolean` (Favorit). Global eher: Set favorisierter Anzeige-IDs, an Nutzerkonto gebunden. - Header: `scrolled: boolean` (aus Scroll-Position abgeleitet). - Optionale **Theme-Tweaks** (im Prototyp via `useTweaks`, in Produktion optional/entfernbar): `brand` (Hex), `fill` (`Градиент`/`Сплошной`), `density` (`Просторно`/`Компактно`). Diese setzen CSS-Variablen auf `:root` und ein `data-density`-Attribut. **Für Produktion nicht zwingend** — entweder als Theming-Feature übernehmen oder die Default-Werte (Grün / Verlauf / Просторно) fest verdrahten. - Datenbeschaffung: Kategorien (statisch) und Anzeigen (paginierte Liste vom Backend; „Показать ещё" lädt nächste Seite). ## Design Tokens ### Markenfarbe — Grün (überschreibt das azurblaue Bundle) | Token | Hex | |---|---| | green-50 | `#f1f8e6` | | green-100 | `#e4f2cf` | | green-200 | `#c9e69e` | | green-300 | `#a9d962` | | green-400 | `#97cd4d` | | **green-500 (PRIMARY)** | **`#87c540`** | | green-600 (Hover) | `#6ea830` | | green-700 (Active / text-brand) | `#578a24` | | green-800 | `#436a1c` | | green-900 | `#324f16` | | **Verlauf (brand)** | `linear-gradient(140deg, #6ea830 0%, #87c540 52%, #a9d962 100%)` | | Marken-Schatten klein | `0 6px 16px rgba(110,168,48,0.26)` | | Focus-Ring | `0 0 0 3px rgba(135,197,64,0.35)` | ### Neutrale (kühles Slate) & Semantik | Token | Hex | |---|---| | surface / page | `#ffffff` | | surface-sunken | `#eef3f7` (gray-100) | | border-subtle | `#e1e9f0` (gray-200) | | border-default | `#cdd8e2` (gray-300) | | text-faint | `#9babbb` (gray-400) | | text-muted | `#6b7c8c` (gray-500) | | text-body | `#33414e` (gray-700) | | text-strong / ink | `#0b1a26` (gray-900) | | success | `#16c784` | | warning | `#ff9f1c` | | danger | `#ef4146` | ### Typografie - **Display/Headings & Wortmarke:** `Onest`, Weight **800**, enge Tracking (`-0.02em` bis `-0.035em`). (Google Font, Cyrillic + Latin.) - **Body/UI:** `Golos Text`, 400–600, `line-height:1.5`. - **Mono:** `JetBrains Mono`. - Skala (px): display 56 · h1 40 · h2 30 · h3 **24** · h4 20 · lead 18 · body 16 · sm 14 · xs 13 · 2xs 11. (Eingesetzt: Sektionstitel 24/800, Preis 18.5/800, Titel 14.5, Meta 13.) ### Spacing / Radien / Layout - 4px-Raster. Container max **1320px**, Gutter **24px**. - Radien: xs 6 · sm 10 · md 14 · **lg 20** · xl 28 · pill 999. Eingesetzt: Kategorie-Kachel **18**, Anzeige-Thumb **14**, Such-Pille 999. - **Flach: keine Karten-Rahmen, keine Karten-Schatten.** Schatten nur dezent auf dem Primär-Button (Marken-Schatten). Hairlines `1px #e1e9f0` nur für Header-/Footer-Trenner. - Motion-Easing/Dauern siehe oben. ## Assets - `assets/placeo-mark.svg` — Pin-Marke (Vektor, einfärbbar). - `assets/placeo-logo.svg` — horizontale Sperrung (Marke + „Placeo"). - `assets/placeo-icon.png` — 512×512 App-Icon (Verlauf-Squircle + weißer Pin). - **Icons:** [Lucide](https://lucide.dev) (2px-Kontur, runde Enden). Im Codebase die native Lucide-Integration nutzen (z. B. `lucide-react`). Verwendete Namen sind oben je Kategorie/Element genannt. - **Fonts:** Onest, Golos Text, JetBrains Mono (Google Fonts). Im Codebase regulär einbinden (self-hosted o. Google Fonts). - **Anzeigenfotos** fehlen (Prototyp nutzt farbige Platzhalter mit Kategorie-Icon) — echte Bilder kommen vom Backend. ## Files - `design/Placeo.html` — Einstiegspunkt der Startseite (lädt die `.jsx` + grüne Token-Overrides im `