Blueprint method

1<section className="bg-[#2152ff] text-white">2  <div className="mx-auto max-w-6xl px-5 py-16 sm:px-8 sm:py-24">3    <div className="flex items-end justify-between gap-6 border-b border-white/35 pb-6">4      <div>5        <p className="font-mono text-[11px] tracking-[0.14em] text-white/65 uppercase">Sheet 03 / 05</p>6        <h2 className="mt-3 text-4xl font-medium tracking-[-0.04em] sm:text-6xl">Four phases, eight weeks</h2>7      </div>8      <p className="hidden font-mono text-[11px] tracking-[0.14em] text-white/65 uppercase sm:block">Schedule · typical engagement</p>9    </div>1011    <div className="mt-10 grid gap-y-1 md:grid-cols-[15rem_1fr] md:gap-x-10">12      <span className="hidden md:block"></span>13      <div className="grid grid-cols-8 border-l border-white/35 font-mono text-[10px] tracking-[0.14em] text-white/65" aria-hidden="true">14        <span className="border-r border-white/35 px-2 pb-2">W1</span>15        <span className="border-r border-white/35 px-2 pb-2">W2</span>16        <span className="border-r border-white/35 px-2 pb-2">W3</span>17        <span className="border-r border-white/35 px-2 pb-2">W4</span>18        <span className="border-r border-white/35 px-2 pb-2">W5</span>19        <span className="border-r border-white/35 px-2 pb-2">W6</span>20        <span className="border-r border-white/35 px-2 pb-2">W7</span>21        <span className="border-r border-white/35 px-2 pb-2">W8</span>22      </div>2324      <div className="border-t border-white/35 pt-5 md:py-6">25        <p className="font-mono text-[11px] tracking-[0.14em] text-white/60 uppercase">01</p>26        <h3 className="mt-2 text-2xl font-medium tracking-[-0.03em]">Survey</h3>27        <p className="mt-2 text-[15px] leading-relaxed text-white/75">Read what exists: the product, the numbers and the complaints.</p>28      </div>29      <div className="grid grid-cols-8 items-center border-l border-white/35 bg-[linear-gradient(to_right,transparent_calc(100%-1px),rgb(255_255_255/0.2)_calc(100%-1px))] bg-size-[12.5%_100%] py-5 md:border-t md:py-0">30        <span className="col-span-2 col-start-1 flex h-11 items-center border border-white bg-[#2152ff] bg-[repeating-linear-gradient(135deg,rgb(255_255_255/0.3)_0_1px,transparent_1px_8px)] px-3 font-mono text-[10px] tracking-[0.14em] uppercase">2 wk</span>31      </div>3233      <div className="border-t border-white/35 pt-5 md:py-6">34        <p className="font-mono text-[11px] tracking-[0.14em] text-white/60 uppercase">02</p>35        <h3 className="mt-2 text-2xl font-medium tracking-[-0.03em]">Draft</h3>36        <p className="mt-2 text-[15px] leading-relaxed text-white/75">Flows and screens at full size, with every measurement written down.</p>37      </div>38      <div className="grid grid-cols-8 items-center border-l border-white/35 bg-[linear-gradient(to_right,transparent_calc(100%-1px),rgb(255_255_255/0.2)_calc(100%-1px))] bg-size-[12.5%_100%] py-5 md:border-t md:py-0">39        <span className="col-span-3 col-start-2 flex h-11 items-center border border-white bg-[#2152ff] px-3 font-mono text-[10px] tracking-[0.14em] uppercase">3 wk</span>40      </div>4142      <div className="border-t border-white/35 pt-5 md:py-6">43        <p className="font-mono text-[11px] tracking-[0.14em] text-white/60 uppercase">03</p>44        <h3 className="mt-2 text-2xl font-medium tracking-[-0.03em]">Build</h3>45        <p className="mt-2 text-[15px] leading-relaxed text-white/75">Front-end in your stack, component by component, reviewed against the drawings.</p>46      </div>47      <div className="grid grid-cols-8 items-center border-l border-white/35 bg-[linear-gradient(to_right,transparent_calc(100%-1px),rgb(255_255_255/0.2)_calc(100%-1px))] bg-size-[12.5%_100%] py-5 md:border-t md:py-0">48        <span className="col-span-4 col-start-4 flex h-11 items-center bg-white px-3 font-mono text-[10px] tracking-[0.14em] text-[#2152ff] uppercase">4 wk</span>49      </div>5051      <div className="border-t border-white/35 pt-5 md:py-6">52        <p className="font-mono text-[11px] tracking-[0.14em] text-white/60 uppercase">04</p>53        <h3 className="mt-2 text-2xl font-medium tracking-[-0.03em]">Handover</h3>54        <p className="mt-2 text-[15px] leading-relaxed text-white/75">Tokens, docs and a recorded walkthrough, so the next change is yours.</p>55      </div>56      <div className="grid grid-cols-8 items-center border-l border-white/35 bg-[linear-gradient(to_right,transparent_calc(100%-1px),rgb(255_255_255/0.2)_calc(100%-1px))] bg-size-[12.5%_100%] py-5 md:border-t md:py-0">57        <span className="col-span-2 col-start-7 flex h-11 items-center border border-white bg-[#2152ff] bg-[repeating-linear-gradient(135deg,rgb(255_255_255/0.3)_0_1px,transparent_1px_8px)] px-3 font-mono text-[10px] tracking-[0.14em] uppercase">2 wk</span>58      </div>59    </div>6061    <div className="mt-10 flex flex-wrap items-center gap-x-8 gap-y-3 border-t border-white/35 pt-5 font-mono text-[10px] tracking-[0.14em] text-white/75 uppercase">62      <span className="flex items-center gap-2.5">63        <span className="size-3.5 border border-white bg-[repeating-linear-gradient(135deg,rgb(255_255_255/0.4)_0_1px,transparent_1px_5px)]" aria-hidden="true"></span>64        Research and handover65      </span>66      <span className="flex items-center gap-2.5">67        <span className="size-3.5 border border-white" aria-hidden="true"></span>68        Design69      </span>70      <span className="flex items-center gap-2.5">71        <span className="size-3.5 bg-white" aria-hidden="true"></span>72        Engineering73      </span>74      <span className="text-white/55 sm:ml-auto">Phases overlap by a week on purpose</span>75    </div>76  </div>77</section>