feat(layout): add main view layout with sidebar and map area

src/app/page.tsx

@@ -1,15 +1,22 @@
-import { fetchNetworks } from '@/lib/api/networks';
-
-export default async function Home() {
-  const networks = await fetchNetworks();
+import { Sidebar } from '@/components/layout/sidebar';
+import { MapSkeleton } from '@/components/map/map-skeleton';
 
+export default function Home() {
   return (
-    <main className="flex min-h-screen items-center justify-center">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold text-torea-bay-700">CycleMap</h1>
-        <p className="mt-2 text-zinc-500">Explore bicycle sharing networks around the world</p>
-        <p className="mt-4 text-sm text-zinc-400">API Test: Found {networks.length} networks</p>
-      </div>
-    </main>
+    <div className="flex h-screen flex-col lg:flex-row">
+      {/* Sidebar - Network list and filters */}
+      <Sidebar>
+        <div className="p-4">
+          <p className="text-sm text-torea-bay-500">
+            Network list and filters will be displayed here
+          </p>
+        </div>
+      </Sidebar>
+
+      {/* Map area - Takes remaining space */}
+      <main className="relative min-h-[300px] flex-1 lg:min-h-0">
+        <MapSkeleton />
+      </main>
+    </div>
   );
 }

src/components/layout/header.tsx

@@ -0,0 +1,14 @@
+import { Bike } from 'lucide-react';
+
+export function Header() {
+  return (
+    <header className="flex items-center gap-[8px] bg-white">
+      <div className="flex items-center gap-2">
+        <div className="flex h-[24px] w-[24px] items-center justify-center">
+          <Bike className="text-grenadier-400" aria-hidden="true" />
+        </div>
+        <h1 className="text-xl font-semibold text-grenadier-400">CycleMap</h1>
+      </div>
+    </header>
+  );
+}

src/components/layout/index.ts

@@ -0,0 +1,2 @@
+export { Header } from './header';
+export { Sidebar } from './sidebar';

src/components/layout/sidebar.tsx

@@ -0,0 +1,14 @@
+import { Header } from './header';
+
+interface SidebarProps {
+  children: React.ReactNode;
+}
+
+export function Sidebar({ children }: SidebarProps) {
+  return (
+    <aside className="flex h-full w-full flex-col bg-white lg:w-(--sidebar-width) ps-[40px] pt-[40px]">
+      <Header />
+      <div className="flex-1 overflow-y-auto">{children}</div>
+    </aside>
+  );
+}

src/components/map/index.ts

@@ -0,0 +1 @@
+export { MapSkeleton } from './map-skeleton';

src/components/map/map-skeleton.tsx

@@ -0,0 +1,18 @@
+import { MapPin } from 'lucide-react';
+
+export function MapSkeleton() {
+  return (
+    <div className="flex h-full w-full items-center justify-center bg-torea-bay-50">
+      <div className="flex flex-col items-center gap-3 text-torea-bay-400">
+        <div className="relative">
+          <MapPin className="h-12 w-12 animate-pulse" aria-hidden="true" />
+          <span className="absolute -right-1 -top-1 flex h-4 w-4">
+            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-grenadier-400 opacity-75" />
+            <span className="relative inline-flex h-4 w-4 rounded-full bg-grenadier-500" />
+          </span>
+        </div>
+        <p className="text-sm font-medium">Loading map...</p>
+      </div>
+    </div>
+  );
+}