refactor: move calendar chrome into the home page

src/app/layout.tsx

@@ -1,11 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-import { CalendarDays } from "lucide-react";
-import Link from "next/link";
 import { ThemeProvider } from "next-themes";
-import { ModeToggle } from "@/components/mode-toggle";
-import SignIn from "@/components/sign-in";
 import { Toaster } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 
@@ -42,26 +38,7 @@ export default function RootLayout({
 					disableTransitionOnChange
 				>
 					<TooltipProvider delayDuration={300}>
-						<header className="sticky top-0 z-50 glass-strong">
+						<main className="flex-1">{children}</main>
-							<div className="max-w-4xl mx-auto flex items-center justify-between px-4 sm:px-6 h-14">
-								<Link
-									href="/"
-									className="flex items-center gap-2.5 font-semibold text-foreground tracking-tight"
-								>
-									<CalendarDays className="h-5 w-5 text-primary" />
-									<span>{(metadata.title as string) || "iCal PWA"}</span>
-								</Link>
-								<div className="flex items-center gap-2">
-									<SignIn />
-									<ModeToggle />
-								</div>
-							</div>
-						</header>
-						<main className="flex-1">
-							<div className="max-w-4xl mx-auto px-4 sm:px-6 py-6">
-								{children}
-							</div>
-						</main>
 						<Toaster
 							closeButton
 							richColors

src/components/events-list.tsx

@@ -17,21 +17,20 @@ export const EventsList = ({ events, onEdit, onDelete }: EventsListProps) => {
 			<motion.div
 				initial={{ opacity: 0 }}
 				animate={{ opacity: 1 }}
-				className="flex flex-col items-center justify-center py-16 text-center"
+				className="flex flex-col items-center justify-center rounded-2xl border border-dashed border-border/80 bg-muted/20 px-6 py-16 text-center"
 			>
 				<Calendar1Icon className="h-10 w-10 text-muted-foreground/40 mb-3" />
-				<h3 className="text-sm font-medium text-muted-foreground">
+				<h3 className="text-sm font-medium text-foreground">No events yet</h3>
-					No events yet
+				<p className="mt-1 max-w-sm text-xs leading-relaxed text-muted-foreground/70">
-				</h3>
+					Generate a draft from natural language or add an event manually to
-				<p className="text-xs text-muted-foreground/60 mt-1">
+					start building your local calendar timeline.
-					Create your first event to get started
 				</p>
 			</motion.div>
 		);
 	}
 
 	return (
-		<div className="space-y-2">
+		<div className="space-y-3">
 			<AnimatePresence mode="popLayout">
 				{events.map((event) => (
 					<EventCard