Source

1// Holding page shown for the ~minute between "wish submitted" and the
2// agent's first build. The coder replaces this file with the real app.
3export default function App() {
4  return (
5    <main className="min-h-screen bg-gradient-to-br from-amber-50 via-orange-50 to-amber-100 text-stone-800 flex items-center justify-center p-4 antialiased">
6      <style>{`
7        @keyframes mind-slide { 0% { left: -40% } 100% { left: 100% } }
8        @keyframes mind-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
9      `}</style>
10 
11      <section className="w-full max-w-lg rounded-3xl bg-white/80 backdrop-blur shadow-xl shadow-amber-900/5 ring-1 ring-amber-200/60 p-8 sm:p-10">
12        <div className="flex items-center gap-3">
13          <div className="grid size-10 place-items-center rounded-xl bg-amber-500 text-white shadow-sm">
14            <span className="text-lg">✦</span>
15          </div>
16          <p className="font-mono text-xs uppercase tracking-[0.3em] text-amber-600">
17            building with mind
18          </p>
19        </div>
20 
21        <h1 className="mt-6 text-3xl font-semibold tracking-tight text-stone-900">
22          a simple focus timer page with a clean design
23        </h1>
24        <p className="mt-3 text-stone-600">
25          We&rsquo;re building your app right now. This usually takes a minute or
26          two — <span className="font-medium text-stone-800">follow the agent&rsquo;s
27          progress in the chat</span>. This page updates itself the moment your
28          app is ready; no need to refresh.
29        </p>
30 
31        {/* indeterminate progress bar */}
32        <div className="relative mt-7 h-1.5 w-full overflow-hidden rounded-full bg-amber-100">
33          <div
34            className="absolute top-0 h-full w-2/5 rounded-full bg-gradient-to-r from-amber-400 to-orange-500"
35            style={{ animation: "mind-slide 1.3s ease-in-out infinite" }}
36          />
37        </div>
38 
39        {/* what's happening */}
40        <ol className="mt-7 space-y-3 text-sm">
41          <li className="flex items-center gap-3 text-stone-500">
42            <span className="grid size-5 place-items-center rounded-full bg-emerald-100 text-emerald-600 text-[11px]">✓</span>
43            Project &amp; starter app set up
44          </li>
45          <li className="flex items-center gap-3 font-medium text-stone-800">
46            <span
47              className="size-2.5 rounded-full bg-amber-500"
48              style={{ animation: "mind-pulse 1.2s ease-in-out infinite" }}
49            />
50            The agent is writing your code
51          </li>
52          <li className="flex items-center gap-3 text-stone-400">
53            <span className="size-2.5 rounded-full border border-stone-300" />
54            Building &amp; publishing your preview
55          </li>
56        </ol>
57 
58        <p className="mt-8 text-xs text-stone-400">
59          Your app and its code live in your own Solid pod.
60        </p>
61      </section>
62    </main>
63  );
64}