Admin/audiobook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: create professional, polished UI with perfect spacing

Browse Source 
- Add generous padding and spacing throughout (p-10, p-12)
- Constrain content width with max-w-4xl and max-w-5xl
- Increase font sizes for better hierarchy (text-3xl, text-lg)
- Add gradient backgrounds to cards and elements
- Implement smooth transitions and hover states
- Create professional progress stepper with labels
- Add shadow effects with color-matched glows
- Increase button padding and font sizes
- Add gradient borders on hover
- Implement proper visual breathing room
- Create polished, premium aesthetic
- Add smooth cubic-bezier transitions
- Improve form input styling with focus rings
- Create professional card hover effects
This commit is contained in:
Paul Bailey
2025-12-09 13:29:48 +00:00
parent 2f200aa61b
commit 4a53c897c5
6 changed files with 303 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/App.tsx
View File

@@ -158,22 +158,22 @@ function App() {
const allRolesAssigned = roles.length > 0 && roles.every(role => voiceAssignments.has(role.id))
return (
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
<div className="container mx-auto py-8 px-4 sm:py-12 sm:px-6 lg:px-8 max-w-5xl">
<div className="min-h-screen">
<div className="container mx-auto py-12 px-4 sm:px-6 lg:px-8">
{/* Header */}
<div className="text-center mb-12">
<div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl mb-6 shadow-lg">
<span className="text-3xl">🎧</span>
<div className="text-center mb-16 max-w-3xl mx-auto">
<div className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-3xl mb-8 shadow-xl shadow-indigo-500/30">
<span className="text-4xl">🎧</span>
</div>
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-gray-900 mb-4">
<h1 className="text-5xl sm:text-6xl md:text-7xl font-black text-gray-900 mb-6 tracking-tight">
Text to Audiobook
</h1>
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
<p className="text-xl text-gray-600 leading-relaxed">
Transform your stories into immersive audio experiences with AI-powered voices
</p>
{/* Progress Steps */}
<div className="mt-10 flex justify-center items-center gap-3">
<div className="mt-12 flex justify-center items-center gap-2">
{['Input', 'Voices', 'Review', 'Done'].map((step, index) => {
const phases = ['input', 'assignment', 'review', 'generated'];
const isActive = phase === phases[index];
@@ -181,15 +181,20 @@ function App() {
return (
<div key={step} className="flex items-center">
<div className={`flex items-center justify-center w-10 h-10 rounded-full font-semibold text-sm transition-all ${
isActive ? 'bg-indigo-600 text-white scale-110' :
isPast ? 'bg-green-500 text-white' :
'bg-gray-200 text-gray-500'
}`}>
{isPast ? '✓' : index + 1}
<div className="flex flex-col items-center">
<div className={`flex items-center justify-center w-12 h-12 rounded-full font-bold text-sm transition-all duration-300 ${
isActive ? 'bg-indigo-600 text-white scale-110 shadow-lg shadow-indigo-500/50' :
isPast ? 'bg-green-500 text-white' :
'bg-gray-200 text-gray-500'
}`}>
{isPast ? '✓' : index + 1}
</div>
<span className={`text-xs font-semibold mt-2 ${isActive ? 'text-indigo-600' : 'text-gray-500'}`}>
{step}
</span>
</div>
{index < 3 && (
<div className={`w-12 h-1 mx-2 rounded ${isPast ? 'bg-green-500' : 'bg-gray-200'}`}></div>
<div className={`w-16 h-1 mx-3 rounded-full transition-all duration-300 ${isPast || isActive ? 'bg-indigo-600' : 'bg-gray-200'}`}></div>
)}
</div>
);