motovaultpro/docs/changes/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

<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)