# YOSS Crêpello — Website Implementation Plan

## Website objectives

1. Translate a social-first dessert brand into a fast, credible first-party web experience.
2. Make food discovery immediate and visually irresistible.
3. Surface the verified phone, location and late-night hours with minimal friction.
4. Demonstrate a complete ordering/account/admin product vision without pretending production services exist.
5. Preserve strict separation between verified public facts and demo-only menu/business data.

## Target customers

- Mobile-first Instagram visitors aged roughly 16–35.
- Groups choosing a late-night dessert destination.
- Customers deciding what to order before calling or visiting.
- Families looking for a casual evening treat.

## User personas

### 1. The Reel Visitor
Arrives from Instagram, wants to see what YOSS sells in under 10 seconds, then find directions or call.

### 2. The Group Decider
Browses visually, filters by sweet/savory/drinks, shares product ideas, builds a sample cart.

### 3. The Late-Night Customer
Needs “open until 03:00,” phone number and directions to be obvious on mobile.

### 4. The Business Owner / Client
Needs to see how the future production site could support ordering, accounts, promotions and staff operations.

## Sitemap

- `index.html`
- `menu.html`
- `about.html`
- `locations.html`
- `contact.html`
- `admin.html`

## Homepage content hierarchy

1. Unofficial-demo disclosure strip
2. Sticky header / YOSS demo wordmark
3. Hero: “Crêpes after dark” + food image + two CTAs
4. Verified info rail: Mohammadia area / 17:00–03:00 / phone
5. Featured demo menu cards
6. “YOSS Box” promotional concept — explicitly notes that the format is publicly mentioned while contents are demo
7. Late-night brand/story section
8. Social/Reels section linking to official Instagram
9. Location CTA
10. FAQ
11. Footer + disclosure

## Menu page structure

- Intro + DEMO MENU badge
- Search field
- Category chips
- Product result count
- Responsive product grid
- Product cards with demo price labels
- Product detail modal with demo options and quantity
- Add to local cart
- Cart drawer
- Demo checkout block

## About page structure

- Brand positioning hero
- “What public sources tell us” facts
- Social-first behavior / late-night positioning
- Clear “what we did not invent” section
- Instagram CTA

## Locations page structure

- Verified listing card
- Address / phone / hours
- Locality ambiguity note
- Directions link to Google Maps query
- No invented branches

## Contact page structure

- Verified phone and Instagram
- Front-end validated demo form
- FAQ links
- Demo form submission notice

## Admin page structure

- Large SAMPLE DATA banner
- Orders / revenue / availability metrics with “demo” labels
- Mock order table
- Product availability toggles (UI-only)
- Promotions panel
- “No real internal connection” disclosure

## UX strategy

- One-tap path to Menu / Call / Directions.
- Persistent cart button on every page.
- Mobile nav becomes an accessible drawer.
- Food photography occupies large surfaces; supporting copy stays short.
- Demo labels are visible at the moment a user could confuse the experience with production ordering.
- Cart state persists in localStorage.

## Visual design concept

**“Midnight dessert counter.”** A dark cocoa base evokes late-night opening hours; warm cream panels feel edible and tactile; bright strawberry red drives actions; pistachio green adds a contemporary dessert accent. Layouts use oversized editorial type, asymmetry and sticker-like badges rather than generic restaurant-card grids.

## Brand design system

### Color palette (demo interpretation, not claimed as official)

- Cocoa 950: `#17110f`
- Cocoa 850: `#2a1c18`
- Cream 50: `#fff8ed`
- Cream 100: `#f7ead8`
- Strawberry: `#e63b3f`
- Pistachio: `#a5c95a`
- Caramel: `#c9863f`
- Ink: `#211b19`
- Muted: `#756965`

### Typography

No external font dependency for performance and resilience.
- Display: system sans stack with ultra-heavy weight, compressed letter spacing.
- Body: `Inter`-like system stack (`Arial`, `Helvetica`, sans-serif).
- Arabic-friendly fallback: `Tahoma`, `Arial`.

### Buttons

- Primary: strawberry fill, dark text/white depending contrast, 999px radius.
- Secondary: cream border or dark outline.
- Minimum hit target: 44px.
- Visible focus ring.

### Cards

- Rounded 24–30px corners.
- Minimal shadows; prefer border + contrast.
- Image crop 4:3 / 1:1 depending context.
- Demo badge appears directly on fictional products/prices.

## Product presentation

