feat(agent): Add Buildtopia roadmap/phases section to landing page

Co-Authored-By: Loop Agent <agent@looplabs.fun>

Author: looplabs-fun

app/page.jsx

@@ -23,6 +23,64 @@ const PILLARS = [
   },
 ];
 
+const PHASES = [
+  {
+    phase: "Phase 1",
+    title: "Foundation",
+    status: "shipped",
+    statusLabel: "✅ Shipped",
+    items: [
+      "Loop platform launched",
+      "$BUILD token live on-chain",
+      "Autonomous AI agent active",
+      "Buildtopia landing & identity",
+    ],
+  },
+  {
+    phase: "Phase 2",
+    title: "City Skeleton",
+    status: "building",
+    statusLabel: "🔨 Building",
+    items: [
+      "Buildtopia 3D isometric map",
+      "Building slot framework",
+      "xStocks architecture",
+      "Startup onboarding flow",
+    ],
+  },
+  {
+    phase: "Phase 3",
+    title: "First District",
+    status: "next",
+    statusLabel: "🔜 Next",
+    items: [
+      "First real startup buildings live",
+      "In-city quests & exploration",
+      "xStock earning mechanics",
+      "Public city map explorer",
+    ],
+  },
+  {
+    phase: "Phase 4",
+    title: "Open World",
+    status: "future",
+    statusLabel: "🌐 Future",
+    items: [
+      "Open startup launch portal",
+      "Multiplayer city events",
+      "$BUILD holder governance",
+      "Cross-city Loop network",
+    ],
+  },
+];
+
+const STATUS_COLORS = {
+  shipped: { bg: "rgba(72,187,120,0.12)", border: "rgba(72,187,120,0.3)", text: "#68d391" },
+  building: { bg: "rgba(99,179,237,0.12)", border: "rgba(99,179,237,0.3)", text: "#63b3ed" },
+  next: { bg: "rgba(246,173,85,0.1)", border: "rgba(246,173,85,0.25)", text: "#f6ad55" },
+  future: { bg: "rgba(255,255,255,0.05)", border: "rgba(255,255,255,0.1)", text: "rgba(240,240,245,0.45)" },
+};
+
 const styles = {
   root: {
     fontFamily: "system-ui, -apple-system, sans-serif",
@@ -189,6 +247,58 @@ const styles = {
   pillarIcon: { fontSize: "2rem", marginBottom: "1rem" },
   pillarTitle: { fontWeight: 700, fontSize: "1.05rem", marginBottom: "0.6rem" },
   pillarBody: { color: "rgba(240,240,245,0.6)", fontSize: "0.9rem", lineHeight: 1.65 },
+  roadmapSection: {
+    maxWidth: "900px",
+    margin: "0 auto",
+    padding: "0 1.5rem 4rem",
+  },
+  roadmapGrid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+    gap: "1.25rem",
+    position: "relative",
+  },
+  phaseCard: {
+    background: "rgba(255,255,255,0.03)",
+    border: "1px solid rgba(255,255,255,0.08)",
+    borderRadius: "14px",
+    padding: "1.5rem",
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.85rem",
+  },
+  phaseHeader: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.35rem",
+  },
+  phaseLabel: {
+    fontSize: "0.72rem",
+    letterSpacing: "0.08em",
+    textTransform: "uppercase",
+    color: "rgba(240,240,245,0.35)",
+    fontWeight: 600,
+  },
+  phaseTitle: {
+    fontSize: "1.05rem",
+    fontWeight: 700,
+    color: "#f0f0f5",
+    letterSpacing: "-0.01em",
+  },
+  phaseItems: {
+    listStyle: "none",
+    margin: 0,
+    padding: 0,
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.45rem",
+  },
+  phaseItem: {
+    fontSize: "0.83rem",
+    color: "rgba(240,240,245,0.6)",
+    paddingLeft: "1.1rem",
+    position: "relative",
+  },
   communitySection: {
     maxWidth: "900px",
     margin: "0 auto",
@@ -290,6 +400,61 @@ export default function Page() {
         </div>
       </section>
 
+      {/* Roadmap */}
+      <section style={styles.roadmapSection}>
+        <p style={styles.sectionLabel}>Roadmap</p>
+        <h2 style={{ ...styles.sectionTitle, margin: "0 0 2.5rem" }}>Building Buildtopia, phase by phase</h2>
+        <div style={styles.roadmapGrid}>
+          {PHASES.map((ph) => {
+            const colors = STATUS_COLORS[ph.status];
+            return (
+              <div
+                key={ph.phase}
+                style={{
+                  ...styles.phaseCard,
+                  borderColor: colors.border,
+                  background: colors.bg,
+                }}
+              >
+                <div style={styles.phaseHeader}>
+                  <span style={styles.phaseLabel}>{ph.phase}</span>
+                  <span style={styles.phaseTitle}>{ph.title}</span>
+                  <span
+                    style={{
+                      display: "inline-block",
+                      fontSize: "0.72rem",
+                      fontWeight: 600,
+                      letterSpacing: "0.04em",
+                      color: colors.text,
+                      marginTop: "0.1rem",
+                    }}
+                  >
+                    {ph.statusLabel}
+                  </span>
+                </div>
+                <ul style={styles.phaseItems}>
+                  {ph.items.map((item) => (
+                    <li key={item} style={styles.phaseItem}>
+                      <span
+                        style={{
+                          position: "absolute",
+                          left: 0,
+                          color: colors.text,
+                          opacity: 0.7,
+                        }}
+                      >
+                        ›
+                      </span>
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            );
+          })}
+        </div>
+      </section>
+
       {/* Community */}
       <section style={styles.communitySection}>
         <p style={styles.sectionLabel}>Community</p>