Onyx features
Five uneven cards, each with a small piece of the product in it
1280
1<section className="bg-[#0a0a0b] py-24 text-[#f2f2ef] md:py-32">2 <div className="mx-auto max-w-6xl px-6">3 <div className="max-w-2xl">4 <p className="font-mono text-[11px] tracking-[0.14em] text-[#c6f35e] uppercase">Why Onyx</p>5 <h2 className="mt-4 text-4xl leading-[1.05] font-medium tracking-[-0.03em] text-balance md:text-5xl">Everything in its place, nothing in your way</h2>6 <p className="mt-5 max-w-lg text-[17px] leading-relaxed text-pretty text-white/60">One place for the plan, the work and the release. Fast enough that you stop noticing it.</p>7 </div>8 <div className="mt-14 grid gap-3 md:grid-cols-6">9 <div className="flex flex-col justify-between gap-10 rounded-3xl bg-white/3 p-7 ring-1 ring-white/10 md:col-span-4">10 <div className="flex flex-col gap-2 rounded-2xl bg-[#111113] p-3 text-[13px] ring-1 ring-white/8">11 <div className="flex items-center gap-3 rounded-xl bg-white/5 px-3 py-2.5">12 <span className="size-3.5 rounded-full border-[1.5px] border-[#c6f35e] bg-[#c6f35e]/20" />13 <span className="flex-1 truncate">Rework the onboarding checklist</span>14 <span className="rounded-full bg-white/8 px-2 py-0.5 text-[11px] text-white/60">Design</span>15 <span className="font-mono text-[11px] text-white/35 tabular-nums">ONX-214</span>16 </div>17 <div className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-white/70">18 <span className="size-3.5 rounded-full border-[1.5px] border-white/30" />19 <span className="flex-1 truncate">Cut cold start under 400 ms</span>20 <span className="rounded-full bg-white/8 px-2 py-0.5 text-[11px] text-white/60">Platform</span>21 <span className="font-mono text-[11px] text-white/35 tabular-nums">ONX-215</span>22 </div>23 <div className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-white/70">24 <span className="size-3.5 rounded-full border-[1.5px] border-white/30" />25 <span className="flex-1 truncate">Annual plans on the pricing page</span>26 <span className="rounded-full bg-white/8 px-2 py-0.5 text-[11px] text-white/60">Growth</span>27 <span className="font-mono text-[11px] text-white/35 tabular-nums">ONX-216</span>28 </div>29 </div>30 <div>31 <h3 className="text-xl font-medium tracking-tight">Plan in one view</h3>32 <p className="mt-2 max-w-md leading-relaxed text-pretty text-white/55">Issues, cycles and releases share one list. Filter it, group it, and everyone sees the same thing.</p>33 </div>34 </div>35 <div className="flex flex-col justify-between gap-10 rounded-3xl bg-white/3 p-7 ring-1 ring-white/10 md:col-span-2">36 <div>37 <p className="text-6xl font-medium tracking-[-0.05em] tabular-nums">4.2x</p>38 <svg viewBox="0 0 200 48" className="mt-5 h-12 w-full text-[#c6f35e]" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">39 <path d="M2 40 28 34 54 37 80 26 106 29 132 16 158 19 198 4" />40 </svg>41 </div>42 <div>43 <h3 className="text-xl font-medium tracking-tight">Faster from idea to live</h3>44 <p className="mt-2 leading-relaxed text-pretty text-white/55">Median for teams in their first quarter.</p>45 </div>46 </div>47 <div className="flex flex-col justify-between gap-10 rounded-3xl bg-white/3 p-7 ring-1 ring-white/10 md:col-span-2">48 <div className="flex flex-wrap gap-2 text-[13px] text-white/70">49 <span className="rounded-full bg-white/6 px-3 py-1.5 ring-1 ring-white/8">GitHub</span>50 <span className="rounded-full bg-white/6 px-3 py-1.5 ring-1 ring-white/8">Slack</span>51 <span className="rounded-full bg-white/6 px-3 py-1.5 ring-1 ring-white/8">Figma</span>52 <span className="rounded-full bg-white/6 px-3 py-1.5 ring-1 ring-white/8">Linear</span>53 <span className="rounded-full bg-white/6 px-3 py-1.5 ring-1 ring-white/8">Sentry</span>54 <span className="rounded-full bg-[#c6f35e]/12 px-3 py-1.5 text-[#c6f35e] ring-1 ring-[#c6f35e]/25">40 more</span>55 </div>56 <div>57 <h3 className="text-xl font-medium tracking-tight">Fits the tools you have</h3>58 <p className="mt-2 leading-relaxed text-pretty text-white/55">Two-way sync, set up in a minute.</p>59 </div>60 </div>61 <div className="flex flex-col justify-between gap-10 rounded-3xl bg-white/3 p-7 ring-1 ring-white/10 md:col-span-2">62 <div className="flex items-center">63 <span className="flex size-10 items-center justify-center rounded-full bg-linear-to-br from-amber-200 to-orange-400 text-[12px] font-semibold text-[#0a0a0b] ring-2 ring-[#131315]">AR</span>64 <span className="-ml-2.5 flex size-10 items-center justify-center rounded-full bg-linear-to-br from-sky-200 to-indigo-400 text-[12px] font-semibold text-[#0a0a0b] ring-2 ring-[#131315]">TB</span>65 <span className="-ml-2.5 flex size-10 items-center justify-center rounded-full bg-linear-to-br from-rose-200 to-fuchsia-400 text-[12px] font-semibold text-[#0a0a0b] ring-2 ring-[#131315]">MT</span>66 <span className="-ml-2.5 flex size-10 items-center justify-center rounded-full bg-linear-to-br from-lime-200 to-emerald-400 text-[12px] font-semibold text-[#0a0a0b] ring-2 ring-[#131315]">LC</span>67 <span className="ml-3 flex items-center gap-1.5 text-[13px] text-white/50"><span className="size-1.5 rounded-full bg-[#c6f35e]" />42 online</span>68 </div>69 <div>70 <h3 className="text-xl font-medium tracking-tight">Made for working together</h3>71 <p className="mt-2 leading-relaxed text-pretty text-white/55">See who is on what, live, without asking.</p>72 </div>73 </div>74 <div className="flex flex-col justify-between gap-10 rounded-3xl bg-white/3 p-7 ring-1 ring-white/10 md:col-span-2">75 <div className="flex flex-col gap-3 text-[13px]">76 <div className="flex items-center justify-between">77 <span className="text-white/70">Single sign-on</span>78 <span className="flex h-5 w-9 items-center justify-end rounded-full bg-[#c6f35e] p-0.5"><span className="size-4 rounded-full bg-[#0a0a0b]" /></span>79 </div>80 <div className="flex items-center justify-between">81 <span className="text-white/70">Audit log</span>82 <span className="flex h-5 w-9 items-center justify-end rounded-full bg-[#c6f35e] p-0.5"><span className="size-4 rounded-full bg-[#0a0a0b]" /></span>83 </div>84 <div className="flex items-center justify-between">85 <span className="text-white/70">Public links</span>86 <span className="flex h-5 w-9 items-center rounded-full bg-white/12 p-0.5"><span className="size-4 rounded-full bg-white/60" /></span>87 </div>88 </div>89 <div>90 <h3 className="text-xl font-medium tracking-tight">Private by default</h3>91 <p className="mt-2 leading-relaxed text-pretty text-white/55">Your data is yours. Nothing is shared until you say so.</p>92 </div>93 </div>94 </div>95 </div>96</section>