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

14
frontend/src/pages/HomePage.tsx
View File

@@ -123,12 +123,20 @@ export default function HomePage() {
/>
{/* Hero Section */}
<section className="py-12 sm:py-20 bg-gradient-to-b from-slate-50 to-white dark:from-slate-900 dark:to-slate-950 px-4 mb-10 rounded-b-[3rem]">
<section className="py-16 sm:py-24 bg-gradient-to-b from-slate-50 via-white to-white dark:from-slate-900 dark:via-slate-950 dark:to-slate-950 px-4 mb-10 rounded-b-[3rem]">
<div className="max-w-4xl mx-auto text-center">
<h1 className="text-4xl font-extrabold tracking-tight text-slate-900 sm:text-6xl dark:text-white mb-6">
{/* Badge */}
<div className="inline-flex items-center gap-2 rounded-full bg-primary-50 border border-primary-100 px-4 py-1.5 mb-6 dark:bg-primary-900/30 dark:border-primary-800">
<span className="h-2 w-2 rounded-full bg-primary-500 animate-pulse" />
<span className="text-xs font-semibold text-primary-700 dark:text-primary-300 uppercase tracking-wide">
{t('home.heroBadge', 'Free Online PDF Tools')}
</span>
</div>
<h1 className="text-4xl font-extrabold tracking-tight text-slate-900 sm:text-6xl lg:text-7xl dark:text-white mb-6 leading-[1.1]">
{t('home.hero')}
</h1>
<p className="mx-auto max-w-2xl text-lg text-slate-600 dark:text-slate-400 mb-10 leading-relaxed">
<p className="mx-auto max-w-2xl text-lg text-slate-500 dark:text-slate-400 mb-10 leading-relaxed">
{t('home.heroSub')}
</p>