soconnor/beenvoice
1
0
Fork 0
mirror of https://github.com/soconnor0919/beenvoice.git synced 2026-05-08 09:38:55 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add flashy UI animations and enhance PDF invoice layout

Browse Source 
- Adds CSS animations for buttons, cards, icons, and text - Improves
homepage with animated elements and interactive effects - Refines PDF
export: better notes/totals layout, colors, and spacing - Updates styles
for more engaging user experience
This commit is contained in:
Sean O'Connor
2025-07-30 21:28:59 -04:00
parent 0040fae499
commit a1616b161d
3 changed files with 522 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/page.tsx
+84 -37
View File
@@ -9,13 +9,13 @@ import {
Check,
Zap,
Shield,
Globe,
Sparkles,
BarChart3,
Clock,
Rocket,
Heart,
ChevronRight,
Stars,
} from "lucide-react";
export default function HomePage() {
@@ -62,57 +62,93 @@ export default function HomePage() {
<section className="bg-hero-gradient relative overflow-hidden px-4 pt-12 pb-16 sm:pt-20">
{/* Background decoration */}
<div className="hero-overlay"></div>
<div className="hero-orb-1"></div>
<div className="hero-orb-2"></div>
<div className="hero-orb-3"></div>
<div className="hero-orb-1 animate-glow-pulse animate-pulse"></div>
<div className="hero-orb-2 animate-rainbow animate-bounce"></div>
<div className="hero-orb-3 animate-glow-pulse animate-pulse"></div>
{/* Particle Effects */}
<div className="particles-container">
<div className="particle"></div>
<div className="particle"></div>
<div className="particle"></div>
<div className="particle"></div>
<div className="particle"></div>
<div className="particle"></div>
<div className="particle"></div>
<div className="particle"></div>
<div className="particle"></div>
</div>
{/* Floating icons */}
<div className="animate-float-slow hover:animate-wiggle absolute top-20 left-10">
<Stars className="h-6 w-6 cursor-pointer text-white/20 transition-colors hover:text-white/40" />
</div>
<div className="animate-float-delayed hover:animate-wiggle absolute top-32 right-16">
<Zap className="h-8 w-8 cursor-pointer text-emerald-300/30 transition-colors hover:text-emerald-300/60" />
</div>
<div className="animate-float hover:animate-wiggle absolute bottom-32 left-20">
<Heart className="h-5 w-5 cursor-pointer text-pink-300/25 transition-colors hover:text-pink-300/50" />
</div>
<div className="relative container mx-auto text-center">
<div className="mx-auto max-w-4xl">
<Badge className="badge-brand mb-4 sm:mb-6">
<Sparkles className="mr-1 h-3 w-3" />
<Badge className="badge-brand hover:animate-wiggle mb-4 animate-pulse cursor-pointer sm:mb-6">
<Sparkles className="hover:animate-rainbow mr-1 h-3 w-3 animate-spin" />
Free Forever
</Badge>
<h1 className="mb-4 text-4xl font-bold tracking-tight text-white sm:mb-6 sm:text-6xl lg:text-7xl">
<h1 className="animate-fade-in-up animate-glitch mb-4 text-4xl font-bold tracking-tight text-white sm:mb-6 sm:text-6xl lg:text-7xl">
Simple Invoicing for
<span className="block text-emerald-50">Freelancers</span>
<span className="animate-text-shimmer neon-glow block bg-gradient-to-r from-emerald-50 via-white to-emerald-50 bg-[length:200%_100%] bg-clip-text text-transparent">
Freelancers
</span>
</h1>
<p className="mx-auto mb-6 max-w-2xl text-lg leading-relaxed text-emerald-50/90 sm:mb-8 sm:text-xl">
<p className="animate-fade-in-up animation-delay-300 mx-auto mb-6 max-w-2xl text-lg leading-relaxed text-emerald-50/90 sm:mb-8 sm:text-xl">
Create professional invoices, manage clients, and track payments.
Built for freelancers and small businesses—
<span className="font-semibold text-white">completely free</span>.
<span className="animate-pulse font-semibold text-white">
completely free
</span>
.
</p>
<div className="btn-group">
<div className="btn-group animate-fade-in-up animation-delay-500">
<Link href="/auth/register">
<Button
size="lg"
className="btn-brand-secondary group w-full px-6 py-3 text-base font-semibold shadow-xl transition-colors duration-300 sm:w-auto sm:px-8 sm:py-4 sm:text-lg"
className="btn-brand-secondary btn-flashy group w-full transform px-6 py-3 text-base font-semibold shadow-xl transition-all duration-300 hover:scale-105 hover:shadow-2xl sm:w-auto sm:px-8 sm:py-4 sm:text-lg"
>
Get Started
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1 sm:h-5 sm:w-5" />
<ArrowRight className="ml-2 h-4 w-4 transition-all group-hover:translate-x-1 group-hover:scale-110 group-hover:rotate-12 sm:h-5 sm:w-5" />
</Button>
</Link>
<Link href="#features">
<Button
variant="outline"
size="lg"
className="group w-full border-white/30 px-6 py-3 text-base text-white hover:bg-white/10 sm:w-auto sm:px-8 sm:py-4 sm:text-lg"
className="btn-flashy group w-full transform border-white/30 px-6 py-3 text-base text-white transition-all duration-300 hover:scale-105 hover:bg-white/10 hover:shadow-xl sm:w-auto sm:px-8 sm:py-4 sm:text-lg"
>
Learn More
<ChevronRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1 sm:h-5 sm:w-5" />
<ChevronRight className="ml-2 h-4 w-4 transition-all group-hover:translate-x-1 group-hover:scale-110 group-hover:rotate-12 sm:h-5 sm:w-5" />
</Button>
</Link>
</div>
<div className="mt-8 flex flex-col items-center justify-center gap-2 text-sm text-emerald-50/80 sm:mt-12 sm:flex-row sm:gap-6">
<div className="animate-fade-in-up animation-delay-700 mt-8 flex flex-col items-center justify-center gap-2 text-sm text-emerald-50/80 sm:mt-12 sm:flex-row sm:gap-6">
{[
"No credit card required",
"Setup in 2 minutes",
"Free forever",
].map((text, i) => (
<div key={i} className="flex items-center gap-2">
<Check className="h-4 w-4 text-emerald-100" />
<div
key={i}
className="animate-fade-in-up flex items-center gap-2"
style={{ animationDelay: `${800 + i * 100}ms` }}
>
<Check
className="h-4 w-4 animate-bounce text-emerald-100"
style={{ animationDelay: `${1000 + i * 150}ms` }}
/>
<span className="text-center">{text}</span>
</div>
))}
@@ -146,10 +182,10 @@ export default function HomePage() {
<div className="grid gap-6 sm:gap-8 md:grid-cols-2 lg:grid-cols-3">
{/* Feature 1 */}
<Card className="card-floating group">
<Card className="card-floating interactive-card group animate-fade-in-up animate-glow-pulse transform transition-all duration-500 hover:scale-105 hover:shadow-2xl">
<CardContent className="p-6 sm:p-8">
<div className="icon-bg-brand mb-4">
<Rocket className="h-6 w-6" />
<div className="icon-bg-brand hover:animate-wiggle mb-4 animate-bounce">
<Rocket className="h-6 w-6 transition-all group-hover:scale-125 group-hover:rotate-12" />
</div>
<h3 className="mb-3 text-xl font-bold text-slate-900 dark:text-slate-100">
Quick Setup
@@ -176,10 +212,10 @@ export default function HomePage() {
</Card>
{/* Feature 2 */}
<Card className="card-floating group">
<Card className="card-floating interactive-card group animate-fade-in-up animation-delay-300 transform transition-all duration-500 hover:scale-105 hover:shadow-2xl">
<CardContent className="p-6 sm:p-8">
<div className="icon-bg-blue mb-4">
<BarChart3 className="h-6 w-6" />
<div className="icon-bg-blue mb-4 animate-pulse">
<BarChart3 className="h-6 w-6 transition-transform group-hover:scale-110" />
</div>
<h3 className="mb-3 text-xl font-bold text-slate-900 dark:text-slate-100">
Payment Tracking
@@ -205,10 +241,10 @@ export default function HomePage() {
</Card>
{/* Feature 3 */}
<Card className="card-floating group">
<Card className="card-floating interactive-card group animate-fade-in-up animation-delay-500 transform transition-all duration-500 hover:scale-105 hover:shadow-2xl">
<CardContent className="p-6 sm:p-8">
<div className="icon-bg-purple mb-4">
<Globe className="h-6 w-6" />
<div className="icon-bg-purple animate-float mb-4">
<Shield className="h-6 w-6 transition-all group-hover:scale-110 group-hover:rotate-12" />
</div>
<h3 className="mb-3 text-xl font-bold text-slate-900 dark:text-slate-100">
Professional Features
@@ -255,13 +291,15 @@ export default function HomePage() {
</div>
<div className="mx-auto max-w-md">
<Card className="relative border-2 border-emerald-500 bg-white/90 shadow-2xl backdrop-blur-sm dark:border-emerald-400 dark:bg-slate-800/90">
<Card className="animate-fade-in-up animate-glow-pulse interactive-card hover:shadow-3xl relative transform border-2 border-emerald-500 bg-white/90 shadow-2xl backdrop-blur-sm transition-all duration-500 hover:scale-105 dark:border-emerald-400 dark:bg-slate-800/90">
<div className="absolute -top-4 left-1/2 -translate-x-1/2">
<Badge className="badge-success px-6 py-1">Forever Free</Badge>
<Badge className="badge-success animate-pulse px-6 py-1">
Forever Free
</Badge>
</div>
<CardContent className="p-6 text-center sm:p-8">
<div className="mb-6">
<div className="text-brand-gradient mb-2 text-5xl font-bold sm:text-6xl">
<div className="animate-text-shimmer mb-2 bg-gradient-to-r from-emerald-500 via-teal-500 to-emerald-500 bg-[length:200%_100%] bg-clip-text text-5xl font-bold text-transparent sm:text-6xl">
$0
</div>
<div className="text-slate-600 dark:text-slate-400">
@@ -280,8 +318,15 @@ export default function HomePage() {
"Line item details",
"Free forever",
].map((feature, i) => (
<div key={i} className="flex items-center gap-3">
<Check className="h-5 w-5 flex-shrink-0 text-emerald-500" />
<div
key={i}
className="animate-fade-in-up flex items-center gap-3"
style={{ animationDelay: `${i * 100}ms` }}
>
<Check
className="h-5 w-5 flex-shrink-0 animate-bounce text-emerald-500"
style={{ animationDelay: `${200 + i * 100}ms` }}
/>
<span className="text-slate-700 dark:text-slate-300">
{feature}
</span>
@@ -292,9 +337,9 @@ export default function HomePage() {
<Link href="/auth/register">
<Button
variant="brand"
className="w-full py-3 text-base font-semibold sm:text-lg"
className="btn-flashy animate-magnetic w-full transform py-3 text-base font-semibold transition-all duration-300 hover:scale-105 hover:shadow-lg sm:text-lg"
>
Get Started
Get Started ✨
</Button>
</Link>
@@ -316,7 +361,9 @@ export default function HomePage() {
<div className="mb-12 text-center sm:mb-16">
<h2 className="mb-4 text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl lg:text-5xl dark:text-slate-100">
Why choose
<span className="text-brand-gradient block">BeenVoice</span>
<span className="animate-text-shimmer neon-glow animate-glitch block bg-gradient-to-r from-teal-500 via-emerald-600 to-teal-500 bg-[length:200%_100%] bg-clip-text text-transparent">
BeenVoice
</span>
</h2>
</div>
@@ -381,10 +428,10 @@ export default function HomePage() {
<Button
size="lg"
variant="secondary"
className="btn-brand-secondary group w-full px-6 py-3 text-base font-semibold shadow-xl transition-colors duration-300 sm:w-auto sm:px-8 sm:py-4 sm:text-lg"
className="btn-brand-secondary btn-flashy group animate-glow-pulse w-full transform px-6 py-3 text-base font-semibold shadow-xl transition-all duration-300 hover:scale-105 hover:shadow-2xl sm:w-auto sm:px-8 sm:py-4 sm:text-lg"
>
Start Free Today
<Rocket className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1 sm:h-5 sm:w-5" />
<Rocket className="ml-2 h-4 w-4 animate-bounce transition-all group-hover:translate-x-1 group-hover:scale-125 group-hover:rotate-45 sm:h-5 sm:w-5" />
</Button>
</Link>
</div>