poduck/smoothschedule
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add light/dark mode support to Hero visual content card

Browse Source 
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
poduck
2025-12-15 16:25:46 -05:00
parent acd84dfa30
commit c333010620
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/components/marketing/Hero.tsx
View File

@@ -68,22 +68,22 @@ const Hero: React.FC = () => {
{/* Visual Content */}
<div className="relative lg:ml-auto w-full max-w-lg lg:max-w-none mx-auto">
<div className="relative rounded-2xl bg-gray-900 shadow-2xl border border-gray-800 overflow-hidden aspect-[4/3] flex items-center justify-center bg-gradient-to-br from-gray-800 to-gray-900">
<div className="relative rounded-2xl bg-gray-100 dark:bg-gray-900 shadow-2xl border border-gray-200 dark:border-gray-800 overflow-hidden aspect-[4/3] flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900">
{/* Abstract Representation of Marketplace/Dashboard */}
<div className="text-center p-8">
<div className="inline-flex p-4 bg-brand-500/20 rounded-2xl mb-6">
<CheckCircle2 className="w-16 h-16 text-brand-400" />
<CheckCircle2 className="w-16 h-16 text-brand-600 dark:text-brand-400" />
</div>
<h3 className="text-2xl font-bold text-white mb-2">{t('marketing.hero.visualContent.automatedSuccess')}</h3>
<p className="text-gray-400">{t('marketing.hero.visualContent.autopilot')}</p>
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">{t('marketing.hero.visualContent.automatedSuccess')}</h3>
<p className="text-gray-600 dark:text-gray-400">{t('marketing.hero.visualContent.autopilot')}</p>
<div className="mt-8 grid grid-cols-2 gap-4">
<div className="bg-gray-800/50 p-3 rounded-lg border border-gray-700">
<div className="text-green-400 font-bold">+24%</div>
<div className="bg-white/50 dark:bg-gray-800/50 p-3 rounded-lg border border-gray-200 dark:border-gray-700">
<div className="text-green-600 dark:text-green-400 font-bold">+24%</div>
<div className="text-xs text-gray-500">{t('marketing.hero.visualContent.revenue')}</div>
</div>
<div className="bg-gray-800/50 p-3 rounded-lg border border-gray-700">
<div className="text-blue-400 font-bold">-40%</div>
<div className="bg-white/50 dark:bg-gray-800/50 p-3 rounded-lg border border-gray-200 dark:border-gray-700">
<div className="text-blue-600 dark:text-blue-400 font-bold">-40%</div>
<div className="text-xs text-gray-500">{t('marketing.hero.visualContent.noShows')}</div>
</div>
</div>