brooksstore

byMr Abeiku

# Brooks Store — Phase 1 MVP Build Prompt (Enhanced) ## ROLE & OBJECTIVE You are building **Phase 1** of a real, launching fashion e-commerce brand: **Brooks Store**. This is not a demo or a school project — it is the production frontend foundation for a business that will go live. Treat every decision (naming, structure, styling, performance) as if it will ship to real customers in Ghana on mobile devices with variable network speeds. Phase 1 delivers **brand identity + a polished, production-quality frontend + a working homepage**. Nothing else. ## SCOPE BOUNDARY — READ FIRST **Explicitly out of scope for this phase — do not build, stub with TODO comments only where structurally necessary:** - Admin dashboard - Database / ORM / schema - Authentication (customer or admin) - Payment integration (Paystack, Mobile Money, cash-on-delivery logic) - Cart, checkout, or order management - Inventory / stock management - Delivery / shipping logic All product, cart-button, and "add to bag" interactions in this phase are **visual only** — they may show hover/press states and micro-interactions, but must not attempt real state persistence, API calls, or routing to checkout. **Design the architecture so these can be added in Phase 2+ without a rewrite** (see "Forward Compatibility" below) — that's the main engineering discipline of this phase. --- ## BRAND BRIEF **Name:** Brooks Store **Business model:** Fashion reseller based in Ghana today, expanding into wholesale later. **Audience:** Young adults, fashion-conscious, men and women. **Personality:** Luxury · Streetwear · Premium everyday fashion · Modern · Confident · Bold · Minimal · Sophisticated. **Inspiration, not imitation:** Channel the restraint of Apple, the athletic confidence of Nike, and the material luxury of Gucci — but the result must be a distinct, original Brooks Store identity. No copied layouts, components, iconography, copy patterns, or asset styles from any real brand. --- ## DESIGN SYSTEM ### Color Primarily monochromatic: - Black (`#0A0A0A` or similar near-black, not pure `#000`) - Off-white / ivory (`#F7F5F2` or similar, not pure `#FFF`) - Charcoal (`#1C1C1C`–`#2A2A2A` range) - Soft grey (`#9A9A9A` range, for secondary text/borders) Reserve a CSS variable / Tailwind token (e.g. `--accent`) for a **future** signature accent color. Leave it unset or extremely subtle for now — do not invent a strong accent color just to "add color." Define these as **design tokens** (Tailwind config `theme.extend.colors` + CSS variables), not ad hoc hex values scattered through components, so a future accent color or dark/light variant is a one-line change. ### Typography Two typefaces, loaded via `next/font` for performance (no FOUC, no layout shift): 1. **Display serif or distinctive editorial font** — hero headlines, section statements, brand moments. Suggest 2–3 concrete Google Fonts or licensable options that fit "luxury streetwear editorial" (e.g. a modern serif like Fraunces/Canela-adjacent, or a bold grotesque display) and briefly justify the pick. 2. **Clean modern sans-serif** — navigation, product names, prices, buttons, body, UI. Suggest a concrete option (e.g. Inter, General Sans, Neue Montreal-adjacent) with justification. Typography scale should be defined once (type scale tokens: hero, h1–h4, body, caption, button) and reused everywhere — no one-off font sizes in components. Components must use only the semantic font tokens (`font-display`, `font-sans`) — never reference the underlying font family name directly, even correctly. ### Avoid Generic e-commerce templates · excessive cards/shadows/rounded corners · gradients · cheap or bouncy animations · clutter · more than 4 colors on screen at once · big SALE banner clichés · stock-template component patterns (e.g. default shadcn card grids without customization). --- ## LOGO - Primary wordmark: **BROOKS**, typeset (not illustrated) using the brand's sans-serif, minimal, letter-spaced. Implement as a styled text component, not a raster image, so it stays crisp and themeable. - Monogram: conceptual **"BS"** mark, simple enough to work as a 16×16 favicon, a social profile picture, and a woven/printed clothing tag. Provide it as clean SVG. - Deliver both as reusable components (`<Wordmark />`, `<Monogram />`) plus a static favicon/SVG asset. --- ## PHOTOGRAPHY Use realistic, premium-feeling placeholder imagery (e.g. curated Unsplash/Pexels editorial fashion photography via remote URLs, loaded through `next/image`) that reads as confident, youthful, streetwear-premium — not generic stock-photo energy. **Forward compatibility:** every image reference — hero, editorial tiles, and product imagery alike, not products alone — must go through a single typed data layer (see Mock Data below) — never a hardcoded URL inside a component — so swapping in real Brooks Store photography later is a data change, not a code change. --- ## HOMEPAGE SPECIFICATION Build these sections, in order, each as its own component: 1. **Navigation** — `BROOKS` wordmark, links (Shop / Men / Women / New Arrivals), search icon, bag icon (visual only, no real search/cart behavior). Sticky or scroll-aware header with a subtle background/blur transition on scroll. Fully responsive with a clean slide-in or full-screen mobile menu, keyboard-accessible, closes on route change and `Esc`. 2. **Hero** — cinematic, full-bleed editorial image, headline ("DEFINE YOUR STANDARD." or an equally strong original line), supporting line, two CTAs (SHOP MEN / SHOP WOMEN). Optimize the hero image specifically (priority loading, correct `sizes`, no CLS). The hero stays **image-based** — no autoplay background video or heavy media in Phase 1; "cinematic" comes from imagery, typography, and motion design, not video weight. 3. **Brand statement** — large, simple typographic moment. One idea, no clutter. 4. **Featured collection ("THE LATEST")** — 4–6 mock products in a responsive grid, each with image, hover/alternate image, name, category, GH₵ price, color, optional badge (NEW / BESTSELLER). Product card is a reusable, typed component (see below). 5. **Men / Women editorial tiles** — two large image tiles with short taglines and "Shop" CTAs (visual only). 6. **Brand story** — short, premium, concise copy block introducing Brooks Store's philosophy. 7. **Final CTA** — strong closing statement + single button ("EXPLORE THE COLLECTION"). 8. **Footer** — wordmark, nav links, secondary links (About / Contact / Shipping / Returns), social placeholders (Instagram / TikTok), country (Ghana), `© 2026 Brooks Store`. --- ## PRODUCT COMPONENT CONTRACT Define a strict TypeScript type now so Phase 2 can plug in a real database without touching component code: ```ts type Product = { id: string; name: string; slug: string; category: "men" | "women" | "unisex"; price: number; // in pesewas (integer) or GHS decimal — pick one and document it currency: "GHS"; colors: string[]; images: { src: string; alt: string }[]; hoverImage?: { src: string; alt: string }; badge?: "NEW" | "BESTSELLER"; }; ``` - Centralize mock data in a single typed module (e.g. `lib/mock-data/products.ts`), not scattered inline objects. - `<ProductCard />` takes a `Product` and is otherwise fully self-contained and reusable. - Price formatting (GH₵ with correct thousands separators) goes through one shared utility function, not repeated per-component string interpolation. --- ## FORWARD COMPATIBILITY (why this phase matters) Structure the codebase so Phase 2 can add, without rewriting Phase 1 UI: - A real database/ORM behind the same `Product` type (swap the mock data module for a data-fetching layer with the same shape). - Auth (customer + separate admin), cart state, checkout, Paystack + Mobile Money + cash-on-delivery, order management, admin dashboard, and later Mux-hosted product video. - Keep components presentation-only where possible; keep data-fetching at the page/route level so swapping mock data for real data later touches few files. --- ## TECHNICAL REQUIREMENTS - **Next.js (App Router)** + **React** + **TypeScript** (strict mode) + **Tailwind CSS**. - `next/image` for all imagery, `next/font` for all typefaces. - Semantic HTML, accessible landmarks, meaningful `alt` text on every image, visible focus states, keyboard-navigable nav/menu, sufficient color contrast against the monochrome palette (WCAG AA minimum). - Mobile-first responsive design, verified at common breakpoints (≈375 / 768 / 1024 / 1440px+), with particular polish on mobile since most customers will land there. - Subtle, intentional motion only: fade/slide-ins on scroll, image scale on hover, smooth nav/menu transitions, tasteful button micro-interactions. No animation that adds perceptible jank or delays interaction. - Basic performance discipline: no unoptimized images, no layout shift on load, no blocking font loads. - Basic SEO/meta: page title, description, Open Graph tags, favicon — even at MVP stage, since this may go live. - Clean, modular file structure with clear separation of `components/`, `lib/mock-data/`, `app/` routes, and shared `types/`. --- ## DELIVERABLES 1. Complete project structure (file tree) 2. All required files, fully implemented (no placeholder `TODO` components in the sections listed above) 3. Installation instructions 4. Local run instructions 5. A short explanation of the architecture and the key forward-compatibility decisions made 6. A concise, prioritized list of what Phase 2 should build next ## DEFINITION OF DONE Phase 1 is complete when: the homepage runs locally with zero console errors, works cleanly at mobile/tablet/desktop widths, has no hardcoded product/image data outside the mock data layer, passes a basic accessibility pass (keyboard nav + alt text + contrast), and would not embarrass Brooks Store if shown to a real customer or investor today.