feat(notifications): follow modes, milestone alerts, notification enhancements

Follow Modes (neutral / pocket_veto / pocket_boost):
- Alembic migration 0013 adds follow_mode column to follows table
- FollowButton rewritten as mode-aware dropdown for bills; simple toggle for members/topics
- PATCH /api/follows/{id}/mode endpoint with validation
- Dispatcher filters pocket_veto follows (suppress new_document/new_amendment events)
- Dispatcher adds ntfy Actions header for pocket_boost follows

Change-driven (milestone) Alerts:
- New notification_utils.py with shared emit helpers and 30-min dedup
- congress_poller emits bill_updated events on milestone action text
- llm_processor replaced with shared emit util (also notifies member/topic followers)

Notification Enhancements:
- ntfy priority levels (high for bill_updated, default for others)
- Quiet hours (UTC): dispatcher holds events outside allowed window
- Digest mode (daily/weekly): send_notification_digest Celery beat task
- Notification history endpoint + Recent Alerts UI section
- Enriched following page (bill titles, member photos/details via sub-components)
- Follow mode test buttons in admin settings panel

Infrastructure:
- nginx: switch upstream blocks to set $variable proxy_pass so Docker DNS
  re-resolves upstream IPs after container rebuilds (valid=10s)
- TROUBLESHOOTING.md documenting common Docker/nginx/postgres gotchas

Authored-By: Jack Levy

frontend/app/notifications/page.tsx

@@ -2,8 +2,13 @@
 
 import { useState, useEffect } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
-import { Bell, Rss, CheckCircle, Copy, RefreshCw, XCircle, FlaskConical } from "lucide-react";
+import {
+  Bell, Rss, CheckCircle, Copy, RefreshCw, XCircle,
+  FlaskConical, Clock, Calendar, FileText, AlertTriangle,
+} from "lucide-react";
+import Link from "next/link";
 import { notificationsAPI, type NotificationTestResult } from "@/lib/api";
