Port AI & machine learning page to Next.js website

website/src/app/[countryId]/ai/page.tsx

@@ -0,0 +1,32 @@
+import type { Metadata } from "next";
+import { VALID_COUNTRIES } from "@/lib/countries";
+import HeroSection from "@/components/static/HeroSection";
+import AIContent from "@/components/ai/AIContent";
+
+export const metadata: Metadata = {
+  title: "AI & machine learning",
+  description:
+    "PolicyEngine uses artificial intelligence and machine learning to make policy analysis more accurate and accessible.",
+};
+
+export function generateStaticParams() {
+  return VALID_COUNTRIES.map((countryId) => ({ countryId }));
+}
+
+export default async function AIPage({
+  params,
+}: {
+  params: Promise<{ countryId: string }>;
+}) {
+  const { countryId } = await params;
+
+  return (
+    <div>
+      <HeroSection
+        title="AI & machine learning"
+        description="PolicyEngine uses artificial intelligence and machine learning to make policy analysis more accurate and accessible."
+      />
+      <AIContent countryId={countryId} />
+    </div>
+  );
+}

website/src/components/Header.tsx

@@ -429,7 +429,13 @@ const mobileNavLinkStyle: React.CSSProperties = {
   display: "block",
 };
 
-function MobileNavLink({ item, onClose }: { item: NavItemSetup; onClose: () => void }) {
+function MobileNavLink({
+  item,
+  onClose,
+}: {
+  item: NavItemSetup;
+  onClose: () => void;
+}) {
   const Tag = item.external ? "a" : Link;
   return (
     <Tag href={item.href || "#"} onClick={onClose} style={mobileNavLinkStyle}>
@@ -582,15 +588,26 @@ export default function Header() {
 
   const navItems: NavItemSetup[] = [
     { label: "Research", href: `/${countryId}/research`, hasDropdown: false },
-    { label: "Model", href: `/${countryId}/model`, hasDropdown: false, external: true },
-    { label: "API", href: `/${countryId}/api`, hasDropdown: false, external: true },
+    {
+      label: "Model",
+      href: `/${countryId}/model`,
+      hasDropdown: false,
+      external: true,
+    },
+    {
+      label: "API",
+      href: `/${countryId}/api`,
+      hasDropdown: false,
+      external: true,
+    },
     {
       label: "About",
       hasDropdown: true,
       dropdownItems: [
         { label: "Team", href: `/${countryId}/team` },
         { label: "Supporters", href: `/${countryId}/supporters` },
         { label: "Citations", href: `/${countryId}/citations` },
+        { label: "AI & machine learning", href: `/${countryId}/ai` },
       ],
     },
     { label: "Donate", href: `/${countryId}/donate`, hasDropdown: false },