feat: pre-redesign milestone

2025-12-25 15:18:44 -06:00
parent 32472fb7a1
commit 1fd77cd757
3 changed files with 448 additions and 0 deletions
--- a/DARK-THEME-PLAN.md
+++ 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
+<div className="min-h-screen bg-white">
+After
+
+Always show details
+<div className="min-h-screen bg-[#231F1C] text-[#F2F3F6]">
+
+
+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
+<nav className="bg-white shadow-md sticky top-0 z-50">
+
+
+After
+
+Always show details
+<nav className="sticky top-0 z-50 bg-[#231F1C]/90 backdrop-blur border-b border-white/10">
+
+Brand area
+
+Replace the text-only brand with logo-only + text.
+
+Before
+
+Always show details
+<h1 className="text-2xl font-bold text-primary-500">MotoVaultPro</h1>
+
+
+After
+
+Always show details
+<a href="#home" className="flex items-center gap-3">
+  <img
+    src="/branding/motovaultpro-logo-only.png"
+    alt="MotoVaultPro"
+    className="h-8 w-auto"
+  />
+  <span className="text-lg md:text-xl font-bold tracking-wide text-[#F2F3F6]">
+    MotoVaultPro
+  </span>
+</a>
+
+Nav links (desktop)
+
+Before
+
+Always show details
+<a className="text-gray-700 hover:text-primary-500 transition-colors">Home</a>
+
+
+After
+
+Always show details
+<a className="text-white/75 hover:text-white transition-colors">Home</a>
+
+
+Apply same to Features/About links.
+
+Mobile menu button
+
+Before
+
+Always show details
+<button className="text-gray-700 hover:text-primary-500 ...">
+
+
+After
+
+Always show details
+<button className="text-white/80 hover:text-white focus:outline-none">
+
+Nav CTA buttons
+
+Remove light hover backgrounds (e.g., hover:bg-primary-50) since that becomes bright on dark.
+
+Sign Up (outline)
+Before
+
+Always show details
+<button className="border-2 border-primary-500 text-primary-500 hover:bg-primary-50 ...">
+
+
+After
+
+Always show details
+<button className="border border-primary-500/90 text-primary-500 hover:bg-primary-500/10 hover:border-primary-500 transition-colors duration-300 font-semibold py-2 px-6 rounded-lg">
+  Sign Up
+</button>
+
+
+Login (filled)
+Keep as primary, optionally add shadow.
+
+Always show details
+<button className="bg-primary-500 hover:bg-primary-700 text-white font-semibold py-2 px-6 rounded-lg transition-colors duration-300 shadow-lg shadow-black/30">
+  Login
+</button>
+
+3) Hero: place the full logo on a dark “brand plate”
+
+Goal: the logo has a black rectangle background; we want it to feel embedded, not pasted.
+We do that by placing it on a slightly-transparent dark plate with a subtle border and blur.
+
+Replace hero overlay content
+
+Find the hero overlay container (currently shows “Welcome to” + big text + Learn More button).
+
+Before (conceptually)
+
+Always show details
+<p className="text-white ...">Welcome to</p>
+<h1 className="text-white ...">MOTOVAULTPRO</h1>
+<button className="bg-primary-500 ...">Learn More</button>
+
+
+After
+
+Always show details
+<div className="absolute inset-0 flex flex-col items-center justify-center text-center px-4">
+  <div className="rounded-2xl border border-white/10 bg-black/40 backdrop-blur-sm p-5 md:p-8 shadow-[0_20px_60px_rgba(0,0,0,0.65)]">
+    <img
+      src="/branding/motovaultpro-title.png"
+      alt="MotoVaultPro — Precision Vehicle Management"
+      className="w-[280px] md:w-[520px] lg:w-[620px] h-auto"
+      loading="eager"
+    />
+  </div>
+
+  <p className="mt-6 max-w-2xl text-white/85 text-base md:text-lg leading-relaxed">
+    Maintenance, fuel/energy, documents, and reminders — organized per vehicle.
+  </p>
+
+  <div className="mt-6 flex flex-col sm:flex-row gap-3">
+    <button className="bg-primary-500 hover:bg-primary-700 text-white font-semibold py-3 px-8 rounded-lg transition-colors duration-300 shadow-lg shadow-black/30">
+      Get Started
+    </button>
+    <a href="#features" className="inline-flex items-center justify-center rounded-lg border border-white/15 bg-white/5 hover:bg-white/10 text-white font-semibold py-3 px-8 transition-colors duration-300">
+      View Features
+    </a>
+  </div>
+</div>
+
+Keep existing hero gradient overlay
+
+Your hero images already have:
+bg-gradient-to-b from-black/60 via-black/40 to-black/60
+Keep it; it improves readability.
+
+Optional: reduce slick arrow intensity
+
+If the slick arrows feel too “bright” on dark:
+
+Reduce opacity and add hover.
+
+Example CSS:
+
+Always show details
+.hero-carousel .slick-prev:before,
+.hero-carousel .slick-next:before { opacity: 0.45; }
+.hero-carousel .slick-prev:hover:before,
+.hero-carousel .slick-next:hover:before { opacity: 0.8; }
+
+4) Welcome section: dark panel
+
+Before
+
+Always show details
+<section className="py-16 px-4 md:px-8 bg-white">
+
+
+After
+
+Always show details
+<section className="py-16 px-4 md:px-8 bg-[#1D1A18] border-t border-white/5">
+
+
+Text updates (do as class swaps; keep content if you want):
+
+text-gray-900 → text-[#F2F3F6]
+
+text-gray-600 → text-[#A8B8C0]
+
+Example:
+
+Always show details
+<h2 className="text-3xl md:text-4xl font-bold text-[#F2F3F6] mb-6">...</h2>
+<p className="text-lg text-[#A8B8C0] leading-relaxed mb-8">...</p>
+
+5) About section: dark base + keep the maroon feature block
+
+Before
+
+Always show details
+<section id="about" className="py-16 px-4 md:px-8 bg-gray-100">
+
+
+After
+
+Always show details
+<section id="about" className="py-16 px-4 md:px-8 bg-[#231F1C] border-t border-white/5">
+
+
+Text swaps:
+
+text-gray-900 → text-[#F2F3F6]
+
+text-gray-600 → text-[#A8B8C0]
+
+Trusted Platform block:
+
+Keep bg-primary-500
+
+Add subtle border to sharpen against dark background:
+
+Always show details
+<div className="w-64 h-64 bg-primary-500 rounded-lg border border-white/10 ...">
+
+6) Features section: dark background + convert white cards to “dark cards”
+Section background
+
+Before
+
+Always show details
+<section className="py-16 px-4 md:px-8 bg-gray-50">
+
+
+After
+
+Always show details
+<section className="py-16 px-4 md:px-8 bg-[#1D1A18] border-t border-white/5">
+
+Card container (most important change)
+
+Find the card body container:
+Before
+
+Always show details
+<div className="bg-white p-6">
+  <h3 className="text-xl font-bold text-gray-900 mb-2">...</h3>
+  <p className="text-gray-600 leading-relaxed">...</p>
+</div>
+
+
+After
+
+Always show details
+<div className="bg-white/5 border border-white/10 p-6">
+  <h3 className="text-xl font-bold text-[#F2F3F6] mb-2">...</h3>
+  <p className="text-[#A8B8C0] leading-relaxed">...</p>
+</div>
+
+Card outer wrapper (shadow + hover)
+
+Before
+
+Always show details
+<div className="overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
+
+
+After
+
+Always show details
+<div className="overflow-hidden rounded-lg border border-white/10 bg-white/5 shadow-lg shadow-black/30 hover:border-white/20 hover:shadow-xl hover:shadow-black/40 transition-all duration-300">
+
+
+Note: With the new card body background already set, you may remove redundant bg-white/5 either on wrapper or body.
+Prefer wrapper bg-white/5 + body bg-transparent, OR wrapper bg-transparent + body bg-white/5. Don’t double-darken unless it looks better.
+
+7) CTA strip: keep Rosso Mugello but make it richer on dark pages
+
+Current
+
+Always show details
+<section className="py-16 px-4 md:px-8 bg-primary-500 text-white">
+
+
+Recommended
+
+Always show details
+<section className="py-16 px-4 md:px-8 text-white bg-[linear-gradient(90deg,#6A1C24_0%,#7A212A_50%,#6A1C24_100%)] border-t border-white/10">
+
+
+Button:
+Before
+
+Always show details
+<button className="bg-white text-primary-500 hover:bg-gray-100 ...">Get Started</button>
+
+
+After
+
+Always show details
+<button className="bg-white/95 text-primary-500 hover:bg-white font-semibold py-3 px-8 rounded-lg transition-colors duration-300 shadow-lg shadow-black/30">
+  Get Started
+</button>
+
+8) Footer: align to the new dark base
+
+Before
+
+Always show details
+<footer className="bg-gray-900 text-white py-8 px-4 md:px-8">
+  <p className="text-gray-400">...</p>
+</footer>
+
+
+After
+
+Always show details
+<footer className="bg-black text-white py-8 px-4 md:px-8 border-t border-white/10">
+  <p className="text-white/50">© 2025 MotoVaultPro. All rights reserved.</p>
+</footer>
+
+9) Remove or replace light-only Tailwind classes on homepage
+
+On the homepage only, avoid these patterns because they create “light UI” artifacts on dark pages:
+
+bg-white, bg-gray-50, bg-gray-100
+
+text-gray-900, text-gray-700, text-gray-600
+
+hover:bg-primary-50 (currently a very light blue in your built CSS)
+
+Use instead:
+
+dark surfaces: bg-[#231F1C], bg-[#1D1A18], bg-white/5
+
+text: text-[#F2F3F6], text-[#A8B8C0], text-white/80
+
+hover: hover:bg-white/10 or hover:bg-primary-500/10
+
+Acceptance Criteria (QA checklist)
+
+Homepage background is dark everywhere (no white sections).
+
+Full logo in hero feels native (sits on a dark “brand plate” with border/blur).
+
+Nav uses logo-only and remains readable on scroll.
+
+Feature cards are dark, readable, and keep hover affordances.
+
+No bright hover states (no primary-50 / light blue flashes).
+
+Mobile: spacing remains consistent; CTAs are reachable; text contrast is good.
+
+Suggested PR structure
+
+feat(ui): dark theme for marketing homepage to match logo background
+
+Include before/after screenshots at desktop + mobile widths.
+
+"""
+
+path = Path("/mnt/data/MVP-HOMEPAGE-DARK-THEME-SPEC.md")
+path.write_text(md, encoding="utf-8")
+str(path)