+import type { NotificationEvent } from "@/lib/types";
 
 const AUTH_METHODS = [
   { value: "none", label: "No authentication", hint: "Public ntfy.sh topics or open self-hosted servers" },
@@ -11,12 +16,39 @@ const AUTH_METHODS = [
   { value: "basic", label: "Username & password", hint: "For servers behind HTTP basic auth or nginx ACL" },
 ];
 
+const HOURS = Array.from({ length: 24 }, (_, i) => ({
+  value: i,
+  label: `${i.toString().padStart(2, "0")}:00 UTC`,
+}));
+
+const EVENT_META: Record<string, { label: string; icon: typeof Bell; color: string }> = {
+  new_document: { label: "New Bill Text", icon: FileText, color: "text-blue-500" },
+  new_amendment: { label: "Amendment Filed", icon: FileText, color: "text-purple-500" },
+  bill_updated: { label: "Bill Updated", icon: AlertTriangle, color: "text-orange-500" },
+};
+
+function timeAgo(iso: string) {
+  const diff = Date.now() - new Date(iso).getTime();
+  const m = Math.floor(diff / 60000);
+  if (m < 1) return "just now";
+  if (m < 60) return `${m}m ago`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h ago`;
+  return `${Math.floor(h / 24)}d ago`;
+}
+
 export default function NotificationsPage() {
   const { data: settings, refetch } = useQuery({
     queryKey: ["notification-settings"],
     queryFn: () => notificationsAPI.getSettings(),
   });
 
+  const { data: history = [], isLoading: historyLoading } = useQuery({
+    queryKey: ["notification-history"],
+    queryFn: () => notificationsAPI.getHistory(),
+    staleTime: 60 * 1000,
+  });
+
   const update = useMutation({
     mutationFn: (data: Parameters<typeof notificationsAPI.updateSettings>[0]) =>
       notificationsAPI.updateSettings(data),
@@ -46,6 +78,17 @@ export default function NotificationsPage() {
   const [rssSaved, setRssSaved] = useState(false);
   const [copied, setCopied] = useState(false);
 
+  // Quiet hours state
+  const [quietEnabled, setQuietEnabled] = useState(false);
+  const [quietStart, setQuietStart] = useState(22);
+  const [quietEnd, setQuietEnd] = useState(8);
+  const [quietSaved, setQuietSaved] = useState(false);
+
+  // Digest state
+  const [digestEnabled, setDigestEnabled] = useState(false);
+  const [digestFrequency, setDigestFrequency] = useState<"daily" | "weekly">("daily");
+  const [digestSaved, setDigestSaved] = useState(false);
+
   // Populate from loaded settings
   useEffect(() => {
     if (!settings) return;
@@ -54,6 +97,15 @@ export default function NotificationsPage() {
     setToken(settings.ntfy_token ?? "");
     setUsername(settings.ntfy_username ?? "");
     setPassword(settings.ntfy_password ?? "");
+    setDigestEnabled(settings.digest_enabled ?? false);
+    setDigestFrequency(settings.digest_frequency ?? "daily");
+    if (settings.quiet_hours_start != null) {
+      setQuietEnabled(true);
+      setQuietStart(settings.quiet_hours_start);
+      setQuietEnd(settings.quiet_hours_end ?? 8);
+    } else {
+      setQuietEnabled(false);
+    }
   }, [settings]);
 
   const saveNtfy = (enabled: boolean) => {
@@ -77,6 +129,28 @@ export default function NotificationsPage() {
     );
   };
 
+  const saveQuietHours = () => {
+    if (quietEnabled) {
+      update.mutate(
+        { quiet_hours_start: quietStart, quiet_hours_end: quietEnd },
+        { onSuccess: () => { setQuietSaved(true); setTimeout(() => setQuietSaved(false), 2000); } }
+      );
+    } else {
+      // -1 signals the backend to clear the values
+      update.mutate(
+        { quiet_hours_start: -1 },
+        { onSuccess: () => { setQuietSaved(true); setTimeout(() => setQuietSaved(false), 2000); } }
+      );
+    }
+  };
+
+  const saveDigest = () => {
+    update.mutate(
+      { digest_enabled: digestEnabled, digest_frequency: digestFrequency },
+      { onSuccess: () => { setDigestSaved(true); setTimeout(() => setDigestSaved(false), 2000); } }
+    );
+  };
+
   const testNtfy = async () => {
     setNtfyTesting(true);
     setNtfyTestResult(null);
@@ -119,6 +193,19 @@ export default function NotificationsPage() {
     ? `${typeof window !== "undefined" ? window.location.origin : ""}/api/notifications/feed/${settings.rss_token}.xml`
     : null;
 
+  const ResultBadge = ({ result }: { result: NotificationTestResult }) => (
+    <div className={`flex items-start gap-2 text-xs rounded-md px-3 py-2 ${
+      result.status === "ok"
+        ? "bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400"
+        : "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400"
+    }`}>
+      {result.status === "ok"
+        ? <CheckCircle className="w-3.5 h-3.5 mt-0.5 shrink-0" />
+        : <XCircle className="w-3.5 h-3.5 mt-0.5 shrink-0" />}
+      {result.detail}
+    </div>
+  );
+
   return (
     <div className="space-y-8 max-w-2xl">
       <div>
@@ -149,7 +236,6 @@ export default function NotificationsPage() {
           )}
         </div>
 
-        {/* Topic URL */}
         <div className="space-y-1.5">
           <label className="text-sm font-medium">Topic URL</label>
           <p className="text-xs text-muted-foreground">
@@ -165,20 +251,13 @@ export default function NotificationsPage() {
           />
         </div>
 
-        {/* Auth method */}
         <div className="space-y-2">
           <label className="text-sm font-medium">Authentication</label>
           <div className="space-y-2">
             {AUTH_METHODS.map(({ value, label, hint }) => (
               <label key={value} className="flex items-start gap-3 cursor-pointer">
-                <input
-                  type="radio"
-                  name="ntfy-auth"
-                  value={value}
-                  checked={authMethod === value}
-                  onChange={() => setAuthMethod(value)}
-                  className="mt-0.5"
-                />
+                <input type="radio" name="ntfy-auth" value={value} checked={authMethod === value}
+                  onChange={() => setAuthMethod(value)} className="mt-0.5" />
                 <div>
                   <div className="text-sm font-medium">{label}</div>
                   <div className="text-xs text-muted-foreground">{hint}</div>
@@ -188,92 +267,144 @@ export default function NotificationsPage() {
           </div>
         </div>
 
-        {/* Token input */}
         {authMethod === "token" && (
           <div className="space-y-1.5">
             <label className="text-sm font-medium">Access Token</label>
-            <input
-              type="password"
-              placeholder="tk_..."
-              value={token}
+            <input type="password" placeholder="tk_..." value={token}
               onChange={(e) => setToken(e.target.value)}
-              className="w-full px-3 py-2 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-primary"
-            />
+              className="w-full px-3 py-2 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-primary" />
           </div>
         )}
 
-        {/* Basic auth inputs */}
         {authMethod === "basic" && (
           <div className="space-y-3">
             <div className="space-y-1.5">
               <label className="text-sm font-medium">Username</label>
-              <input
-                type="text"
-                placeholder="your-username"
-                value={username}
+              <input type="text" placeholder="your-username" value={username}
                 onChange={(e) => setUsername(e.target.value)}
-                className="w-full px-3 py-2 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-primary"
-              />
+                className="w-full px-3 py-2 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-primary" />
             </div>
             <div className="space-y-1.5">
               <label className="text-sm font-medium">Password</label>
-              <input
-                type="password"
-                placeholder="your-password"
-                value={password}
+              <input type="password" placeholder="your-password" value={password}
                 onChange={(e) => setPassword(e.target.value)}
-                className="w-full px-3 py-2 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-primary"
-              />
+                className="w-full px-3 py-2 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-primary" />
             </div>
           </div>
         )}
 
-        {/* Actions */}
         <div className="space-y-3 pt-1 border-t border-border">
           <div className="flex items-center gap-3">
-            <button
-              onClick={() => saveNtfy(true)}
-              disabled={!topicUrl.trim() || update.isPending}
-              className="flex items-center gap-2 px-4 py-2 text-sm bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 transition-colors"
-            >
+            <button onClick={() => saveNtfy(true)} disabled={!topicUrl.trim() || update.isPending}
+              className="flex items-center gap-2 px-4 py-2 text-sm bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 transition-colors">
               {ntfySaved ? <CheckCircle className="w-3.5 h-3.5" /> : <Bell className="w-3.5 h-3.5" />}
               {ntfySaved ? "Saved!" : "Save & Enable"}
             </button>
-            <button
-              onClick={testNtfy}
-              disabled={!topicUrl.trim() || ntfyTesting}
-              className="flex items-center gap-2 px-4 py-2 text-sm bg-muted hover:bg-accent rounded-md disabled:opacity-50 transition-colors"
-            >
-              {ntfyTesting
-                ? <RefreshCw className="w-3.5 h-3.5 animate-spin" />
-                : <FlaskConical className="w-3.5 h-3.5" />}
+            <button onClick={testNtfy} disabled={!topicUrl.trim() || ntfyTesting}
+              className="flex items-center gap-2 px-4 py-2 text-sm bg-muted hover:bg-accent rounded-md disabled:opacity-50 transition-colors">
+              {ntfyTesting ? <RefreshCw className="w-3.5 h-3.5 animate-spin" /> : <FlaskConical className="w-3.5 h-3.5" />}
               {ntfyTesting ? "Sending…" : "Test"}
             </button>
             {settings?.ntfy_enabled && (
-              <button
-                onClick={() => saveNtfy(false)}
-                disabled={update.isPending}
-                className="text-xs text-muted-foreground hover:text-foreground transition-colors"
-              >
+              <button onClick={() => saveNtfy(false)} disabled={update.isPending}
+                className="text-xs text-muted-foreground hover:text-foreground transition-colors">
                 Disable
               </button>
             )}
           </div>
-          {ntfyTestResult && (
-            <div className={`flex items-start gap-2 text-xs rounded-md px-3 py-2 ${
-              ntfyTestResult.status === "ok"
-                ? "bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400"
-                : "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400"
-            }`}>
-              {ntfyTestResult.status === "ok"
-                ? <CheckCircle className="w-3.5 h-3.5 mt-0.5 shrink-0" />
-                : <XCircle className="w-3.5 h-3.5 mt-0.5 shrink-0" />}
-              {ntfyTestResult.detail}
-            </div>
-          )}
+          {ntfyTestResult && <ResultBadge result={ntfyTestResult} />}
         </div>
       </section>
 
+      {/* Quiet Hours */}
+      <section className="bg-card border border-border rounded-lg p-6 space-y-4">
+        <div>
+          <h2 className="font-semibold flex items-center gap-2">
+            <Clock className="w-4 h-4" /> Quiet Hours
+          </h2>
+          <p className="text-xs text-muted-foreground mt-1">
+            Pause ntfy push notifications during set hours. Events accumulate and fire as a batch when quiet hours end.
+            All times are UTC. RSS is unaffected.
+          </p>
+        </div>
+
+        <label className="flex items-center gap-3 cursor-pointer">
+          <input type="checkbox" checked={quietEnabled} onChange={(e) => setQuietEnabled(e.target.checked)}
+            className="rounded" />
+          <span className="text-sm font-medium">Enable quiet hours</span>
+        </label>
+
+        {quietEnabled && (
+          <div className="flex items-center gap-3 flex-wrap">
+            <div className="flex items-center gap-2">
+              <label className="text-sm text-muted-foreground">From</label>
+              <select value={quietStart} onChange={(e) => setQuietStart(Number(e.target.value))}
+                className="px-2 py-1.5 text-sm bg-background border border-border rounded-md">
+                {HOURS.map(({ value, label }) => <option key={value} value={value}>{label}</option>)}
+              </select>
+            </div>
+            <div className="flex items-center gap-2">
+              <label className="text-sm text-muted-foreground">To</label>
+              <select value={quietEnd} onChange={(e) => setQuietEnd(Number(e.target.value))}
+                className="px-2 py-1.5 text-sm bg-background border border-border rounded-md">
+                {HOURS.map(({ value, label }) => <option key={value} value={value}>{label}</option>)}
+              </select>
+            </div>
+            {quietStart > quietEnd && (
+              <span className="text-xs text-muted-foreground">(overnight window)</span>
+            )}
+          </div>
+        )}
+
+        <button onClick={saveQuietHours} disabled={update.isPending}
+          className="flex items-center gap-2 px-4 py-2 text-sm bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 transition-colors">
+          {quietSaved ? <CheckCircle className="w-3.5 h-3.5" /> : null}
+          {quietSaved ? "Saved!" : "Save Quiet Hours"}
+        </button>
+      </section>
+
+      {/* Digest */}
+      <section className="bg-card border border-border rounded-lg p-6 space-y-4">
+        <div>
+          <h2 className="font-semibold flex items-center gap-2">
+            <Calendar className="w-4 h-4" /> Digest Mode
+          </h2>
+          <p className="text-xs text-muted-foreground mt-1">
+            Instead of per-event push notifications, receive a single bundled ntfy summary on a schedule.
+            RSS feed is always real-time regardless of this setting.
+          </p>
+        </div>
+
+        <label className="flex items-center gap-3 cursor-pointer">
+          <input type="checkbox" checked={digestEnabled} onChange={(e) => setDigestEnabled(e.target.checked)}
+            className="rounded" />
+          <span className="text-sm font-medium">Enable digest mode</span>
+        </label>
+
+        {digestEnabled && (
+          <div className="flex items-center gap-3">
+            <label className="text-sm text-muted-foreground">Frequency</label>
+            <div className="flex gap-3">
+              {(["daily", "weekly"] as const).map((freq) => (
+                <label key={freq} className="flex items-center gap-2 cursor-pointer">
+                  <input type="radio" name="digest-freq" value={freq} checked={digestFrequency === freq}
+                    onChange={() => setDigestFrequency(freq)} />
+                  <span className="text-sm capitalize">{freq}</span>
+                  {freq === "weekly" && <span className="text-xs text-muted-foreground">(Mondays, 8 AM UTC)</span>}
+                  {freq === "daily" && <span className="text-xs text-muted-foreground">(8 AM UTC)</span>}
+                </label>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <button onClick={saveDigest} disabled={update.isPending}
+          className="flex items-center gap-2 px-4 py-2 text-sm bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 transition-colors">
+          {digestSaved ? <CheckCircle className="w-3.5 h-3.5" /> : null}
+          {digestSaved ? "Saved!" : "Save Digest Settings"}
+        </button>
+      </section>
+
       {/* RSS */}
       <section className="bg-card border border-border rounded-lg p-6 space-y-4">
         <div className="flex items-start justify-between gap-4">
@@ -298,15 +429,8 @@ export default function NotificationsPage() {
             <label className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Your feed URL</label>
             <div className="flex items-center gap-2">
               <code className="flex-1 text-xs bg-muted px-2 py-2 rounded truncate">{rssUrl}</code>
-              <button
-                onClick={() => {
-                  navigator.clipboard.writeText(rssUrl);
-                  setCopied(true);
-                  setTimeout(() => setCopied(false), 2000);
-                }}
-                className="shrink-0 p-1.5 rounded hover:bg-accent transition-colors"
-                title="Copy RSS URL"
-              >
+              <button onClick={() => { navigator.clipboard.writeText(rssUrl); setCopied(true); setTimeout(() => setCopied(false), 2000); }}
+                className="shrink-0 p-1.5 rounded hover:bg-accent transition-colors" title="Copy RSS URL">
                 {copied ? <CheckCircle className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4 text-muted-foreground" />}
               </button>
             </div>
@@ -316,61 +440,90 @@ export default function NotificationsPage() {
         <div className="space-y-3 pt-1 border-t border-border">
           <div className="flex items-center gap-3">
             {!settings?.rss_enabled ? (
-              <button
-                onClick={() => toggleRss(true)}
-                disabled={update.isPending}
-                className="flex items-center gap-2 px-4 py-2 text-sm bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 transition-colors"
-              >
+              <button onClick={() => toggleRss(true)} disabled={update.isPending}
+                className="flex items-center gap-2 px-4 py-2 text-sm bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 transition-colors">
                 {rssSaved ? <CheckCircle className="w-3.5 h-3.5" /> : <Rss className="w-3.5 h-3.5" />}
                 {rssSaved ? "Enabled!" : "Enable RSS"}
               </button>
             ) : (
-              <button
-                onClick={() => toggleRss(false)}
-                disabled={update.isPending}
-                className="text-xs text-muted-foreground hover:text-foreground transition-colors"
-              >
+              <button onClick={() => toggleRss(false)} disabled={update.isPending}
+                className="text-xs text-muted-foreground hover:text-foreground transition-colors">
                 Disable RSS
               </button>
             )}
             {rssUrl && (
               <>
-                <button
-                  onClick={testRss}
-                  disabled={rssTesting}
-                  className="flex items-center gap-2 px-4 py-2 text-sm bg-muted hover:bg-accent rounded-md disabled:opacity-50 transition-colors"
-                >
-                  {rssTesting
-                    ? <RefreshCw className="w-3.5 h-3.5 animate-spin" />
-                    : <FlaskConical className="w-3.5 h-3.5" />}
+                <button onClick={testRss} disabled={rssTesting}
+                  className="flex items-center gap-2 px-4 py-2 text-sm bg-muted hover:bg-accent rounded-md disabled:opacity-50 transition-colors">
+                  {rssTesting ? <RefreshCw className="w-3.5 h-3.5 animate-spin" /> : <FlaskConical className="w-3.5 h-3.5" />}
                   {rssTesting ? "Checking…" : "Test"}
                 </button>
-                <button
-                  onClick={() => resetRss.mutate()}
-                  disabled={resetRss.isPending}
+                <button onClick={() => resetRss.mutate()} disabled={resetRss.isPending}
                   className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
-                  title="Generate a new URL — old URL will stop working"
-                >
-                  <RefreshCw className="w-3 h-3" />
-                  Regenerate URL
+                  title="Generate a new URL — old URL will stop working">
+                  <RefreshCw className="w-3 h-3" /> Regenerate URL
                 </button>
               </>
             )}
           </div>
-          {rssTestResult && (
-            <div className={`flex items-start gap-2 text-xs rounded-md px-3 py-2 ${
-              rssTestResult.status === "ok"
-                ? "bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400"
-                : "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400"
-            }`}>
-              {rssTestResult.status === "ok"
-                ? <CheckCircle className="w-3.5 h-3.5 mt-0.5 shrink-0" />
-                : <XCircle className="w-3.5 h-3.5 mt-0.5 shrink-0" />}
-              {rssTestResult.detail}
-            </div>
-          )}
+          {rssTestResult && <ResultBadge result={rssTestResult} />}
         </div>
       </section>
+
+      {/* Notification History */}
+      <section className="bg-card border border-border rounded-lg p-6 space-y-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="font-semibold flex items-center gap-2">
+              <Bell className="w-4 h-4" /> Recent Alerts
+            </h2>
+            <p className="text-xs text-muted-foreground mt-1">Last 50 notification events for your account.</p>
+          </div>
+        </div>
+
+        {historyLoading ? (
+          <p className="text-sm text-muted-foreground">Loading history…</p>
+        ) : history.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            No events yet. Follow some bills and check back after the next poll.
+          </p>
+        ) : (
+          <div className="divide-y divide-border">
+            {history.map((event: NotificationEvent) => {
+              const meta = EVENT_META[event.event_type] ?? { label: "Update", icon: Bell, color: "text-muted-foreground" };
+              const Icon = meta.icon;
+              const payload = event.payload ?? {};
+              return (
+                <div key={event.id} className="flex items-start gap-3 py-3">
+                  <Icon className={`w-4 h-4 mt-0.5 shrink-0 ${meta.color}`} />
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <span className="text-xs font-medium">{meta.label}</span>
+                      {payload.bill_label && (
+                        <Link href={`/bills/${event.bill_id}`}
+                          className="text-xs font-mono bg-muted px-1.5 py-0.5 rounded hover:text-primary transition-colors">
+                          {payload.bill_label}
+                        </Link>
+                      )}
+                      <span className="text-xs text-muted-foreground ml-auto">{timeAgo(event.created_at)}</span>
+                    </div>
+                    {payload.bill_title && (
+                      <p className="text-xs text-muted-foreground mt-0.5 line-clamp-1">{payload.bill_title}</p>
+                    )}
+                    {payload.brief_summary && (
+                      <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">{payload.brief_summary}</p>
+                    )}
+                  </div>
+                  <span className={`text-xs shrink-0 ${event.dispatched_at ? "text-green-500" : "text-amber-500"}`}
+                    title={event.dispatched_at ? `Sent ${timeAgo(event.dispatched_at)}` : "Pending dispatch"}>
+                    {event.dispatched_at ? "✓" : "⏳"}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </section>
     </div>
   );
 }