Blueprint hero
A headline inside its own selection frame, half of it in outline, with a drawing's title block beside it
1280
1<section className="bg-[#2152ff] bg-[linear-gradient(to_right,rgb(255_255_255/0.07)_1px,transparent_1px),linear-gradient(to_bottom,rgb(255_255_255/0.07)_1px,transparent_1px)] bg-size-[40px_40px] text-white">2 <div className="mx-auto max-w-6xl px-5 pt-12 pb-16 sm:px-8 sm:pt-16 sm:pb-24">3 <div className="flex items-center justify-between font-mono text-[11px] tracking-[0.14em] text-white/65 uppercase">4 <span>Sheet 01 / 05</span>5 <span className="hidden sm:inline">General arrangement</span>6 <span>Scale 1 : 1</span>7 </div>89 <div className="relative mt-14 w-fit border border-dashed border-white/70 px-4 py-5 sm:mt-20 sm:px-8 sm:py-8">10 <span className="absolute top-0 left-0 -translate-y-full bg-white px-2 py-1 font-mono text-[10px] tracking-[0.12em] text-[#2152ff] uppercase">H1 · 112 / 0.94 / −0.045em</span>11 <span className="absolute -top-[3px] -left-[3px] size-[6px] bg-white" aria-hidden="true"></span>12 <span className="absolute -top-[3px] -right-[3px] size-[6px] bg-white" aria-hidden="true"></span>13 <span className="absolute -bottom-[3px] -left-[3px] size-[6px] bg-white" aria-hidden="true"></span>14 <span className="absolute -right-[3px] -bottom-[3px] size-[6px] bg-white" aria-hidden="true"></span>15 <h1 className="text-[52px] leading-[0.94] font-medium tracking-[-0.045em] sm:text-[88px] lg:text-[112px]">16 Drawn to scale.17 <br />18 <span className="tracking-[-0.02em] text-transparent [-webkit-text-stroke:1px_white] sm:[-webkit-text-stroke:1.5px_white]">Built to spec.</span>19 </h1>20 <div className="absolute top-full right-0 left-0 mt-4 flex items-center gap-3 font-mono text-[10px] tracking-[0.14em] text-white/70" aria-hidden="true">21 <span className="h-2.5 w-px bg-white/70"></span>22 <span className="h-px flex-1 bg-white/45"></span>23 <span>100%</span>24 <span className="h-px flex-1 bg-white/45"></span>25 <span className="h-2.5 w-px bg-white/70"></span>26 </div>27 </div>2829 <div className="mt-24 grid gap-12 lg:grid-cols-12 lg:items-end lg:gap-8">30 <div className="lg:col-span-6">31 <p className="max-w-xl text-lg leading-relaxed text-pretty text-white/85 sm:text-xl">32 Nora Vidal is a design engineer. She plans an interface the way you plan a building: measured, annotated, then built exactly as drawn. Product design and front-end for teams that ship.33 </p>34 <div className="mt-8 flex flex-wrap items-center gap-3 font-mono text-[12px] tracking-[0.12em] uppercase">35 <a href="#" className="bg-white px-5 py-3.5 text-[#2152ff] transition-[scale,background-color] duration-150 ease-out hover:bg-white/90 active:scale-[0.96]">36 See the work37 </a>38 <a href="#" className="border border-white/60 px-5 py-3.5 transition-[scale,border-color,background-color] duration-150 ease-out hover:border-white hover:bg-white/10 active:scale-[0.96]">39 Read the method40 </a>41 </div>42 </div>4344 <dl className="grid grid-cols-4 border border-white/60 bg-[#2152ff] font-mono text-[10px] tracking-[0.14em] uppercase lg:col-span-5 lg:col-start-8">45 <div className="col-span-4 border-b border-white/60 p-2.5 sm:p-3.5">46 <dt className="text-white/60">Project</dt>47 <dd className="mt-2 font-sans text-[17px] font-medium tracking-[-0.01em] normal-case">Portfolio, 2027 edition</dd>48 </div>49 <div className="col-span-2 border-r border-b border-white/60 p-2.5 sm:p-3.5">50 <dt className="text-white/60">Drawn by</dt>51 <dd className="mt-2 text-[12px] whitespace-nowrap">N. Vidal</dd>52 </div>53 <div className="col-span-2 border-b border-white/60 p-2.5 sm:p-3.5">54 <dt className="text-white/60">Based in</dt>55 <dd className="mt-2 text-[12px] whitespace-nowrap">Lisbon, UTC+0</dd>56 </div>57 <div className="border-r border-white/60 p-2.5 sm:p-3.5">58 <dt className="text-white/60">Scale</dt>59 <dd className="mt-2 text-[12px] whitespace-nowrap">1 : 1</dd>60 </div>61 <div className="border-r border-white/60 p-2.5 sm:p-3.5">62 <dt className="text-white/60">Sheet</dt>63 <dd className="mt-2 text-[12px] whitespace-nowrap">01 / 05</dd>64 </div>65 <div className="border-r border-white/60 p-2.5 sm:p-3.5">66 <dt className="text-white/60">Rev</dt>67 <dd className="mt-2 text-[12px] whitespace-nowrap">C</dd>68 </div>69 <div className="p-2.5 sm:p-3.5">70 <dt className="text-white/60">Date</dt>71 <dd className="mt-2 text-[12px] whitespace-nowrap">03.27</dd>72 </div>73 </dl>74 </div>75 </div>76</section>