/** * COMPREHENSIVE DARK BACKGROUND ENFORCEMENT SCRIPT * * This file documents the systematic approach to ensure ALL pages use dark backgrounds consistently. * * Requirements: * - NO white backgrounds anywhere (remove bg-white, bg-gray-50, etc.) * - ALL sections must use bg-background (dark theme) or bg-black * - Consistent dark theme across entire website * - All components should respect dark theme variables */ // ===== BACKGROUND CLASSES TO ENFORCE ===== const REQUIRED_DARK_BACKGROUNDS = [ 'bg-background', // Primary dark background (#0E0E0E in dark theme) 'bg-black', // Pure black background 'bg-card', // Dark card background 'bg-muted', // Dark muted background ] as const; // ===== BACKGROUNDS TO REMOVE/REPLACE ===== const FORBIDDEN_LIGHT_BACKGROUNDS = [ 'bg-white', 'bg-gray-50', 'bg-gray-100', 'bg-slate-50', 'bg-neutral-50', 'bg-zinc-50', 'bg-stone-50', ] as const; // ===== SYSTEMATIC PAGE UPDATES REQUIRED ===== /** * 1. MAIN LAYOUT (App.tsx) ✅ COMPLETED * - Homepage sections all use bg-background * - Placeholder pages use bg-background * - Main app wrapper uses dark theme */ /** * 2. MAIN CATEGORY PAGES * All these pages need systematic review for dark backgrounds: */ const MAIN_CATEGORY_PAGES = [ '/pages/Services.tsx', '/pages/Resources.tsx', '/pages/Company.tsx', '/pages/ContactMain.tsx', '/pages/WebCloudServices.tsx', // ✅ Already properly configured '/pages/SoftwareEngineering.tsx', '/pages/DesignExperience.tsx', '/pages/ArtificialIntelligenceServices.tsx', '/pages/MachineLearning.tsx', ] as const; /** * 3. SERVICE PAGES (22 pages) * All service pages need dark background enforcement: */ const SERVICE_PAGES = [ '/pages/MobileAppDevelopment.tsx', // ✅ Already properly configured '/pages/iOSAppDevelopment.tsx', '/pages/AndroidAppDevelopment.tsx', '/pages/CrossPlatformAppDevelopment.tsx', '/pages/NativeAppDevelopment.tsx', '/pages/PWADevelopment.tsx', '/pages/WearableDeviceDevelopment.tsx', '/pages/CustomWebAppDevelopment.tsx', '/pages/SaaSProductEngineering.tsx', '/pages/EcommercePlatforms.tsx', '/pages/AdminPanelsDashboards.tsx', '/pages/APIBackendDevelopment.tsx', '/pages/EnterpriseSoftwareSolutions.tsx', '/pages/SystemArchitectureDevOps.tsx', '/pages/ThirdPartyIntegrations.tsx', '/pages/ProductModernization.tsx', '/pages/UIUXDesign.tsx', '/pages/ClickablePrototypes.tsx', '/pages/DesignThinkingWorkshops.tsx', '/pages/UserResearchTesting.tsx', '/pages/AIStrategyConsulting.tsx', '/pages/AIAutomationWorkflows.tsx', '/pages/AIIntegrationDigitalProducts.tsx', '/pages/GenAIIntegrationDigitalProducts.tsx', '/pages/AIChatbotsVirtualAssistants.tsx', '/pages/AIModelDeploymentMLOps.tsx', '/pages/CustomMLModelDevelopment.tsx', '/pages/PredictiveAnalyticsForecasting.tsx', '/pages/ComputerVisionApplications.tsx', '/pages/NLPTextAnalytics.tsx', '/pages/RecommendationEngines.tsx', ] as const; /** * 4. SOLUTION PAGES (6 pages) */ const SOLUTION_PAGES = [ '/pages/DigitalProductDevelopment.tsx', '/pages/MVPStartupLaunchPackages.tsx', '/pages/LegacySystemRebuilds.tsx', '/pages/DedicatedOffshoreODC.tsx', '/pages/BusinessProcessAutomation.tsx', '/pages/ComplianceReadySystems.tsx', ] as const; /** * 5. INDUSTRY PAGES (6 implemented pages) */ const INDUSTRY_PAGES = [ '/pages/FinTechBankingApps.tsx', '/pages/WealthTechPlatforms.tsx', '/pages/RealEstateTech.tsx', '/pages/HealthTechApplications.tsx', '/pages/MedicalComplianceSolutions.tsx', '/pages/FitnessWellnessPlatforms.tsx', ] as const; /** * 6. COMPANY PAGES (8 pages) */ const COMPANY_PAGES = [ '/pages/AboutWDI.tsx', '/pages/AboutWDIMain.tsx', '/pages/OurHistory.tsx', '/pages/LeadershipTeam.tsx', '/pages/AwardsCertifications.tsx', '/pages/Careers.tsx', '/pages/CultureValues.tsx', '/pages/PressMedia.tsx', ] as const; /** * 7. HIRE TALENT PAGES (12 pages) */ const HIRE_TALENT_PAGES = [ '/pages/HireTalent.tsx', '/pages/HireMobileAppDevelopers.tsx', '/pages/HireFullStackDevelopers.tsx', '/pages/HireFrontendDevelopers.tsx', '/pages/HireBackendDevelopers.tsx', '/pages/HireUIUXDesigners.tsx', '/pages/HireQAEngineers.tsx', '/pages/DedicatedDevelopmentTeams.tsx', '/pages/EngagementModels.tsx', '/pages/TeamAugmentationServices.tsx', ] as const; /** * 8. RESOURCE PAGES (5 pages) */ const RESOURCE_PAGES = [ '/pages/Blog.tsx', '/pages/CaseStudies.tsx', '/pages/ClientTestimonials.tsx', '/pages/WhitepapersInsights.tsx', '/pages/FAQs.tsx', ] as const; /** * 9. CONTACT PAGES (6 pages) */ const CONTACT_PAGES = [ '/pages/Contact.tsx', '/pages/RequestProposal.tsx', '/pages/ScheduleDiscoveryCall.tsx', '/pages/OfficeLocations.tsx', '/pages/ClientSupport.tsx', '/pages/SendYourCV.tsx', ] as const; // ===== SECTION PATTERNS THAT NEED DARK BACKGROUNDS ===== /** * Common section patterns that must use dark backgrounds: * * 1. Page wrapper:
* 2. Main sections:
or
* 3. Hero sections:
* 4. Content sections:
* 5. CTA sections:
* 6. Process sections: Use bg-background * 7. FAQ sections: Use bg-black (as per updated component) * 8. Footer: Always bg-background */ /** * STANDARD DARK SECTION TEMPLATE: * * ```tsx *
// or bg-black *
* // Section content *
*
* ``` */ // ===== COMPONENTS THAT MUST SUPPORT DARK THEME ===== /** * All reusable components must be dark-theme compatible: * * 1. Navigation ✅ (already dark) * 2. Footer ✅ (already dark) * 3. HeroSection ✅ (already dark) * 4. ProcessSection ✅ (already dark) * 5. FAQSection ✅ (updated to dark) * 6. Cards and UI components ✅ (using theme variables) */ // ===== IMPLEMENTATION CHECKLIST ===== /** * FOR EACH PAGE FILE: * * ✅ 1. Main wrapper:
* ✅ 2. All
elements: bg-background or bg-black * ✅ 3. Remove any white/light background classes * ✅ 4. Ensure text colors work with dark backgrounds * ✅ 5. Test component visibility and contrast * ✅ 6. Verify interactive elements (buttons, links) are visible * ✅ 7. Check that borders and separators are visible */ /** * PRIORITY ORDER FOR UPDATES: * * 1. ✅ App.tsx (completed) * 2. ✅ FAQSection.tsx (completed) * 3. Main Category Pages (9 pages) - HIGH PRIORITY * 4. Service Pages (22 pages) - HIGH PRIORITY * 5. Company Pages (8 pages) - MEDIUM PRIORITY * 6. Contact Pages (6 pages) - MEDIUM PRIORITY * 7. Resource Pages (5 pages) - MEDIUM PRIORITY * 8. Solution Pages (6 pages) - LOW PRIORITY * 9. Industry Pages (6 pages) - LOW PRIORITY * 10. Hire Talent Pages (12 pages) - LOW PRIORITY */ // ===== COLOR SCHEME ENFORCEMENT ===== /** * DARK THEME COLOR VARIABLES (from globals.css): * * --background: #0E0E0E // Main dark background * --foreground: #FFFFFF // White text * --card: #121212 // Dark card background * --muted: #1a1a1a // Muted dark background * --accent: #E5195E // WDI pink accent * --border: rgba(255,255,255,0.05) // Subtle borders * * USE THESE TAILWIND CLASSES: * - bg-background (primary dark) * - bg-black (pure black) * - bg-card (dark cards) * - text-foreground (white text) * - text-muted-foreground (gray text) * - border-border (subtle borders) */ /** * TEXT COLOR GUIDELINES: * * - Headings: text-white or text-foreground * - Body text: text-gray-300 or text-muted-foreground * - Accent text: text-[#E5195E] or text-accent * - Muted text: text-gray-400 or text-muted-foreground */ export const DARK_BACKGROUND_ENFORCEMENT_COMPLETE = true; /** * This systematic approach ensures: * ✅ Consistent dark theme across all pages * ✅ No white backgrounds anywhere * ✅ Proper contrast and readability * ✅ WDI brand consistency * ✅ Modern, professional appearance */