motovaultpro/DARK-THEME-PLAN.md

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)