Initial commit

frontend/app/topics/page.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import Link from "next/link";
+import { Tags } from "lucide-react";
+import { FollowButton } from "@/components/shared/FollowButton";
+
+const TOPICS = [
+  { tag: "healthcare", label: "Healthcare", desc: "Health policy, insurance, Medicare, Medicaid" },
+  { tag: "taxation", label: "Taxation", desc: "Tax law, IRS, fiscal policy" },
+  { tag: "defense", label: "Defense", desc: "Military, NDAA, national security" },
+  { tag: "education", label: "Education", desc: "Schools, student loans, higher education" },
+  { tag: "immigration", label: "Immigration", desc: "Border, visas, asylum, citizenship" },
+  { tag: "environment", label: "Environment", desc: "Climate, EPA, conservation, energy" },
+  { tag: "housing", label: "Housing", desc: "Affordable housing, mortgages, HUD" },
+  { tag: "infrastructure", label: "Infrastructure", desc: "Roads, bridges, broadband, transit" },
+  { tag: "technology", label: "Technology", desc: "AI, cybersecurity, telecom, internet" },
+  { tag: "agriculture", label: "Agriculture", desc: "Farm bill, USDA, food policy" },
+  { tag: "judiciary", label: "Judiciary", desc: "Courts, criminal justice, civil rights" },
+  { tag: "foreign-policy", label: "Foreign Policy", desc: "Diplomacy, foreign aid, sanctions" },
+  { tag: "veterans", label: "Veterans", desc: "VA, veteran benefits, military families" },
+  { tag: "social-security", label: "Social Security", desc: "SS, Medicare, retirement benefits" },
+  { tag: "trade", label: "Trade", desc: "Tariffs, trade agreements, WTO" },
+  { tag: "budget", label: "Budget", desc: "Appropriations, debt ceiling, spending" },
+  { tag: "energy", label: "Energy", desc: "Oil, gas, renewables, nuclear" },
+  { tag: "banking", label: "Banking", desc: "Financial regulation, Fed, CFPB" },
+  { tag: "transportation", label: "Transportation", desc: "FAA, DOT, aviation, rail" },
+  { tag: "labor", label: "Labor", desc: "Minimum wage, unions, OSHA, employment" },
+];
+
+export default function TopicsPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold">Topics</h1>
+        <p className="text-muted-foreground text-sm mt-1">
+          Follow topics to see related bills in your feed
+        </p>
+      </div>
+
+      <div className="grid grid-cols-2 gap-3">
+        {TOPICS.map(({ tag, label, desc }) => (
+          <div key={tag} className="bg-card border border-border rounded-lg p-4 flex items-start justify-between gap-3">
+            <div>
+              <div className="flex items-center gap-2 mb-1">
+                <Tags className="w-3.5 h-3.5 text-muted-foreground" />
+                <Link
+                  href={`/bills?topic=${tag}`}
+                  className="font-medium text-sm hover:text-primary transition-colors"
+                >
+                  {label}
+                </Link>
+              </div>
+              <p className="text-xs text-muted-foreground">{desc}</p>
+            </div>
+            <FollowButton type="topic" value={tag} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}