Onyx hero
A big headline over a product window drawn in markup, on near-black
1280
1<section className="relative overflow-hidden bg-[#0a0a0b] text-[#f2f2ef]">2 <div className="pointer-events-none absolute inset-x-0 -top-56 mx-auto h-[28rem] max-w-4xl rounded-full bg-[#c6f35e]/12 blur-3xl" aria-hidden="true" />3 <div className="relative mx-auto max-w-6xl px-6 pt-20 pb-20 md:pt-28">4 <div className="mx-auto flex max-w-3xl flex-col items-center text-center">5 <a href="#" className="inline-flex items-center gap-2.5 rounded-full bg-white/5 py-1 pr-3.5 pl-1 text-[13px] text-white/70 ring-1 ring-white/10 transition-colors duration-150 hover:bg-white/8 hover:text-white">6 <span className="rounded-full bg-[#c6f35e] px-2 py-0.5 text-[11px] font-semibold text-[#0a0a0b]">New</span>7 Realtime sync is here8 <svg viewBox="0 0 16 16" className="size-3.5" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">9 <path d="M3 8h10M9 4l4 4-4 4" />10 </svg>11 </a>12 <h1 className="mt-8 text-5xl leading-[1.02] font-medium tracking-[-0.04em] text-balance md:text-7xl">Ship the work your team is proud of</h1>13 <p className="mt-6 max-w-xl text-lg leading-relaxed text-pretty text-white/60">Onyx brings planning, building and shipping into one calm workspace, so the small things stop slipping.</p>14 <div className="mt-10 flex flex-col gap-3 sm:flex-row">15 <a href="#" className="inline-flex items-center justify-center rounded-full bg-[#c6f35e] px-6 py-3 text-[15px] font-medium text-[#0a0a0b] transition-[scale,background-color] duration-150 ease-out hover:bg-[#d6f886] active:scale-[0.96]">Start for free</a>16 <a href="#" className="inline-flex items-center justify-center rounded-full bg-white/5 px-6 py-3 text-[15px] font-medium ring-1 ring-white/12 transition-[scale,background-color] duration-150 ease-out hover:bg-white/10 active:scale-[0.96]">Book a demo</a>17 </div>18 <p className="mt-6 font-mono text-[11px] tracking-[0.14em] text-white/40 uppercase">Free for 14 days · No card needed</p>19 </div>20 <div className="mt-16 rounded-[28px] bg-white/4 p-2 ring-1 ring-white/10">21 <div className="overflow-hidden rounded-[20px] bg-[#111113] ring-1 ring-white/8">22 <div className="flex items-center gap-2 border-b border-white/8 px-4 py-3">23 <span className="size-2.5 rounded-full bg-white/15" />24 <span className="size-2.5 rounded-full bg-white/15" />25 <span className="size-2.5 rounded-full bg-white/15" />26 <span className="ml-3 rounded-md bg-white/5 px-2.5 py-1 font-mono text-[11px] text-white/40">onyx.app/roadmap</span>27 </div>28 <div className="grid md:grid-cols-[13rem_1fr]">29 <div className="hidden flex-col gap-1 border-r border-white/8 p-3 text-[13px] text-white/50 md:flex">30 <span className="rounded-lg bg-white/8 px-3 py-2 text-white">Roadmap</span>31 <span className="rounded-lg px-3 py-2">Issues</span>32 <span className="rounded-lg px-3 py-2">Cycles</span>33 <span className="rounded-lg px-3 py-2">Releases</span>34 <span className="mt-4 px-3 font-mono text-[10px] tracking-[0.14em] text-white/30 uppercase">Teams</span>35 <span className="flex items-center gap-2 rounded-lg px-3 py-2"><span className="size-2 rounded-full bg-[#c6f35e]" />Design</span>36 <span className="flex items-center gap-2 rounded-lg px-3 py-2"><span className="size-2 rounded-full bg-sky-400" />Platform</span>37 <span className="flex items-center gap-2 rounded-lg px-3 py-2"><span className="size-2 rounded-full bg-rose-400" />Growth</span>38 </div>39 <div className="p-5 sm:p-6">40 <div className="flex items-center justify-between gap-4">41 <div>42 <p className="text-[15px] font-medium">Autumn release</p>43 <p className="mt-0.5 text-[13px] text-white/40">12 of 16 done · ships Friday</p>44 </div>45 <span className="rounded-full bg-[#c6f35e]/15 px-2.5 py-1 text-[11px] font-medium text-[#c6f35e]">On track</span>46 </div>47 <div className="mt-5 grid gap-3 sm:grid-cols-3">48 <div className="rounded-xl bg-white/4 p-4 ring-1 ring-white/8">49 <p className="text-[12px] text-white/40">Cycle time</p>50 <p className="mt-2 text-2xl font-medium tracking-tight tabular-nums">2.4 days</p>51 </div>52 <div className="rounded-xl bg-white/4 p-4 ring-1 ring-white/8">53 <p className="text-[12px] text-white/40">Shipped this week</p>54 <p className="mt-2 text-2xl font-medium tracking-tight tabular-nums">38</p>55 </div>56 <div className="rounded-xl bg-white/4 p-4 ring-1 ring-white/8">57 <p className="text-[12px] text-white/40">Open bugs</p>58 <p className="mt-2 text-2xl font-medium tracking-tight tabular-nums">3</p>59 </div>60 </div>61 <div className="mt-5 flex h-28 items-end gap-2 rounded-xl bg-white/3 p-4 ring-1 ring-white/8">62 <span className="h-[35%] flex-1 rounded-sm bg-white/12" />63 <span className="h-[48%] flex-1 rounded-sm bg-white/12" />64 <span className="h-[42%] flex-1 rounded-sm bg-white/12" />65 <span className="h-[60%] flex-1 rounded-sm bg-white/12" />66 <span className="h-[55%] flex-1 rounded-sm bg-white/12" />67 <span className="h-[72%] flex-1 rounded-sm bg-white/12" />68 <span className="h-[66%] flex-1 rounded-sm bg-white/12" />69 <span className="h-[84%] flex-1 rounded-sm bg-white/12" />70 <span className="h-[78%] flex-1 rounded-sm bg-white/12" />71 <span className="h-full flex-1 rounded-sm bg-[#c6f35e]" />72 </div>73 </div>74 </div>75 </div>76 </div>77 </div>78</section>