Wdipl-react/DARK_BACKGROUND_PATTERN_EXAMPLE.md

Dark Background Pattern Implementation Guide

Standard Dark Page Structure

Every page should follow this consistent pattern:

export function PageName() {
  return (
    <div className="dark min-h-screen bg-background">
      <Navigation />
      
      {/* Hero Section - Always dark */}
      <section className="relative py-20 overflow-hidden bg-black">
        <div className="container mx-auto px-6 lg:px-8">
          {/* Hero content */}
        </div>
      </section>
      
      {/* Content Sections - Alternate between bg-background and bg-black */}
      <section className="py-32 bg-background">
        <div className="container mx-auto px-6 lg:px-8">
          {/* Section content */}
        </div>
      </section>
      
      <section className="py-32 bg-black">
        <div className="container mx-auto px-6 lg:px-8">
          {/* Section content */}
        </div>
      </section>
      
      {/* Process Section - Always use component's built-in dark styling */}
      <ProcessSection />
      
      {/* CTA Section - Dark background */}
      <section className="py-20 bg-background">
        <div className="container mx-auto px-6 lg:px-8">
          {/* CTA content */}
        </div>
      </section>
      
      {/* FAQ Section - Component handles dark styling */}
      <FAQSection 
        title="Page-Specific Questions"
        faqs={pageFAQs}
      />
      
      {/* Footer - Component handles dark styling */}
      <Footer />
    </div>
  );
}

Key Pattern Rules

1. Page Wrapper

<div className="dark min-h-screen bg-background">

• Always use dark class
• Always use bg-background for main wrapper
• Always include min-h-screen

2. Section Backgrounds

// Option 1: Primary dark background
<section className="py-20 bg-background">

// Option 2: Pure black (for contrast)  
<section className="py-32 bg-black">

// Option 3: For special sections
<section className="relative py-20 overflow-hidden bg-black">

3. Text Colors for Dark Backgrounds

// Headings
<h1 className="text-white">Primary Heading</h1>
<h2 className="text-foreground">Secondary Heading</h2>

// Body text
<p className="text-gray-300">Regular body text</p>
<p className="text-muted-foreground">Muted text</p>

// Accent text
<span className="text-[#E5195E]">WDI Pink Accent</span>
<span className="text-accent">Accent Color</span>

4. Card Components

// Dark cards
<Card className="bg-card/20 backdrop-blur-md border-white/10">
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-700/50">

// Card text
<CardContent className="text-foreground">
  <h3 className="text-white">Card Title</h3>
  <p className="text-gray-300">Card description</p>
</CardContent>

Background Replacement Patterns

Replace These Patterns:

// ❌ WRONG - Light backgrounds
<section className="py-20 bg-white">
<section className="py-20 bg-gray-50">
<div className="bg-white">

// ✅ CORRECT - Dark backgrounds  
<section className="py-20 bg-background">
<section className="py-20 bg-black">
<div className="bg-background">

Text Color Adjustments:

// ❌ WRONG - Dark text on dark background
<h1 className="text-black">
<p className="text-gray-900">

// ✅ CORRECT - Light text on dark background
<h1 className="text-white">
<p className="text-gray-300">

Component Integration

Using Existing Dark Components:

// These components already handle dark styling
<Navigation />           // ✅ Dark by default
<Footer />              // ✅ Dark by default
<ProcessSection />      // ✅ Dark by default
<FAQSection />          // ✅ Updated to dark

// For custom sections, ensure dark backgrounds
<section className="bg-background">
  <CustomComponent />
</section>

Validation Checklist

For each page, verify:

• Page wrapper uses dark class and bg-background
• All sections use bg-background or bg-black
• No white/light background classes anywhere
• Text is readable (white/light on dark backgrounds)
• Cards and components use dark variants
• Borders are visible (use border-white/10 or similar)
• Interactive elements are properly styled
• Navigation and Footer are included
• FAQSection uses new dark styling

Common Mistakes to Avoid

1. Forgetting the dark class: Always include dark in page wrapper
2. Mixed backgrounds: Don't mix light and dark backgrounds
3. Invisible text: Ensure text color contrasts with background
4. Invisible borders: Use light borders on dark backgrounds
5. Component conflicts: Verify all components work with dark theme