soconnor/beenvoice
1
0
Fork 0
mirror of https://github.com/soconnor0919/beenvoice.git synced 2025-12-13 17:44:44 -05:00
Code Issues Packages Projects Releases Wiki Activity

Update homepage design with gradients and styling

Browse Source
This commit is contained in:
Sean O'Connor
2025-07-15 20:31:28 -04:00
parent 064db6c58b
commit f505c9ff33
2 changed files with 165 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
src/app/dashboard/invoices/[id]/page.tsx
View File

@@ -78,7 +78,7 @@ async function InvoiceContent({ invoiceId }: { invoiceId: string }) {
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h1 className="text-3xl font-bold text-foreground"> <h1 className="text-foreground text-3xl font-bold">
Invoice Details Invoice Details
</h1> </h1>
<p className="text-muted-foreground mt-1"> <p className="text-muted-foreground mt-1">
@@ -91,28 +91,35 @@ async function InvoiceContent({ invoiceId }: { invoiceId: string }) {
</div> </div>
{/* Content */} {/* Content */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
{/* Left Column */} {/* Left Column */}
<div className="lg:col-span-2 space-y-6"> <div className="space-y-6 lg:col-span-2">
{/* Invoice Header */} {/* Invoice Header */}
<Card className="shadow-sm"> <Card className="shadow-sm">
<CardContent className="p-6"> <CardContent className="p-6">
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-start justify-between"> <div className="flex items-start justify-between gap-6">
<div className="space-y-2"> <div className="min-w-0 flex-1 space-y-2">
<div className="flex items-center gap-3"> <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
<h2 className="text-2xl font-bold text-foreground"> <h2 className="text-foreground truncate text-2xl font-bold">
{invoice.invoiceNumber} {invoice.invoiceNumber}
</h2> </h2>
<StatusBadge status={getStatusType()} /> <StatusBadge status={getStatusType()} />
</div> </div>
<p className="text-muted-foreground"> <div className="text-muted-foreground space-y-1 text-sm sm:space-y-0">
Issued {formatDate(invoice.issueDate)} • Due {formatDate(invoice.dueDate)} <div className="sm:inline">
</p> Issued {formatDate(invoice.issueDate)}
</div>
<div className="sm:inline sm:before:content-['_•_']">
Due {formatDate(invoice.dueDate)}
</div>
</div>
</div> </div>
<div className="text-right"> <div className="flex-shrink-0 text-right">
<p className="text-sm text-muted-foreground">Total Amount</p> <p className="text-muted-foreground text-sm">
<p className="text-3xl font-bold text-primary"> Total Amount
</p>
<p className="text-primary text-3xl font-bold">
{formatCurrency(total)} {formatCurrency(total)}
</p> </p>
</div> </div>
@@ -125,13 +132,14 @@ async function InvoiceContent({ invoiceId }: { invoiceId: string }) {
{isOverdue && ( {isOverdue && (
<Card className="border-destructive/20 bg-destructive/5 shadow-sm"> <Card className="border-destructive/20 bg-destructive/5 shadow-sm">
<CardContent className="p-4"> <CardContent className="p-4">
<div className="flex items-center gap-3 text-destructive"> <div className="text-destructive flex items-center gap-3">
<AlertTriangle className="h-5 w-5 flex-shrink-0" /> <AlertTriangle className="h-5 w-5 flex-shrink-0" />
<div> <div>
<p className="font-medium">Invoice Overdue</p> <p className="font-medium">Invoice Overdue</p>
<p className="text-sm"> <p className="text-sm">
{Math.ceil( {Math.ceil(
(new Date().getTime() - new Date(invoice.dueDate).getTime()) / (new Date().getTime() -
new Date(invoice.dueDate).getTime()) /
(1000 * 60 * 60 * 24), (1000 * 60 * 60 * 24),
)}{" "} )}{" "}
days past due date days past due date
@@ -154,7 +162,7 @@ async function InvoiceContent({ invoiceId }: { invoiceId: string }) {
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div> <div>
<h3 className="text-xl font-semibold text-foreground"> <h3 className="text-foreground text-xl font-semibold">
{invoice.client.name} {invoice.client.name}
</h3> </h3>
</div> </div>
@@ -162,17 +170,19 @@ async function InvoiceContent({ invoiceId }: { invoiceId: string }) {
<div className="space-y-3"> <div className="space-y-3">
{invoice.client.email && ( {invoice.client.email && (
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="rounded-lg bg-primary/10 p-2"> <div className="bg-primary/10 rounded-lg p-2">
<Mail className="h-4 w-4 text-primary" /> <Mail className="text-primary h-4 w-4" />
</div> </div>
<span className="text-sm break-all">{invoice.client.email}</span> <span className="text-sm break-all">
{invoice.client.email}
</span>
</div> </div>
)} )}
{invoice.client.phone && ( {invoice.client.phone && (
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="rounded-lg bg-primary/10 p-2"> <div className="bg-primary/10 rounded-lg p-2">
<Phone className="h-4 w-4 text-primary" /> <Phone className="text-primary h-4 w-4" />
</div> </div>
<span className="text-sm">{invoice.client.phone}</span> <span className="text-sm">{invoice.client.phone}</span>
</div> </div>
@@ -180,10 +190,10 @@ async function InvoiceContent({ invoiceId }: { invoiceId: string }) {
{(invoice.client.addressLine1 ?? invoice.client.city) && ( {(invoice.client.addressLine1 ?? invoice.client.city) && (
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<div className="rounded-lg bg-primary/10 p-2"> <div className="bg-primary/10 rounded-lg p-2">
<MapPin className="h-4 w-4 text-primary" /> <MapPin className="text-primary h-4 w-4" />
</div> </div>
<div className="text-sm space-y-1"> <div className="space-y-1 text-sm">
{invoice.client.addressLine1 && ( {invoice.client.addressLine1 && (
<div>{invoice.client.addressLine1}</div> <div>{invoice.client.addressLine1}</div>
)} )}
@@ -224,7 +234,7 @@ async function InvoiceContent({ invoiceId }: { invoiceId: string }) {
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div> <div>
<h3 className="text-xl font-semibold text-foreground"> <h3 className="text-foreground text-xl font-semibold">
{invoice.business.name} {invoice.business.name}
</h3> </h3>
</div> </div>
@@ -232,19 +242,23 @@ async function InvoiceContent({ invoiceId }: { invoiceId: string }) {
<div className="space-y-3"> <div className="space-y-3">
{invoice.business.email && ( {invoice.business.email && (
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="rounded-lg bg-primary/10 p-2"> <div className="bg-primary/10 rounded-lg p-2">
<Mail className="h-4 w-4 text-primary" /> <Mail className="text-primary h-4 w-4" />
</div> </div>
<span className="text-sm break-all">{invoice.business.email}</span> <span className="text-sm break-all">
{invoice.business.email}
</span>
</div> </div>
)} )}
{invoice.business.phone && ( {invoice.business.phone && (
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="rounded-lg bg-primary/10 p-2"> <div className="bg-primary/10 rounded-lg p-2">
<Phone className="h-4 w-4 text-primary" /> <Phone className="text-primary h-4 w-4" />
</div> </div>
<span className="text-sm">{invoice.business.phone}</span> <span className="text-sm">
{invoice.business.phone}
</span>
</div> </div>
)} )}
</div> </div>
@@ -263,20 +277,26 @@ async function InvoiceContent({ invoiceId }: { invoiceId: string }) {
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
{invoice.items.map((item, index) => ( {invoice.items.map((item, index) => (
<div key={item.id} className="border rounded-lg p-4 space-y-3"> <div key={item.id} className="space-y-3 rounded-lg border p-4">
<div className="flex items-start justify-between gap-4"> <div className="flex items-start justify-between gap-4">
<div className="flex-1 min-w-0"> <div className="min-w-0 flex-1">
<p className="text-foreground text-base font-medium mb-2">{item.description}</p> <p className="text-foreground mb-2 text-base font-medium">
<div className="flex items-center gap-4 text-sm text-muted-foreground"> {item.description}
<span>{formatDate(item.date)}</span> </p>
<span>•</span> <div className="text-muted-foreground space-y-1 text-sm sm:space-y-0">
<span>{item.hours} hours</span> <span className="sm:inline">
<span>•</span> {formatDate(item.date)}
<span>@ ${item.rate}/hr</span> </span>
<span className="block sm:inline sm:before:content-['_•_']">
{item.hours} hours
</span>
<span className="block sm:inline sm:before:content-['_•_']">
@ ${item.rate}/hr
</span>
</div> </div>
</div> </div>
<div className="text-right"> <div className="flex-shrink-0 text-right">
<p className="text-lg font-semibold text-primary"> <p className="text-primary text-lg font-semibold">
{formatCurrency(item.amount)} {formatCurrency(item.amount)}
</p> </p>
</div> </div>
@@ -289,18 +309,26 @@ async function InvoiceContent({ invoiceId }: { invoiceId: string }) {
<div className="space-y-3"> <div className="space-y-3">
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-muted-foreground">Subtotal:</span> <span className="text-muted-foreground">Subtotal:</span>
<span className="font-medium">{formatCurrency(subtotal)}</span> <span className="font-medium">
{formatCurrency(subtotal)}
</span>
</div> </div>
{invoice.taxRate > 0 && ( {invoice.taxRate > 0 && (
<div className="flex justify-between"> <div className="flex justify-between">
<span className="text-muted-foreground">Tax ({invoice.taxRate}%):</span> <span className="text-muted-foreground">
<span className="font-medium">{formatCurrency(taxAmount)}</span> Tax ({invoice.taxRate}%):
</span>
<span className="font-medium">
{formatCurrency(taxAmount)}
</span>
</div> </div>
)} )}
<Separator /> <Separator />
<div className="flex justify-between text-lg font-bold"> <div className="flex justify-between text-lg font-bold">
<span>Total:</span> <span>Total:</span>
<span className="text-primary">{formatCurrency(total)}</span> <span className="text-primary">
{formatCurrency(total)}
</span>
</div> </div>
</div> </div>
</div> </div>
@@ -314,7 +342,9 @@ async function InvoiceContent({ invoiceId }: { invoiceId: string }) {
<CardTitle>Notes</CardTitle> <CardTitle>Notes</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-foreground whitespace-pre-wrap">{invoice.notes}</p> <p className="text-foreground whitespace-pre-wrap">
{invoice.notes}
</p>
</CardContent> </CardContent>
</Card> </Card>
)} )}
@@ -336,19 +366,13 @@ async function InvoiceContent({ invoiceId }: { invoiceId: string }) {
Edit Invoice Edit Invoice
</Link> </Link>
</Button> </Button>
{invoice.items && invoice.client && ( {invoice.items && invoice.client && (
<PDFDownloadButton <PDFDownloadButton invoiceId={invoice.id} className="w-full" />
invoiceId={invoice.id}
className="w-full"
/>
)} )}
{invoice.status === "draft" && ( {invoice.status === "draft" && (
<SendInvoiceButton <SendInvoiceButton invoiceId={invoice.id} className="w-full" />
invoiceId={invoice.id}
className="w-full"
/>
)} )}
</CardContent> </CardContent>
</Card> </Card>

155
src/app/page.tsx
View File

@@ -20,24 +20,24 @@ import {
export default function HomePage() { export default function HomePage() {
return ( return (
<div className="bg-background min-h-screen"> <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-emerald-50 dark:from-slate-900 dark:via-slate-800 dark:to-emerald-900">
<AuthRedirect /> <AuthRedirect />
{/* Navigation */} {/* Navigation */}
<nav className="bg-background/80 sticky top-0 z-50 border-b backdrop-blur-xl"> <nav className="sticky top-0 z-50 border-b bg-white/80 backdrop-blur-xl dark:bg-slate-900/80 dark:border-slate-700">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="flex h-16 items-center justify-between"> <div className="flex h-16 items-center justify-between">
<Logo /> <Logo />
<div className="hidden items-center space-x-8 md:flex"> <div className="hidden items-center space-x-8 md:flex">
<a <a
href="#features" href="#features"
className="text-muted-foreground hover:text-foreground transition-colors" className="text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-slate-100 transition-colors"
> >
Features Features
</a> </a>
<a <a
href="#pricing" href="#pricing"
className="text-muted-foreground hover:text-foreground transition-colors" className="text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-slate-100 transition-colors"
> >
Pricing Pricing
</a> </a>
@@ -57,26 +57,34 @@ export default function HomePage() {
</nav> </nav>
{/* Hero Section */} {/* Hero Section */}
<section className="relative overflow-hidden pt-20 pb-16"> <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-emerald-50 to-teal-50 dark:from-slate-800 dark:via-emerald-900/20 dark:to-teal-900/20 pt-20 pb-16">
{/* Background decoration */}
<div className="absolute inset-0">
<div className="absolute top-0 left-1/4 h-96 w-96 rounded-full bg-gradient-to-r from-emerald-400/20 to-blue-400/20 dark:from-emerald-500/10 dark:to-blue-500/10 blur-3xl"></div>
<div className="absolute top-32 right-1/4 h-80 w-80 rounded-full bg-gradient-to-r from-teal-400/20 to-emerald-400/20 dark:from-teal-500/10 dark:to-emerald-500/10 blur-3xl"></div>
<div className="absolute bottom-0 left-1/2 h-64 w-64 rounded-full bg-gradient-to-r from-blue-400/20 to-purple-400/20 dark:from-blue-500/10 dark:to-purple-500/10 blur-3xl"></div>
</div>
<div className="relative container mx-auto px-4 text-center"> <div className="relative container mx-auto px-4 text-center">
<div className="mx-auto max-w-4xl"> <div className="mx-auto max-w-4xl">
<Badge <Badge
variant="secondary" variant="secondary"
className="mb-6 border-emerald-200 bg-emerald-100 text-emerald-800" className="mb-6 border-emerald-200 bg-emerald-100 text-emerald-800 dark:border-emerald-800 dark:bg-emerald-900 dark:text-emerald-200"
> >
<Sparkles className="mr-1 h-3 w-3" /> <Sparkles className="mr-1 h-3 w-3" />
100% Free Forever 100% Free Forever
</Badge> </Badge>
<h1 className="text-foreground mb-6 text-6xl font-bold tracking-tight sm:text-7xl lg:text-8xl"> <h1 className="mb-6 text-6xl font-bold tracking-tight text-slate-900 dark:text-slate-100 sm:text-7xl lg:text-8xl">
Simple Invoicing for Simple Invoicing for
<span className="block text-emerald-600">Freelancers</span> <span className="block bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">
Freelancers
</span>
</h1> </h1>
<p className="text-muted-foreground mx-auto mb-8 max-w-2xl text-xl leading-relaxed"> <p className="mx-auto mb-8 max-w-2xl text-xl leading-relaxed text-slate-600">
Create professional invoices, manage clients, and track payments. Create professional invoices, manage clients, and track payments.
Built specifically for freelancers and small businesses— Built specifically for freelancers and small businesses—
<span className="font-semibold text-emerald-600"> <span className="bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text font-semibold text-transparent">
completely free completely free
</span> </span>
. .
@@ -86,7 +94,7 @@ export default function HomePage() {
<Link href="/auth/register"> <Link href="/auth/register">
<Button <Button
size="lg" size="lg"
className="group bg-gradient-to-r from-emerald-600 to-teal-600 px-8 py-4 text-lg font-semibold shadow-xl shadow-emerald-500/25 transition-all duration-300 hover:shadow-2xl hover:shadow-emerald-500/30" className="group bg-gradient-to-r from-emerald-500 to-teal-500 px-8 py-4 text-lg font-semibold shadow-xl shadow-emerald-500/30 transition-all duration-300 hover:from-emerald-600 hover:to-teal-600 hover:shadow-2xl hover:shadow-emerald-500/40"
> >
Start Free Start Free
<ArrowRight className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1" /> <ArrowRight className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1" />
@@ -96,7 +104,7 @@ export default function HomePage() {
<Button <Button
variant="outline" variant="outline"
size="lg" size="lg"
className="group border-slate-300 px-8 py-4 text-lg hover:border-slate-400 hover:bg-slate-50" className="group border-emerald-200 bg-white/50 px-8 py-4 text-lg text-emerald-700 backdrop-blur-sm hover:border-emerald-300 hover:bg-emerald-50"
> >
See Features See Features
<ChevronRight className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1" /> <ChevronRight className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1" />
@@ -104,7 +112,7 @@ export default function HomePage() {
</Link> </Link>
</div> </div>
<div className="mt-12 flex items-center justify-center gap-8 text-sm text-slate-500"> <div className="mt-12 flex items-center justify-center gap-8 text-sm text-slate-600">
{[ {[
"No credit card required", "No credit card required",
"Setup in 2 minutes", "Setup in 2 minutes",
@@ -121,10 +129,10 @@ export default function HomePage() {
</section> </section>
{/* Stats */} {/* Stats */}
<section className="bg-muted/50 border-y py-12"> <section className="border-y bg-gradient-to-r from-emerald-50 to-teal-50 py-12">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="text-center"> <div className="text-center">
<p className="text-muted-foreground"> <p className="text-slate-600">
Free invoicing for independent professionals Free invoicing for independent professionals
</p> </p>
</div> </div>
@@ -132,7 +140,10 @@ export default function HomePage() {
</section> </section>
{/* Features Section */} {/* Features Section */}
<section id="features" className="py-24"> <section
id="features"
className="bg-gradient-to-br from-white via-blue-50/30 to-emerald-50/50 py-24"
>
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="mb-16 text-center"> <div className="mb-16 text-center">
<Badge <Badge
@@ -142,13 +153,13 @@ export default function HomePage() {
<Zap className="mr-1 h-3 w-3" /> <Zap className="mr-1 h-3 w-3" />
Supercharged Features Supercharged Features
</Badge> </Badge>
<h2 className="text-foreground mb-4 text-5xl font-bold tracking-tight"> <h2 className="mb-4 text-5xl font-bold tracking-tight text-slate-900">
Everything you need to Everything you need to
<span className="block text-emerald-600"> <span className="block bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">
invoice professionally invoice professionally
</span> </span>
</h2> </h2>
<p className="text-muted-foreground mx-auto max-w-2xl text-xl"> <p className="mx-auto max-w-2xl text-xl text-slate-600">
Simple, powerful features designed specifically for freelancers Simple, powerful features designed specifically for freelancers
and small businesses. and small businesses.
</p> </p>
@@ -156,19 +167,19 @@ export default function HomePage() {
<div className="grid gap-8 lg:grid-cols-3"> <div className="grid gap-8 lg:grid-cols-3">
{/* Feature 1 */} {/* Feature 1 */}
<Card className="group shadow-lg transition-all duration-300 hover:shadow-xl"> <Card className="group bg-white/70 shadow-lg backdrop-blur-sm transition-all duration-300 hover:bg-white/90 hover:shadow-xl">
<CardContent className="p-8"> <CardContent className="p-8">
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-500 text-white"> <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-r from-emerald-500 to-teal-500 text-white shadow-lg">
<Rocket className="h-6 w-6" /> <Rocket className="h-6 w-6" />
</div> </div>
<h3 className="text-foreground mb-3 text-xl font-bold"> <h3 className="mb-3 text-xl font-bold text-slate-900">
Quick Setup Quick Setup
</h3> </h3>
<p className="text-muted-foreground mb-4"> <p className="mb-4 text-slate-600">
Start creating invoices immediately. No complicated setup or Start creating invoices immediately. No complicated setup or
configuration required. configuration required.
</p> </p>
<ul className="text-muted-foreground space-y-2 text-sm"> <ul className="space-y-2 text-sm text-slate-600">
<li className="flex items-center gap-2"> <li className="flex items-center gap-2">
<Check className="h-4 w-4 text-emerald-500" /> <Check className="h-4 w-4 text-emerald-500" />
Simple client management Simple client management
@@ -186,19 +197,19 @@ export default function HomePage() {
</Card> </Card>
{/* Feature 2 */} {/* Feature 2 */}
<Card className="group shadow-lg transition-all duration-300 hover:shadow-xl"> <Card className="group bg-white/70 shadow-lg backdrop-blur-sm transition-all duration-300 hover:bg-white/90 hover:shadow-xl">
<CardContent className="p-8"> <CardContent className="p-8">
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl bg-blue-500 text-white"> <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-r from-blue-500 to-indigo-500 text-white shadow-lg">
<BarChart3 className="h-6 w-6" /> <BarChart3 className="h-6 w-6" />
</div> </div>
<h3 className="text-foreground mb-3 text-xl font-bold"> <h3 className="mb-3 text-xl font-bold text-slate-900">
Payment Tracking Payment Tracking
</h3> </h3>
<p className="text-muted-foreground mb-4"> <p className="mb-4 text-slate-600">
Keep track of invoice status and monitor which clients have Keep track of invoice status and monitor which clients have
paid. paid.
</p> </p>
<ul className="text-muted-foreground space-y-2 text-sm"> <ul className="space-y-2 text-sm text-slate-600">
<li className="flex items-center gap-2"> <li className="flex items-center gap-2">
<Check className="h-4 w-4 text-emerald-500" /> <Check className="h-4 w-4 text-emerald-500" />
Invoice status tracking Invoice status tracking
@@ -216,18 +227,18 @@ export default function HomePage() {
</Card> </Card>
{/* Feature 3 */} {/* Feature 3 */}
<Card className="group shadow-lg transition-all duration-300 hover:shadow-xl"> <Card className="group bg-white/70 shadow-lg backdrop-blur-sm transition-all duration-300 hover:bg-white/90 hover:shadow-xl">
<CardContent className="p-8"> <CardContent className="p-8">
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl bg-purple-500 text-white"> <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg">
<Globe className="h-6 w-6" /> <Globe className="h-6 w-6" />
</div> </div>
<h3 className="text-foreground mb-3 text-xl font-bold"> <h3 className="mb-3 text-xl font-bold text-slate-900">
Professional Features Professional Features
</h3> </h3>
<p className="text-muted-foreground mb-4"> <p className="mb-4 text-slate-600">
Everything you need to look professional and get paid on time. Everything you need to look professional and get paid on time.
</p> </p>
<ul className="text-muted-foreground space-y-2 text-sm"> <ul className="space-y-2 text-sm text-slate-600">
<li className="flex items-center gap-2"> <li className="flex items-center gap-2">
<Check className="h-4 w-4 text-emerald-500" /> <Check className="h-4 w-4 text-emerald-500" />
PDF generation PDF generation
@@ -248,20 +259,23 @@ export default function HomePage() {
</section> </section>
{/* Pricing Section */} {/* Pricing Section */}
<section id="pricing" className="bg-muted/50 py-24"> <section
id="pricing"
className="bg-gradient-to-br from-emerald-50 via-teal-50 to-blue-50 py-24"
>
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="mb-16 text-center"> <div className="mb-16 text-center">
<h2 className="text-foreground mb-4 text-5xl font-bold tracking-tight"> <h2 className="mb-4 text-5xl font-bold tracking-tight text-slate-900">
Simple, transparent pricing Simple, transparent pricing
</h2> </h2>
<p className="text-muted-foreground mx-auto max-w-2xl text-xl"> <p className="mx-auto max-w-2xl text-xl text-slate-600">
Start free, stay free. No hidden fees, no gotchas, no limits on Start free, stay free. No hidden fees, no gotchas, no limits on
your success. your success.
</p> </p>
</div> </div>
<div className="mx-auto max-w-md"> <div className="mx-auto max-w-md">
<Card className="bg-card relative border-2 border-emerald-500 shadow-2xl"> <Card className="relative border-2 border-emerald-500 bg-white/90 shadow-2xl backdrop-blur-sm">
<div className="absolute -top-4 left-1/2 -translate-x-1/2"> <div className="absolute -top-4 left-1/2 -translate-x-1/2">
<Badge className="bg-emerald-500 px-6 py-1 text-white"> <Badge className="bg-emerald-500 px-6 py-1 text-white">
Forever Free Forever Free
@@ -269,12 +283,10 @@ export default function HomePage() {
</div> </div>
<CardContent className="p-8 text-center"> <CardContent className="p-8 text-center">
<div className="mb-6"> <div className="mb-6">
<div className="text-foreground mb-2 text-6xl font-bold"> <div className="mb-2 bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-6xl font-bold text-transparent">
$0 $0
</div> </div>
<div className="text-muted-foreground"> <div className="text-slate-600">per month, forever</div>
per month, forever
</div>
</div> </div>
<div className="mb-8 space-y-4 text-left"> <div className="mb-8 space-y-4 text-left">
@@ -290,18 +302,18 @@ export default function HomePage() {
].map((feature, i) => ( ].map((feature, i) => (
<div key={i} className="flex items-center gap-3"> <div key={i} className="flex items-center gap-3">
<Check className="h-5 w-5 flex-shrink-0 text-emerald-500" /> <Check className="h-5 w-5 flex-shrink-0 text-emerald-500" />
<span className="text-foreground">{feature}</span> <span className="text-slate-700">{feature}</span>
</div> </div>
))} ))}
</div> </div>
<Link href="/auth/register"> <Link href="/auth/register">
<Button className="w-full bg-gradient-to-r from-emerald-600 to-teal-600 py-3 text-lg font-semibold shadow-lg shadow-emerald-500/25 transition-all duration-300 hover:shadow-xl hover:shadow-emerald-500/30"> <Button className="w-full bg-gradient-to-r from-emerald-500 to-teal-500 py-3 text-lg font-semibold shadow-lg shadow-emerald-500/30 transition-all duration-300 hover:from-emerald-600 hover:to-teal-600 hover:shadow-xl hover:shadow-emerald-500/40">
Get Started Now Get Started Now
</Button> </Button>
</Link> </Link>
<p className="text-muted-foreground mt-4 text-sm"> <p className="mt-4 text-sm text-slate-600">
No credit card required No credit card required
</p> </p>
</CardContent> </CardContent>
@@ -311,48 +323,50 @@ export default function HomePage() {
</section> </section>
{/* Why Choose */} {/* Why Choose */}
<section className="py-24"> <section className="bg-gradient-to-br from-white via-emerald-50/30 to-teal-50/50 py-24">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="mb-16 text-center"> <div className="mb-16 text-center">
<h2 className="text-foreground mb-4 text-5xl font-bold tracking-tight"> <h2 className="mb-4 text-5xl font-bold tracking-tight text-slate-900">
Why freelancers Why freelancers
<span className="block text-emerald-600">choose BeenVoice</span> <span className="block bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">
choose BeenVoice
</span>
</h2> </h2>
</div> </div>
<div className="grid gap-8 md:grid-cols-3"> <div className="grid gap-8 md:grid-cols-3">
<div className="text-center"> <div className="text-center">
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-500 text-white"> <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-r from-emerald-500 to-teal-500 text-white shadow-lg">
<Zap className="h-6 w-6" /> <Zap className="h-6 w-6" />
</div> </div>
<h3 className="text-foreground mb-3 text-xl font-bold"> <h3 className="mb-3 text-xl font-bold text-slate-900">
Quick & Simple Quick & Simple
</h3> </h3>
<p className="text-muted-foreground"> <p className="text-slate-600">
No learning curve. Start creating professional invoices in No learning curve. Start creating professional invoices in
minutes, not hours. minutes, not hours.
</p> </p>
</div> </div>
<div className="text-center"> <div className="text-center">
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl bg-blue-500 text-white"> <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-r from-blue-500 to-indigo-500 text-white shadow-lg">
<Shield className="h-6 w-6" /> <Shield className="h-6 w-6" />
</div> </div>
<h3 className="text-foreground mb-3 text-xl font-bold"> <h3 className="mb-3 text-xl font-bold text-slate-900">
Always Free Always Free
</h3> </h3>
<p className="text-muted-foreground"> <p className="text-slate-600">
No hidden fees, no premium tiers. All features are free for as No hidden fees, no premium tiers. All features are free for as
long as you need them. long as you need them.
</p> </p>
</div> </div>
<div className="text-center"> <div className="text-center">
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl bg-purple-500 text-white"> <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg">
<Clock className="h-6 w-6" /> <Clock className="h-6 w-6" />
</div> </div>
<h3 className="text-foreground mb-3 text-xl font-bold"> <h3 className="mb-3 text-xl font-bold text-slate-900">
Save Time Save Time
</h3> </h3>
<p className="text-muted-foreground"> <p className="text-slate-600">
Focus on your work, not paperwork. Automated calculations and Focus on your work, not paperwork. Automated calculations and
professional formatting. professional formatting.
</p> </p>
@@ -362,10 +376,11 @@ export default function HomePage() {
</section> </section>
{/* CTA Section */} {/* CTA Section */}
<section className="relative overflow-hidden bg-gradient-to-br from-emerald-600 via-emerald-700 to-teal-800 py-24"> <section className="relative overflow-hidden bg-gradient-to-br from-emerald-500 via-teal-600 to-blue-700 py-24">
<div className="absolute inset-0 bg-gradient-to-br from-emerald-600/90 to-teal-800/90"></div> <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/95 via-teal-600/95 to-blue-700/95"></div>
<div className="absolute top-10 left-10 h-64 w-64 rounded-full bg-white/10 blur-3xl"></div> <div className="absolute top-10 left-10 h-64 w-64 rounded-full bg-gradient-to-r from-white/20 to-emerald-300/20 blur-3xl"></div>
<div className="absolute right-10 bottom-10 h-80 w-80 rounded-full bg-white/5 blur-3xl"></div> <div className="absolute right-10 bottom-10 h-80 w-80 rounded-full bg-gradient-to-r from-teal-300/15 to-blue-300/15 blur-3xl"></div>
<div className="absolute top-1/2 left-1/2 h-96 w-96 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-r from-emerald-400/10 to-teal-400/10 blur-3xl"></div>
<div className="relative container mx-auto px-4 text-center"> <div className="relative container mx-auto px-4 text-center">
<div className="mx-auto max-w-3xl"> <div className="mx-auto max-w-3xl">
@@ -384,7 +399,7 @@ export default function HomePage() {
<Button <Button
size="lg" size="lg"
variant="secondary" variant="secondary"
className="group bg-white px-8 py-4 text-lg font-semibold text-emerald-700 shadow-xl transition-all duration-300 hover:bg-gray-50 hover:shadow-2xl" className="group bg-white px-8 py-4 text-lg font-semibold text-emerald-700 shadow-xl transition-all duration-300 hover:bg-gradient-to-r hover:from-white hover:to-emerald-50 hover:shadow-2xl"
> >
Start Your Success Story Start Your Success Story
<Rocket className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1" /> <Rocket className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1" />
@@ -411,41 +426,41 @@ export default function HomePage() {
</section> </section>
{/* Footer */} {/* Footer */}
<footer className="bg-background border-t py-12"> <footer className="border-t bg-gradient-to-br from-slate-50 to-emerald-50/30 py-12">
<div className="container mx-auto px-4"> <div className="container mx-auto px-4">
<div className="text-center"> <div className="text-center">
<Logo className="mx-auto mb-4" /> <Logo className="mx-auto mb-4" />
<p className="text-muted-foreground mb-6"> <p className="mb-6 text-slate-600">
Simple invoicing for freelancers. Free, forever. Simple invoicing for freelancers. Free, forever.
</p> </p>
<div className="text-muted-foreground flex items-center justify-center gap-8 text-sm"> <div className="flex items-center justify-center gap-8 text-sm text-slate-600">
<Link <Link
href="/auth/signin" href="/auth/signin"
className="hover:text-foreground transition-colors" className="transition-colors hover:text-emerald-600"
> >
Sign In Sign In
</Link> </Link>
<Link <Link
href="/auth/register" href="/auth/register"
className="hover:text-foreground transition-colors" className="transition-colors hover:text-emerald-600"
> >
Get Started Get Started
</Link> </Link>
<a <a
href="#features" href="#features"
className="hover:text-foreground transition-colors" className="transition-colors hover:text-emerald-600"
> >
Features Features
</a> </a>
<a <a
href="#pricing" href="#pricing"
className="hover:text-foreground transition-colors" className="transition-colors hover:text-emerald-600"
> >
Pricing Pricing
</a> </a>
</div> </div>
<div className="mt-8 border-t pt-8"> <div className="mt-8 border-t pt-8">
<p className="text-muted-foreground"> <p className="text-slate-600">
&copy; 2024 BeenVoice. Built with &hearts; for entrepreneurs. &copy; 2024 BeenVoice. Built with &hearts; for entrepreneurs.
</p> </p>
</div> </div>