Blueprint work

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 02 / 05</p>6        <h2 className="mt-3 text-4xl font-medium tracking-[-0.04em] sm:text-6xl">Selected work</h2>7      </div>8      <p className="hidden font-mono text-[11px] tracking-[0.14em] text-white/65 uppercase sm:block">04 plates · 2024 to 2027</p>9    </div>1011    <div className="mt-12 grid gap-x-8 gap-y-14 md:grid-cols-2">12      <a href="#" className="group block">13        <div className="relative aspect-[4/3] border border-white/45 transition-colors duration-200 group-hover:border-white">14          <span className="absolute top-0 left-4 -translate-y-1/2 bg-[#2152ff] px-2 font-mono text-[10px] tracking-[0.14em] uppercase">Plate 01</span>15          <svg viewBox="0 0 400 300" className="absolute inset-0 size-full" fill="none" stroke="white" strokeWidth="1.25" aria-hidden="true">16            <path d="M60 30v-10M340 30v-10M60 25h280" strokeOpacity="0.6" />17            <rect x="60" y="48" width="280" height="212" rx="6" />18            <path d="M60 72h280M132 72v188" />19            <circle cx="74" cy="60" r="3" />20            <circle cx="85" cy="60" r="3" />21            <circle cx="96" cy="60" r="3" />22            <path d="M74 92h44M74 108h34M74 124h40M74 140h28" strokeOpacity="0.7" />23            <rect x="148" y="88" width="84" height="24" />24            <path d="M148 124h48" strokeOpacity="0.7" />25            <path d="M148 232h176M148 232v-88" strokeOpacity="0.5" />26            <polyline points="148,214 172,202 196,208 220,184 244,190 268,166 292,172 324,146" strokeWidth="1.75" />27            <circle cx="324" cy="146" r="3.5" fill="white" />28            <path d="M324 146v86" strokeDasharray="3 4" strokeOpacity="0.6" />29          </svg>30          <span className="absolute top-[8.3%] left-1/2 -translate-x-1/2 -translate-y-1/2 bg-[#2152ff] px-1.5 font-mono text-[9px] tracking-[0.12em] text-white/80">1280</span>31        </div>32        <div className="mt-5 flex items-baseline justify-between gap-4">33          <h3 className="text-2xl font-medium tracking-[-0.03em]">Ledger</h3>34          <p className="font-mono text-[11px] tracking-[0.12em] text-white/65 uppercase">Product design · 2026</p>35        </div>36        <p className="mt-2 max-w-md text-[15px] leading-relaxed text-white/75">Banking for freelancers: invoices, taxes and what is left, on one screen.</p>37      </a>3839      <a href="#" className="group block">40        <div className="relative aspect-[4/3] border border-white/45 transition-colors duration-200 group-hover:border-white">41          <span className="absolute top-0 left-4 -translate-y-1/2 bg-[#2152ff] px-2 font-mono text-[10px] tracking-[0.14em] uppercase">Plate 02</span>42          <svg viewBox="0 0 400 300" className="absolute inset-0 size-full" fill="none" stroke="white" strokeWidth="1.25" aria-hidden="true">43            <path d="M118 28h-10M118 272h-10M113 28v244" strokeOpacity="0.6" />44            <rect x="146" y="28" width="108" height="244" rx="18" />45            <path d="M186 42h28" strokeWidth="3" strokeLinecap="round" />46            <circle cx="200" cy="112" r="36" strokeOpacity="0.45" />47            <path d="M200 76a36 36 0 1 1-31.2 18" strokeWidth="3.5" strokeLinecap="round" />48            <rect x="164" y="168" width="72" height="22" rx="5" />49            <rect x="164" y="198" width="72" height="22" rx="5" />50            <rect x="164" y="228" width="72" height="22" rx="5" strokeOpacity="0.5" />51            <path d="M236 112h66" strokeDasharray="3 4" strokeOpacity="0.7" />52            <circle cx="236" cy="112" r="2.5" fill="white" />53          </svg>54          <span className="absolute top-1/2 left-[28.25%] -translate-x-1/2 -translate-y-1/2 -rotate-90 bg-[#2152ff] px-1.5 font-mono text-[9px] tracking-[0.12em] text-white/80">812</span>55          <span className="absolute top-[37.3%] left-[77%] -translate-y-1/2 font-mono text-[9px] tracking-[0.12em] text-white/80 uppercase">Ring ø 72</span>56        </div>57        <div className="mt-5 flex items-baseline justify-between gap-4">58          <h3 className="text-2xl font-medium tracking-[-0.03em]">Halo</h3>59          <p className="font-mono text-[11px] tracking-[0.12em] text-white/65 uppercase">iOS app · 2025</p>60        </div>61        <p className="mt-2 max-w-md text-[15px] leading-relaxed text-white/75">A sleep tracker that shows one number in the morning and explains it in a sentence.</p>62      </a>6364      <a href="#" className="group block">65        <div className="relative aspect-[4/3] border border-white/45 transition-colors duration-200 group-hover:border-white">66          <svg viewBox="0 0 400 300" className="absolute inset-0 size-full" fill="none" stroke="white" strokeWidth="1.25" aria-hidden="true">67            <path d="M-10 236c46-34 82-8 126-40s58-74 124-66 86 46 170 8" strokeOpacity="0.35" />68            <path d="M-10 196c40-30 78-12 118-44s64-70 126-62 92 40 176 0" strokeOpacity="0.35" />69            <path d="M-10 156c36-26 70-14 110-42s70-66 130-60 96 34 180-6" strokeOpacity="0.35" />70            <path d="M-10 116c34-22 66-16 104-40s74-60 134-56 100 30 182-10" strokeOpacity="0.35" />71            <path d="M-10 276c50-38 88-6 132-38s54-78 120-70 82 50 168 14" strokeOpacity="0.35" />72            <polyline points="64,238 118,196 168,206 214,152 276,162 328,92" strokeWidth="1.75" strokeDasharray="6 5" />73            <circle cx="64" cy="238" r="4" fill="white" />74            <circle cx="168" cy="206" r="3" fill="#2152ff" />75            <circle cx="214" cy="152" r="3" fill="#2152ff" />76            <circle cx="328" cy="92" r="10" />77            <circle cx="328" cy="92" r="3.5" fill="white" />78          </svg>79          <span className="absolute top-0 left-4 -translate-y-1/2 bg-[#2152ff] px-2 font-mono text-[10px] tracking-[0.14em] uppercase">Plate 03</span>80          <span className="absolute top-[18%] right-[9%] bg-[#2152ff] px-1.5 font-mono text-[9px] tracking-[0.12em] whitespace-nowrap text-white/85 uppercase">B · 4.2 km</span>81          <span className="absolute top-[84%] left-[16%] -translate-x-1/2 bg-[#2152ff] px-1.5 font-mono text-[9px] tracking-[0.12em] text-white/85 uppercase">A · Start</span>82        </div>83        <div className="mt-5 flex items-baseline justify-between gap-4">84          <h3 className="text-2xl font-medium tracking-[-0.03em]">Plot</h3>85          <p className="font-mono text-[11px] tracking-[0.12em] text-white/65 uppercase">Web app · 2025</p>86        </div>87        <p className="mt-2 max-w-md text-[15px] leading-relaxed text-white/75">Maps for field teams: plan a route, walk it, and hand the next crew what you found.</p>88      </a>8990      <a href="#" className="group block">91        <div className="relative flex aspect-[4/3] items-center justify-center border border-white/45 transition-colors duration-200 group-hover:border-white">92          <span className="absolute top-0 left-4 -translate-y-1/2 bg-[#2152ff] px-2 font-mono text-[10px] tracking-[0.14em] uppercase">Plate 04</span>93          <span className="absolute top-[27%] right-0 left-0 border-t border-dashed border-white/40" aria-hidden="true"></span>94          <span className="absolute top-[43%] right-0 left-0 border-t border-dashed border-white/40" aria-hidden="true"></span>95          <span className="absolute top-[70%] right-0 left-0 border-t border-white/60" aria-hidden="true"></span>96          <span className="absolute top-[27%] left-3 -translate-y-full pb-1 font-mono text-[9px] tracking-[0.12em] text-white/75 uppercase">Cap 700</span>97          <span className="absolute top-[43%] left-3 -translate-y-full pb-1 font-mono text-[9px] tracking-[0.12em] text-white/75 uppercase">x 480</span>98          <span className="absolute top-[70%] left-3 pt-1.5 font-mono text-[9px] tracking-[0.12em] text-white/75 uppercase">Base 0</span>99          <span className="relative -mt-[5%] text-[130px] leading-none font-medium tracking-[-0.06em] text-transparent [-webkit-text-stroke:1.25px_white] sm:text-[220px] md:text-[130px] lg:text-[200px]" aria-hidden="true">Rg</span>100        </div>101        <div className="mt-5 flex items-baseline justify-between gap-4">102          <h3 className="text-2xl font-medium tracking-[-0.03em]">Seventeen</h3>103          <p className="font-mono text-[11px] tracking-[0.12em] text-white/65 uppercase">Type foundry · 2024</p>104        </div>105        <p className="mt-2 max-w-md text-[15px] leading-relaxed text-white/75">A foundry site where every typeface is tried at full size before it is bought.</p>106      </a>107    </div>108  </div>109</section>