feat: create stunning premium UI with advanced design elements
- Add animated gradient backgrounds with floating particles - Implement advanced glass morphism with enhanced blur effects - Add Google Fonts Inter for professional typography - Create sophisticated button animations with ripple effects - Add progress indicator dots showing current step - Implement card hover effects with smooth transforms - Add animated gradient text with shimmer effects - Create premium loading spinners with dual rings - Add character counter to textarea - Implement numbered badges for roles and segments - Add gradient backgrounds to all cards and sections - Create pulsing glow animations for important elements - Add emoji icons throughout for visual appeal - Implement responsive grid layouts for settings - Add detailed subtitles and descriptions to sections - Create success celebration with bouncing animation - Add shadow effects with color-matched glows - Implement smooth transitions and cubic-bezier easing - Add visual hierarchy with varied font weights - Create immersive, modern user experience
This commit is contained in:
@@ -8,38 +8,41 @@ export default function AudioPlayerSection({
|
||||
onDownload
|
||||
}: AudioPlayerSectionProps) {
|
||||
return (
|
||||
<div className="w-full max-w-4xl mx-auto p-4 sm:p-6 glass-effect rounded-2xl shadow-glow">
|
||||
<div className="w-full max-w-4xl mx-auto p-6 sm:p-8 glass-effect rounded-3xl shadow-glow-strong card-hover">
|
||||
{/* Success Header */}
|
||||
<div className="text-center mb-6">
|
||||
<div className="inline-block mb-4">
|
||||
<div className="w-16 h-16 sm:w-20 sm:h-20 mx-auto bg-gradient-to-br from-green-400 to-emerald-600 rounded-2xl shadow-lg flex items-center justify-center animate-bounce">
|
||||
<span className="text-3xl sm:text-4xl">🎉</span>
|
||||
<div className="text-center mb-8">
|
||||
<div className="inline-block mb-6">
|
||||
<div className="w-24 h-24 sm:w-28 sm:h-28 mx-auto bg-gradient-to-br from-green-400 via-emerald-500 to-teal-600 rounded-3xl shadow-2xl flex items-center justify-center animate-bounce shadow-green-500/50">
|
||||
<span className="text-5xl sm:text-6xl">🎉</span>
|
||||
</div>
|
||||
</div>
|
||||
<h2 className="text-2xl sm:text-3xl font-bold gradient-text mb-2">
|
||||
<h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold gradient-text-animated mb-3">
|
||||
Your Audiobook is Ready!
|
||||
</h2>
|
||||
<p className="text-gray-600 text-sm sm:text-base">
|
||||
<p className="text-gray-700 text-base sm:text-lg font-medium">
|
||||
Listen below or download to enjoy offline
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Audio Player Card */}
|
||||
<div className="bg-gradient-to-br from-purple-50 to-indigo-50 rounded-2xl shadow-lg p-5 sm:p-8 mb-6 border-2 border-purple-200">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-md">
|
||||
<span className="text-xl">🎧</span>
|
||||
<div className="bg-gradient-to-br from-purple-50 via-indigo-50 to-pink-50 rounded-3xl shadow-2xl p-6 sm:p-10 mb-8 border-2 border-purple-300 hover:shadow-3xl transition-all">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="w-14 h-14 bg-gradient-to-br from-purple-500 via-purple-600 to-indigo-600 rounded-2xl flex items-center justify-center shadow-lg shadow-purple-500/50">
|
||||
<span className="text-2xl">🎧</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl sm:text-2xl font-extrabold text-gray-800">Listen Now</h3>
|
||||
<p className="text-sm text-gray-600">Your personalized audiobook</p>
|
||||
</div>
|
||||
<h3 className="text-lg sm:text-xl font-bold text-gray-800">Listen Now</h3>
|
||||
</div>
|
||||
|
||||
<audio
|
||||
controls
|
||||
src={audioUrl}
|
||||
className="w-full min-h-[44px] rounded-xl shadow-md"
|
||||
className="w-full min-h-[54px] rounded-2xl shadow-xl"
|
||||
preload="metadata"
|
||||
style={{
|
||||
filter: 'drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1))'
|
||||
filter: 'drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15))'
|
||||
}}
|
||||
>
|
||||
Your browser does not support the audio element.
|
||||
@@ -47,22 +50,26 @@ export default function AudioPlayerSection({
|
||||
</div>
|
||||
|
||||
{/* Download Button */}
|
||||
<div className="flex justify-center">
|
||||
<div className="flex justify-center mb-6">
|
||||
<button
|
||||
onClick={onDownload}
|
||||
className="w-full sm:w-auto px-8 py-4 min-h-[44px] bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white font-bold rounded-xl transition-all cursor-pointer touch-manipulation shadow-lg text-base sm:text-lg"
|
||||
className="px-12 py-6 min-h-[60px] bg-gradient-to-r from-green-500 via-emerald-600 to-teal-600 hover:from-green-600 hover:via-emerald-700 hover:to-teal-700 text-white font-extrabold rounded-2xl transition-all cursor-pointer touch-manipulation shadow-2xl text-lg sm:text-xl shadow-green-500/50 relative overflow-hidden"
|
||||
>
|
||||
<span className="flex items-center justify-center gap-3">
|
||||
<span className="text-xl">⬇️</span>
|
||||
<span className="flex items-center justify-center gap-4 relative z-10">
|
||||
<span className="text-2xl">⬇️</span>
|
||||
Download Audiobook
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Success Message */}
|
||||
<div className="mt-6 p-4 bg-gradient-to-r from-green-50 to-emerald-50 border-2 border-green-200 text-green-800 rounded-xl shadow-sm text-center text-sm sm:text-base">
|
||||
<p className="font-semibold">
|
||||
✅ Your audiobook has been successfully generated!
|
||||
<div className="p-6 bg-gradient-to-r from-green-50 via-emerald-50 to-teal-50 border-2 border-green-300 text-green-900 rounded-2xl shadow-lg text-center text-sm sm:text-base">
|
||||
<div className="flex items-center justify-center gap-3 mb-2">
|
||||
<span className="text-3xl">✅</span>
|
||||
<p className="font-extrabold text-lg">Success!</p>
|
||||
</div>
|
||||
<p className="font-medium">
|
||||
Your audiobook has been successfully generated with AI-powered voices!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user