's'

app/components/Roadmap.tsx

@@ -63,55 +63,33 @@ export default function Roadmap() {
           </p>
         </div>
 
-        <div className="relative mt-16">
-          {/* Desktop: vertical timeline line */}
-          <div className="absolute top-0 bottom-0 left-[27px] hidden w-0.5 bg-gradient-to-b from-sky-200 via-amber-200 to-rose-200 lg:left-1/2 lg:block lg:-translate-x-px" />
-
-          <div className="space-y-6 lg:space-y-8">
-            {days.map((d, i) => (
-              <div
-                key={d.day}
-                className={`relative lg:flex lg:items-center lg:gap-8 ${
-                  i % 2 === 0 ? "lg:flex-row" : "lg:flex-row-reverse"
-                }`}
-              >
-                {/* Timeline dot (desktop) */}
-                <div className="absolute left-1/2 top-8 z-10 hidden h-4 w-4 -translate-x-1/2 rounded-full border-4 border-white shadow-sm lg:block"
-                  style={{ background: `var(--tw-shadow-color, #0ea5e9)` }}
+        {/* 参考 openclaw101.dev：卡片网格，非时间轴 */}
+        <div className="mt-14 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+          {days.map((d) => (
+            <a
+              key={d.day}
+              href={`/day/${d.day}`}
+              className="card-hover group flex flex-col rounded-2xl border border-slate-100 bg-white p-5 shadow-sm transition-all hover:border-sky-200 hover:shadow-md"
+            >
+              <div className="flex items-center gap-3">
+                <div
+                  className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-xs font-bold text-white ${d.color}`}
                 >
-                  <div className={`h-full w-full rounded-full ${d.color}`} />
-                </div>
-                <div className="hidden lg:block lg:w-1/2" />
-
-                <div className="card-hover w-full rounded-2xl border border-slate-100 bg-white p-6 shadow-sm lg:w-1/2">
-                  <div className="flex items-start gap-4">
-                    <div
-                      className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-xl text-white text-sm font-bold ${d.color}`}
-                    >
-                      DAY {d.day}
-                    </div>
-                    <div className="min-w-0 flex-1">
-                      <div className="mb-1 flex items-center gap-2">
-                        <span className="text-xl">{d.icon}</span>
-                        <h3 className="text-lg font-bold text-slate-900">
-                          {d.title}
-                        </h3>
-                      </div>
-                      <p className="text-sm leading-relaxed text-slate-600">
-                        {d.desc}
-                      </p>
-                      <a
-                        href={`/day/${d.day}`}
-                        className="mt-3 inline-block text-sm font-medium text-sky-600 transition-colors hover:text-sky-700"
-                      >
-                        查看详情 →
-                      </a>
-                    </div>
-                  </div>
+                  DAY {d.day}
                 </div>
+                <span className="text-xl">{d.icon}</span>
+                <h3 className="text-base font-bold text-slate-900 group-hover:text-sky-600">
+                  {d.title}
+                </h3>
               </div>
-            ))}
-          </div>
+              <p className="mt-3 flex-1 text-sm leading-relaxed text-slate-600">
+                {d.desc}
+              </p>
+              <span className="mt-3 inline-flex items-center text-sm font-medium text-sky-600">
+                查看详情 →
+              </span>
+            </a>
+          ))}
         </div>
 
         {/* Training camp CTA */}