add Emil-style UI polish pass (animations, shared components, feel)

client/src/components/shared/Skeleton.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+
+// Simple skeleton placeholder with shimmer. Size via className or props.
+export function Skeleton({
+  width, height, radius, className, style,
+}: {
+  width?: number | string
+  height?: number | string
+  radius?: number | string
+  className?: string
+  style?: React.CSSProperties
+}): React.ReactElement {
+  return (
+    <div
+      className={`trek-skeleton ${className ?? ''}`.trim()}
+      style={{
+        width,
+        height: height ?? 14,
+        borderRadius: radius,
+        ...style,
+      }}
+      aria-hidden
+    />
+  )
+}
+
+// Trip card skeleton matching SpotlightCard layout
+export function SpotlightSkeleton(): React.ReactElement {
+  return (
+    <div
+      className="relative rounded-3xl overflow-hidden mb-8"
+      style={{ minHeight: 340, background: 'var(--bg-tertiary)' }}
+    >
+      <div className="trek-skeleton absolute inset-0" style={{ borderRadius: 24 }} />
+      <div className="relative p-6 flex flex-col justify-end" style={{ minHeight: 340 }}>
+        <Skeleton width={160} height={40} radius={8} style={{ marginBottom: 8 }} />
+        <Skeleton width={220} height={16} radius={4} />
+      </div>
+    </div>
+  )
+}
+
+// Trip list item skeleton
+export function TripCardSkeleton(): React.ReactElement {
+  return (
+    <div
+      className="rounded-2xl border border-zinc-200 dark:border-zinc-700 overflow-hidden"
+      style={{ background: 'var(--bg-card)' }}
+    >
+      <Skeleton height={140} radius={0} />
+      <div className="p-4 flex flex-col gap-2">
+        <Skeleton width="60%" height={18} />
+        <Skeleton width="40%" height={12} />
+      </div>
+    </div>
+  )
+}
+
+// Day sidebar skeleton row
+export function DaySkeleton(): React.ReactElement {
+  return (
+    <div style={{ padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 8 }}>
+      <Skeleton width={120} height={16} />
+      <Skeleton width="80%" height={12} />
+      <Skeleton width="60%" height={12} />
+    </div>
+  )
+}
+
+export default Skeleton