Restore front page family preview renderings

app.py

@@ -252,6 +252,15 @@ gradio-app,
   font-weight: 700;
 }
 
+.front-family-card {
+  min-height: 232px;
+  margin-bottom: 8px;
+}
+
+.front-family-card .family-render {
+  height: 154px;
+}
+
 .record-book {
   padding: 10px 0 0;
 }
@@ -551,6 +560,7 @@ gradio-app,
   justify-content: flex-start !important;
   text-align: left !important;
   white-space: normal !important;
+  margin-bottom: 12px !important;
 }
 
 .preview-card {
@@ -1138,6 +1148,20 @@ def family_card(summary: dict[str, Any], coordinates: dict[str, dict[str, Any]])
     """
 
 
+def front_family_card_html(setup: str, coordinates: dict[str, dict[str, Any]]) -> str:
+    return f"""
+    <div class="family-card front-family-card">
+      {family_preview(setup, coordinates)}
+      <div class="family-card-top">
+        <div>
+          <div class="family-code">{esc(setup)}</div>
+          <h3>{esc(setup_title(setup))}</h3>
+        </div>
+      </div>
+    </div>
+    """
+
+
 def family_page_html(setup: str | None = None) -> str:
     choices = setup_choices()
     setup = setup if setup in choices else (choices[0] if choices else "")
@@ -1408,12 +1432,15 @@ with gr.Blocks(title="Packing Benchmark") as demo:
             gr.Markdown("### All families")
             family_buttons: list[tuple[str, gr.Button]] = []
             family_choices = setup_choices()
+            family_coordinates = coordinate_records_by_case()
             with gr.Group(elem_classes=["family-button-shell"]):
                 for row_start in range(0, len(family_choices), 3):
                     with gr.Row():
                         for setup in family_choices[row_start : row_start + 3]:
-                            button = gr.Button(f"{setup_title(setup)} · {setup}", size="sm")
-                            family_buttons.append((setup, button))
+                            with gr.Column(scale=1):
+                                gr.HTML(front_family_card_html(setup, family_coordinates))
+                                button = gr.Button("Open records", size="sm")
+                                family_buttons.append((setup, button))
             home_family_page = gr.HTML(empty_family_html())
 
         with gr.Tab("Family Records"):