ahmed-bakr1988/SaaS-PDF
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: modern SaaS UI - redesign Hero section and Dropzone widget

Browse Source 
- tailwind.config.js: add borderRadius (3xl/4xl), glow box-shadows, smooth transition
- global.css: hero-upload-zone uses rounded-3xl, scale on drag, enhanced hover lift
- HeroUploadZone: UploadCloud icon, group hover animations, rounded-full CTAs, improved layout
- HomePage: animated badge pill, larger heading, improved gradient

Agent-Logs-Url: https://github.com/aborayan2022/SaaS-PDF/sessions/a233a493-2fcf-4025-bd7f-68446c105e28

Co-authored-by: aborayan2022 <119736744+aborayan2022@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2026-04-02 23:05:46 +00:00
committed by GitHub
parent 9f91e7d0ac
commit dbe9b86867
10 changed files with 265 additions and 925 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/styles/global.css
View File

@@ -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 */