+ {t('common.dragDrop', 'or click the button to browse from your device')} +
+ + {/* CTA Buttons */} +- {t('common.dragDrop', 'or drop files here')} -
- {/* Supported formats */}+
{error}
+
{t('home.heroSub')}
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css index 6b06ffe..c9fd3cc 100644 --- a/frontend/src/styles/global.css +++ b/frontend/src/styles/global.css @@ -116,15 +116,15 @@ /* Hero upload zone — larger variant for the homepage */ .hero-upload-zone { - @apply flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-slate-300 bg-gradient-to-b from-slate-50 to-white p-10 text-center transition-all duration-200 cursor-pointer sm:p-12 dark:border-slate-600 dark:from-slate-800/60 dark:to-slate-800/30; + @apply flex flex-col items-center justify-center rounded-3xl border-2 border-dashed border-slate-300 bg-gradient-to-b from-slate-50 to-white p-10 text-center transition-all duration-300 ease-in-out cursor-pointer sm:p-14 dark:border-slate-600 dark:from-slate-800/60 dark:to-slate-800/30; } .hero-upload-zone:hover { - @apply border-primary-400 bg-gradient-to-b from-primary-50 to-white shadow-lg dark:border-primary-500 dark:from-primary-900/20 dark:to-slate-800/30; + @apply border-primary-400 bg-gradient-to-b from-primary-50 to-white shadow-xl -translate-y-0.5 dark:border-primary-500 dark:from-primary-900/20 dark:to-slate-800/30; } .hero-upload-zone.drag-active { - @apply border-primary-500 bg-gradient-to-b from-primary-100 to-primary-50 ring-2 ring-primary-300 shadow-xl dark:border-primary-400 dark:from-primary-900/30 dark:to-primary-900/10 dark:ring-primary-600; + @apply border-primary-500 bg-gradient-to-b from-primary-100 to-primary-50/80 ring-2 ring-primary-300 shadow-2xl scale-[1.02] dark:border-primary-400 dark:from-primary-900/30 dark:to-primary-900/10 dark:ring-primary-600; } /* Modal animations */ diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 5f12e73..d7214f7 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -38,6 +38,17 @@ export default { sans: ['Inter', 'Tajawal', 'system-ui', 'sans-serif'], arabic: ['Tajawal', 'Inter', 'sans-serif'], }, + borderRadius: { + '3xl': '1.5rem', + '4xl': '2rem', + }, + boxShadow: { + 'glow': '0 0 20px -4px rgba(59, 130, 246, 0.4)', + 'glow-lg': '0 0 40px -8px rgba(59, 130, 246, 0.5)', + }, + transitionTimingFunction: { + 'smooth': 'cubic-bezier(0.4, 0, 0.2, 1)', + }, }, }, plugins: [],