gitfor/platform

import { createFileRoute, Link, notFound } from "@tanstack/react-router";
import { CtaBand } from "~/components/marketing/CtaBand";
import { DisplayTitle } from "~/components/marketing/DisplayTitle";
import { FeatureDemo } from "~/components/marketing/FeatureDemo";
import { MarketingHero } from "~/components/marketing/MarketingHero";
import { FEATURE_PAGES, featurePage } from "~/lib/marketing/features";
import { buttonClass } from "~/ui/Button";
import { CodeBlock } from "~/ui/CodeBlock";
import { PageContainer } from "~/ui/PageContainer";
import { TextLink } from "~/ui/TextLink";
import { seo } from "~/utils/seo";
import { featureOgPath } from "~/lib/og";

export const Route = createFileRoute("/features/$slug")({
  loader: ({ params }) => {
    const page = featurePage(params.slug);
    if (!page) throw notFound();
    return page;
  },
  head: ({ loaderData, match }) => ({
    meta: loaderData
      ? seo({
          origin: match.context.publicUrl,
          path: `/features/${loaderData.slug}`,
          title: `${loaderData.nav} · gitfor`,
          description: loaderData.lede,
          image: featureOgPath(loaderData.slug, loaderData.title, loaderData.lede),
          imageAlt: loaderData.title,
        })
      : [],
  }),
  component: FeaturePage,
});

function FeaturePage() {
  const page = Route.useLoaderData();
  const others = FEATURE_PAGES.filter((other) => other.slug !== page.slug);
  return (
    <>
      <MarketingHero