From 1fd77cd75706125fc928ff7dc98ece048b04489d Mon Sep 17 00:00:00 2001 From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com> Date: Thu, 25 Dec 2025 15:18:44 -0600 Subject: [PATCH] feat: pre-redesign milestone --- DARK-THEME-PLAN.md | 448 ++++++++++++++++++ .../images/logos/motovaultpro-logo-only.png | Bin 0 -> 1267294 bytes .../images/logos/motovaultpro-title.png | Bin 0 -> 4162884 bytes 3 files changed, 448 insertions(+) create mode 100644 DARK-THEME-PLAN.md create mode 100644 frontend/public/images/logos/motovaultpro-logo-only.png create mode 100644 frontend/public/images/logos/motovaultpro-title.png diff --git a/DARK-THEME-PLAN.md b/DARK-THEME-PLAN.md new file mode 100644 index 0000000..e805c46 --- /dev/null +++ b/DARK-THEME-PLAN.md @@ -0,0 +1,448 @@ +from pathlib import Path + +md = """# MotoVaultPro Homepage Dark Theme Update (Logo-Compatible) + +## Goal +Update the **public marketing homepage** to a **dark theme** so the **new logo (with a black background)** feels native and intentional. + +## Constraints (DO NOT VIOLATE) +- **Do not modify the logo image files** (no transparency edits, no recolors). +- The logo background **must remain dark/black**. +- Keep the existing page structure (nav → hero → welcome → about → features grid → CTA strip → footer). +- Only adjust styling/theme + minor hero layout to place the logo cleanly. + +## Source of Truth (what this doc is based on) +The current homepage markup is Tailwind-based and includes these notable class patterns: +- Root container: `min-h-screen bg-white` +- Nav: `bg-white shadow-md sticky top-0` +- Section backgrounds: `bg-white`, `bg-gray-100`, `bg-gray-50` +- Feature cards: `bg-white p-6` + `text-gray-900` + `text-gray-600` +- Footer: `bg-gray-900` +- Primary color already matches **Rosso Mugello** (primary-500 = `#7A212A`) + +This doc provides **exact class changes and snippets** to implement in the **React/Tailwind** source (not the built HTML). + +--- + +## Assets + +### Logo files (must remain unchanged) +Place these in the frontend **public** folder so they can be used without bundler imports: + +- `frontend/public/branding/motovaultpro-title.png` +- `frontend/public/branding/motovaultpro-logo-only.png` + +(If your repo structure differs, keep the same `/branding/...` URL path equivalent.) + +Usage: +- Hero: `/branding/motovaultpro-title.png` +- Nav: `/branding/motovaultpro-logo-only.png` + +--- + +## Design Tokens (from MVP color scheme) +Use these colors (hex values) directly in Tailwind arbitrary values or via Tailwind config. +- **Nero Daytona**: `#231F1C` (page base) +- **Bianco Avus**: `#F2F3F6` (primary text on dark) +- **Grigio Titanio**: `#A8B8C0` (secondary text on dark) +- **Canna Di Fucile**: `#7E8792` (muted borders/icons) +- **Rosso Mugello (Primary)**: `#7A212A` (primary CTA; already `primary-500`) + +### Quick token aliases (recommended) +If you can edit `tailwind.config.*`, add: +- `nero: "#231F1C"` +- `avus: "#F2F3F6"` +- `titanio: "#A8B8C0"` +- `canna: "#7E8792"` + +If you prefer no config changes, use arbitrary values like `bg-[#231F1C]`. + +--- + +## Implementation Plan (Step-by-step) + +### 0) Locate the homepage components +In the repo, find the marketing homepage by searching for one of these: +- `hero-carousel` +- `slick-dots` +- `MOTOVAULTPRO` +- `Thank you for your interest in MotoVaultPro` +- `What We Offer` +- `min-h-screen bg-white` +- `bg-gray-50` + `Our Features` + +Common file names in React projects: +- `LandingPage.tsx`, `HomePage.tsx`, `MarketingHome.tsx`, `PublicHome.tsx` +- Components: `HeroCarousel.tsx`, `Navbar.tsx`, `FeaturesSection.tsx` + +--- + +## 1) Root container: switch to dark base + +**Before** +```tsx +
+After + +Always show details +
+ + +Notes: + +This makes all default text inherit Bianco Avus. + +Any sections that used gray text must be updated (see below). + +2) Nav: dark surface + logo-only +Nav container + +Before + +Always show details +