mirror of
https://github.com/soconnor0919/beenvoice.git
synced 2026-05-08 09:38:55 -04:00
refactor: improve invoice editor UX and fix visual issues
- Remove clock icons and hour text from calendar month view, show only activity bars - Fix calendar week view mobile layout (2-column grid instead of vertical stack) - Update invoice form skeleton to match actual layout structure - Add client-side validation for empty invoice item descriptions with auto-scroll to error - Fix hourly rate defaulting logic with proper type guards - Update invoice details skeleton to match page structure with PageHeader - Fix hydration error in sidebar (div inside button -> span) - Improve dashboard chart color consistency (draft status now matches monthly metrics) - Fix mobile header layout to prevent text squishing (vertical stack on mobile) - Add IDs to invoice line items for scroll-into-view functionality
This commit is contained in:
+133
-258
@@ -16,15 +16,21 @@ import {
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="bg-background min-h-screen">
|
||||
<div className="min-h-screen relative overflow-x-hidden">
|
||||
<AuthRedirect />
|
||||
|
||||
{/* Blob Background for Homepage */}
|
||||
<div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none flex items-center justify-center">
|
||||
<div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
|
||||
<div className="w-[800px] h-[800px] bg-neutral-400/30 dark:bg-neutral-500/20 rounded-full blur-3xl animate-blob"></div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="bg-background border-border sticky top-0 z-50 border-b">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex h-14 items-center justify-between sm:h-16">
|
||||
<nav className="fixed top-4 left-4 right-4 z-50 m-4 rounded-2xl border border-border/60 bg-background/80 backdrop-blur-md">
|
||||
<div className="mx-auto px-6">
|
||||
<div className="flex h-16 items-center justify-between">
|
||||
<Logo />
|
||||
<div className="hidden items-center space-x-6 md:flex">
|
||||
<div className="hidden items-center space-x-8 md:flex">
|
||||
<a
|
||||
href="#features"
|
||||
className="text-muted-foreground hover:text-foreground text-sm font-medium transition-colors"
|
||||
@@ -38,21 +44,19 @@ export default function HomePage() {
|
||||
Pricing
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Link href="/auth/signin">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<span className="hidden sm:inline">Sign In</span>
|
||||
<span className="sm:hidden">Sign In</span>
|
||||
Sign In
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/auth/register">
|
||||
<Button size="sm" variant="default">
|
||||
<span className="hidden sm:inline">Get Started</span>
|
||||
<span className="sm:hidden">Start</span>
|
||||
<Button size="sm" variant="default" className="rounded-xl px-6">
|
||||
Get Started
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
@@ -61,248 +65,156 @@ export default function HomePage() {
|
||||
</nav>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-background relative overflow-hidden px-4 pt-12 pb-16 sm:pt-20">
|
||||
<div className="relative container mx-auto text-center">
|
||||
<section className="relative pt-48 pb-32">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<div className="mx-auto max-w-4xl">
|
||||
<Badge className="bg-primary/10 text-primary border-primary/20 mb-4 border sm:mb-6">
|
||||
<Zap className="mr-1 h-3 w-3" />
|
||||
Free Forever
|
||||
<Badge className="bg-primary/10 text-primary border-primary/20 mb-8 border px-4 py-1 text-sm rounded-full">
|
||||
<Zap className="mr-2 h-3.5 w-3.5" />
|
||||
Completely Free for Everyone
|
||||
</Badge>
|
||||
|
||||
<h1 className="text-foreground mb-4 text-4xl font-bold tracking-tight sm:mb-6 sm:text-6xl lg:text-7xl">
|
||||
Simple Invoicing for
|
||||
<span className="text-primary block">Freelancers</span>
|
||||
<h1 className="text-foreground mb-8 text-6xl font-heading font-bold tracking-tight sm:text-7xl lg:text-8xl leading-tight">
|
||||
Invoicing Made <br />
|
||||
<span className="text-primary italic">Beautifully Simple.</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-muted-foreground mx-auto mb-6 max-w-2xl text-lg leading-relaxed sm:mb-8 sm:text-xl">
|
||||
Create professional invoices, manage clients, and track payments.
|
||||
Built for freelancers and small businesses—
|
||||
<span className="text-foreground font-semibold">
|
||||
completely free
|
||||
</span>
|
||||
.
|
||||
<p className="text-muted-foreground mx-auto mb-12 max-w-2xl text-xl leading-relaxed font-sans">
|
||||
Create professional invoices, manage clients, and track payments with a tool that feels as good as it looks.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
|
||||
<div className="flex flex-col items-center gap-6 sm:flex-row sm:justify-center">
|
||||
<Link href="/auth/register">
|
||||
<Button
|
||||
size="lg"
|
||||
variant="default"
|
||||
className="group w-full px-6 py-3 text-base font-semibold sm:w-auto sm:px-8 sm:py-4 sm:text-lg"
|
||||
className="h-14 px-10 text-lg rounded-2xl shadow-xl shadow-primary/20 hover:shadow-2xl hover:shadow-primary/30 transition-all duration-300"
|
||||
>
|
||||
Get Started
|
||||
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1 sm:h-5 sm:w-5" />
|
||||
Start For Free
|
||||
<ArrowRight className="ml-2 h-5 w-5" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="#features">
|
||||
<a href="#features">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="group w-full px-6 py-3 text-base sm:w-auto sm:px-8 sm:py-4 sm:text-lg"
|
||||
className="h-14 px-10 text-lg rounded-2xl border-border/50 bg-background/50 hover:bg-background/80 backdrop-blur-sm"
|
||||
>
|
||||
Learn More
|
||||
<ChevronRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1 sm:h-5 sm:w-5" />
|
||||
</Button>
|
||||
</Link>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="text-muted-foreground mt-8 flex flex-col items-center justify-center gap-2 text-sm 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="text-primary h-4 w-4" />
|
||||
<span className="text-center">{text}</span>
|
||||
</div>
|
||||
))}
|
||||
<div className="mt-16 text-muted-foreground/80 flex flex-col items-center justify-center gap-2 text-sm sm:flex-row sm:gap-8">
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="text-primary h-4 w-4" />
|
||||
<span>No credit card required</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="text-primary h-4 w-4" />
|
||||
<span>Setup in 2 minutes</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="text-primary h-4 w-4" />
|
||||
<span>Free forever</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section
|
||||
id="features"
|
||||
className="bg-muted/20 relative overflow-hidden py-16 sm:py-24"
|
||||
>
|
||||
<div className="relative container mx-auto px-4">
|
||||
<div className="mb-12 text-center sm:mb-16">
|
||||
<Badge className="bg-primary/10 text-primary border-primary/20 mb-4 border">
|
||||
<Zap className="mr-1 h-3 w-3" />
|
||||
Features
|
||||
</Badge>
|
||||
<h2 className="text-foreground mb-4 text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl">
|
||||
Everything you need to
|
||||
<span className="text-primary block">get paid</span>
|
||||
<section id="features" className="py-24 relative">
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="mb-20 text-center">
|
||||
<h2 className="text-foreground mb-6 text-4xl font-heading font-bold sm:text-5xl">
|
||||
Everything you need to <span className="italic text-primary">thrive</span>
|
||||
</h2>
|
||||
<p className="text-muted-foreground mx-auto max-w-2xl text-lg sm:text-xl">
|
||||
Simple, powerful features for freelancers and small businesses.
|
||||
<p className="text-muted-foreground mx-auto max-w-2xl text-lg">
|
||||
Powerful features wrapped in a calm, focused interface.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 sm:gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
{/* Feature 1 */}
|
||||
<Card className="bg-card border-border hover:border-primary/20 border transition-all">
|
||||
<CardContent className="p-6 sm:p-8">
|
||||
<div className="bg-primary/10 text-primary mb-4 inline-flex p-3">
|
||||
<Rocket className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-foreground mb-3 text-xl font-bold">
|
||||
Quick Setup
|
||||
</h3>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
Start creating invoices immediately. No complicated setup
|
||||
required.
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="text-primary h-4 w-4" />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Simple client management
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="text-primary h-4 w-4" />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Professional templates
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="text-primary h-4 w-4" />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Easy invoice sending
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Feature 2 */}
|
||||
<Card className="bg-card border-border hover:border-primary/20 border transition-all">
|
||||
<CardContent className="p-6 sm:p-8">
|
||||
<div className="bg-primary/10 text-primary mb-4 inline-flex p-3">
|
||||
<BarChart3 className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-foreground mb-3 text-xl font-bold">
|
||||
Payment Tracking
|
||||
</h3>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
Keep track of invoice status and monitor payments.
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="text-primary h-4 w-4" />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Invoice status tracking
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="text-primary h-4 w-4" />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Payment history
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="text-primary h-4 w-4" />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Overdue notifications
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Feature 3 */}
|
||||
<Card className="bg-card border-border hover:border-primary/20 border transition-all">
|
||||
<CardContent className="p-6 sm:p-8">
|
||||
<div className="bg-primary/10 text-primary mb-4 inline-flex p-3">
|
||||
<Shield className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-foreground mb-3 text-xl font-bold">
|
||||
Professional Features
|
||||
</h3>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
Professional features to help you get paid on time.
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="text-primary h-4 w-4" />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
PDF generation
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="text-primary h-4 w-4" />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Custom tax rates
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Check className="text-primary h-4 w-4" />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Professional numbering
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="grid gap-8 md:grid-cols-3">
|
||||
{[
|
||||
{
|
||||
icon: Rocket,
|
||||
title: "Quick Setup",
|
||||
description: "Start creating invoices immediately. No complicated setup required.",
|
||||
items: ["Simple client management", "Professional templates", "Easy invoice sending"]
|
||||
},
|
||||
{
|
||||
icon: BarChart3,
|
||||
title: "Payment Tracking",
|
||||
description: "Keep track of invoice status and monitor your payments effortlessly.",
|
||||
items: ["Invoice status tracking", "Payment history", "Overdue notifications"]
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Professional Features",
|
||||
description: "Tools that make you look professional and get you paid faster.",
|
||||
items: ["PDF generation", "Custom tax rates", "Professional numbering"]
|
||||
}
|
||||
].map((feature, i) => (
|
||||
<Card key={i} className="group hover:-translate-y-2 transition-transform duration-500 border-border/40 bg-background/60 backdrop-blur-xl">
|
||||
<CardContent className="p-8">
|
||||
<div className="bg-primary/10 text-primary mb-6 inline-flex rounded-2xl p-4">
|
||||
<feature.icon className="h-8 w-8" />
|
||||
</div>
|
||||
<h3 className="text-foreground mb-4 text-2xl font-bold font-heading">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-muted-foreground mb-6 leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
<ul className="space-y-3">
|
||||
{feature.items.map((item, j) => (
|
||||
<li key={j} className="flex items-center gap-3 text-sm text-foreground/80">
|
||||
<div className="h-1.5 w-1.5 rounded-full bg-primary" />
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pricing Section */}
|
||||
<section
|
||||
id="pricing"
|
||||
className="bg-background relative overflow-hidden py-16 sm:py-24"
|
||||
>
|
||||
<div className="relative container mx-auto px-4">
|
||||
<div className="mb-12 text-center sm:mb-16">
|
||||
<h2 className="text-foreground mb-4 text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl">
|
||||
Simple pricing
|
||||
</h2>
|
||||
<p className="text-muted-foreground mx-auto max-w-2xl text-lg sm:text-xl">
|
||||
Start free, stay free. No hidden fees or limits.
|
||||
</p>
|
||||
<section id="pricing" className="py-24 relative overflow-hidden">
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="max-w-4xl mx-auto text-center mb-16">
|
||||
<h2 className="text-5xl font-heading font-bold mb-6">Simple Pricing</h2>
|
||||
<p className="text-xl text-muted-foreground">Focus on your work, not on fees.</p>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto max-w-md">
|
||||
<Card className="bg-card border-primary border-2">
|
||||
<div className="bg-primary/10 text-primary border-primary/20 mx-auto -mt-3 w-fit border px-6 py-1 text-sm font-medium">
|
||||
<div className="max-w-md mx-auto">
|
||||
<Card className="relative overflow-visible border-primary/50 shadow-2xl shadow-primary/5 bg-background/80 backdrop-blur-xl">
|
||||
<div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground px-6 py-1.5 rounded-full text-sm font-medium shadow-lg">
|
||||
Forever Free
|
||||
</div>
|
||||
<CardContent className="p-6 sm:p-8">
|
||||
<div className="mb-6 text-center">
|
||||
<div className="text-foreground mb-2 text-4xl font-bold sm:text-5xl">
|
||||
$0
|
||||
</div>
|
||||
<p className="text-muted-foreground">
|
||||
Forever. No credit card required.
|
||||
</p>
|
||||
<CardContent className="p-10 text-center">
|
||||
<div className="mb-2 text-6xl font-bold font-heading">$0</div>
|
||||
<div className="text-muted-foreground mb-8">No credit card required.</div>
|
||||
|
||||
<div className="space-y-4 mb-10 text-left pl-8">
|
||||
{[
|
||||
"Unlimited Invoices",
|
||||
"Unlimited Clients",
|
||||
"PDF Downloads",
|
||||
"Payment Tracking",
|
||||
"Email Support"
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex items-center gap-3">
|
||||
<Check className="h-5 w-5 text-primary shrink-0" />
|
||||
<span className="text-foreground/90">{item}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<ul className="mb-8 space-y-3">
|
||||
{[
|
||||
"Unlimited invoices",
|
||||
"Client management",
|
||||
"PDF generation",
|
||||
"Payment tracking",
|
||||
"Professional templates",
|
||||
"Custom tax rates",
|
||||
"Email support",
|
||||
].map((feature, i) => (
|
||||
<li key={i} className="flex items-center gap-3">
|
||||
<Check className="text-primary h-5 w-5" />
|
||||
<span className="text-foreground">{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<Link href="/auth/register" className="block">
|
||||
<Button className="w-full" size="lg">
|
||||
Get Started Free
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
<Button size="lg" className="w-full text-lg h-12 rounded-xl">
|
||||
Get Started
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
@@ -311,58 +223,21 @@ export default function HomePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="bg-primary relative overflow-hidden py-16 sm:py-24">
|
||||
<div className="relative container mx-auto px-4 text-center">
|
||||
<h2 className="text-primary-foreground mb-4 text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl">
|
||||
Ready to get started?
|
||||
</h2>
|
||||
<p className="text-primary-foreground/80 mx-auto mb-8 max-w-2xl text-lg sm:text-xl">
|
||||
Join thousands of freelancers who trust beenvoice for their
|
||||
invoicing needs.
|
||||
</p>
|
||||
<div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
|
||||
<Link href="/auth/register">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="lg"
|
||||
className="group w-full px-6 py-3 text-base font-semibold sm:w-auto sm:px-8 sm:py-4 sm:text-lg"
|
||||
>
|
||||
Start Free Today
|
||||
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1 sm:h-5 sm:w-5" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-muted border-border border-t py-8">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
|
||||
<div className="flex items-center gap-2">
|
||||
<Logo size="sm" />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
© 2024 beenvoice. Built for freelancers.
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<Link
|
||||
href="/auth/signin"
|
||||
className="text-muted-foreground hover:text-foreground text-sm transition-colors"
|
||||
>
|
||||
Sign In
|
||||
</Link>
|
||||
<Link
|
||||
href="/auth/register"
|
||||
className="text-muted-foreground hover:text-foreground text-sm transition-colors"
|
||||
>
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
<footer className="border-t border-border/40 bg-background/50 backdrop-blur-sm py-12 mt-12">
|
||||
<div className="container mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<Logo size="sm" />
|
||||
<span className="text-sm text-muted-foreground">© 2024 beenvoice</span>
|
||||
</div>
|
||||
<div className="flex gap-8 text-sm text-muted-foreground">
|
||||
<a href="#" className="hover:text-foreground transition-colors">Privacy</a>
|
||||
<a href="#" className="hover:text-foreground transition-colors">Terms</a>
|
||||
<a href="#" className="hover:text-foreground transition-colors">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user