diff --git a/COLOR_MIGRATION_GUIDE.md b/COLOR_MIGRATION_GUIDE.md new file mode 100644 index 000000000..9afea7998 --- /dev/null +++ b/COLOR_MIGRATION_GUIDE.md @@ -0,0 +1,180 @@ +# Color Migration Guide + +## Overview +This guide maps old (deprecated) colors to new brand-approved colors based on the VetsWhoCode Brand Style Guide. + +--- + +## Color Mappings + +### Primary Colors + +| Old Color | New Color | Usage | +|-----------|-----------|-------| +| `primary` (was red) | `primary` or `red` | Primary CTAs, accents | +| `secondary` (was blue) | `secondary` or `navy` | Primary brand color | + +### Semantic Colors + +| Old Color | New Color | Reason | +|-----------|-----------|--------| +| `success` (#4CAF50) | `success` or `gold` | Now uses Amber Gold (#FDB330) | +| `warning` (#FFC107) | `warning` or `gold-bright` | Now uses Bright Gold (#FAD643) | +| `danger` (#F44336) | `danger` or `red` | Now uses Brand Red (#c5203e) | +| `info` (#17A2B8) | `info` or `navy-ocean` | Now uses Ocean Blue (#006DAA) | + +### Removed Colors (Map to Brand Colors) + +| Removed Color | Map To | Notes | +|---------------|--------|-------| +| `orange` | `red` or `gold` | Context-dependent | +| `yellow` | `gold` | Amber Gold is brand gold | +| `blue-100` | `navy-sky` or `navy-ocean` | Use navy scale | +| `spring` (#F5F1ED) | `cream` (#EEEDE9) | Use brand cream | +| `desert` | `red` | Was using red anyway | +| `pearl` (#EAE1D6) | `cream` | Similar tone | +| `putty` (#e5c791) | `gold` or `gold-light` | Gold tone | +| `brunt` (#ee7455) | `red` or `red-signal` | Red tone | +| `jagged` (#BCE6DF) | `navy-sky` | Light blue tone | +| `azure` (#00adff) | `navy-ocean` | Blue tone | +| `alto` (#dedede) | `gray-100` (Silver) | Borders/dividers | +| `teracotta` | `red` or `gold` | Context-dependent | +| `scooter` | `navy-ocean` | Blue tone | +| `ebb` (#e9e6e3) | `gray-50` or `cream` | Light neutral | +| `pampas` (#ece8e4) | `cream` | Light background | +| `gore` (#1f1f52) | `navy` or `navy-midnight` | Dark blue | +| `porsche` (#ebb860) | `gold` | Gold tone | +| `mandy` (#df5b6c) | `red` | Red tone | +| `tan` (#d2a98e) | `gold` or `cream` | Warm neutral | +| `mishcka` (#e2e2e8) | `gray-100` | Light gray | + +### Gray Scale Migration + +| Old Gray | New Gray | Color | Usage | +|----------|----------|-------|-------| +| `gray-50` | `gray-50` | #F8F9FA | Off White - light cards | +| `gray-100` | `gray-100` | #DEE2E6 | Silver - borders, dividers | +| `gray-200` | `gray-200` | #6C757D | Slate - secondary text | +| `gray-300` | `gray-300` | #495057 | Charcoal - muted labels | +| `gray-350` | `gray-100` | - | Use Silver | +| `gray-400` | `gray-400` | #343A40 | Dark Gray - text blocks | +| `gray-450` | `gray-50` | - | Use Off White | +| `gray-500` | `gray-50` | - | Use Off White | +| `gray-550` | `gray-50` | - | Use Off White | +| `gray-600` | `gray-300` | - | Use Charcoal | +| `gray-650` | `gray-100` | - | Use Silver | +| `gray-700` | `gray-200` | - | Use Slate | +| `gray-750` | `gray-50` | - | Use Off White | +| `gray-800` | `gray-400` | - | Use Dark Gray | +| `gray-850` | `gray-300` | - | Use Charcoal | + +--- + +## New Brand Colors Available + +### Navy Blue Scale +``` +navy (default): #091f40 +navy-midnight: #061A40 +navy-deep: #003559 +navy-royal: #0353A4 +navy-ocean: #006DAA +navy-sky: #B9D6F2 +``` + +### Red Scale +``` +red (default): #c5203e +red-signal: #C52233 +red-crimson: #A51C30 +red-dark: #74121D +red-maroon: #580C1F +``` + +### Gold Scale +``` +gold (default): #FDB330 +gold-light: #FFE169 +gold-bright: #FAD643 +gold-rich: #DBB42C +gold-deep: #C9A227 +``` + +### Base Colors +``` +cream: #EEEDE9 (backgrounds) +ink: #1A1823 (body text) +white: #FFFFFF +black: #000000 +``` + +### Dark Mode Colors +``` +dark (default): #1A1823 +dark-surface: #212529 +dark-elevated: #343A40 +dark-text: #F8F9FA +dark-text-muted: #DEE2E6 +dark-text-disabled: #6C757D +dark-accent: #84C1FF +dark-accent-hover: #B9D6F2 +dark-error: #F38375 +dark-success: #FFE169 +dark-badge: #FAD643 +``` + +--- + +## Migration Strategy + +### Phase 1: High-Impact Components +1. Navigation/Header +2. Hero sections +3. CTAs (Call-to-action buttons) +4. Forms + +### Phase 2: Content Areas +1. Blog components +2. Course components +3. Team/testimonials +4. Services + +### Phase 3: Utility Components +1. Alerts +2. Badges +3. Cards +4. Modals + +### Phase 4: Admin/Dashboard +1. Admin panels +2. Dashboard components +3. Data tables + +--- + +## Testing Checklist + +- [ ] Header/navigation displays correctly +- [ ] CTAs are prominent with brand red +- [ ] Text has proper contrast (WCAG AA: 4.5:1 minimum) +- [ ] Success states use gold (not green) +- [ ] Info boxes use navy-sky +- [ ] Links use navy-ocean +- [ ] Dark mode colors work properly +- [ ] No console errors about missing colors + +--- + +## Quick Reference Commands + +### Find files using deprecated colors +```bash +grep -r "tw-bg-orange\|tw-text-orange\|tw-border-orange" src/ +grep -r "tw-bg-yellow\|tw-text-yellow\|tw-border-yellow" src/ +grep -r "tw-bg-spring\|tw-text-spring\|tw-border-spring" src/ +``` + +### Find old gray scale usage +```bash +grep -r "gray-350\|gray-450\|gray-550\|gray-650\|gray-750\|gray-800\|gray-850" src/ +``` diff --git a/scripts/replace-deprecated-colors.js b/scripts/replace-deprecated-colors.js new file mode 100755 index 000000000..a9bab6d82 --- /dev/null +++ b/scripts/replace-deprecated-colors.js @@ -0,0 +1,181 @@ +#!/usr/bin/env node +/** + * Replace deprecated colors with brand-approved colors + * Run with: node scripts/replace-deprecated-colors.js + */ + +const fs = require('fs'); +const path = require('path'); +const { execSync } = require('child_process'); + +// Color replacement mappings +const colorReplacements = [ + // Orange → Red or Gold (context-dependent, defaulting to red for CTAs) + { from: /tw-bg-orange(?!-)/g, to: 'tw-bg-red' }, + { from: /tw-text-orange(?!-)/g, to: 'tw-text-red' }, + { from: /tw-border-orange(?!-)/g, to: 'tw-border-red' }, + { from: /tw-bg-orange-light/g, to: 'tw-bg-red-signal/10' }, + { from: /tw-bg-orange-100/g, to: 'tw-bg-red-signal' }, + { from: /tw-bg-orange-200/g, to: 'tw-bg-red-signal' }, + { from: /tw-bg-orange-300/g, to: 'tw-bg-red' }, + { from: /tw-text-orange-100/g, to: 'tw-text-red-signal' }, + { from: /tw-text-orange-200/g, to: 'tw-text-red-signal' }, + { from: /tw-text-orange-300/g, to: 'tw-text-red' }, + + // Yellow → Gold + { from: /tw-bg-yellow(?!-)/g, to: 'tw-bg-gold' }, + { from: /tw-text-yellow(?!-)/g, to: 'tw-text-gold' }, + { from: /tw-border-yellow(?!-)/g, to: 'tw-border-gold' }, + { from: /tw-bg-yellow-100/g, to: 'tw-bg-gold-bright' }, + { from: /tw-text-yellow-100/g, to: 'tw-text-gold-bright' }, + + // Blue-100 → Navy ocean or sky + { from: /tw-bg-blue-100/g, to: 'tw-bg-navy-sky' }, + { from: /tw-text-blue-100/g, to: 'tw-text-navy-ocean' }, + { from: /tw-border-blue-100/g, to: 'tw-border-navy-ocean' }, + + // Spring → Cream + { from: /tw-bg-spring/g, to: 'tw-bg-cream' }, + { from: /tw-text-spring/g, to: 'tw-text-cream' }, + + // Desert → Red (it was using red anyway) + { from: /tw-bg-desert(?!-)/g, to: 'tw-bg-red' }, + { from: /tw-text-desert(?!-)/g, to: 'tw-text-red' }, + { from: /tw-border-desert(?!-)/g, to: 'tw-border-red' }, + { from: /tw-bg-desert-100/g, to: 'tw-bg-cream' }, + + // Pearl → Cream + { from: /tw-bg-pearl/g, to: 'tw-bg-cream' }, + { from: /tw-text-pearl/g, to: 'tw-text-cream' }, + + // Putty → Gold + { from: /tw-bg-putty/g, to: 'tw-bg-gold' }, + { from: /tw-text-putty/g, to: 'tw-text-gold' }, + + // Brunt → Red + { from: /tw-bg-brunt/g, to: 'tw-bg-red' }, + { from: /tw-text-brunt/g, to: 'tw-text-red' }, + + // Jagged → Navy sky + { from: /tw-bg-jagged/g, to: 'tw-bg-navy-sky' }, + { from: /tw-text-jagged/g, to: 'tw-text-navy-sky' }, + + // Azure → Navy ocean + { from: /tw-bg-azure/g, to: 'tw-bg-navy-ocean' }, + { from: /tw-text-azure/g, to: 'tw-text-navy-ocean' }, + { from: /tw-border-azure/g, to: 'tw-border-navy-ocean' }, + + // Alto → Gray-100 (Silver) + { from: /tw-bg-alto/g, to: 'tw-bg-gray-100' }, + { from: /tw-border-alto/g, to: 'tw-border-gray-100' }, + + // Teracotta → Red or Gold (defaulting to red) + { from: /tw-bg-teracotta(?!-)/g, to: 'tw-bg-red' }, + { from: /tw-text-teracotta(?!-)/g, to: 'tw-text-red' }, + { from: /tw-bg-teracotta-light/g, to: 'tw-bg-red-signal/10' }, + + // Scooter → Navy ocean + { from: /tw-bg-scooter(?!-)/g, to: 'tw-bg-navy-ocean' }, + { from: /tw-text-scooter(?!-)/g, to: 'tw-text-navy-ocean' }, + { from: /tw-bg-scooter-light/g, to: 'tw-bg-navy-sky' }, + + // Ebb → Cream or Gray-50 + { from: /tw-bg-ebb/g, to: 'tw-bg-gray-50' }, + + // Pampas → Cream + { from: /tw-bg-pampas/g, to: 'tw-bg-cream' }, + + // Gore → Navy + { from: /tw-bg-gore/g, to: 'tw-bg-navy' }, + { from: /tw-text-gore/g, to: 'tw-text-navy' }, + + // Porsche → Gold + { from: /tw-bg-porsche/g, to: 'tw-bg-gold' }, + { from: /tw-text-porsche/g, to: 'tw-text-gold' }, + + // Mandy → Red + { from: /tw-bg-mandy/g, to: 'tw-bg-red' }, + { from: /tw-text-mandy/g, to: 'tw-text-red' }, + + // Tan → Gold or Cream + { from: /tw-bg-tan/g, to: 'tw-bg-gold-light' }, + { from: /tw-text-tan/g, to: 'tw-text-gold' }, + + // Mishcka → Gray-100 + { from: /tw-bg-mishcka/g, to: 'tw-bg-gray-100' }, + { from: /tw-text-mishcka/g, to: 'tw-text-gray-200' }, + + // Old gray scale replacements + { from: /tw-bg-gray-350/g, to: 'tw-bg-gray-100' }, + { from: /tw-border-gray-350/g, to: 'tw-border-gray-100' }, + { from: /tw-bg-gray-450/g, to: 'tw-bg-gray-50' }, + { from: /tw-bg-gray-500/g, to: 'tw-bg-gray-50' }, + { from: /tw-bg-gray-550/g, to: 'tw-bg-gray-50' }, + { from: /tw-bg-gray-600/g, to: 'tw-bg-gray-300' }, + { from: /tw-text-gray-600/g, to: 'tw-text-gray-300' }, + { from: /tw-bg-gray-650/g, to: 'tw-bg-gray-100' }, + { from: /tw-border-gray-650/g, to: 'tw-border-gray-100' }, + { from: /tw-bg-gray-700/g, to: 'tw-bg-gray-200' }, + { from: /tw-text-gray-700/g, to: 'tw-text-gray-200' }, + { from: /tw-bg-gray-750/g, to: 'tw-bg-gray-50' }, + { from: /tw-bg-gray-800/g, to: 'tw-bg-gray-400' }, + { from: /tw-text-gray-800/g, to: 'tw-text-gray-400' }, + { from: /tw-bg-gray-850/g, to: 'tw-bg-gray-300' }, + { from: /tw-text-gray-850/g, to: 'tw-text-gray-300' }, +]; + +function processFile(filePath) { + let content = fs.readFileSync(filePath, 'utf8'); + let modified = false; + + colorReplacements.forEach(({ from, to }) => { + if (from.test(content)) { + content = content.replace(from, to); + modified = true; + } + }); + + if (modified) { + fs.writeFileSync(filePath, content, 'utf8'); + return true; + } + + return false; +} + +function findAndReplaceInDirectory(dir) { + const files = execSync(`find ${dir} -type f \\( -name "*.tsx" -o -name "*.ts" -o -name "*.jsx" -o -name "*.js" \\) ! -path "*/node_modules/*" ! -path "*/.next/*"`, { + encoding: 'utf8', + }).trim().split('\n').filter(Boolean); + + let modifiedCount = 0; + const modifiedFiles = []; + + files.forEach(file => { + if (processFile(file)) { + modifiedCount++; + modifiedFiles.push(file); + } + }); + + return { modifiedCount, modifiedFiles }; +} + +// Main execution +console.log('🎨 Starting color replacement...\n'); + +const srcDir = path.join(process.cwd(), 'src'); +const { modifiedCount, modifiedFiles } = findAndReplaceInDirectory(srcDir); + +console.log(`\n✅ Replaced deprecated colors in ${modifiedCount} files\n`); + +if (modifiedFiles.length > 0 && modifiedFiles.length <= 20) { + console.log('Modified files:'); + modifiedFiles.forEach(file => { + console.log(` - ${file.replace(process.cwd() + '/', '')}`); + }); +} else if (modifiedFiles.length > 20) { + console.log(`Modified ${modifiedFiles.length} files (too many to list)`); +} + +console.log('\n✨ Color replacement complete!\n'); diff --git a/scripts/replace-tailwind-default-colors.js b/scripts/replace-tailwind-default-colors.js new file mode 100644 index 000000000..871f26d38 --- /dev/null +++ b/scripts/replace-tailwind-default-colors.js @@ -0,0 +1,159 @@ +#!/usr/bin/env node +/** + * Replace standard Tailwind colors with brand-approved colors + * This handles orange-*, yellow-*, and other default Tailwind colors + */ + +const fs = require('fs'); +const path = require('path'); +const { execSync } = require('child_process'); + +// Map standard Tailwind colors to brand colors +const replacements = [ + // Orange shades → Red shades + { from: /tw-bg-orange-50/g, to: 'tw-bg-red-signal/10' }, + { from: /tw-border-orange-50/g, to: 'tw-border-red-signal/10' }, + { from: /tw-bg-orange-100/g, to: 'tw-bg-red-signal/20' }, + { from: /tw-bg-orange-200/g, to: 'tw-bg-red-signal/30' }, + { from: /tw-border-orange-200/g, to: 'tw-border-red-signal/30' }, + { from: /tw-bg-orange-300/g, to: 'tw-bg-red-signal' }, + { from: /tw-bg-orange-400/g, to: 'tw-bg-red' }, + { from: /tw-bg-orange-500/g, to: 'tw-bg-red' }, + { from: /tw-bg-orange-600/g, to: 'tw-bg-red' }, + { from: /tw-bg-orange-700/g, to: 'tw-bg-red-crimson' }, + { from: /tw-bg-orange-800/g, to: 'tw-bg-red-dark' }, + { from: /tw-bg-orange-900/g, to: 'tw-bg-red-maroon' }, + + { from: /tw-text-orange-50/g, to: 'tw-text-red-signal/10' }, + { from: /tw-text-orange-100/g, to: 'tw-text-red-signal/20' }, + { from: /tw-text-orange-200/g, to: 'tw-text-red-signal/30' }, + { from: /tw-text-orange-300/g, to: 'tw-text-red-signal' }, + { from: /tw-text-orange-400/g, to: 'tw-text-red' }, + { from: /tw-text-orange-500/g, to: 'tw-text-red' }, + { from: /tw-text-orange-600/g, to: 'tw-text-red' }, + { from: /tw-text-orange-700/g, to: 'tw-text-red-crimson' }, + { from: /tw-text-orange-800/g, to: 'tw-text-red-dark' }, + { from: /tw-text-orange-900/g, to: 'tw-text-red-maroon' }, + + { from: /hover:tw-bg-orange-700/g, to: 'hover:tw-bg-red-crimson' }, + { from: /hover:tw-text-orange-800/g, to: 'hover:tw-text-red-dark' }, + + // Yellow shades → Gold shades + { from: /tw-bg-yellow-50/g, to: 'tw-bg-gold-light/20' }, + { from: /tw-bg-yellow-100/g, to: 'tw-bg-gold-light/30' }, + { from: /tw-bg-yellow-200/g, to: 'tw-bg-gold-light' }, + { from: /tw-bg-yellow-300/g, to: 'tw-bg-gold-bright' }, + { from: /tw-bg-yellow-400/g, to: 'tw-bg-gold' }, + { from: /tw-bg-yellow-500/g, to: 'tw-bg-gold' }, + { from: /tw-bg-yellow-600/g, to: 'tw-bg-gold-rich' }, + { from: /tw-bg-yellow-700/g, to: 'tw-bg-gold-deep' }, + { from: /tw-bg-yellow-800/g, to: 'tw-bg-gold-deep' }, + + { from: /tw-text-yellow-50/g, to: 'tw-text-gold-light/20' }, + { from: /tw-text-yellow-100/g, to: 'tw-text-gold-light/30' }, + { from: /tw-text-yellow-200/g, to: 'tw-text-gold-light' }, + { from: /tw-text-yellow-300/g, to: 'tw-text-gold-bright' }, + { from: /tw-text-yellow-400/g, to: 'tw-text-gold' }, + { from: /tw-text-yellow-500/g, to: 'tw-text-gold' }, + { from: /tw-text-yellow-600/g, to: 'tw-text-gold-rich' }, + { from: /tw-text-yellow-700/g, to: 'tw-text-gold-deep' }, + { from: /tw-text-yellow-800/g, to: 'tw-text-gold-deep' }, + + { from: /tw-border-yellow-500/g, to: 'tw-border-gold' }, + + // Green shades → Gold shades (for success states) + { from: /tw-bg-green-50/g, to: 'tw-bg-gold-light/20' }, + { from: /tw-bg-green-100/g, to: 'tw-bg-gold-light/30' }, + { from: /tw-bg-green-500/g, to: 'tw-bg-gold' }, + { from: /tw-bg-green-600/g, to: 'tw-bg-gold-rich' }, + { from: /tw-text-green-600/g, to: 'tw-text-gold' }, + { from: /tw-text-green-700/g, to: 'tw-text-gold-rich' }, + { from: /tw-text-green-800/g, to: 'tw-text-gold-deep' }, + + // Blue shades → Navy shades + { from: /tw-bg-blue-50/g, to: 'tw-bg-navy-sky/20' }, + { from: /tw-bg-blue-100/g, to: 'tw-bg-navy-sky/30' }, + { from: /tw-bg-blue-500/g, to: 'tw-bg-navy-ocean' }, + { from: /tw-bg-blue-600/g, to: 'tw-bg-navy-royal' }, + { from: /tw-bg-blue-700/g, to: 'tw-bg-navy' }, + + { from: /tw-text-blue-50/g, to: 'tw-text-navy-sky/20' }, + { from: /tw-text-blue-100/g, to: 'tw-text-navy-sky' }, + { from: /tw-text-blue-500/g, to: 'tw-text-navy-ocean' }, + { from: /tw-text-blue-600/g, to: 'tw-text-navy-royal' }, + { from: /tw-text-blue-700/g, to: 'tw-text-navy' }, + + { from: /tw-border-blue-500/g, to: 'tw-border-navy-ocean' }, + { from: /tw-border-blue-600/g, to: 'tw-border-navy-royal' }, + + // Purple/Indigo → Navy shades + { from: /tw-bg-purple-50/g, to: 'tw-bg-navy-sky/20' }, + { from: /tw-bg-purple-500/g, to: 'tw-bg-navy-royal' }, + { from: /tw-bg-purple-600/g, to: 'tw-bg-navy' }, + { from: /tw-text-purple-600/g, to: 'tw-text-navy' }, + + { from: /tw-bg-indigo-50/g, to: 'tw-bg-navy-sky/20' }, + { from: /tw-bg-indigo-500/g, to: 'tw-bg-navy-royal' }, + { from: /tw-bg-indigo-600/g, to: 'tw-bg-navy' }, + { from: /tw-text-indigo-600/g, to: 'tw-text-navy' }, +]; + +function processFile(filePath) { + let content = fs.readFileSync(filePath, 'utf8'); + let modified = false; + + replacements.forEach(({ from, to }) => { + if (from.test(content)) { + content = content.replace(from, to); + modified = true; + } + }); + + if (modified) { + fs.writeFileSync(filePath, content, 'utf8'); + return true; + } + + return false; +} + +function findAndReplaceInDirectory(dir) { + const files = execSync( + `find ${dir} -type f \\( -name "*.tsx" -o -name "*.ts" -o -name "*.jsx" -o -name "*.js" \\) ! -path "*/node_modules/*" ! -path "*/.next/*"`, + { encoding: 'utf8' } + ) + .trim() + .split('\n') + .filter(Boolean); + + let modifiedCount = 0; + const modifiedFiles = []; + + files.forEach((file) => { + if (processFile(file)) { + modifiedCount++; + modifiedFiles.push(file); + } + }); + + return { modifiedCount, modifiedFiles }; +} + +// Main execution +console.log('🎨 Replacing standard Tailwind colors with brand colors...\n'); + +const srcDir = path.join(process.cwd(), 'src'); +const { modifiedCount, modifiedFiles } = findAndReplaceInDirectory(srcDir); + +console.log(`\n✅ Updated ${modifiedCount} files\n`); + +if (modifiedFiles.length > 0 && modifiedFiles.length <= 20) { + console.log('Modified files:'); + modifiedFiles.forEach((file) => { + console.log(` - ${file.replace(process.cwd() + '/', '')}`); + }); +} else if (modifiedFiles.length > 20) { + console.log(`Modified ${modifiedFiles.length} files (too many to list)`); +} + +console.log('\n✨ Complete!\n'); diff --git a/src/components/admin-dashboard-components.tsx b/src/components/admin-dashboard-components.tsx index 81660d676..8c050e1b9 100644 --- a/src/components/admin-dashboard-components.tsx +++ b/src/components/admin-dashboard-components.tsx @@ -23,7 +23,7 @@ const ProgressBar = ({ progress }: { progress: number }) => { }; return ( -
+
); @@ -41,9 +41,9 @@ export const OverviewStats = () => {
{stats.map((stat) => (
-

{stat.label}

+

{stat.label}

{stat.value}

-

+

{stat.change} from last month

@@ -61,7 +61,7 @@ export const VerticalProgress = () => { return (
-

+

Course Verticals Progress

@@ -71,8 +71,8 @@ export const VerticalProgress = () => { className="tw-border-b tw-border-gray-200 tw-pb-4 last:tw-border-b-0" >
- {vertical.name} - + {vertical.name} + {vertical.enrolled} enrolled · {vertical.avgProgress}% avg progress
@@ -88,7 +88,7 @@ export const AnalyticsCharts = () => { return (
-

+

Enrollment Trends

@@ -98,7 +98,7 @@ export const AnalyticsCharts = () => {
-

+

Completion Rates

@@ -137,7 +137,7 @@ export const TabNavigation = ({ className={`tw-border-b-2 tw-px-1 tw-py-2 tw-text-sm tw-font-medium ${ activeTab === tab.id ? "tw-border-primary tw-text-primary" - : "tw-border-transparent tw-text-gray-500 hover:tw-border-gray-300 hover:tw-text-gray-700" + : "tw-border-transparent tw-text-gray-500 hover:tw-border-gray-300 hover:tw-text-gray-200" }`} > {tab.label} @@ -168,9 +168,9 @@ export const UserProgress = ({ progress }: { progress: number }) => { }; return ( -
+
- {progress}% + {progress}%
); }; @@ -206,7 +206,7 @@ export const UserManagement = () => { return (
-

User Management

+

User Management

diff --git a/src/components/game/AnswerButtons.tsx b/src/components/game/AnswerButtons.tsx index 50f3a74d8..e480d138a 100644 --- a/src/components/game/AnswerButtons.tsx +++ b/src/components/game/AnswerButtons.tsx @@ -26,7 +26,7 @@ const AnswerButtons: React.FC = ({ onAnswer, branches, disab key={branch} onClick={() => onAnswer(branch)} disabled={disabled} - className="tw-flex tw-h-[80px] tw-flex-col tw-items-center tw-justify-center tw-rounded-lg tw-bg-gray-200 tw-px-4 tw-py-3 tw-font-medium tw-text-secondary tw-shadow-md tw-transition-all hover:tw-scale-105 hover:tw-bg-primary hover:tw-text-white focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-primary focus:tw-ring-offset-2 disabled:tw-opacity-70" + className="tw-flex tw-h-[80px] tw-flex-col tw-items-center tw-justify-center tw-rounded-lg tw-bg-gray-50 tw-px-4 tw-py-3 tw-font-medium tw-text-secondary tw-shadow-md tw-transition-all hover:tw-scale-105 hover:tw-bg-primary hover:tw-text-white focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-primary focus:tw-ring-offset-2 disabled:tw-opacity-70" > {branch} diff --git a/src/components/gradation/index.tsx b/src/components/gradation/index.tsx index 8ed90f05b..6d0b83d4a 100644 --- a/src/components/gradation/index.tsx +++ b/src/components/gradation/index.tsx @@ -22,7 +22,7 @@ const Gradation = forwardRef( )} ref={ref} > -
+
( {description && ( -

+

{description}

)} diff --git a/src/components/pagination/pagination-01-button.tsx b/src/components/pagination/pagination-01-button.tsx index 3d4285c3e..2e416a038 100644 --- a/src/components/pagination/pagination-01-button.tsx +++ b/src/components/pagination/pagination-01-button.tsx @@ -51,7 +51,7 @@ const Pagination = ({ numberOfPages, currentPage, className }: TProps) => { "tw-block tw-h-12 tw-w-12 tw-rounded-full tw-text-center tw-font-extrabold tw-uppercase tw-leading-[48px] -tw-tracking-tightest hover:tw-text-heading", currentPage !== i + 1 && "tw-text-gray-400", currentPage === i + 1 && - "tw-pointer-events-none tw-bg-gray-500 tw-text-heading" + "tw-pointer-events-none tw-bg-gray-50 tw-text-heading" )} onClick={() => pagiHandler(`${i + 1}`)} > diff --git a/src/components/pagination/pagination-01.tsx b/src/components/pagination/pagination-01.tsx index 17b593f15..1481ddc62 100644 --- a/src/components/pagination/pagination-01.tsx +++ b/src/components/pagination/pagination-01.tsx @@ -78,7 +78,7 @@ const Pagination = ({ currentPage, numberOfPages, rootPage = "blog", className } "tw-block tw-h-12 tw-w-12 tw-rounded-full tw-text-center tw-leading-[48px] -tw-tracking-tightest hover:tw-text-heading", currentPage !== pagi && "tw-text-gray-400", currentPage === pagi && - "tw-pointer-events-none tw-bg-gray-500 tw-text-heading" + "tw-pointer-events-none tw-bg-gray-50 tw-text-heading" )} path={`${ pagi === 1 ? `/${rootPage}` : `/${rootPage}/page/${pagi}` diff --git a/src/components/product-card/product-card.tsx b/src/components/product-card/product-card.tsx index 94d14aad7..2b9450677 100644 --- a/src/components/product-card/product-card.tsx +++ b/src/components/product-card/product-card.tsx @@ -70,7 +70,7 @@ const ProductCard = forwardRef( {!product.availableForSale && (
- + Sold Out
@@ -87,12 +87,12 @@ const ProductCard = forwardRef( {product.title} {product.vendor && ( - {product.vendor} + {product.vendor} )}
{product.description && ( -

+

{product.description}

)} @@ -109,7 +109,7 @@ const ProductCard = forwardRef( "tw-px-4 tw-py-2 tw-rounded-lg tw-font-semibold tw-text-sm tw-transition-all tw-duration-300", product.availableForSale ? "tw-bg-primary tw-text-white hover:tw-bg-primary-dark hover:tw-shadow-lg disabled:tw-opacity-50 disabled:tw-cursor-not-allowed" - : "tw-bg-gray-300 tw-text-gray-600 tw-cursor-not-allowed" + : "tw-bg-gray-300 tw-text-gray-300 tw-cursor-not-allowed" )} > {isAdding ? "Adding..." : product.availableForSale ? "Add to Cart" : "Unavailable"} diff --git a/src/components/program-card/index.tsx b/src/components/program-card/index.tsx index 5d8b5c2dd..dd90539cf 100644 --- a/src/components/program-card/index.tsx +++ b/src/components/program-card/index.tsx @@ -14,10 +14,10 @@ const ProgramCard = ({ program }: Props) => { return (

{program.title}

-

{program.description}

+

{program.description}

Learn more diff --git a/src/components/section-title/index.tsx b/src/components/section-title/index.tsx index e2151a504..a3bce6789 100644 --- a/src/components/section-title/index.tsx +++ b/src/components/section-title/index.tsx @@ -45,6 +45,7 @@ const SectionTitle = forwardRef( "tw-mb-2.5 tw-block tw-text-base tw-font-medium tw-uppercase tw-leading-none -tw-tracking-tightest", color === "A" && "tw-text-secondary-light", color === "B" && "tw-text-secondary", + color === "C" && "tw-text-white", subtitleClass )} dangerouslySetInnerHTML={{ __html: subtitle }} diff --git a/src/components/shopping-cart/shopping-cart.tsx b/src/components/shopping-cart/shopping-cart.tsx index db2546fee..dd16b8c90 100644 --- a/src/components/shopping-cart/shopping-cart.tsx +++ b/src/components/shopping-cart/shopping-cart.tsx @@ -69,7 +69,7 @@ const ShoppingCart: React.FC = ({ isOpen, onClose }) => { @@ -169,7 +169,7 @@ const ShoppingCart: React.FC = ({ isOpen, onClose }) => { handleUpdateQuantity(line.id, line.quantity + 1) } disabled={isLoading} - className="tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-bg-white tw-border tw-border-gray-300 tw-rounded tw-text-gray-700 hover:tw-bg-gray-100 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed" + className="tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-bg-white tw-border tw-border-gray-300 tw-rounded tw-text-gray-200 hover:tw-bg-gray-100 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed" > + @@ -208,7 +208,7 @@ const ShoppingCart: React.FC = ({ isOpen, onClose }) => { Proceed to Checkout -

+

Shipping and taxes calculated at checkout

diff --git a/src/components/team-card/index.tsx b/src/components/team-card/index.tsx index d6b6e87de..d805a86d7 100644 --- a/src/components/team-card/index.tsx +++ b/src/components/team-card/index.tsx @@ -32,7 +32,7 @@ const TeamCard = forwardRef( />
) : ( -
+
No Image
)} diff --git a/src/components/testimonial/rating-box.tsx b/src/components/testimonial/rating-box.tsx index 8275768d4..e59e18c4d 100644 --- a/src/components/testimonial/rating-box.tsx +++ b/src/components/testimonial/rating-box.tsx @@ -10,12 +10,12 @@ const RatingBox = ({ className, heading, text }: TProps) => { return (

{heading}

-
+
diff --git a/src/components/testimonial/testimonial-03.tsx b/src/components/testimonial/testimonial-03.tsx index b835bfe92..63c8c9a4a 100644 --- a/src/components/testimonial/testimonial-03.tsx +++ b/src/components/testimonial/testimonial-03.tsx @@ -10,7 +10,7 @@ const Testimonial03 = ({ description, name, designation, image, className }: TPr return (
diff --git a/src/components/testimonial/testimonial-04.tsx b/src/components/testimonial/testimonial-04.tsx index 730a62ef3..f4524a3a3 100644 --- a/src/components/testimonial/testimonial-04.tsx +++ b/src/components/testimonial/testimonial-04.tsx @@ -9,7 +9,7 @@ const Testimonial04 = ({ title, className }: TProps) => { return (
diff --git a/src/components/translator/ResumeTranslator.tsx b/src/components/translator/ResumeTranslator.tsx index 8b256132d..c105966c7 100644 --- a/src/components/translator/ResumeTranslator.tsx +++ b/src/components/translator/ResumeTranslator.tsx @@ -105,7 +105,7 @@ const ResumeTranslator: React.FC = ({ className }) => {

Military Resume Translator

-

+

Transform your military experience into civilian-friendly resume language. Enter your military job details below and we'll help you translate them into terms that civilian employers understand. @@ -254,7 +254,7 @@ const ResumeTranslator: React.FC = ({ className }) => {

Job Title

-

+

{translatedProfile.jobTitle}

@@ -264,7 +264,7 @@ const ResumeTranslator: React.FC = ({ className }) => {

Professional Summary

-

{translatedProfile.summary}

+

{translatedProfile.summary}

{/* Key Responsibilities */} @@ -277,7 +277,7 @@ const ResumeTranslator: React.FC = ({ className }) => { {translatedProfile.keyResponsibilities.map((resp, idx) => (
  • • @@ -299,7 +299,7 @@ const ResumeTranslator: React.FC = ({ className }) => { {translatedProfile.achievements.map((achievement, idx) => (
  • • @@ -313,7 +313,7 @@ const ResumeTranslator: React.FC = ({ className }) => { {/* Suggestions */} {suggestions.length > 0 && ( -
    +

    Tips for Improvement

    @@ -321,9 +321,9 @@ const ResumeTranslator: React.FC = ({ className }) => { {suggestions.map((suggestion, idx) => (
  • - + ℹ️ {suggestion} @@ -344,7 +344,7 @@ const ResumeTranslator: React.FC = ({ className }) => { diff --git a/src/components/ui/alert/index.tsx b/src/components/ui/alert/index.tsx index 509f12f6f..a934cc005 100644 --- a/src/components/ui/alert/index.tsx +++ b/src/components/ui/alert/index.tsx @@ -11,7 +11,7 @@ const Alert = ({ className, children, color }: TProps) => {
    { className={clsx( "tw-inline-flex tw-items-center tw-justify-center tw-leading-none", variant === "contained" && [ - color === "teracotta" && "tw-bg-teracotta-light tw-text-teracotta", - color === "scooter" && "tw-bg-scooter-light tw-text-scooter", + color === "teracotta" && "tw-bg-red-signal/10 tw-text-red", + color === "scooter" && "tw-bg-navy-sky tw-text-navy-ocean", color === "primary" && "tw-bg-primary tw-text-white", color === "gradient" && "tw-bg-strawGradient tw-text-white", ], diff --git a/src/components/ui/bottom-shape/shape-03.tsx b/src/components/ui/bottom-shape/shape-03.tsx index 2285dadf5..d2508f160 100644 --- a/src/components/ui/bottom-shape/shape-03.tsx +++ b/src/components/ui/bottom-shape/shape-03.tsx @@ -20,7 +20,7 @@ const BottomShape = ({ className, color }: TProps) => { }; BottomShape.defaultProps = { - color: "tw-fill-light-100", + color: "tw-fill-white", }; export default BottomShape; diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx index e8130c046..79485140e 100644 --- a/src/components/ui/button/index.tsx +++ b/src/components/ui/button/index.tsx @@ -125,7 +125,7 @@ const Button = ({ ]; // Light Button - const containedLightClass = "tw-bg-light tw-border-light tw-text-heading tw-shadow-sm"; + const containedLightClass = "tw-bg-white tw-border-white tw-text-navy tw-shadow-sm"; const containedLightHoverClass = !disabled && !active && @@ -142,7 +142,7 @@ const Button = ({ lightHoverClass, ]; - const outlinedLightClass = "tw-border-light tw-text-light"; + const outlinedLightClass = "tw-border-white tw-text-white"; const outlinedLightHoverClass = !disabled && !active && diff --git a/src/components/ui/form-elements/checkbox.tsx b/src/components/ui/form-elements/checkbox.tsx index 8f37c0c87..561000dfa 100644 --- a/src/components/ui/form-elements/checkbox.tsx +++ b/src/components/ui/form-elements/checkbox.tsx @@ -32,7 +32,7 @@ const Checkbox = forwardRef( ref ) => { const beforeClass = - "before:tw-absolute before:tw-content[''] before:tw-w-full before:tw-h-full before:tw-top-px before:tw-left-0 before:tw-transition-colors before:tw-duration-300 before:tw-bg-gray-200 before:tw-border before:tw-border-gray-200 before:tw-rounded-sm"; + "before:tw-absolute before:tw-content[''] before:tw-w-full before:tw-h-full before:tw-top-px before:tw-left-0 before:tw-transition-colors before:tw-duration-300 before:tw-bg-gray-50 before:tw-border before:tw-border-gray-200 before:tw-rounded-sm"; const disabledClass = disabled && "tw-opacity-50 before:tw-opacity-50 after:tw-opacity-50"; const afterClass = "after:tw-absolute after:tw-content[''] after:tw-block after:tw-bg-primary after:tw-w-2 after:tw-h-2 after:tw-top-1/2 after:tw-left-1/2 after:-tw-translate-x-1/2 after:-tw-translate-y-1/2 after:tw-scale-0 after:tw-transition-transform after:tw-duration-300 after:tw-rounded-sm after:z-10"; diff --git a/src/components/ui/form-elements/input.tsx b/src/components/ui/form-elements/input.tsx index 7d5695fab..ae2f87943 100644 --- a/src/components/ui/form-elements/input.tsx +++ b/src/components/ui/form-elements/input.tsx @@ -68,7 +68,7 @@ const Input = forwardRef( focusBorderClass, noFocusClass, bg === "white" && "tw-bg-white", - bg === "light" && "tw-bg-gray-200", + bg === "light" && "tw-bg-gray-50", className )} id={id} diff --git a/src/components/ui/form-elements/textarea.tsx b/src/components/ui/form-elements/textarea.tsx index 265fc50fd..4d033e61d 100644 --- a/src/components/ui/form-elements/textarea.tsx +++ b/src/components/ui/form-elements/textarea.tsx @@ -44,7 +44,7 @@ const Textarea = forwardRef( const successClass = !showErrorOnly && state === "success" && "!tw-border-success"; const warningClass = !showErrorOnly && state === "warning" && "!tw-border-warning"; const errorClass = state === "error" && "!tw-border-danger"; - const focusBorderClass = customStyle !== "nofocus" && !state && "focus:tw-border-blue-100"; + const focusBorderClass = customStyle !== "nofocus" && !state && "focus:tw-border-navy-ocean"; const noFocusClass = customStyle === "nofocus" && "focus:tw-outline-0"; return ( @@ -64,7 +64,7 @@ const Textarea = forwardRef( focusBorderClass, noFocusClass, bg === "white" && "tw-bg-white", - bg === "light" && "tw-bg-gray-200", + bg === "light" && "tw-bg-gray-50", className )} id={id} diff --git a/src/components/ui/motto-text/index.tsx b/src/components/ui/motto-text/index.tsx index 1dc0b95ae..acf890ba4 100644 --- a/src/components/ui/motto-text/index.tsx +++ b/src/components/ui/motto-text/index.tsx @@ -26,7 +26,7 @@ const MottoText = forwardRef( path={path} className={clsx( "tw-relative tw-py-[3px] tw-font-bold tw-leading-none tw-text-primary", - "before:tw-absolute before:tw-bottom-0 before:tw-left-0 before:tw-h-px before:tw-w-full before:tw-origin-right before:tw-scale-x-100 before:tw-bg-gray-350 before:tw-transition-transform before:tw-delay-300 before:tw-duration-600 before:tw-ease-in-expo before:tw-content-['']", + "before:tw-absolute before:tw-bottom-0 before:tw-left-0 before:tw-h-px before:tw-w-full before:tw-origin-right before:tw-scale-x-100 before:tw-bg-gray-100 before:tw-transition-transform before:tw-delay-300 before:tw-duration-600 before:tw-ease-in-expo before:tw-content-['']", "after:tw-absolute after:tw-bottom-0 after:tw-left-0 after:tw-h-px after:tw-w-full after:tw-origin-left after:tw-scale-x-0 after:tw-bg-primary after:tw-transition-transform after:tw-delay-75 after:tw-duration-600 after:tw-ease-in-expo after:tw-content-['']", "hover:before:tw-scale-x-0 hover:before:tw-delay-75 hover:after:tw-scale-x-100 hover:after:tw-delay-300" )} diff --git a/src/components/ui/nice-select/index.tsx b/src/components/ui/nice-select/index.tsx index 8d2bd89c6..99d730352 100644 --- a/src/components/ui/nice-select/index.tsx +++ b/src/components/ui/nice-select/index.tsx @@ -49,7 +49,7 @@ const NiceSelect = ({ className, options, setValue, prefix, defaultValue }: TPro
    = ({ size === "lg" && "tw-h-5", ]; return ( -
    +
    { { {remainder > 0 && ( { }; Wrapper.defaultProps = { - color: "tw-bg-spring", + color: "tw-bg-cream", }; export default Wrapper; diff --git a/src/components/ui/wrapper/wrapper-02.tsx b/src/components/ui/wrapper/wrapper-02.tsx index cefabb7e2..6bf9c66ba 100644 --- a/src/components/ui/wrapper/wrapper-02.tsx +++ b/src/components/ui/wrapper/wrapper-02.tsx @@ -20,7 +20,7 @@ const Wrapper = ({ children, className, color }: TProps) => { }; Wrapper.defaultProps = { - color: "tw-bg-light-100", + color: "tw-bg-gray-50", }; export default Wrapper; diff --git a/src/components/ui/wrapper/wrapper-04.tsx b/src/components/ui/wrapper/wrapper-04.tsx index e56196091..cf31fc249 100644 --- a/src/components/ui/wrapper/wrapper-04.tsx +++ b/src/components/ui/wrapper/wrapper-04.tsx @@ -19,21 +19,21 @@ const Wrapper = ({ children, className, showBalls }: TProps) => { {showBalls && ( <> -
    +
    -
    -
    -
    +
    +
    +
    ); @@ -117,7 +117,7 @@ export default function URLPreviewCard({ url, className = '' }: URLPreviewCardPr href={url} target="_blank" rel="noopener noreferrer" - className="tw-text-blue-600 tw-text-sm tw-underline tw-break-all" + className="tw-text-navy-royal tw-text-sm tw-underline tw-break-all" > {url} @@ -165,11 +165,11 @@ export default function URLPreviewCard({ url, className = '' }: URLPreviewCardPr
    )} -

    +

    {metadata.title}

    {metadata.description && ( -

    +

    {metadata.description}

    )} diff --git a/src/components/widgets/popular-tags-widget.tsx b/src/components/widgets/popular-tags-widget.tsx index db326bba0..e3bd4aedc 100644 --- a/src/components/widgets/popular-tags-widget.tsx +++ b/src/components/widgets/popular-tags-widget.tsx @@ -14,7 +14,7 @@ const PopularTagsWidget = ({ tags }: TProps) => { {tag.title} diff --git a/src/components/zoom-card/index.tsx b/src/components/zoom-card/index.tsx index e0fd1c2be..6160ec442 100644 --- a/src/components/zoom-card/index.tsx +++ b/src/components/zoom-card/index.tsx @@ -47,7 +47,7 @@ const ZoomCard = forwardRef(
    - + Meeting ID:{" "} diff --git a/src/containers/about/layout-02/index.tsx b/src/containers/about/layout-02/index.tsx index db84fdfea..12437bdec 100644 --- a/src/containers/about/layout-02/index.tsx +++ b/src/containers/about/layout-02/index.tsx @@ -70,7 +70,7 @@ const AboutArea = ({ data: { section_title, motto, images }, space, bg, titleSiz y: trans1().y, }} > - + shape 1 @@ -108,7 +108,7 @@ const AboutArea = ({ data: { section_title, motto, images }, space, bg, titleSiz }; AboutArea.defaultProps = { - bg: "tw-bg-gray-200", + bg: "tw-bg-gray-50", }; export default AboutArea; diff --git a/src/containers/app-download/index.tsx b/src/containers/app-download/index.tsx index 3b8cd8a4f..70266ad23 100644 --- a/src/containers/app-download/index.tsx +++ b/src/containers/app-download/index.tsx @@ -67,7 +67,7 @@ const AppDownloadArea = ({ y: trans2().y, }} > - + shape 1 diff --git a/src/containers/blog/layout-01/index.tsx b/src/containers/blog/layout-01/index.tsx index 3b4649ec6..82865bf16 100644 --- a/src/containers/blog/layout-01/index.tsx +++ b/src/containers/blog/layout-01/index.tsx @@ -146,7 +146,7 @@ const BlogArea = ({ data: { section_title, motto, blogs }, space, bg, titleSize BlogArea.defaultProps = { space: "top-bottom", - bg: "tw-bg-gray-200", + bg: "tw-bg-gray-50", }; export default BlogArea; diff --git a/src/containers/blog/layout-02/index.tsx b/src/containers/blog/layout-02/index.tsx index ff3b08200..3d3388a6d 100644 --- a/src/containers/blog/layout-02/index.tsx +++ b/src/containers/blog/layout-02/index.tsx @@ -71,7 +71,7 @@ const BlogArea = ({ }; BlogArea.defaultProps = { - bg: "tw-bg-spring", + bg: "tw-bg-cream", }; export default BlogArea; diff --git a/src/containers/blog/layout-03/index.tsx b/src/containers/blog/layout-03/index.tsx index 036ed1254..47f9f823f 100644 --- a/src/containers/blog/layout-03/index.tsx +++ b/src/containers/blog/layout-03/index.tsx @@ -24,6 +24,7 @@ const BlogArea = ({ data: { section_title, blogs }, space, bg, titleSize }: TPro { {curriculum.map(({ id, title, description, lessons }) => (
    {title}
    diff --git a/src/containers/course-details/enrollment-sidebar.tsx b/src/containers/course-details/enrollment-sidebar.tsx index 29af4bf66..42c7de3aa 100644 --- a/src/containers/course-details/enrollment-sidebar.tsx +++ b/src/containers/course-details/enrollment-sidebar.tsx @@ -85,14 +85,14 @@ const EnrollmentSidebar = ({ course }: TProps) => { {/* Enrollment Card */}
    -
    FREE
    -

    For veterans & military spouses

    +
    FREE
    +

    For veterans & military spouses

    {checkingEnrollment ? (
    -

    Checking enrollment...

    +

    Checking enrollment...

    ) : (
    @@ -100,7 +100,7 @@ const EnrollmentSidebar = ({ course }: TProps) => {
    {isEnrolled ? (
    -
    +
    ✓ Enrolled
    { )} -

    +

    Access interactive lessons, assignments, and progress tracking

    @@ -147,7 +147,7 @@ const EnrollmentSidebar = ({ course }: TProps) => { > Sign In to Enroll -

    +

    Join the learning platform for hands-on experience

    @@ -157,10 +157,10 @@ const EnrollmentSidebar = ({ course }: TProps) => { {/* Course Info */}
    -

    +

    What's Included:

    -
      +
      • Course materials & resources @@ -186,7 +186,7 @@ const EnrollmentSidebar = ({ course }: TProps) => { {/* Quick Links */}
        -

        Quick Links:

        +

        Quick Links:

        { }; CtaArea.defaultProps = { - bg: "tw-bg-gray-200", + bg: "tw-bg-gray-50", }; export default CtaArea; diff --git a/src/containers/cta/layout-02/index.tsx b/src/containers/cta/layout-02/index.tsx index 507fecf66..b6b3cc5d2 100644 --- a/src/containers/cta/layout-02/index.tsx +++ b/src/containers/cta/layout-02/index.tsx @@ -86,7 +86,7 @@ const CtaArea = ({ data: { section_title, buttons }, space, bg }: TProps) => { }; CtaArea.defaultProps = { - bg: "tw-bg-gray-200", + bg: "tw-bg-gray-50", }; export default CtaArea; diff --git a/src/containers/gradation/index.tsx b/src/containers/gradation/index.tsx index b45a42cf5..3bb738d40 100644 --- a/src/containers/gradation/index.tsx +++ b/src/containers/gradation/index.tsx @@ -41,7 +41,7 @@ const GradationArea = ({ data: { section_title, items } }: TProps) => { viewport={{ once: true, amount: 0.4 }} variants={scrollUpVariants} > - + {items?.length.toString() || "0"} Steps diff --git a/src/containers/hero/layout-01/index.tsx b/src/containers/hero/layout-01/index.tsx index 7845aec44..226778b1a 100644 --- a/src/containers/hero/layout-01/index.tsx +++ b/src/containers/hero/layout-01/index.tsx @@ -21,7 +21,7 @@ const HeroArea = ({ data: { headings, texts, buttons, images, popularCourse } }: const { trans1 } = useUI(); return ( -
        +

        Home Page

        {images?.[0]?.src && ( diff --git a/src/containers/hero/layout-04/index.tsx b/src/containers/hero/layout-04/index.tsx index 9cbd6f1c6..cf4f2524b 100644 --- a/src/containers/hero/layout-04/index.tsx +++ b/src/containers/hero/layout-04/index.tsx @@ -48,7 +48,7 @@ const HeroArea = ({ data: { images, headings, texts, buttons, video } }: TProps) left: 0, width: "100%", height: "100%", - background: "linear-gradient(135deg, rgba(9, 31, 64, 0.85) 0%, rgba(197, 32, 62, 0.75) 100%)", + background: "linear-gradient(135deg, rgba(9, 31, 64, 0.90) 0%, rgba(6, 26, 64, 0.85) 100%)", }} />
        @@ -101,7 +101,7 @@ const HeroArea = ({ data: { images, headings, texts, buttons, video } }: TProps)
        - +
        {video && ( diff --git a/src/containers/hero/layout-05/index.tsx b/src/containers/hero/layout-05/index.tsx index df773ab77..80db906c3 100644 --- a/src/containers/hero/layout-05/index.tsx +++ b/src/containers/hero/layout-05/index.tsx @@ -16,7 +16,7 @@ type TProps = { const HeroArea = ({ data: { headings, texts, buttons, images } }: TProps) => { return ( -
        +
        +
        { className="tw-absolute tw-inset-0" style={{ background: - "linear-gradient(135deg, rgba(9, 31, 64, 0.85) 0%, rgba(197, 32, 62, 0.75) 100%)", + "linear-gradient(135deg, rgba(9, 31, 64, 0.90) 0%, rgba(6, 26, 64, 0.85) 100%)", }} />
        diff --git a/src/containers/profile/bio.tsx b/src/containers/profile/bio.tsx index 63a371abb..618d14549 100644 --- a/src/containers/profile/bio.tsx +++ b/src/containers/profile/bio.tsx @@ -70,7 +70,7 @@ const ProfileBio = () => {
        -

        Loading your profile...

        +

        Loading your profile...

        @@ -82,7 +82,7 @@ const ProfileBio = () => {
        {/* Header with Edit Button */}
        -

        Your Profile

        +

        Your Profile

        {isEditing ? ( <> @@ -92,7 +92,7 @@ const ProfileBio = () => { setIsEditing(false); setFormData(profile); }} - className="tw-rounded-md tw-border tw-border-gray-300 tw-px-4 tw-py-2 tw-text-gray-700 hover:tw-bg-gray-50" + className="tw-rounded-md tw-border tw-border-gray-300 tw-px-4 tw-py-2 tw-text-gray-200 hover:tw-bg-gray-50" > Cancel @@ -139,7 +139,7 @@ const ProfileBio = () => {
        @@ -156,7 +156,7 @@ const ProfileBio = () => {
        @@ -174,7 +174,7 @@ const ProfileBio = () => {
        diff --git a/src/containers/quote/layout-01/index.tsx b/src/containers/quote/layout-01/index.tsx index dfc653619..8745bbe7b 100644 --- a/src/containers/quote/layout-01/index.tsx +++ b/src/containers/quote/layout-01/index.tsx @@ -74,7 +74,7 @@ const QuoteArea = ({ data: { items }, space, bg }: TProps) => { y: trans1().y, }} > - + { y: trans1().y, }} > - + { y: trans1().y, }} > - + { y: trans1().y, }} > - + { y: trans2().y, }} > - +
        @@ -118,7 +118,7 @@ const QuoteArea = ({ data: { items }, space, bg }: TProps) => { }; QuoteArea.defaultProps = { - bg: "tw-bg-gray-200", + bg: "tw-bg-gray-50", }; export default QuoteArea; diff --git a/src/containers/service/layout-06/index.tsx b/src/containers/service/layout-06/index.tsx index ec8780f18..811e7642a 100644 --- a/src/containers/service/layout-06/index.tsx +++ b/src/containers/service/layout-06/index.tsx @@ -77,7 +77,7 @@ const ServiceArea = ({ data: { section_title, items, images }, space, bg, titleS y: trans1().y, }} > - + - + - + {" "} - + - +
        diff --git a/src/containers/testimonial/layout-03/index.tsx b/src/containers/testimonial/layout-03/index.tsx index d52609fbf..9e162be3f 100644 --- a/src/containers/testimonial/layout-03/index.tsx +++ b/src/containers/testimonial/layout-03/index.tsx @@ -66,7 +66,7 @@ const TestimonialArea = ({ {items.map((item) => ( {section_title && ( - + )} {buttons?.[0]?.content && ( @@ -143,7 +143,7 @@ const TestimonialArea = ({ }; TestimonialArea.defaultProps = { - bg: "tw-bg-gray-200", + bg: "tw-bg-navy", }; export default TestimonialArea; diff --git a/src/containers/video/layout-01/index.tsx b/src/containers/video/layout-01/index.tsx index c2a5756e6..7cc1f2277 100644 --- a/src/containers/video/layout-01/index.tsx +++ b/src/containers/video/layout-01/index.tsx @@ -122,7 +122,7 @@ const VideoArea = ({ data: { section_title, images, video }, space, bg }: TProps }; VideoArea.defaultProps = { - bg: "tw-bg-spring", + bg: "tw-bg-cream", space: "top-bottom", }; diff --git a/src/containers/video/layout-03/index.tsx b/src/containers/video/layout-03/index.tsx index 14db2711f..1bbab0ab9 100644 --- a/src/containers/video/layout-03/index.tsx +++ b/src/containers/video/layout-03/index.tsx @@ -106,7 +106,7 @@ const VideoArea = ({ }; VideoArea.defaultProps = { - bg: "tw-bg-gray-200", + bg: "tw-bg-gray-50", }; export default VideoArea; diff --git a/src/containers/video/layout-05/index.tsx b/src/containers/video/layout-05/index.tsx index d03f8242a..f3b4ca16c 100644 --- a/src/containers/video/layout-05/index.tsx +++ b/src/containers/video/layout-05/index.tsx @@ -17,7 +17,7 @@ type TProps = { const VideoArea = ({ data: { images, video, section_title } }: TProps) => { return ( -
        +
        {section_title && ( {