Update homepage design with gradients and styling

src/app/dashboard/invoices/[id]/page.tsx

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

src/app/page.tsx

@@ -20,24 +20,24 @@ import {
 
 export default function HomePage() {
   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 />
 
       {/* 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="flex h-16 items-center justify-between">
             <Logo />
             <div className="hidden items-center space-x-8 md:flex">
               <a
                 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
               </a>
               <a
                 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
               </a>
@@ -57,26 +57,34 @@ export default function HomePage() {
       </nav>
 
       {/* 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="mx-auto max-w-4xl">
             <Badge
               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" />
               100% Free Forever
             </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
-              <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>
 
-            <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.
               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
               </span>
               .
@@ -86,7 +94,7 @@ export default function HomePage() {
               <Link href="/auth/register">
                 <Button
                   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
                   <ArrowRight className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1" />
@@ -96,7 +104,7 @@ export default function HomePage() {
                 <Button
                   variant="outline"
                   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
                   <ChevronRight className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1" />
@@ -104,7 +112,7 @@ export default function HomePage() {
               </Link>
             </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",
                 "Setup in 2 minutes",
@@ -121,10 +129,10 @@ export default function HomePage() {
       </section>
 
       {/* 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="text-center">
-            <p className="text-muted-foreground">
+            <p className="text-slate-600">
               Free invoicing for independent professionals
             </p>
           </div>
@@ -132,7 +140,10 @@ export default function HomePage() {
       </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="mb-16 text-center">
             <Badge
@@ -142,13 +153,13 @@ export default function HomePage() {
               <Zap className="mr-1 h-3 w-3" />
               Supercharged Features
             </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
-              <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
               </span>
             </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
               and small businesses.
             </p>
@@ -156,19 +167,19 @@ export default function HomePage() {
 
           <div className="grid gap-8 lg:grid-cols-3">
             {/* 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">
-                <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" />
                 </div>
-                <h3 className="text-foreground mb-3 text-xl font-bold">
+                <h3 className="mb-3 text-xl font-bold text-slate-900">
                   Quick Setup
                 </h3>
-                <p className="text-muted-foreground mb-4">
+                <p className="mb-4 text-slate-600">
                   Start creating invoices immediately. No complicated setup or
                   configuration required.
                 </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">
                     <Check className="h-4 w-4 text-emerald-500" />
                     Simple client management
@@ -186,19 +197,19 @@ export default function HomePage() {
             </Card>
 
             {/* 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">
-                <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" />
                 </div>
-                <h3 className="text-foreground mb-3 text-xl font-bold">
+                <h3 className="mb-3 text-xl font-bold text-slate-900">
                   Payment Tracking
                 </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
                   paid.
                 </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">
                     <Check className="h-4 w-4 text-emerald-500" />
                     Invoice status tracking
@@ -216,18 +227,18 @@ export default function HomePage() {
             </Card>
 
             {/* 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">
-                <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" />
                 </div>
-                <h3 className="text-foreground mb-3 text-xl font-bold">
+                <h3 className="mb-3 text-xl font-bold text-slate-900">
                   Professional Features
                 </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.
                 </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">
                     <Check className="h-4 w-4 text-emerald-500" />
                     PDF generation
@@ -248,20 +259,23 @@ export default function HomePage() {
       </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="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
             </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
               your success.
             </p>
           </div>
 
           <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">
                 <Badge className="bg-emerald-500 px-6 py-1 text-white">
                   Forever Free
@@ -269,12 +283,10 @@ export default function HomePage() {
               </div>
               <CardContent className="p-8 text-center">
                 <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
                   </div>
-                  <div className="text-muted-foreground">
-                    per month, forever
-                  </div>
+                  <div className="text-slate-600">per month, forever</div>
                 </div>
 
                 <div className="mb-8 space-y-4 text-left">
@@ -290,18 +302,18 @@ export default function HomePage() {
                   ].map((feature, i) => (
                     <div key={i} className="flex items-center gap-3">
                       <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>
 
                 <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
                   </Button>
                 </Link>
 
-                <p className="text-muted-foreground mt-4 text-sm">
+                <p className="mt-4 text-sm text-slate-600">
                   No credit card required
                 </p>
               </CardContent>
@@ -311,48 +323,50 @@ export default function HomePage() {
       </section>
 
       {/* 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="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
-              <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>
           </div>
 
           <div className="grid gap-8 md:grid-cols-3">
             <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" />
               </div>
-              <h3 className="text-foreground mb-3 text-xl font-bold">
+              <h3 className="mb-3 text-xl font-bold text-slate-900">
                 Quick & Simple
               </h3>
-              <p className="text-muted-foreground">
+              <p className="text-slate-600">
                 No learning curve. Start creating professional invoices in
                 minutes, not hours.
               </p>
             </div>
             <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" />
               </div>
-              <h3 className="text-foreground mb-3 text-xl font-bold">
+              <h3 className="mb-3 text-xl font-bold text-slate-900">
                 Always Free
               </h3>
-              <p className="text-muted-foreground">
+              <p className="text-slate-600">
                 No hidden fees, no premium tiers. All features are free for as
                 long as you need them.
               </p>
             </div>
             <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" />
               </div>
-              <h3 className="text-foreground mb-3 text-xl font-bold">
+              <h3 className="mb-3 text-xl font-bold text-slate-900">
                 Save Time
               </h3>
-              <p className="text-muted-foreground">
+              <p className="text-slate-600">
                 Focus on your work, not paperwork. Automated calculations and
                 professional formatting.
               </p>
@@ -362,10 +376,11 @@ export default function HomePage() {
       </section>
 
       {/* CTA Section */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-emerald-600 via-emerald-700 to-teal-800 py-24">
-        <div className="absolute inset-0 bg-gradient-to-br from-emerald-600/90 to-teal-800/90"></div>
-        <div className="absolute top-10 left-10 h-64 w-64 rounded-full bg-white/10 blur-3xl"></div>
-        <div className="absolute right-10 bottom-10 h-80 w-80 rounded-full bg-white/5 blur-3xl"></div>
+      <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-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-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-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="mx-auto max-w-3xl">
@@ -384,7 +399,7 @@ export default function HomePage() {
                 <Button
                   size="lg"
                   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
                   <Rocket className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1" />
@@ -411,41 +426,41 @@ export default function HomePage() {
       </section>
 
       {/* 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="text-center">
             <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.
             </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
                 href="/auth/signin"
-                className="hover:text-foreground transition-colors"
+                className="transition-colors hover:text-emerald-600"
               >
                 Sign In
               </Link>
               <Link
                 href="/auth/register"
-                className="hover:text-foreground transition-colors"
+                className="transition-colors hover:text-emerald-600"
               >
                 Get Started
               </Link>
               <a
                 href="#features"
-                className="hover:text-foreground transition-colors"
+                className="transition-colors hover:text-emerald-600"
               >
                 Features
               </a>
               <a
                 href="#pricing"
-                className="hover:text-foreground transition-colors"
+                className="transition-colors hover:text-emerald-600"
               >
                 Pricing
               </a>
             </div>
             <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.
               </p>
             </div>