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/demo/app/layout.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { Sidebar } from '@/components/layout/sidebar';
 import { TopBar } from '@/components/layout/top-bar';
 import { MobileNav } from '@/components/layout/mobile-nav';
 import { DemoBanner } from '@/components/demo/demo-banner';
@@ -12,19 +11,12 @@ export default function DemoAppLayout({ children }: { children: React.ReactNode
     <DataProviderProvider value={demoProvider}>
       <div className="min-h-screen bg-background">
         <DemoBanner />
+        <TopBar />
 
-        {/* Sidebar - hidden on mobile */}
-        <Sidebar />
+        <main className="max-w-7xl mx-auto px-6 py-8 lg:py-12 pb-28 md:pb-12">
+          {children}
+        </main>
 
-        {/* Main content area */}
-        <div className="md:ml-16 lg:ml-64 flex flex-col min-h-screen">
-          <TopBar />
-          <main className="flex-1 p-4 lg:p-6 pb-20 md:pb-6">
-            {children}
-          </main>
-        </div>
-
-        {/* Mobile bottom nav */}
         <MobileNav />
       </div>
     </DataProviderProvider>

src/app/demo/page.tsx

@@ -1,38 +1,57 @@
 "use client";
 
 import Link from "next/link";
-import { Button } from "@/components/ui/button";
+import Image from "next/image";
+import { ArrowRight, Play } from "lucide-react";
 
 export default function DemoLandingPage() {
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center bg-background px-4">
-      <div className="mx-auto max-w-md text-center">
+    <div className="flex min-h-screen flex-col items-center justify-center bg-[#FAFAF7] px-6 relative overflow-hidden">
+      {/* Decorative background */}
+      <div className="absolute top-20 right-[-10%] w-[500px] h-[500px] rounded-full bg-[#E07A3A]/[0.04] blur-3xl pointer-events-none" />
+      <div className="absolute bottom-0 left-[-5%] w-[300px] h-[300px] rounded-full bg-[#0D7C66]/[0.03] blur-3xl pointer-events-none" />
+
+      <div className="relative mx-auto max-w-lg text-center">
         {/* Logo */}
-        <h1 className="mb-8 text-2xl font-bold tracking-tight text-primary">
-          Casera
-        </h1>
+        <Link href="/" className="inline-flex items-center gap-2.5 mb-10">
+          <Image
+            src="/logo.png"
+            alt="Casera"
+            width={36}
+            height={36}
+            className="rounded-lg"
+          />
+          <span className="font-heading text-2xl font-bold tracking-tight text-[#1C1917]">
+            Casera
+          </span>
+        </Link>
 
         {/* Hero */}
-        <h2 className="text-3xl font-bold tracking-tight">
-          Try Casera &mdash; No Account Needed
-        </h2>
-        <p className="mt-3 text-muted-foreground">
-          Manage your home maintenance, track tasks, organize contractors, and
-          store documents.
+        <h1 className="font-heading text-4xl font-bold tracking-tight text-[#1C1917]">
+          See Casera in action
+        </h1>
+        <p className="mt-4 text-lg text-[#78716C] leading-relaxed">
+          Explore the full app with sample data. No account needed —
+          just click and start exploring.
         </p>
 
         {/* Actions */}
-        <div className="mt-8 flex flex-col gap-3">
-          <Button size="lg" asChild>
-            <Link href="/demo/app">Start Demo</Link>
-          </Button>
+        <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
+          <Link
+            href="/demo/app"
+            className="group inline-flex items-center gap-2.5 rounded-full bg-[#E07A3A] px-8 py-4 text-base font-semibold text-white shadow-lg shadow-[#E07A3A]/20 hover:bg-[#C4632A] transition-all"
+          >
+            <Play className="size-4" />
+            Launch Demo
+            <ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
+          </Link>
         </div>
 
         {/* Login link */}
-        <p className="mt-6 text-sm text-muted-foreground">
+        <p className="mt-8 text-sm text-[#A8A29E]">
           Already have an account?{" "}
-          <Link href="/login" className="text-primary hover:underline">
-            Log In
+          <Link href="/login" className="text-[#E07A3A] font-medium hover:underline">
+            Sign In
           </Link>
         </p>
       </div>