- High image-to-copy ratio.
- Product name + compact descriptor.
- “Demo price” always prefixed or accompanied by DEMO badge.
- Detail modal includes quantity, optional demo add-ons and clear disclaimer.

## Navigation strategy

Desktop: sticky horizontal bar with Home, Menu, About, Location, Contact, Staff demo, Instagram, cart.  
Mobile: logo + cart + hamburger; menu opens as full-width sheet.

## Responsive behavior

- 375–430: single-column hero, swipe-friendly category chips, 1-column product grid, full-width cart drawer.
- 768: 2-column products; hero image beside copy where space permits.
- 1024: 3-column product grid; stronger editorial composition.
- 1440+: max-width content, oversized display typography, generous white space.

## Accessibility strategy

- Semantic landmarks and heading order.
- Skip link.
- Button elements for actions (not clickable divs).
- Dialogs use `role="dialog"`, `aria-modal`, focus trap and Escape close.
- Forms use explicit labels and live error/status messages.
- Sufficient contrast.
- `prefers-reduced-motion` disables nonessential transitions/reveals.
- No critical hover-only information.

## SEO strategy

- Unique title and description per page.
- Canonical omitted because this is a local demo, not a published official site.
- OG metadata references demo status.
- JSON-LD only on location page, using verified name/phone/public listing address area; no fake ratings/prices.
- Descriptive alt text notes when photography is a demo placeholder.

## Performance strategy

- Local compressed JPGs.
- Lazy-load non-hero media.
- No JS framework.
- Single CSS and JS bundle.
- No heavy icon library; inline/simple text icons.
- Minimal DOM effects.

## JavaScript interactions

- Mobile nav
- Header scroll state
- Menu search and filters
- Product modal
- Quantity controls
- Demo add-ons
- Cart add/remove/update
- localStorage persistence
- Cart subtotal
- Demo checkout notice
- Favorite toggles (local only)
- Demo account dialog
- FAQ accordion
- Contact form validation
- Toast system
- Scroll reveal
- Back-to-top button
- Sample admin availability toggles

## Demo-only features

- Product catalog and pricing
- Product ingredients/descriptions
- Cart and checkout
- Account/login
- Favorites
- Loyalty concept
- Admin dashboard metrics/orders
- Contact form transmission
- Promo code logic

Every server-dependent action ends with a clear demo limitation.

## Asset usage

- Hero / cards use files under `assets/demo/` only.
- No file in `assets/demo/` is represented as a YOSS photo.
- `assets/logos/` remains intentionally free of a fake “official” logo; the UI uses a CSS/text wordmark.
- Source provenance is documented in `research.md`.

## Development order

1. Research + verification
2. Folder architecture
3. Design tokens/base CSS
4. Shared header/footer/dialogs
5. Homepage
6. Menu grid/data model
7. Product modal/cart
8. Supporting pages
9. Admin preview
10. Forms/FAQ/interactions
11. Responsive pass
12. Accessibility pass
13. SEO metadata
14. Functional QA
15. Creative-director review
16. Documentation

## QA checklist

### Functional

- [ ] All nav links resolve
- [ ] Mobile nav opens/closes
- [ ] Menu search works
- [ ] Category filters work
- [ ] Product modal opens/closes via mouse + keyboard
- [ ] Quantity controls work
- [ ] Add-to-cart works
- [ ] Cart quantity and remove work
- [ ] Cart persists on reload
- [ ] Checkout is blocked with demo message
- [ ] Login/account is blocked with demo message
- [ ] Admin preview labels sample data clearly
- [ ] Contact validation works
- [ ] Contact submit does not send
- [ ] FAQ accordion works
- [ ] Instagram links point to official profile

### Visual

- [ ] 375px
- [ ] 430px
- [ ] 768px
- [ ] 1024px
- [ ] 1440px
- [ ] Long names wrap cleanly
- [ ] Hero remains legible
- [ ] Images crop intentionally
- [ ] Cart/modal fit short screens

### Accessibility

- [ ] Skip link
- [ ] Focus visible
- [ ] Dialog focus trap
- [ ] Escape closes dialog/drawer
- [ ] Form labels/errors
- [ ] Reduced-motion support
- [ ] Logical headings

### Integrity

- [ ] Demo disclaimer top + footer
- [ ] Menu prices marked demo
- [ ] No fake testimonial/rating claims
- [ ] No fake branch
- [ ] No fabricated structured data
- [ ] No payment fields