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/components/residences/residence-card.tsx

@@ -3,7 +3,6 @@
 import Link from "next/link";
 import { MapPin } from "lucide-react";
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { useDataProvider } from "@/lib/demo/data-provider-context";
 import type { MyResidenceResponse } from "@/lib/api/residences";
@@ -21,36 +20,36 @@ export function ResidenceCard({ data }: ResidenceCardProps) {
     .join(", ");
 
   return (
-    <Link href={`${basePath}/residences/${residence.id}`} className="block">
-      <Card className="transition-colors hover:border-primary/40">
-        <CardHeader>
-          <CardTitle className="text-base">{residence.name}</CardTitle>
+    <Link href={`${basePath}/residences/${residence.id}`} className="block group">
+      <div className="rounded-2xl border border-border bg-card p-5 transition-all duration-200 hover:shadow-md hover:shadow-black/[0.04] hover:-translate-y-0.5 hover:border-primary/30">
+        <div className="mb-3">
+          <h3 className="font-heading font-bold text-base leading-tight group-hover:text-primary transition-colors">
+            {residence.name}
+          </h3>
           {address && (
-            <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+            <div className="flex items-center gap-1.5 text-sm text-muted-foreground mt-1.5">
               <MapPin className="size-3.5 shrink-0" aria-hidden="true" />
               <span className="sr-only">Address:</span>
               <span className="truncate">{address}</span>
             </div>
           )}
-        </CardHeader>
-        <CardContent>
-          <div className="flex flex-wrap gap-2">
-            {task_summary.overdue > 0 && (
-              <Badge variant="destructive">
-                {task_summary.overdue} overdue
-              </Badge>
-            )}
-            {task_summary.due_soon > 0 && (
-              <Badge variant="secondary">
-                {task_summary.due_soon} due soon
-              </Badge>
-            )}
-            <Badge variant="outline">
-              {task_summary.total} {task_summary.total === 1 ? "task" : "tasks"}
+        </div>
+        <div className="flex flex-wrap gap-2">
+          {task_summary.overdue > 0 && (
+            <Badge variant="destructive" className="rounded-lg">
+              {task_summary.overdue} overdue
             </Badge>
-          </div>
-        </CardContent>
-      </Card>
+          )}
+          {task_summary.due_soon > 0 && (
+            <Badge variant="secondary" className="rounded-lg">
+              {task_summary.due_soon} due soon
+            </Badge>
+          )}
+          <Badge variant="outline" className="rounded-lg">
+            {task_summary.total} {task_summary.total === 1 ? "task" : "tasks"}
+          </Badge>
+        </div>
+      </div>
     </Link>
   );
 }