Add planner landing page with features and CTAs

Replace blank home page with a landing page explaining collaborative
route planning. Hero section with "Start Planning" CTA, 5 feature cards
(collaboration, routing, elevation, GPX, no account), secondary CTA
linking to Journal, and footer with privacy/source/attribution links.

All strings in en + de via i18n.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/planner/app/routes/home.tsx

@@ -3,20 +3,87 @@ import type { Route } from "./+types/home";
 
 export function meta(_args: Route.MetaArgs) {
   return [
-    { title: "trails.cool Planner" },
-    { name: "description", content: "Collaborative route planning" },
+    { title: "trails.cool Planner — Collaborative Route Planning" },
+    { name: "description", content: "Plan hiking and cycling routes together in real-time. No account needed." },
   ];
 }
 
+const features = [
+  { key: "featureCollaborative", icon: "👥" },
+  { key: "featureRouting", icon: "🗺️" },
+  { key: "featureElevation", icon: "⛰️" },
+  { key: "featureExport", icon: "📥" },
+  { key: "featureNoAccount", icon: "🔓" },
+] as const;
+
 export default function Home() {
   const { t } = useTranslation("planner");
 
   return (
-    <div className="flex h-full items-center justify-center">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold text-gray-900">{t("title")}</h1>
-        <p className="mt-4 text-lg text-gray-600">{t("subtitle")}</p>
-      </div>
+    <div className="flex h-full flex-col overflow-y-auto">
+      {/* Hero */}
+      <section className="flex flex-1 flex-col items-center justify-center px-4 py-16">
+        <h1 className="text-5xl font-bold tracking-tight text-gray-900 sm:text-6xl">
+          {t("title")}
+        </h1>
+        <p className="mt-4 max-w-lg text-center text-lg text-gray-600">
+          {t("landing.heroDescription")}
+        </p>
+        <a
+          href="/new"
+          className="mt-8 rounded-lg bg-blue-600 px-8 py-3 text-lg font-medium text-white shadow-sm hover:bg-blue-700"
+        >
+          {t("landing.startPlanning")}
+        </a>
+      </section>
+
+      {/* Features */}
+      <section className="border-t border-gray-200 bg-gray-50 px-4 py-16">
+        <div className="mx-auto grid max-w-4xl gap-8 sm:grid-cols-2 lg:grid-cols-3">
+          {features.map(({ key, icon }) => (
+            <div key={key} className="rounded-lg bg-white p-6 shadow-sm">
+              <div className="text-3xl">{icon}</div>
+              <h3 className="mt-3 font-semibold text-gray-900">
+                {t(`landing.${key}`)}
+              </h3>
+              <p className="mt-2 text-sm text-gray-600">
+                {t(`landing.${key}Desc`)}
+              </p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Secondary CTA */}
+      <section className="border-t border-gray-200 px-4 py-12 text-center">
+        <h2 className="text-xl font-semibold text-gray-900">
+          {t("landing.saveRoutes")}
+        </h2>
+        <p className="mt-2 text-gray-600">
+          {t("landing.saveRoutesDesc")}
+        </p>
+        <a
+          href="https://trails.cool"
+          className="mt-4 inline-block rounded-md border border-gray-300 px-6 py-2 text-gray-700 hover:bg-gray-50"
+        >
+          {t("landing.goToJournal")}
+        </a>
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t border-gray-200 px-4 py-6">
+        <div className="mx-auto flex max-w-4xl flex-wrap items-center justify-between gap-4 text-sm text-gray-400">
+          <span>{t("landing.footer.builtWith")}</span>
+          <div className="flex gap-4">
+            <a href="https://trails.cool/privacy" className="hover:text-gray-600">
+              {t("landing.footer.privacy")}
+            </a>
+            <a href="https://github.com/trails-cool/trails" className="hover:text-gray-600">
+              {t("landing.footer.source")}
+            </a>
+          </div>
+        </div>
+      </footer>
     </div>
   );
 }