|
| 1 | +# Website Design — Asper Beauty Shop |
| 2 | + |
| 3 | +Design handoff for website design work. Run **SNC** before design sessions: `npm run sync`. |
| 4 | + |
| 5 | +--- |
| 6 | + |
| 7 | +## Stack & URLs |
| 8 | + |
| 9 | +| Item | Value | |
| 10 | +|------|--------| |
| 11 | +| **Site** | https://www.asperbeautyshop.com | |
| 12 | +| **Frontend** | Vite, TypeScript, React | |
| 13 | +| **UI** | shadcn-ui, Tailwind CSS | |
| 14 | +| **Fonts** | Google Fonts: Playfair Display, Montserrat, Great Vibes, Tajawal (Arabic) | |
| 15 | +| **Health** | `npm run health` \| **Brain** | `npm run brain` \| **Sync** | `npm run sync` | |
| 16 | + |
| 17 | +See [README.md](README.md) for full scripts and SNC. |
| 18 | + |
| 19 | +--- |
| 20 | + |
| 21 | +## Design Identity |
| 22 | + |
| 23 | +- **Clinical-luxury:** Pharmacist-curated, authentic, precise, never pushy. |
| 24 | +- **Dual voice:** Dr. Sami (science/safety) + Ms. Zain (luxury); single AI persona (Dr. Bot). |
| 25 | +- **Bilingual:** English + Arabic (RTL); respect local dialects. |
| 26 | +- **Trust:** Seal of Authenticity, JFDA, Gold Standard; use in trust badges and copy. |
| 27 | + |
| 28 | +--- |
| 29 | + |
| 30 | +## Design Tokens |
| 31 | + |
| 32 | +### Where they live |
| 33 | + |
| 34 | +- **CSS variables (light/dark):** `src/index.css` — `:root` and `.dark` |
| 35 | +- **Tailwind theme:** `tailwind.config.ts` — colors, fonts, radius, keyframes |
| 36 | + |
| 37 | +### Palette (Quiet Luxury) |
| 38 | + |
| 39 | +| Token | Hex / use | |
| 40 | +|-------|-----------| |
| 41 | +| **Cream** | `#F3E5DC` — global background | |
| 42 | +| **Gold** | `#D4AF37` — accents, borders, ring | |
| 43 | +| **Burgundy / Maroon** | `#4A0E19` — header, footer, primary surfaces | |
| 44 | +| **Warm brown** | `#2C1A1D` — text | |
| 45 | +| **Legacy** | `asper.merlot`, `asper.gold`, `maroon`, `soft-ivory`, `shiny-gold`, `dark-charcoal` in Tailwind | |
| 46 | + |
| 47 | +### Typography |
| 48 | + |
| 49 | +- **Display:** Playfair Display (serif) |
| 50 | +- **Body:** Montserrat, Inter |
| 51 | +- **Script:** Great Vibes |
| 52 | +- **Arabic / RTL:** Tajawal — applied when `dir="rtl"` (see `LanguageContext`) |
| 53 | + |
| 54 | +### Radius & motion |
| 55 | + |
| 56 | +- `--radius: 0.5rem`; Tailwind: `rounded-lg`, `rounded-md`, `rounded-sm` |
| 57 | +- Keyframes: `fade-in-up`, `fade-up`, `fade-in`, `shimmer`, `spin-slow` |
| 58 | +- Utility classes: `.luxury-container`, `.luxury-heading`, `.luxury-subheading`, `.luxury-script`, `.luxury-divider`, `.gold-accent-line*`, `.section-gold-top` |
| 59 | + |
| 60 | +### Gradients |
| 61 | + |
| 62 | +- `celestial-gradient`: deep burgundy vertical |
| 63 | +- `gold-shimmer`: gold highlight |
| 64 | + |
| 65 | +--- |
| 66 | + |
| 67 | +## Component Map |
| 68 | + |
| 69 | +| Area | Path | Notes | |
| 70 | +|------|------|--------| |
| 71 | +| **Primitives** | `src/components/ui/` | shadcn: button, card, input, dialog, sheet, etc. | |
| 72 | +| **Brand** | `src/components/brand/` | AsperLogo, ClinicalIcons, TrustBadges, SocialLinks, CategoryIcons | |
| 73 | +| **Home** | `src/components/home/` | Hero, SearchBar, BrandStory, VIPConcierge, PharmacistPicks, PromoBanner, etc. | |
| 74 | +| **Chat / Dr. Bot** | `src/components/BeautyAssistant.tsx`, `chat/` | Concierge UI, DigitalTray, ChatProductCard | |
| 75 | +| **Product** | `src/components/` | ProductCard, ProductGrid, ProductCatalog, LuxuryProductCard, GlassGoldProductCard, SafetyBadges | |
| 76 | +| **Layout** | `src/components/` | Header, Footer, MegaMenu, MobileNav, MobileBottomNav | |
| 77 | +| **Concierge entry** | — | Dispatch `open-beauty-assistant` or use Consult / concierge CTAs | |
| 78 | + |
| 79 | +Extend existing primitives and brand components; add new ones only when necessary (see project rules). |
| 80 | + |
| 81 | +--- |
| 82 | + |
| 83 | +## RTL & i18n |
| 84 | + |
| 85 | +- **Context:** `src/contexts/LanguageContext.tsx` — `Language` = `"en" | "ar"`, translations object. |
| 86 | +- **Direction:** Set `dir="rtl"` on document/html when language is Arabic; `index.css` applies `font-arabic` and RTL heading fonts. |
| 87 | +- **Copy:** Add strings to the context translations; keep Arabic culturally appropriate. |
| 88 | + |
| 89 | +--- |
| 90 | + |
| 91 | +## Dr. Bot / Beauty Assistant |
| 92 | + |
| 93 | +- **Persona & copy:** `supabase/functions/beauty-assistant/index.ts` — `buildSystemPrompt()`. |
| 94 | +- **Frontend:** `BeautyAssistant` (lazy in `App.tsx`), chat components in `src/components/chat/`. |
| 95 | +- **Entry points:** "Consult", "Talk to Dr. Bot", or any CTA that should open the concierge → trigger `open-beauty-assistant` or open the same UI. |
| 96 | + |
| 97 | +--- |
| 98 | + |
| 99 | +## Key Files for Design Changes |
| 100 | + |
| 101 | +| Goal | File(s) | |
| 102 | +|------|--------| |
| 103 | +| Global colors, type, layout base | `src/index.css`, `tailwind.config.ts` | |
| 104 | +| Brand colors & components | `src/components/brand/*`, Tailwind `asper.*` | |
| 105 | +| Page layout / shell | `src/App.tsx`, `src/pages/Index.tsx`, Header, Footer | |
| 106 | +| Homepage sections | `src/components/home/*`, `src/pages/Index.tsx` | |
| 107 | +| Product cards & grids | `src/components/ProductCard.tsx`, LuxuryProductCard, GlassGoldProductCard, ProductGrid | |
| 108 | +| Chat/concierge UI | `src/components/BeautyAssistant.tsx`, `src/components/chat/*` | |
| 109 | + |
| 110 | +--- |
| 111 | + |
| 112 | +## Pre–design checklist |
| 113 | + |
| 114 | +1. **SNC:** `npm run sync` (frontend + brain OK). |
| 115 | +2. **Docs:** README.md (scripts, SNC), PUSH-BLOCKER.md (branch/PR), CURSOR-SETTINGS-FIX.md if using Cursor settings. |
| 116 | +3. **Figma → code:** Use Code Connect skill when mapping Figma components to repo (Figma URL with `node-id`). |
| 117 | + |
| 118 | +--- |
| 119 | + |
| 120 | +*Last updated for website design handoff. SNC and scripts: see README.* |
0 commit comments