# Handoff: teeu Marketplace — Home Page ## Overview This package documents the **customer-facing home page** for `teeu`, a general marketplace (products across all categories). The home page is the primary landing/discovery surface: it greets shoppers, surfaces promotions, lets them browse by category, and merchandises curated product rails (deals, trending). It sits on top of the shared teeu design system. Two design files are included: - **`Teeu Home.dc.html`** — the home page itself (this is what to build). - **`Teeu Marketplace Kit.dc.html`** — the full UI-kit reference (tokens, components, header, product card, dashboards). Use it as the source of truth for any component the home page reuses. ## About the Design Files Both files are **design references created in HTML** — a small internal templating runtime (``, ``, ``, and a `class Component` logic block that returns the page data). They are prototypes showing intended look, layout, and states — **not production code to copy directly**. Your task is to **recreate the home page in the target codebase's existing environment** (React, Vue, Svelte, etc.) using that project's established component patterns, styling approach, and libraries. Ignore the runtime — read it only to understand data shapes and repetition, then rebuild with your own components and data layer. If no codebase exists yet, choose an appropriate stack for a marketplace web app (e.g. React + a utility or component-CSS system). ## Fidelity **High-fidelity.** Colors, typography, spacing, radii, and states are all specified and should be reproduced faithfully using the codebase's libraries/patterns. The one exception is imagery: every product/hero/promo image is a striped **placeholder** labelled `… · WxH` — swap in real assets (product shots square 1:1, ≥640×640; hero ~560×560; promo ~240×240). --- ## Design Tokens (Shared across the whole teeu system — see `Teeu Marketplace Kit.dc.html` §01 for the full sheet.) ### Color | Token | Hex | Usage | |---|---|---| | Primary | `#1877FF` | Primary actions, links, active nav, focus ring | | Primary Dark | `#1466E0` | Hover / pressed; hero gradient mid | | Primary Soft | `#EAF2FF` | Tinted fills, icon-button bg | | Ink | `#1E2024` | Headings, primary text, footer & dark promo bg | | Slate | `#5B6069` | Body text | | Muted | `#9AA0AA` | Secondary/meta/placeholder text | | Line | `#E7E9EE` | Borders / dividers | | Canvas | `#F5F6F8` | Page background | | Success | `#1F9D57` | Positive accents (seller promo, in-stock) | | Warning | `#E8952A` | Star rating gold; amber promo accents | | Sale | `#F5455C` | Discounts, sale price, notification dots | Home-page accent surfaces: - Hero gradient: `linear-gradient(120deg, #1877FF 0%, #1466E0 55%, #0F4FB0 100%)`, white text, soft radial-glow overlay at ~16% opacity. - Side promo cards: amber `#FFE9D6` (heading text `#B7761A`), green `#DFF3E8` (heading `#1F9D57`). - Dark "teeu+" promo & footer: `linear-gradient(110deg, #1E2024, #2A2F36)`, blue eyebrow `#59A0FF`, footer chips `#2A2F36`, footer divider `#2E3237`, footer muted text `#9CA3AF` / `#6B7280`. - Category-tile icon chips (tint / fg): Electronics `#EAF2FF`/`#1466E0`, Fashion `#FDECF2`/`#D6417E`, Home `#FDF3E6`/`#B7761A`, Beauty `#F5ECFB`/`#8B4FC4`, Sports `#E9F7EF`/`#1F9D57`, Toys `#FFF3D6`/`#C8951A`, Grocery `#EAF7EE`/`#2E9E5B`, Books `#EDEEFB`/`#5B57D6`. ### Typography - **Manrope** (400/500/600/700/800) primary; **JetBrains Mono** (400/500) for meta/labels/placeholders. - Home-page sizes: hero H1 46/800 (−0.02em, line-height 1.05); section H2 24/800 (−0.01em); dark-promo headline 30/800; card/promo title 22–24/800; product name 14/700; price 19/800; body 15–16/500 Slate; meta 11.5–13/600 Muted; eyebrow 12/800 uppercase 0.08–0.1em tracking. ### Spacing / Radius / Elevation - 8pt grid. Page padding `28px 32px 60px`; section bottom margins ~44px; grid/rail gaps 14–20px. - Max content width **1440px**, centered. - Radius: cards/tiles 16–18, hero & big promos 24, buttons 11–14, icon buttons 10–11, pills 999. - Shadows: card resting `0 12px 30px -18px rgba(30,45,80,0.25)`; hero CTA `0 10px 24px -10px rgba(0,0,0,0.35)`; primary glow `0 10px 24px -10px rgba(24,119,255,0.8)`; small floating (heart) `0 3px 8px -3px rgba(0,0,0,0.25)`. ### Icons Lucide-style 2px stroke: grid (categories), search, heart, cart, clock, truck, shield-check, rotate/return, headset, plus, chevron-down. Use the codebase's icon library (Lucide recommended). --- ## Page Structure (top → bottom) ### 1 · Sticky header Reused from the kit (§02). White bar, `position: sticky; top:0; z-index:50`, `0 1px 0 #EEF0F3`. Row (`15px 32px`, gap 22): logo → **Categories** button (Primary, grid icon + chevron) → **search** (flex-1, `1.5px solid #E1E4EA`, bg `#F7F8FA`, `/` hint chip) → **Favorites** & **Cart** icon+label stacks with count badges (Fav badge Sale, Cart badge Primary) → divider → **Sign in** (secondary) + **Sign up** (primary). Second row: `1px solid #F1F2F5` top border, a horizontally-scrollable category strip (13.5/600 Slate): All, Electronics, Fashion, Home & Living, Beauty, Sports, Toys & Kids, Grocery, Books, Auto, Garden, Pet. ### 2 · Hero (2-column, 1.62fr / 1fr) - **Main hero** (left): blue gradient, min-height 380, radial-glow overlay. Content (max 60% width): pill eyebrow "Mid-season sale · up to 40% off" (translucent white), H1 "Everything you love, one happy place.", supporting line, two CTAs — **Shop the sale** (white bg, `#1466E0` text) + **Browse all** (translucent outline). Right: a `280×280` translucent rounded frame = hero product placeholder (`560×560`). - **Side column** (right): two stacked promo cards — amber "New in Electronics → Smart home, smarter prices" and green "Become a seller → Open your teeu store free", each with an "Explore →" link and a `120×120` image placeholder bottom-right. ### 3 · Trust strip (4-up) White cards (radius 16) each: `#EAF2FF` icon chip (42px, Primary glyph) + title + subtitle — Free shipping / Buyer protection / Easy returns / 24/7 support. ### 4 · Shop by category (8-up tiles) Header "Shop by category" + "All categories →". 8 tiles: white card radius 18, centered 56px rounded icon chip (per-category tint/fg above, emoji or real category icon) + label. Categories: Electronics, Fashion, Home & Living, Beauty, Sports, Toys & Kids, Grocery, Books. ### 5 · Deals of the day (horizontal rail) Header "Deals of the day" + a countdown pill (`#FDECEE`/`#F5455C`, clock icon, "Ends in 08:24:15" — wire to a real countdown timer) + "See all deals →". Horizontally-scrollable rail of **236px** fixed-width sale cards: image placeholder with discount badge top-left + heart top-right; body = seller / name (min-height 36px) / rating row / price row (Sale price + struck old price + "+" add button). ### 6 · teeu+ membership (dark wide promo) Full-width Ink gradient banner, radius 24, `40px 48px`: blue eyebrow "teeu+ membership", white headline "Free 2-day delivery, all year.", sub line, and a Primary **Try free for 30 days** CTA (glow). ### 7 · Trending now (5-up grid) Header "Trending now" + "View more →". 5-column product grid using the standard card (radius 18): image placeholder, optional badge top-left (New = Primary, sale % = Sale), heart top-right; seller / name / rating / price (with optional struck old price) + "+" add button. ### 8 · Footer Ink bg, `52px 32px 34px`. Top grid (`1.6fr 1fr 1fr 1fr 1.2fr`): brand column (inverted logo via `filter: invert(1) brightness(2)`, blurb, 3 social chips) + link columns **Shop / Sell / Help** + "Get the app" column (App Store / Google Play chips). Divider `#2E3237`, then bottom row: "© 2026 teeu, Inc." + Privacy / Terms / Cookies / Accessibility. --- ## Interactions & Behavior - **Sticky header** stays pinned on scroll; category strip scrolls horizontally (hidden scrollbar). - **Categories button** → opens category mega-menu/flyout (not designed here — wire the trigger). - **Search** → typeahead; `/` focuses the field. - **Favorite hearts** (hero promos, deal/trending cards) → toggle saved state (outline Muted ↔ filled Sale) and update the header Favorites count; optimistic. - **"+" / add buttons** → add to cart, update header Cart badge. - **Deals countdown** → live ticking timer; hide/rotate the rail when a deal window ends. - **Rails** (deals) → horizontal scroll / drag; consider arrow controls at desktop. - **Category tiles, "See all", "View more", promo CTAs** → route to the browse/listing page (see the kit §04) filtered appropriately. - **teeu+ CTA** → membership signup flow. **Become-a-seller promo** → seller onboarding. - **Responsive** (mobile in scope): header collapses (search to its own row or icon, categories to a drawer, auth to a menu); hero stacks; category tiles 8→4→3 col; trust strip 4→2 col; rails stay horizontal; trending 5→2 col; footer columns stack. ## State Management - **Session/auth:** `isAuthenticated`, `currentUser` → header guest vs signed-in (see kit §02). - **Cart / Favorites:** counts + id sets, surfaced in header badges and per-card toggle state. - **Merchandising data (fetched):** - `categories[]` (strip) and `catTiles[]` (name, icon, tint/fg). - `perks[]` (trust strip). - `deals[]` — product + `oldPrice`, `discountPct/badge`, and a `dealEndsAt` timestamp for the countdown. - `trending[]` — product with optional `badge` (New / sale %) and optional `oldPrice`. - `footerCols[]` (link columns). - **Product shape** (shared): `{ id, name, seller, price, oldPrice?, rating, reviews, image, badge?, inStock }`. - Loading skeletons should mirror the placeholder counts (12 category strip, 8 tiles, 4 perks, 6 deals, 10 trending). ## Assets - `assets/logoblue.png` — teeu wordmark (only brand asset; black wordmark + bright-blue smiley accent). Header uses it as-is; footer inverts+brightens via CSS filter — prefer a proper light/mono variant in prod. - **Imagery:** all hero/promo/product images are striped placeholders labelled `… · WxH`. Replace with real assets (products 1:1 ≥640×640; hero ~560×560; side promos ~240×240). - **Fonts:** Manrope + JetBrains Mono (Google Fonts). - **Icons:** Lucide-style — use the codebase's icon set. ## Files - `Teeu Home.dc.html` — the home page (build this). The `