feat: remove start.sh script and add appearance preferences management

- Deleted the start.sh script for container management.
- Added AGENTS.md for project guidelines and development principles.
- Introduced new SQL migration files for user appearance preferences and platform settings.
- Implemented appearance provider to manage user interface themes and preferences.
- Created branding utility to define and manage branding-related constants and types.

Co-authored-by: Copilot <copilot@github.com>

src/app/api/auth/forgot-password/route.ts

@@ -55,6 +55,20 @@ export async function POST(request: NextRequest) {
       })
       .where(eq(users.id, user.id));
 
+    if (!env.RESEND_API_KEY) {
+      console.warn(
+        "Password reset requested, but RESEND_API_KEY is not configured.",
+      );
+      return NextResponse.json(
+        {
+          success: true,
+          message:
+            "If an account with that email exists, password reset instructions have been sent.",
+        },
+        { status: 200 },
+      );
+    }
+
     // Send password reset email using Resend
     try {
       const resend = new Resend(env.RESEND_API_KEY);

src/app/auth/signin/page.tsx

@@ -10,6 +10,7 @@ import { Label } from "~/components/ui/label";
 import { toast } from "sonner";
 import { Logo } from "~/components/branding/logo";
 import { LegalModal } from "~/components/ui/legal-modal";
+import { env } from "~/env";
 import {
   Mail,
   Lock,
@@ -21,6 +22,7 @@ import {
 } from "lucide-react";
 
 function SignInForm() {
+  const authentikEnabled = env.NEXT_PUBLIC_AUTHENTIK_ENABLED === true;
   const router = useRouter();
   const searchParams = useSearchParams();
   const callbackUrl = searchParams.get("callbackUrl") ?? "/dashboard";
@@ -63,24 +65,27 @@ function SignInForm() {
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center relative overflow-hidden">
+    <div className="relative flex min-h-screen items-center justify-center overflow-hidden">
       {/* Blob Background */}
-      <div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none flex items-center justify-center">
+      <div className="pointer-events-none fixed inset-0 -z-10 flex items-center justify-center overflow-hidden">
         <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 className="animate-blob h-[800px] w-[800px] rounded-full bg-neutral-400/30 blur-3xl dark:bg-neutral-500/20"></div>
       </div>
 
-      <Card className="mx-auto h-screen w-full overflow-hidden border-0 shadow-none md:h-auto md:max-w-6xl md:border md:shadow-2xl md:bg-background/80 md:backdrop-blur-xl md:border-border/50 md:rounded-3xl">
+      <Card className="md:bg-background/80 md:border-border/50 mx-auto h-screen w-full overflow-hidden border-0 shadow-none md:h-auto md:max-w-6xl md:rounded-3xl md:border md:shadow-2xl md:backdrop-blur-xl">
         <CardContent className="grid h-full p-0 md:grid-cols-2">
           {/* Hero Section - Hidden on mobile */}
-          <div className="bg-primary/5 relative hidden md:flex md:flex-col md:justify-center md:p-12 border-r border-border/50">
+          <div className="bg-primary/5 border-border/50 relative hidden border-r md:flex md:flex-col md:justify-center md:p-12">
             <div className="space-y-8">
               <div className="space-y-4">
                 <Logo size="xl" />
                 <div className="space-y-3">
-                  <h1 className="text-3xl font-bold lg:text-4xl font-heading">
+                  <h1 className="font-heading text-3xl font-bold lg:text-4xl">
                     Welcome back to your
-                    <span className="text-primary italic"> invoicing workspace</span>
+                    <span className="text-primary italic">
+                      {" "}
+                      invoicing workspace
+                    </span>
                   </h1>
                   <p className="text-muted-foreground text-lg">
                     Continue managing your clients and creating professional
@@ -95,7 +100,9 @@ function SignInForm() {
                     <Users className="text-primary h-5 w-5" />
                   </div>
                   <div className="space-y-1">
-                    <h3 className="font-semibold text-foreground">Client Management</h3>
+                    <h3 className="text-foreground font-semibold">
+                      Client Management
+                    </h3>
                     <p className="text-muted-foreground text-sm">
                       Organize and track all your clients in one place
                     </p>
@@ -107,7 +114,9 @@ function SignInForm() {
                     <FileText className="text-primary h-5 w-5" />
                   </div>
                   <div className="space-y-1">
-                    <h3 className="font-semibold text-foreground">Professional Invoices</h3>
+                    <h3 className="text-foreground font-semibold">
+                      Professional Invoices
+                    </h3>
                     <p className="text-muted-foreground text-sm">
                       Beautiful templates that get you paid faster
                     </p>
@@ -119,7 +128,9 @@ function SignInForm() {
                     <TrendingUp className="text-primary h-5 w-5" />
                   </div>
                   <div className="space-y-1">
-                    <h3 className="font-semibold text-foreground">Payment Tracking</h3>
+                    <h3 className="text-foreground font-semibold">
+                      Payment Tracking
+                    </h3>
                     <p className="text-muted-foreground text-sm">
                       Monitor your income with real-time insights
                     </p>
@@ -138,35 +149,37 @@ function SignInForm() {
               </div>
 
               <div className="space-y-2 text-center md:text-left">
-                <h1 className="text-3xl font-bold font-heading">Sign In</h1>
+                <h1 className="font-heading text-3xl font-bold">Sign In</h1>
                 <p className="text-muted-foreground">
                   Enter your credentials to access your account
                 </p>
               </div>
 
-              <div className="space-y-4">
-                <Button
-                  variant="outline"
-                  type="button"
-                  className="w-full h-11 relative rounded-xl"
-                  onClick={handleSocialSignIn}
-                  disabled={loading}
-                >
-                  <Shield className="mr-2 h-4 w-4" />
-                  Sign in with Authentik
-                </Button>
+              {authentikEnabled && (
+                <div className="space-y-4">
+                  <Button
+                    variant="outline"
+                    type="button"
+                    className="relative h-11 w-full rounded-xl"
+                    onClick={handleSocialSignIn}
+                    disabled={loading}
+                  >
+                    <Shield className="mr-2 h-4 w-4" />
+                    Sign in with Authentik
+                  </Button>
 
-                <div className="relative">
-                  <div className="absolute inset-0 flex items-center">
-                    <span className="w-full border-t border-border/50" />
-                  </div>
-                  <div className="relative flex justify-center text-xs uppercase">
-                    <span className="bg-background px-2 text-muted-foreground">
-                      Or continue with
-                    </span>
+                  <div className="relative">
+                    <div className="absolute inset-0 flex items-center">
+                      <span className="border-border/50 w-full border-t" />
+                    </div>
+                    <div className="relative flex justify-center text-xs uppercase">
+                      <span className="bg-background text-muted-foreground px-2">
+                        Or continue with
+                      </span>
+                    </div>
                   </div>
                 </div>
-              </div>
+              )}
 
               <form onSubmit={handleSignIn} className="space-y-4">
                 <div className="space-y-2">
@@ -180,7 +193,7 @@ function SignInForm() {
                       onChange={(e) => setEmail(e.target.value)}
                       required
                       autoFocus
-                      className="h-11 pl-10 bg-background/50 border-border/60 focus:bg-background transition-all"
+                      className="bg-background/50 border-border/60 focus:bg-background h-11 pl-10 transition-all"
                       placeholder="m@example.com"
                     />
                   </div>
@@ -204,7 +217,7 @@ function SignInForm() {
                       value={password}
                       onChange={(e) => setPassword(e.target.value)}
                       required
-                      className="h-11 pl-10 bg-background/50 border-border/60 focus:bg-background transition-all"
+                      className="bg-background/50 border-border/60 focus:bg-background h-11 pl-10 transition-all"
                       placeholder="Enter your password"
                     />
                   </div>
@@ -212,7 +225,7 @@ function SignInForm() {
 
                 <Button
                   type="submit"
-                  className="h-11 w-full rounded-xl text-base shadow-lg shadow-primary/20 hover:shadow-primary/30"
+                  className="shadow-primary/20 hover:shadow-primary/30 h-11 w-full rounded-xl text-base shadow-lg"
                   disabled={loading}
                 >
                   {loading ? (

src/app/dashboard/invoices/[id]/_components/invoice-details-skeleton.tsx

@@ -30,15 +30,15 @@ export function InvoiceDetailsSkeleton() {
                       <Skeleton className="h-8 w-48" />
                       <Skeleton className="h-6 w-24 rounded-full" />
                     </div>
-                    <div className="space-y-1 sm:space-y-0 text-sm">
+                    <div className="space-y-1 text-sm sm:space-y-0">
                       <div className="flex gap-2">
                         <Skeleton className="h-4 w-32" />
-                        <Skeleton className="h-4 w-32 hidden sm:block" />
+                        <Skeleton className="hidden h-4 w-32 sm:block" />
                       </div>
                     </div>
                   </div>
                   <div className="flex-shrink-0 text-left sm:text-right">
-                    <Skeleton className="h-4 w-24 mb-1 sm:ml-auto" />
+                    <Skeleton className="mb-1 h-4 w-24 sm:ml-auto" />
                     <Skeleton className="h-9 w-32 sm:ml-auto" />
                   </div>
                 </div>
@@ -118,7 +118,7 @@ export function InvoiceDetailsSkeleton() {
                     <div className="space-y-3">
                       <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                         <div className="min-w-0 flex-1">
-                          <Skeleton className="h-5 w-3/4 mb-2" />
+                          <Skeleton className="mb-2 h-5 w-3/4" />
                           <div className="flex gap-4">
                             <Skeleton className="h-4 w-24" />
                             <Skeleton className="h-4 w-16" />
@@ -156,7 +156,7 @@ export function InvoiceDetailsSkeleton() {
 
         {/* Right Column - Actions */}
         <div className="space-y-6">
-          <Card className="sticky top-20">
+          <Card className="lg:sticky lg:top-6">
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
                 <Skeleton className="h-5 w-5 rounded-full" />

src/app/dashboard/invoices/[id]/_components/pdf-download-button.tsx

@@ -25,6 +25,9 @@ export function PDFDownloadButton({
     { id: invoiceId },
     { enabled: false },
   );
+  const { data: platformTheme } = api.settings.getTheme.useQuery(undefined, {
+    staleTime: 60_000,
+  });
 
   const handleDownloadPDF = async () => {
     if (isGenerating) return;
@@ -55,7 +58,13 @@ export function PDFDownloadButton({
         items: invoiceData.items,
       };
 
-      await generateInvoicePDF(pdfData);
+      await generateInvoicePDF(pdfData, {
+        pdfTemplate: platformTheme?.pdfTemplate,
+        pdfAccentColor: platformTheme?.pdfAccentColor,
+        pdfFooterText: platformTheme?.pdfFooterText,
+        pdfShowLogo: platformTheme?.pdfShowLogo,
+        pdfShowPageNumbers: platformTheme?.pdfShowPageNumbers,
+      });
       toast.success("PDF downloaded successfully");
     } catch (error) {
       console.error("PDF generation error:", error);

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

@@ -411,7 +411,7 @@ function InvoiceViewContent({ invoiceId }: { invoiceId: string }) {
 
         {/* Right Column - Actions */}
         <div className="space-y-6">
-          <Card className="sticky top-20">
+          <Card className="lg:sticky lg:top-6">
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
                 <Check className="h-5 w-5" />

src/app/dashboard/reports/page.tsx

@@ -25,6 +25,11 @@ import {
 } from "recharts";
 import { TrendingUp, DollarSign, Clock, Users, Download, Receipt, FileText } from "lucide-react";
 
+function toNumericChartValue(value: unknown) {
+  const numericValue = typeof value === "number" ? value : Number(value ?? 0);
+  return Number.isFinite(numericValue) ? numericValue : 0;
+}
+
 export default function ReportsPage() {
   const { data: invoices = [], isLoading: invoicesLoading } = api.invoices.getAll.useQuery();
   const { data: expenses = [], isLoading: expensesLoading } = api.expenses.getAll.useQuery();
@@ -259,7 +264,7 @@ export default function ReportsPage() {
                     <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
                     <XAxis dataKey="month" tick={{ fontSize: 11, fill: "hsl(var(--muted-foreground))" }} axisLine={false} tickLine={false} />
                     <YAxis tick={{ fontSize: 11, fill: "hsl(var(--muted-foreground))" }} axisLine={false} tickLine={false} tickFormatter={(v: number) => `$${v >= 1000 ? `${(v / 1000).toFixed(0)}k` : v}`} />
-                    <Tooltip formatter={(v: number) => [formatCurrency(v), "Revenue"]} contentStyle={{ background: "hsl(var(--card))", border: "1px solid hsl(var(--border))", borderRadius: "8px", fontSize: 12 }} />
+                    <Tooltip formatter={(value) => [formatCurrency(toNumericChartValue(value)), "Revenue"]} contentStyle={{ background: "hsl(var(--card))", border: "1px solid hsl(var(--border))", borderRadius: "8px", fontSize: 12 }} />
                     <Area type="monotone" dataKey="revenue" stroke="hsl(142, 76%, 36%)" fill="url(#revenueGrad)" strokeWidth={2} dot={false} />
                   </AreaChart>
                 </ResponsiveContainer>
@@ -281,7 +286,7 @@ export default function ReportsPage() {
                       <BarChart data={overviewData.topClients} layout="vertical">
                         <XAxis type="number" tick={{ fontSize: 11, fill: "hsl(var(--muted-foreground))" }} axisLine={false} tickLine={false} tickFormatter={(v: number) => `$${v >= 1000 ? `${(v / 1000).toFixed(0)}k` : v}`} />
                         <YAxis type="category" dataKey="name" tick={{ fontSize: 11, fill: "hsl(var(--muted-foreground))" }} axisLine={false} tickLine={false} width={80} />
-                        <Tooltip formatter={(v: number) => [formatCurrency(v), "Revenue"]} contentStyle={{ background: "hsl(var(--card))", border: "1px solid hsl(var(--border))", borderRadius: "8px", fontSize: 12 }} />
+                        <Tooltip formatter={(value) => [formatCurrency(toNumericChartValue(value)), "Revenue"]} contentStyle={{ background: "hsl(var(--card))", border: "1px solid hsl(var(--border))", borderRadius: "8px", fontSize: 12 }} />
                         <Bar dataKey="revenue" fill="hsl(142, 76%, 36%)" radius={[0, 4, 4, 0]} />
                       </BarChart>
                     </ResponsiveContainer>
@@ -433,7 +438,7 @@ export default function ReportsPage() {
                     <XAxis dataKey="label" tick={{ fontSize: 11, fill: "hsl(var(--muted-foreground))" }} axisLine={false} tickLine={false} />
                     <YAxis tick={{ fontSize: 11, fill: "hsl(var(--muted-foreground))" }} axisLine={false} tickLine={false} tickFormatter={(v: number) => `$${v >= 1000 ? `${(v / 1000).toFixed(0)}k` : v}`} />
                     <Tooltip
-                      formatter={(v: number, name: string) => [formatCurrency(v), name === "income" ? "Income" : "Expenses"]}
+                      formatter={(value, name) => [formatCurrency(toNumericChartValue(value)), name === "income" ? "Income" : "Expenses"]}
                       contentStyle={{ background: "hsl(var(--card))", border: "1px solid hsl(var(--border))", borderRadius: "8px", fontSize: 12 }}
                     />
                     <Bar dataKey="income" name="income" fill="hsl(142, 76%, 36%)" radius={[4, 4, 0, 0]} />

src/app/layout.tsx

@@ -6,26 +6,34 @@ import { Inter, Playfair_Display, Geist_Mono } from "next/font/google";
 import { TRPCReactProvider } from "~/trpc/react";
 import { Toaster } from "~/components/ui/sonner";
 import { AnimationPreferencesProvider } from "~/components/providers/animation-preferences-provider";
-
+import { AppearanceProvider } from "~/components/providers/appearance-provider";
+import {
+  brand,
+  defaultBodyFontPreference,
+  defaultFontPreference,
+  defaultHeadingFontPreference,
+  defaultInterfaceTheme,
+  defaultRadiusPreference,
+  defaultSidebarStyle,
+} from "~/lib/branding";
 
 import { UmamiScript } from "~/components/analytics/umami-script";
 
 export const metadata: Metadata = {
-  title: "beenvoice - Invoicing Made Simple",
-  description:
-    "Simple and efficient invoicing for freelancers and small businesses",
+  title: `${brand.name} - Invoicing Made Simple`,
+  description: brand.tagline,
   icons: [{ rel: "icon", url: "/favicon.ico" }],
 };
 
 const inter = Inter({
   subsets: ["latin"],
-  variable: "--font-sans",
+  variable: "--font-inter",
   display: "swap",
 });
 
 const playfair = Playfair_Display({
   subsets: ["latin"],
-  variable: "--font-heading",
+  variable: "--font-playfair",
   display: "swap",
 });
 
@@ -42,20 +50,62 @@ export default function RootLayout({
     <html
       suppressHydrationWarning
       lang="en"
+      data-interface-theme={defaultInterfaceTheme}
+      data-font={defaultFontPreference}
+      data-body-font={defaultBodyFontPreference}
+      data-heading-font={defaultHeadingFontPreference}
+      data-radius={defaultRadiusPreference}
+      data-sidebar-style={defaultSidebarStyle}
+      data-color-mode="system"
+      data-color-theme="slate"
       className={`${inter.variable} ${playfair.variable} ${geistMono.variable}`}
     >
+      <head>
+        <script
+          id="appearance-init"
+          dangerouslySetInnerHTML={{
+            __html: `
+              try {
+                var defaults = {
+                  interfaceTheme: "${defaultInterfaceTheme}",
+                  fontPreference: "${defaultFontPreference}",
+                  bodyFontPreference: "${defaultBodyFontPreference}",
+                  headingFontPreference: "${defaultHeadingFontPreference}",
+                  radiusPreference: "${defaultRadiusPreference}",
+                  sidebarStyle: "${defaultSidebarStyle}",
+                  colorMode: "system",
+                  colorTheme: "slate"
+                };
+                var stored = JSON.parse(localStorage.getItem("bv.appearance") || "{}");
+                var appearance = Object.assign(defaults, stored);
+                var root = document.documentElement;
+                root.dataset.interfaceTheme = appearance.interfaceTheme;
+                root.dataset.font = appearance.fontPreference;
+                root.dataset.bodyFont = appearance.bodyFontPreference || appearance.fontPreference;
+                root.dataset.headingFont = appearance.headingFontPreference || appearance.fontPreference;
+                root.dataset.radius = appearance.radiusPreference;
+                root.dataset.sidebarStyle = appearance.sidebarStyle;
+                root.dataset.colorMode = appearance.colorMode;
+                root.dataset.colorTheme = appearance.colorTheme;
+                if (appearance.colorMode === "dark") root.classList.add("dark");
+                if (appearance.customColor) root.style.setProperty("--custom-primary", appearance.customColor);
+              } catch {}
+            `,
+          }}
+        />
+      </head>
       <body className="bg-background text-foreground relative min-h-screen overflow-x-hidden font-sans antialiased">
-        <div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none flex items-center justify-center">
+        <div className="brand-background pointer-events-none fixed inset-0 -z-10 flex items-center justify-center overflow-hidden">
           <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/40 dark:bg-neutral-500/30 rounded-full blur-3xl animate-blob"></div>
+          <div className="animate-blob h-[800px] w-[800px] rounded-full bg-neutral-400/40 blur-3xl dark:bg-neutral-500/30"></div>
         </div>
 
         <TRPCReactProvider>
-          <AnimationPreferencesProvider>
-            <div className="relative z-10">
-              {children}
-            </div>
-          </AnimationPreferencesProvider>
+          <AppearanceProvider>
+            <AnimationPreferencesProvider>
+              <div className="relative z-10">{children}</div>
+            </AnimationPreferencesProvider>
+          </AppearanceProvider>
           <Toaster />
           <UmamiScript />
         </TRPCReactProvider>

src/app/page.tsx

@@ -12,20 +12,21 @@ import {
   BarChart3,
   Rocket,
 } from "lucide-react";
+import { brand } from "~/lib/branding";
 
 export default function HomePage() {
   return (
-    <div className="min-h-screen relative overflow-x-hidden">
+    <div className="relative min-h-screen 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="pointer-events-none fixed inset-0 -z-10 flex items-center justify-center overflow-hidden">
         <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 className="animate-blob h-[800px] w-[800px] rounded-full bg-neutral-400/30 blur-3xl dark:bg-neutral-500/20"></div>
       </div>
 
       {/* Navigation */}
-      <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">
+      <nav className="border-border/60 bg-background/80 fixed top-4 right-4 left-4 z-50 m-4 rounded-2xl border backdrop-blur-md">
         <div className="mx-auto px-6">
           <div className="flex h-16 items-center justify-between">
             <Logo />
@@ -67,25 +68,25 @@ export default function HomePage() {
       <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-8 border px-4 py-1 text-sm rounded-full">
+            <Badge className="bg-primary/10 text-primary border-primary/20 mb-8 rounded-full border px-4 py-1 text-sm">
               <Zap className="mr-2 h-3.5 w-3.5" />
               Completely Free for Everyone
             </Badge>
 
-            <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 />
+            <h1 className="text-foreground font-heading mb-8 text-6xl leading-tight font-bold tracking-tight sm:text-7xl lg:text-8xl">
+              {brand.name} <br />
               <span className="text-primary italic">Beautifully Simple.</span>
             </h1>
 
-            <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 className="text-muted-foreground mx-auto mb-12 max-w-2xl font-sans text-xl leading-relaxed">
+              {brand.tagline}
             </p>
 
             <div className="flex flex-col items-center gap-6 sm:flex-row sm:justify-center">
               <Link href="/auth/register">
                 <Button
                   size="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"
+                  className="shadow-primary/20 hover:shadow-primary/30 h-14 rounded-2xl px-10 text-lg shadow-xl transition-all duration-300 hover:shadow-2xl"
                 >
                   Start For Free
                   <ArrowRight className="ml-2 h-5 w-5" />
@@ -95,14 +96,14 @@ export default function HomePage() {
                 <Button
                   variant="outline"
                   size="lg"
-                  className="h-14 px-10 text-lg rounded-2xl border-border/50 bg-background/50 hover:bg-background/80 backdrop-blur-sm"
+                  className="border-border/50 bg-background/50 hover:bg-background/80 h-14 rounded-2xl px-10 text-lg backdrop-blur-sm"
                 >
                   Learn More
                 </Button>
               </a>
             </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="text-muted-foreground/80 mt-16 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>
@@ -121,11 +122,12 @@ export default function HomePage() {
       </section>
 
       {/* Features Section */}
-      <section id="features" className="py-24 relative">
-        <div className="container mx-auto px-4 relative z-10">
+      <section id="features" className="relative py-24">
+        <div className="relative z-10 container mx-auto px-4">
           <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 className="text-foreground font-heading mb-6 text-4xl font-bold sm:text-5xl">
+              Everything you need to{" "}
+              <span className="text-primary italic">thrive</span>
             </h2>
             <p className="text-muted-foreground mx-auto max-w-2xl text-lg">
               Powerful features wrapped in a calm, focused interface.
@@ -137,28 +139,46 @@ export default function HomePage() {
               {
                 icon: Rocket,
                 title: "Quick Setup",
-                description: "Start creating invoices immediately. No complicated setup required.",
-                items: ["Simple client management", "Professional templates", "Easy invoice sending"]
+                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"]
+                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"]
-              }
+                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">
+              <Card
+                key={i}
+                className="group border-border/40 bg-background/60 backdrop-blur-xl transition-transform duration-500 hover:-translate-y-2"
+              >
                 <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">
+                  <h3 className="text-foreground font-heading mb-4 text-2xl font-bold">
                     {feature.title}
                   </h3>
                   <p className="text-muted-foreground mb-6 leading-relaxed">
@@ -166,8 +186,11 @@ export default function HomePage() {
                   </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" />
+                      <li
+                        key={j}
+                        className="text-foreground/80 flex items-center gap-3 text-sm"
+                      >
+                        <div className="bg-primary h-1.5 w-1.5 rounded-full" />
                         {item}
                       </li>
                     ))}
@@ -180,39 +203,45 @@ export default function HomePage() {
       </section>
 
       {/* Pricing Section */}
-      <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>
+      <section id="pricing" className="relative overflow-hidden py-24">
+        <div className="relative z-10 container mx-auto px-4">
+          <div className="mx-auto mb-16 max-w-4xl text-center">
+            <h2 className="font-heading mb-6 text-5xl font-bold">
+              Simple Pricing
+            </h2>
+            <p className="text-muted-foreground text-xl">
+              Focus on your work, not on fees.
+            </p>
           </div>
 
-          <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">
+          <div className="mx-auto max-w-md">
+            <Card className="border-primary/50 shadow-primary/5 bg-background/80 relative overflow-visible shadow-2xl backdrop-blur-xl">
+              <div className="bg-primary text-primary-foreground absolute -top-4 left-1/2 -translate-x-1/2 rounded-full px-6 py-1.5 text-sm font-medium shadow-lg">
                 Forever Free
               </div>
               <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="font-heading mb-2 text-6xl font-bold">$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">
+                <div className="mb-10 space-y-4 pl-8 text-left">
                   {[
                     "Unlimited Invoices",
                     "Unlimited Clients",
                     "PDF Downloads",
                     "Payment Tracking",
-                    "Email Support"
+                    "Email Support",
                   ].map((item, i) => (
                     <div key={i} className="flex items-center gap-3">
-                      <Check className="h-5 w-5 text-primary shrink-0" />
+                      <Check className="text-primary h-5 w-5 shrink-0" />
                       <span className="text-foreground/90">{item}</span>
                     </div>
                   ))}
                 </div>
 
                 <Link href="/auth/register" className="block">
-                  <Button size="lg" className="w-full text-lg h-12 rounded-xl">
+                  <Button size="lg" className="h-12 w-full rounded-xl text-lg">
                     Get Started
                   </Button>
                 </Link>
@@ -223,20 +252,27 @@ export default function HomePage() {
       </section>
 
       {/* Footer */}
-      <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">
+      <footer className="border-border/40 bg-background/50 mt-12 border-t py-12 backdrop-blur-sm">
+        <div className="container mx-auto flex flex-col items-center justify-between gap-6 px-6 md:flex-row">
           <div className="flex items-center gap-3">
             <Logo size="sm" />
-            <span className="text-sm text-muted-foreground">© 2024 beenvoice</span>
+            <span className="text-muted-foreground text-sm">
+              © 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 className="text-muted-foreground flex gap-8 text-sm">
+            <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>
   );
 }