feat: redesign app UI — top nav, clean dashboard, warm branding

- Replace sidebar with top navigation bar (like Airbnb/Nextdoor)
- Redesign dashboard: home cards, coming up tasks, quick action pills
- Remove widget-heavy layout (charts, stats, activity feed)
- Add landing page with hero, features, how-it-works, CTA sections
- Update auth pages with split layout
- Clean white theme with neutral grays, brand orange/teal accents
- Friendly copy across all empty states and page headers
- Add Bricolage Grotesque + Outfit fonts
- Default to light mode

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/(auth)/layout.tsx

@@ -1,10 +1,63 @@
 "use client";
 
+import Image from "next/image";
+import Link from "next/link";
+
 export default function AuthLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-background p-4">
-      <div className="w-full max-w-md">
-        {children}
+    <div className="min-h-screen flex bg-[#FAFAF7]">
+      {/* Left brand panel — hidden on mobile */}
+      <div className="hidden lg:flex lg:w-[480px] xl:w-[540px] relative flex-col justify-between bg-[#1C1917] p-10 overflow-hidden">
+        {/* Decorative blurs */}
+        <div className="absolute top-0 right-0 w-80 h-80 rounded-full bg-[#E07A3A]/15 blur-[100px] pointer-events-none" />
+        <div className="absolute bottom-0 left-0 w-64 h-64 rounded-full bg-[#0D7C66]/10 blur-[80px] pointer-events-none" />
+
+        {/* Subtle grid */}
+        <div
+          className="absolute inset-0 opacity-[0.03]"
+          style={{
+            backgroundImage:
+              "linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)",
+            backgroundSize: "48px 48px",
+          }}
+        />
+
+        <div className="relative">
+          <Link href="/" className="flex items-center gap-2.5">
+            <Image
+              src="/logo.png"
+              alt="Casera"
+              width={36}
+              height={36}
+              className="rounded-lg"
+            />
+            <span className="font-heading text-xl font-bold text-white">
+              Casera
+            </span>
+          </Link>
+        </div>
+
+        <div className="relative">
+          <h2 className="font-heading text-3xl font-bold text-white leading-snug mb-4">
+            Home maintenance,<br />
+            <span className="text-[#E07A3A]">simplified.</span>
+          </h2>
+          <p className="text-[#A8A29E] leading-relaxed max-w-sm">
+            Track tasks, organize contractors, and store important
+            documents — all in one place built for homeowners.
+          </p>
+        </div>
+
+        <p className="relative text-xs text-[#78716C]">
+          &copy; {new Date().getFullYear()} Casera
+        </p>
+      </div>
+
+      {/* Right form area */}
+      <div className="flex-1 flex items-center justify-center p-6 sm:p-8">
+        <div className="w-full max-w-md">
+          {children}
+        </div>
       </div>
     </div>
   );