Skip to content

Blueprint

A portfolio drawn like a set of plans: one blue, white linework, monospace labels, every section a numbered sheet

1280
page.jsx375 lines
<main className="bg-[#2152ff] font-sans antialiased">  <header className="bg-[#2152ff] text-white">    <div className="mx-auto max-w-6xl px-5 sm:px-8">      <nav className="flex items-center justify-between gap-6 py-4 font-mono text-[11px] tracking-[0.14em] uppercase">        <a href="#" className="flex items-center gap-3">          <svg viewBox="0 0 24 24" className="size-5" fill="none" stroke="currentColor" strokeWidth="1.25" aria-hidden="true">            <circle cx="12" cy="12" r="6.5" />            <path d="M12 1.5v6M12 16.5v6M1.5 12h6M16.5 12h6" />          </svg>          <span>Nora Vidal</span>          <span className="hidden text-white/55 sm:inline">Design engineer</span>        </a>        <div className="hidden items-center gap-8 text-white/75 md:flex">          <a href="#" className="transition-colors duration-150 hover:text-white">            <span className="text-white/45">01</span> Work          </a>          <a href="#" className="transition-colors duration-150 hover:text-white">            <span className="text-white/45">02</span> Method          </a>          <a href="#" className="transition-colors duration-150 hover:text-white">            <span className="text-white/45">03</span> Notes          </a>          <a href="#" className="transition-colors duration-150 hover:text-white">            <span className="text-white/45">04</span> Contact          </a>        </div>        <a href="#" className="bg-white px-3 py-2 text-[#2152ff] transition-[scale,background-color] duration-150 ease-out hover:bg-white/90 active:scale-[0.96]">          Book a project        </a>      </nav>      <div className="flex items-center gap-3 border-t border-white/30 py-2 font-mono text-[10px] tracking-[0.14em] text-white/55" aria-hidden="true">        <span>0</span>        <span className="h-1.5 flex-1 bg-[repeating-linear-gradient(to_right,rgb(255_255_255/0.55)_0_1px,transparent_1px_12px)]"></span>        <span>720</span>        <span className="h-1.5 flex-1 bg-[repeating-linear-gradient(to_right,rgb(255_255_255/0.55)_0_1px,transparent_1px_12px)]"></span>        <span>1440</span>      </div>    </div>  </header>  <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">    <div className="mx-auto max-w-6xl px-5 pt-12 pb-16 sm:px-8 sm:pt-16 sm:pb-24">      <div className="flex items-center justify-between font-mono text-[11px] tracking-[0.14em] text-white/65 uppercase">        <span>Sheet 01 / 05</span>        <span className="hidden sm:inline">General arrangement</span>        <span>Scale 1 : 1</span>      </div>        <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">        <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>        <span className="absolute -top-[3px] -left-[3px] size-[6px] bg-white" aria-hidden="true"></span>        <span className="absolute -top-[3px] -right-[3px] size-[6px] bg-white" aria-hidden="true"></span>        <span className="absolute -bottom-[3px] -left-[3px] size-[6px] bg-white" aria-hidden="true"></span>        <span className="absolute -right-[3px] -bottom-[3px] size-[6px] bg-white" aria-hidden="true"></span>        <h1 className="text-[52px] leading-[0.94] font-medium tracking-[-0.045em] sm:text-[88px] lg:text-[112px]">          Drawn to scale.          <br />          <span className="tracking-[-0.02em] text-transparent [-webkit-text-stroke:1px_white] sm:[-webkit-text-stroke:1.5px_white]">Built to spec.</span>        </h1>        <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">          <span className="h-2.5 w-px bg-white/70"></span>          <span className="h-px flex-1 bg-white/45"></span>          <span>100%</span>          <span className="h-px flex-1 bg-white/45"></span>          <span className="h-2.5 w-px bg-white/70"></span>        </div>      </div>        <div className="mt-24 grid gap-12 lg:grid-cols-12 lg:items-end lg:gap-8">        <div className="lg:col-span-6">          <p className="max-w-xl text-lg leading-relaxed text-pretty text-white/85 sm:text-xl">            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.          </p>          <div className="mt-8 flex flex-wrap items-center gap-3 font-mono text-[12px] tracking-[0.12em] uppercase">            <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]">              See the work            </a>            <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]">              Read the method            </a>          </div>        </div>          <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">          <div className="col-span-4 border-b border-white/60 p-2.5 sm:p-3.5">            <dt className="text-white/60">Project</dt>            <dd className="mt-2 font-sans text-[17px] font-medium tracking-[-0.01em] normal-case">Portfolio, 2027 edition</dd>          </div>          <div className="col-span-2 border-r border-b border-white/60 p-2.5 sm:p-3.5">            <dt className="text-white/60">Drawn by</dt>            <dd className="mt-2 text-[12px] whitespace-nowrap">N. Vidal</dd>          </div>          <div className="col-span-2 border-b border-white/60 p-2.5 sm:p-3.5">            <dt className="text-white/60">Based in</dt>            <dd className="mt-2 text-[12px] whitespace-nowrap">Lisbon, UTC+0</dd>          </div>          <div className="border-r border-white/60 p-2.5 sm:p-3.5">            <dt className="text-white/60">Scale</dt>            <dd className="mt-2 text-[12px] whitespace-nowrap">1 : 1</dd>          </div>          <div className="border-r border-white/60 p-2.5 sm:p-3.5">            <dt className="text-white/60">Sheet</dt>            <dd className="mt-2 text-[12px] whitespace-nowrap">01 / 05</dd>          </div>          <div className="border-r border-white/60 p-2.5 sm:p-3.5">            <dt className="text-white/60">Rev</dt>            <dd className="mt-2 text-[12px] whitespace-nowrap">C</dd>          </div>          <div className="p-2.5 sm:p-3.5">            <dt className="text-white/60">Date</dt>            <dd className="mt-2 text-[12px] whitespace-nowrap">03.27</dd>          </div>        </dl>      </div>    </div>  </section>  <section className="bg-[#2152ff] text-white">    <div className="mx-auto max-w-6xl px-5 py-16 sm:px-8 sm:py-24">      <div className="flex items-end justify-between gap-6 border-b border-white/35 pb-6">        <div>          <p className="font-mono text-[11px] tracking-[0.14em] text-white/65 uppercase">Sheet 02 / 05</p>          <h2 className="mt-3 text-4xl font-medium tracking-[-0.04em] sm:text-6xl">Selected work</h2>        </div>        <p className="hidden font-mono text-[11px] tracking-[0.14em] text-white/65 uppercase sm:block">04 plates · 2024 to 2027</p>      </div>        <div className="mt-12 grid gap-x-8 gap-y-14 md:grid-cols-2">        <a href="#" className="group block">          <div className="relative aspect-[4/3] border border-white/45 transition-colors duration-200 group-hover:border-white">            <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>            <svg viewBox="0 0 400 300" className="absolute inset-0 size-full" fill="none" stroke="white" strokeWidth="1.25" aria-hidden="true">              <path d="M60 30v-10M340 30v-10M60 25h280" strokeOpacity="0.6" />              <rect x="60" y="48" width="280" height="212" rx="6" />              <path d="M60 72h280M132 72v188" />              <circle cx="74" cy="60" r="3" />              <circle cx="85" cy="60" r="3" />              <circle cx="96" cy="60" r="3" />              <path d="M74 92h44M74 108h34M74 124h40M74 140h28" strokeOpacity="0.7" />              <rect x="148" y="88" width="84" height="24" />              <path d="M148 124h48" strokeOpacity="0.7" />              <path d="M148 232h176M148 232v-88" strokeOpacity="0.5" />              <polyline points="148,214 172,202 196,208 220,184 244,190 268,166 292,172 324,146" strokeWidth="1.75" />              <circle cx="324" cy="146" r="3.5" fill="white" />              <path d="M324 146v86" strokeDasharray="3 4" strokeOpacity="0.6" />            </svg>            <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>          </div>          <div className="mt-5 flex items-baseline justify-between gap-4">            <h3 className="text-2xl font-medium tracking-[-0.03em]">Ledger</h3>            <p className="font-mono text-[11px] tracking-[0.12em] text-white/65 uppercase">Product design · 2026</p>          </div>          <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>        </a>          <a href="#" className="group block">          <div className="relative aspect-[4/3] border border-white/45 transition-colors duration-200 group-hover:border-white">            <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>            <svg viewBox="0 0 400 300" className="absolute inset-0 size-full" fill="none" stroke="white" strokeWidth="1.25" aria-hidden="true">              <path d="M118 28h-10M118 272h-10M113 28v244" strokeOpacity="0.6" />              <rect x="146" y="28" width="108" height="244" rx="18" />              <path d="M186 42h28" strokeWidth="3" strokeLinecap="round" />              <circle cx="200" cy="112" r="36" strokeOpacity="0.45" />              <path d="M200 76a36 36 0 1 1-31.2 18" strokeWidth="3.5" strokeLinecap="round" />              <rect x="164" y="168" width="72" height="22" rx="5" />              <rect x="164" y="198" width="72" height="22" rx="5" />              <rect x="164" y="228" width="72" height="22" rx="5" strokeOpacity="0.5" />              <path d="M236 112h66" strokeDasharray="3 4" strokeOpacity="0.7" />              <circle cx="236" cy="112" r="2.5" fill="white" />            </svg>            <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>            <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>          </div>          <div className="mt-5 flex items-baseline justify-between gap-4">            <h3 className="text-2xl font-medium tracking-[-0.03em]">Halo</h3>            <p className="font-mono text-[11px] tracking-[0.12em] text-white/65 uppercase">iOS app · 2025</p>          </div>          <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>        </a>          <a href="#" className="group block">          <div className="relative aspect-[4/3] border border-white/45 transition-colors duration-200 group-hover:border-white">            <svg viewBox="0 0 400 300" className="absolute inset-0 size-full" fill="none" stroke="white" strokeWidth="1.25" aria-hidden="true">              <path d="M-10 236c46-34 82-8 126-40s58-74 124-66 86 46 170 8" strokeOpacity="0.35" />              <path d="M-10 196c40-30 78-12 118-44s64-70 126-62 92 40 176 0" strokeOpacity="0.35" />              <path d="M-10 156c36-26 70-14 110-42s70-66 130-60 96 34 180-6" strokeOpacity="0.35" />              <path d="M-10 116c34-22 66-16 104-40s74-60 134-56 100 30 182-10" strokeOpacity="0.35" />              <path d="M-10 276c50-38 88-6 132-38s54-78 120-70 82 50 168 14" strokeOpacity="0.35" />              <polyline points="64,238 118,196 168,206 214,152 276,162 328,92" strokeWidth="1.75" strokeDasharray="6 5" />              <circle cx="64" cy="238" r="4" fill="white" />              <circle cx="168" cy="206" r="3" fill="#2152ff" />              <circle cx="214" cy="152" r="3" fill="#2152ff" />              <circle cx="328" cy="92" r="10" />              <circle cx="328" cy="92" r="3.5" fill="white" />            </svg>            <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>            <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>            <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>          </div>          <div className="mt-5 flex items-baseline justify-between gap-4">            <h3 className="text-2xl font-medium tracking-[-0.03em]">Plot</h3>            <p className="font-mono text-[11px] tracking-[0.12em] text-white/65 uppercase">Web app · 2025</p>          </div>          <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>        </a>          <a href="#" className="group block">          <div className="relative flex aspect-[4/3] items-center justify-center border border-white/45 transition-colors duration-200 group-hover:border-white">            <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>            <span className="absolute top-[27%] right-0 left-0 border-t border-dashed border-white/40" aria-hidden="true"></span>            <span className="absolute top-[43%] right-0 left-0 border-t border-dashed border-white/40" aria-hidden="true"></span>            <span className="absolute top-[70%] right-0 left-0 border-t border-white/60" aria-hidden="true"></span>            <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>            <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>            <span className="absolute top-[70%] left-3 pt-1.5 font-mono text-[9px] tracking-[0.12em] text-white/75 uppercase">Base 0</span>            <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>          </div>          <div className="mt-5 flex items-baseline justify-between gap-4">            <h3 className="text-2xl font-medium tracking-[-0.03em]">Seventeen</h3>            <p className="font-mono text-[11px] tracking-[0.12em] text-white/65 uppercase">Type foundry · 2024</p>          </div>          <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>        </a>      </div>    </div>  </section>  <section className="bg-[#2152ff] text-white">    <div className="mx-auto max-w-6xl px-5 py-16 sm:px-8 sm:py-24">      <div className="flex items-end justify-between gap-6 border-b border-white/35 pb-6">        <div>          <p className="font-mono text-[11px] tracking-[0.14em] text-white/65 uppercase">Sheet 03 / 05</p>          <h2 className="mt-3 text-4xl font-medium tracking-[-0.04em] sm:text-6xl">Four phases, eight weeks</h2>        </div>        <p className="hidden font-mono text-[11px] tracking-[0.14em] text-white/65 uppercase sm:block">Schedule · typical engagement</p>      </div>        <div className="mt-10 grid gap-y-1 md:grid-cols-[15rem_1fr] md:gap-x-10">        <span className="hidden md:block"></span>        <div className="grid grid-cols-8 border-l border-white/35 font-mono text-[10px] tracking-[0.14em] text-white/65" aria-hidden="true">          <span className="border-r border-white/35 px-2 pb-2">W1</span>          <span className="border-r border-white/35 px-2 pb-2">W2</span>          <span className="border-r border-white/35 px-2 pb-2">W3</span>          <span className="border-r border-white/35 px-2 pb-2">W4</span>          <span className="border-r border-white/35 px-2 pb-2">W5</span>          <span className="border-r border-white/35 px-2 pb-2">W6</span>          <span className="border-r border-white/35 px-2 pb-2">W7</span>          <span className="border-r border-white/35 px-2 pb-2">W8</span>        </div>          <div className="border-t border-white/35 pt-5 md:py-6">          <p className="font-mono text-[11px] tracking-[0.14em] text-white/60 uppercase">01</p>          <h3 className="mt-2 text-2xl font-medium tracking-[-0.03em]">Survey</h3>          <p className="mt-2 text-[15px] leading-relaxed text-white/75">Read what exists: the product, the numbers and the complaints.</p>        </div>        <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">          <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>        </div>          <div className="border-t border-white/35 pt-5 md:py-6">          <p className="font-mono text-[11px] tracking-[0.14em] text-white/60 uppercase">02</p>          <h3 className="mt-2 text-2xl font-medium tracking-[-0.03em]">Draft</h3>          <p className="mt-2 text-[15px] leading-relaxed text-white/75">Flows and screens at full size, with every measurement written down.</p>        </div>        <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">          <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>        </div>          <div className="border-t border-white/35 pt-5 md:py-6">          <p className="font-mono text-[11px] tracking-[0.14em] text-white/60 uppercase">03</p>          <h3 className="mt-2 text-2xl font-medium tracking-[-0.03em]">Build</h3>          <p className="mt-2 text-[15px] leading-relaxed text-white/75">Front-end in your stack, component by component, reviewed against the drawings.</p>        </div>        <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">          <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>        </div>          <div className="border-t border-white/35 pt-5 md:py-6">          <p className="font-mono text-[11px] tracking-[0.14em] text-white/60 uppercase">04</p>          <h3 className="mt-2 text-2xl font-medium tracking-[-0.03em]">Handover</h3>          <p className="mt-2 text-[15px] leading-relaxed text-white/75">Tokens, docs and a recorded walkthrough, so the next change is yours.</p>        </div>        <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">          <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>        </div>      </div>        <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">        <span className="flex items-center gap-2.5">          <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>          Research and handover        </span>        <span className="flex items-center gap-2.5">          <span className="size-3.5 border border-white" aria-hidden="true"></span>          Design        </span>        <span className="flex items-center gap-2.5">          <span className="size-3.5 bg-white" aria-hidden="true"></span>          Engineering        </span>        <span className="text-white/55 sm:ml-auto">Phases overlap by a week on purpose</span>      </div>    </div>  </section>  <section className="bg-[#2152ff] text-white">    <div className="mx-auto max-w-6xl px-5 py-16 sm:px-8 sm:py-24">      <div className="relative border border-white/45 px-6 py-10 sm:px-12 sm:py-14">        <span className="absolute top-0 left-6 -translate-y-1/2 bg-[#2152ff] px-2 font-mono text-[10px] tracking-[0.14em] uppercase sm:left-12">Sheet 04 / 05 · Revision note</span>        <span className="absolute -top-px -left-px size-3 border-t-2 border-l-2 border-white" aria-hidden="true"></span>        <span className="absolute -top-px -right-px size-3 border-t-2 border-r-2 border-white" aria-hidden="true"></span>        <span className="absolute -bottom-px -left-px size-3 border-b-2 border-l-2 border-white" aria-hidden="true"></span>        <span className="absolute -right-px -bottom-px size-3 border-r-2 border-b-2 border-white" aria-hidden="true"></span>          <figure className="grid gap-8 lg:grid-cols-12 lg:gap-8">          <div className="flex items-start gap-4 lg:col-span-2 lg:flex-col" aria-hidden="true">            <span className="flex size-12 items-center justify-center rounded-full border border-white font-mono text-[15px]">A</span>            <span className="mt-6 hidden h-px w-full bg-[repeating-linear-gradient(to_right,white_0_4px,transparent_4px_9px)] lg:block"></span>          </div>          <div className="lg:col-span-10">            <blockquote className="text-3xl leading-[1.12] font-medium tracking-[-0.035em] text-balance sm:text-5xl lg:text-[56px]">              “The drawings were so exact that engineering stopped asking questions. We shipped the redesign{' '}              <span className="tracking-[-0.01em] text-transparent [-webkit-text-stroke:1px_white] sm:[-webkit-text-stroke:1.25px_white]">two weeks early.</span>”            </blockquote>            <figcaption className="mt-10 flex flex-wrap items-center gap-x-6 gap-y-2 font-mono text-[11px] tracking-[0.14em] uppercase">              <span>Dana Okafor</span>              <span className="text-white/65">VP Product, Ledger</span>              <span className="text-white/65 sm:ml-auto">Noted 11.2026</span>            </figcaption>          </div>        </figure>      </div>    </div>  </section>  <footer 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">    <div className="mx-auto max-w-6xl px-5 pt-16 pb-8 sm:px-8 sm:pt-24">      <div className="flex items-center justify-between font-mono text-[11px] tracking-[0.14em] text-white/65 uppercase">        <span>Sheet 05 / 05</span>        <span>Contact</span>      </div>        <div className="relative mt-10 sm:mt-14">        <p className="max-w-md text-lg leading-relaxed text-white/85 sm:text-xl">Two projects a year start from a blank sheet. The next opening is in spring.</p>        <a          href="mailto:hello@example.com"          className="mt-8 block w-fit text-[38px] leading-none font-medium tracking-[-0.025em] text-transparent transition-colors duration-300 ease-out [-webkit-text-stroke:1px_white] hover:text-white sm:text-[84px] sm:[-webkit-text-stroke:1.5px_white] lg:text-[124px]"        >          hello@example.com        </a>        <div className="mt-5 flex items-center gap-3 font-mono text-[10px] tracking-[0.14em] text-white/70" aria-hidden="true">          <span className="h-2.5 w-px bg-white/70"></span>          <span className="h-px flex-1 bg-white/45"></span>          <span>Replies within two days</span>          <span className="h-px flex-1 bg-white/45"></span>          <span className="h-2.5 w-px bg-white/70"></span>        </div>        <span className="absolute top-0 right-0 hidden -rotate-6 border-2 border-white px-4 py-3 text-center font-mono text-[12px] leading-relaxed tracking-[0.2em] uppercase md:block">          Booking          <br />          Q2 2027        </span>      </div>        <div className="mt-20 grid gap-6 border-t border-white/35 pt-6 font-mono text-[11px] tracking-[0.14em] uppercase sm:grid-cols-3">        <p className="leading-relaxed">          Nora Vidal          <br />          <span className="text-white/65">Design engineer, Lisbon</span>        </p>        <div className="flex gap-6 sm:justify-center">          <a href="#" className="underline-offset-4 transition-colors duration-150 hover:underline">Read.cv</a>          <a href="#" className="underline-offset-4 transition-colors duration-150 hover:underline">GitHub</a>          <a href="#" className="underline-offset-4 transition-colors duration-150 hover:underline">LinkedIn</a>        </div>        <p className="text-white/65 sm:text-right">© 2027 · Drawn, then built</p>      </div>    </div>  </footer></main>

Made of6

Other starters