280 lines
8.1 KiB
TypeScript
280 lines
8.1 KiB
TypeScript
/**
|
|
* 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: <div className="dark min-h-screen bg-background">
|
|
* 2. Main sections: <section className="py-20 bg-background"> or <section className="py-20 bg-black">
|
|
* 3. Hero sections: <section className="relative py-20 overflow-hidden bg-black">
|
|
* 4. Content sections: <section className="py-32 bg-background">
|
|
* 5. CTA sections: <section className="py-20 bg-background">
|
|
* 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
|
|
* <section className="py-20 bg-background"> // or bg-black
|
|
* <div className="container mx-auto px-6 lg:px-8">
|
|
* // Section content
|
|
* </div>
|
|
* </section>
|
|
* ```
|
|
*/
|
|
|
|
// ===== 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: <div className="dark min-h-screen bg-background">
|
|
* ✅ 2. All <section> 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
|
|
*/ |