Add apps folder (for full-screen iframes) and OBBBA explorer placeholder (#2648)

* Add apps folder and first entry

* Update with public URL

* Address comments

* Format

Author: nikhilwoodruff

src/PolicyEngine.jsx

@@ -13,6 +13,7 @@ import {
 import Donate from "./pages/Donate";
 import { useLocation } from "react-router-dom";
 import BlogPage from "./pages/BlogPage";
+import AppPage from "./pages/AppPage";
 import { COUNTRY_BASELINE_POLICIES, COUNTRY_CODES } from "./data/countries";
 
 import { useEffect, useState, lazy, Suspense } from "react";
@@ -344,6 +345,7 @@ export default function PolicyEngine() {
           <Route path="benefits" element={<BenefitAccessPage />} />
           <Route path="education" element={<EducationPage />} />
           <Route path="open-source" element={<OpenSourcePage />} />
+          <Route path=":appName" element={<AppPage />} />
 
           <Route
             path="household/*"

src/apps/appTransformers.js

@@ -0,0 +1,6 @@
+import appsData from "./apps.json";
+
+export const apps = appsData.map((app) => ({
+  ...app,
+  slug: app.slug || app.title.toLowerCase().replace(/\s+/g, "-"),
+}));

src/apps/apps.json

@@ -0,0 +1,9 @@
+[
+  {
+    "title": "OBBA household impact explorer",
+    "description": "Interactive tool to explore household-level impacts of the One Big Beautiful Bill Act",
+    "url": "https://policyengine.github.io/obbba-scatter",
+    "slug": "obba-household-explorer",
+    "tags": ["us", "featured", "policy"]
+  }
+]

src/pages/AppPage.jsx

@@ -0,0 +1,47 @@
+import { useParams } from "react-router-dom";
+import Header from "../layout/Header";
+import Footer from "../layout/Footer";
+import { apps } from "../apps/appTransformers";
+import { Helmet } from "react-helmet";
+
+export default function AppPage() {
+  const { appName } = useParams();
+
+  const app = apps.find((app) => app.slug === appName);
+
+  if (!app) {
+    return (
+      <>
+        <Header />
+        <div style={{ padding: "50px", textAlign: "center" }}>
+          <h1>App not found</h1>
+          <p>The app &ldquo;{appName}&rdquo; could not be found.</p>
+        </div>
+        <Footer />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Helmet>
+        <title>{app.title} - PolicyEngine</title>
+        <meta name="description" content={app.description} />
+      </Helmet>
+      <Header />
+      <div style={{ height: "var(--app-content-height)" }}>
+        <iframe
+          src={app.url}
+          style={{
+            width: "100%",
+            height: "100%",
+            border: "none",
+          }}
+          title={app.title}
+          aria-label={app.description}
+        />
+      </div>
+      <Footer />
+    </>
+  );
+}

src/style/App.css

@@ -19,6 +19,8 @@ body {
 
 :root {
   --bs-body-font-weight: 400;
+  --header-height: 80px;
+  --app-content-height: calc(100vh - var(--header-height));
 }
 
 .ant-select-selection-item {