feat: modern SaaS UI - redesign Hero section and Dropzone widget
- 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]
committed by
GitHub
GitHub
parent
9f91e7d0ac
commit
dbe9b86867
@@ -2,7 +2,7 @@ import { useState, useCallback } from 'react';
|
||||
import { useDropzone } from 'react-dropzone';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Upload, Sparkles, PenLine } from 'lucide-react';
|
||||
import { UploadCloud, Sparkles, PenLine } from 'lucide-react';
|
||||
import ToolSelectorModal from '@/components/shared/ToolSelectorModal';
|
||||
import { useFileStore } from '@/stores/fileStore';
|
||||
import { getToolsForFile, detectFileCategory, getCategoryLabel } from '@/utils/fileRouting';
|
||||
@@ -86,32 +86,42 @@ export default function HeroUploadZone() {
|
||||
<div className="mx-auto mt-8 max-w-2xl">
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className={`hero-upload-zone ${isDragActive ? 'drag-active' : ''}`}
|
||||
className={`hero-upload-zone group ${isDragActive ? 'drag-active' : ''}`}
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
|
||||
{/* Icon */}
|
||||
{/* Animated icon */}
|
||||
<div
|
||||
className={`mb-4 flex h-16 w-16 items-center justify-center rounded-2xl transition-colors ${
|
||||
className={`mb-5 flex h-20 w-20 items-center justify-center rounded-2xl shadow-sm transition-all duration-300 group-hover:-translate-y-2 ${
|
||||
isDragActive
|
||||
? 'bg-primary-100 dark:bg-primary-900/30'
|
||||
: 'bg-primary-50 dark:bg-primary-900/20'
|
||||
? 'bg-primary-100 shadow-glow dark:bg-primary-900/40'
|
||||
: 'bg-white dark:bg-slate-700/60'
|
||||
}`}
|
||||
>
|
||||
<Upload
|
||||
className={`h-8 w-8 transition-colors ${
|
||||
<UploadCloud
|
||||
className={`h-10 w-10 transition-colors duration-300 ${
|
||||
isDragActive
|
||||
? 'text-primary-600 dark:text-primary-400'
|
||||
: 'text-primary-500 dark:text-primary-400'
|
||||
: 'text-slate-400 group-hover:text-primary-500 dark:text-slate-400 dark:group-hover:text-primary-400'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* CTA Text */}
|
||||
<div className="mb-6 flex gap-3 justify-center z-10 relative">
|
||||
{/* Heading */}
|
||||
<h3 className="mb-1.5 text-lg font-semibold text-slate-800 dark:text-slate-100">
|
||||
{isDragActive
|
||||
? t('home.dropFileHere', 'Drop your file here…')
|
||||
: t('home.dragDropTitle', 'Drag & drop your file here')}
|
||||
</h3>
|
||||
<p className="mb-6 text-sm text-slate-500 dark:text-slate-400">
|
||||
{t('common.dragDrop', 'or click the button to browse from your device')}
|
||||
</p>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<div className="mb-5 flex gap-3 justify-center z-10 relative flex-wrap">
|
||||
<button
|
||||
type="button"
|
||||
className="px-6 py-3 bg-red-600 hover:bg-red-700 text-white font-bold rounded-xl shadow-md transition-colors"
|
||||
className="px-6 py-2.5 bg-primary-600 hover:bg-primary-700 active:scale-95 text-white font-semibold rounded-full shadow-md hover:shadow-lg transition-all duration-200"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
const input = document.createElement('input');
|
||||
@@ -143,23 +153,19 @@ export default function HeroUploadZone() {
|
||||
};
|
||||
input.click();
|
||||
}}
|
||||
className="px-6 py-3 bg-slate-900 hover:bg-slate-800 text-white font-bold rounded-xl shadow-md transition-colors flex items-center gap-2"
|
||||
className="px-6 py-2.5 bg-slate-900 hover:bg-slate-700 active:scale-95 text-white font-semibold rounded-full shadow-md hover:shadow-lg transition-all duration-200 flex items-center gap-2 dark:bg-slate-700 dark:hover:bg-slate-600"
|
||||
>
|
||||
<PenLine className="h-5 w-5" />
|
||||
<PenLine className="h-4 w-4" />
|
||||
{t('home.editNow')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="mb-3 text-sm text-slate-500 dark:text-slate-400">
|
||||
{t('common.dragDrop', 'or drop files here')}
|
||||
</p>
|
||||
|
||||
{/* Supported formats */}
|
||||
<div className="flex flex-wrap items-center justify-center gap-2">
|
||||
{['PDF', 'Word', 'JPG', 'PNG', 'WebP', 'MP4'].map((format) => (
|
||||
<span
|
||||
key={format}
|
||||
className="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-600 dark:bg-slate-700 dark:text-slate-300"
|
||||
className="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-600 dark:bg-slate-700 dark:text-slate-300"
|
||||
>
|
||||
{format}
|
||||
</span>
|
||||
@@ -167,7 +173,7 @@ export default function HeroUploadZone() {
|
||||
</div>
|
||||
|
||||
{/* File size hint */}
|
||||
<p className="mt-3 flex items-center justify-center gap-1.5 text-xs text-slate-400 dark:text-slate-500">
|
||||
<p className="mt-4 flex items-center justify-center gap-1.5 text-xs text-slate-400 dark:text-slate-500">
|
||||
<Sparkles className="h-3.5 w-3.5" />
|
||||
{t('home.uploadSubtitle')}
|
||||
</p>
|
||||
@@ -175,7 +181,7 @@ export default function HeroUploadZone() {
|
||||
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="mt-3 rounded-xl bg-red-50 p-3 ring-1 ring-red-200 dark:bg-red-900/20 dark:ring-red-800">
|
||||
<div className="mt-3 rounded-2xl bg-red-50 p-3 ring-1 ring-red-200 dark:bg-red-900/20 dark:ring-red-800">
|
||||
<p className="text-center text-sm text-red-700 dark:text-red-400">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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 */
|
||||
|
||||
Reference in New Issue
Block a user