Onyx

1<main className="bg-[#0a0a0b] font-sans antialiased">2  <header className="bg-[#0a0a0b] px-4 pt-4 text-[#f2f2ef] sm:px-6 sm:pt-5">3    <nav className="mx-auto flex max-w-6xl items-center justify-between rounded-full bg-white/4 py-2 pr-2 pl-5 ring-1 ring-white/10">4      <a href="#" className="flex items-center gap-2.5 text-[15px] font-medium tracking-tight">5        <svg viewBox="0 0 24 24" className="size-5" aria-hidden="true">6          <rect x="2" y="2" width="20" height="20" rx="6" fill="#c6f35e" />7          <path d="M7.5 12.5 10.5 15.5 16.5 9" fill="none" stroke="#0a0a0b" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" />8        </svg>9        Onyx10      </a>11      <div className="hidden items-center gap-8 text-sm text-white/60 md:flex">12        <a href="#" className="transition-colors duration-150 hover:text-white">Product</a>13        <a href="#" className="transition-colors duration-150 hover:text-white">Customers</a>14        <a href="#" className="transition-colors duration-150 hover:text-white">Pricing</a>15        <a href="#" className="transition-colors duration-150 hover:text-white">Changelog</a>16      </div>17      <div className="flex items-center gap-1">18        <a href="#" className="hidden rounded-full px-4 py-2 text-sm text-white/70 transition-colors duration-150 hover:text-white sm:block">Sign in</a>19        <a href="#" className="rounded-full bg-[#c6f35e] px-4 py-2 text-sm font-medium text-[#0a0a0b] transition-[scale,background-color] duration-150 ease-out hover:bg-[#d6f886] active:scale-[0.96]">Get started</a>20      </div>21    </nav>22  </header>23  <section className="relative overflow-hidden bg-[#0a0a0b] text-[#f2f2ef]">24    <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" />25    <div className="relative mx-auto max-w-6xl px-6 pt-20 pb-20 md:pt-28">26      <div className="mx-auto flex max-w-3xl flex-col items-center text-center">27        <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">28          <span className="rounded-full bg-[#c6f35e] px-2 py-0.5 text-[11px] font-semibold text-[#0a0a0b]">New</span>29          Realtime sync is here30          <svg viewBox="0 0 16 16" className="size-3.5" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">31            <path d="M3 8h10M9 4l4 4-4 4" />32          </svg>33        </a>34        <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>35        <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>36        <div className="mt-10 flex flex-col gap-3 sm:flex-row">37          <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>38          <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>39        </div>40        <p className="mt-6 font-mono text-[11px] tracking-[0.14em] text-white/40 uppercase">Free for 14 days · No card needed</p>41      </div>42      <div className="mt-16 rounded-[28px] bg-white/4 p-2 ring-1 ring-white/10">43        <div className="overflow-hidden rounded-[20px] bg-[#111113] ring-1 ring-white/8">44          <div className="flex items-center gap-2 border-b border-white/8 px-4 py-3">45            <span className="size-2.5 rounded-full bg-white/15" />46            <span className="size-2.5 rounded-full bg-white/15" />47            <span className="size-2.5 rounded-full bg-white/15" />48            <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>49          </div>50          <div className="grid md:grid-cols-[13rem_1fr]">51            <div className="hidden flex-col gap-1 border-r border-white/8 p-3 text-[13px] text-white/50 md:flex">52              <span className="rounded-lg bg-white/8 px-3 py-2 text-white">Roadmap</span>53              <span className="rounded-lg px-3 py-2">Issues</span>54              <span className="rounded-lg px-3 py-2">Cycles</span>55              <span className="rounded-lg px-3 py-2">Releases</span>56              <span className="mt-4 px-3 font-mono text-[10px] tracking-[0.14em] text-white/30 uppercase">Teams</span>57              <span className="flex items-center gap-2 rounded-lg px-3 py-2"><span className="size-2 rounded-full bg-[#c6f35e]" />Design</span>58              <span className="flex items-center gap-2 rounded-lg px-3 py-2"><span className="size-2 rounded-full bg-sky-400" />Platform</span>59              <span className="flex items-center gap-2 rounded-lg px-3 py-2"><span className="size-2 rounded-full bg-rose-400" />Growth</span>60            </div>61            <div className="p-5 sm:p-6">62              <div className="flex items-center justify-between gap-4">63                <div>64                  <p className="text-[15px] font-medium">Autumn release</p>65                  <p className="mt-0.5 text-[13px] text-white/40">12 of 16 done · ships Friday</p>66                </div>67                <span className="rounded-full bg-[#c6f35e]/15 px-2.5 py-1 text-[11px] font-medium text-[#c6f35e]">On track</span>68              </div>69              <div className="mt-5 grid gap-3 sm:grid-cols-3">70                <div className="rounded-xl bg-white/4 p-4 ring-1 ring-white/8">71                  <p className="text-[12px] text-white/40">Cycle time</p>72                  <p className="mt-2 text-2xl font-medium tracking-tight tabular-nums">2.4 days</p>73                </div>74                <div className="rounded-xl bg-white/4 p-4 ring-1 ring-white/8">75                  <p className="text-[12px] text-white/40">Shipped this week</p>76                  <p className="mt-2 text-2xl font-medium tracking-tight tabular-nums">38</p>77                </div>78                <div className="rounded-xl bg-white/4 p-4 ring-1 ring-white/8">79                  <p className="text-[12px] text-white/40">Open bugs</p>80                  <p className="mt-2 text-2xl font-medium tracking-tight tabular-nums">3</p>81                </div>82              </div>83              <div className="mt-5 flex h-28 items-end gap-2 rounded-xl bg-white/3 p-4 ring-1 ring-white/8">84                <span className="h-[35%] flex-1 rounded-sm bg-white/12" />85                <span className="h-[48%] flex-1 rounded-sm bg-white/12" />86                <span className="h-[42%] flex-1 rounded-sm bg-white/12" />87                <span className="h-[60%] flex-1 rounded-sm bg-white/12" />88                <span className="h-[55%] flex-1 rounded-sm bg-white/12" />89                <span className="h-[72%] flex-1 rounded-sm bg-white/12" />90                <span className="h-[66%] flex-1 rounded-sm bg-white/12" />91                <span className="h-[84%] flex-1 rounded-sm bg-white/12" />92                <span className="h-[78%] flex-1 rounded-sm bg-white/12" />93                <span className="h-full flex-1 rounded-sm bg-[#c6f35e]" />94              </div>95            </div>96          </div>97        </div>98      </div>99    </div>100  </section>101  <section className="bg-[#0a0a0b] py-14 text-[#f2f2ef]">102    <div className="mx-auto max-w-6xl px-6">103      <p className="text-center font-mono text-[11px] tracking-[0.14em] text-white/40 uppercase">Trusted by teams who ship every week</p>104      <div className="mt-9 grid grid-cols-2 items-center gap-x-8 gap-y-7 text-center text-white/45 sm:grid-cols-3 md:grid-cols-6">105        <span className="text-xl font-semibold tracking-tight">Northwind</span>106        <span className="font-serif text-2xl italic">Lumen</span>107        <span className="font-mono text-lg tracking-tight">cascade_</span>108        <span className="text-xl font-black tracking-[-0.06em] uppercase">Halcyon</span>109        <span className="text-lg font-light tracking-[0.24em] uppercase">Aster</span>110        <span className="font-serif text-xl">Fieldwork</span>111      </div>112    </div>113  </section>114  <section className="bg-[#0a0a0b] py-24 text-[#f2f2ef] md:py-32">115    <div className="mx-auto max-w-6xl px-6">116      <div className="max-w-2xl">117        <p className="font-mono text-[11px] tracking-[0.14em] text-[#c6f35e] uppercase">Why Onyx</p>118        <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>119        <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>120      </div>121      <div className="mt-14 grid gap-3 md:grid-cols-6">122        <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">123          <div className="flex flex-col gap-2 rounded-2xl bg-[#111113] p-3 text-[13px] ring-1 ring-white/8">124            <div className="flex items-center gap-3 rounded-xl bg-white/5 px-3 py-2.5">125              <span className="size-3.5 rounded-full border-[1.5px] border-[#c6f35e] bg-[#c6f35e]/20" />126              <span className="flex-1 truncate">Rework the onboarding checklist</span>127              <span className="rounded-full bg-white/8 px-2 py-0.5 text-[11px] text-white/60">Design</span>128              <span className="font-mono text-[11px] text-white/35 tabular-nums">ONX-214</span>129            </div>130            <div className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-white/70">131              <span className="size-3.5 rounded-full border-[1.5px] border-white/30" />132              <span className="flex-1 truncate">Cut cold start under 400 ms</span>133              <span className="rounded-full bg-white/8 px-2 py-0.5 text-[11px] text-white/60">Platform</span>134              <span className="font-mono text-[11px] text-white/35 tabular-nums">ONX-215</span>135            </div>136            <div className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-white/70">137              <span className="size-3.5 rounded-full border-[1.5px] border-white/30" />138              <span className="flex-1 truncate">Annual plans on the pricing page</span>139              <span className="rounded-full bg-white/8 px-2 py-0.5 text-[11px] text-white/60">Growth</span>140              <span className="font-mono text-[11px] text-white/35 tabular-nums">ONX-216</span>141            </div>142          </div>143          <div>144            <h3 className="text-xl font-medium tracking-tight">Plan in one view</h3>145            <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>146          </div>147        </div>148        <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">149          <div>150            <p className="text-6xl font-medium tracking-[-0.05em] tabular-nums">4.2x</p>151            <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">152              <path d="M2 40 28 34 54 37 80 26 106 29 132 16 158 19 198 4" />153            </svg>154          </div>155          <div>156            <h3 className="text-xl font-medium tracking-tight">Faster from idea to live</h3>157            <p className="mt-2 leading-relaxed text-pretty text-white/55">Median for teams in their first quarter.</p>158          </div>159        </div>160        <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">161          <div className="flex flex-wrap gap-2 text-[13px] text-white/70">162            <span className="rounded-full bg-white/6 px-3 py-1.5 ring-1 ring-white/8">GitHub</span>163            <span className="rounded-full bg-white/6 px-3 py-1.5 ring-1 ring-white/8">Slack</span>164            <span className="rounded-full bg-white/6 px-3 py-1.5 ring-1 ring-white/8">Figma</span>165            <span className="rounded-full bg-white/6 px-3 py-1.5 ring-1 ring-white/8">Linear</span>166            <span className="rounded-full bg-white/6 px-3 py-1.5 ring-1 ring-white/8">Sentry</span>167            <span className="rounded-full bg-[#c6f35e]/12 px-3 py-1.5 text-[#c6f35e] ring-1 ring-[#c6f35e]/25">40 more</span>168          </div>169          <div>170            <h3 className="text-xl font-medium tracking-tight">Fits the tools you have</h3>171            <p className="mt-2 leading-relaxed text-pretty text-white/55">Two-way sync, set up in a minute.</p>172          </div>173        </div>174        <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">175          <div className="flex items-center">176            <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>177            <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>178            <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>179            <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>180            <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>181          </div>182          <div>183            <h3 className="text-xl font-medium tracking-tight">Made for working together</h3>184            <p className="mt-2 leading-relaxed text-pretty text-white/55">See who is on what, live, without asking.</p>185          </div>186        </div>187        <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">188          <div className="flex flex-col gap-3 text-[13px]">189            <div className="flex items-center justify-between">190              <span className="text-white/70">Single sign-on</span>191              <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>192            </div>193            <div className="flex items-center justify-between">194              <span className="text-white/70">Audit log</span>195              <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>196            </div>197            <div className="flex items-center justify-between">198              <span className="text-white/70">Public links</span>199              <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>200            </div>201          </div>202          <div>203            <h3 className="text-xl font-medium tracking-tight">Private by default</h3>204            <p className="mt-2 leading-relaxed text-pretty text-white/55">Your data is yours. Nothing is shared until you say so.</p>205          </div>206        </div>207      </div>208    </div>209  </section>210  <section className="bg-[#0a0a0b] py-24 text-[#f2f2ef] md:py-32">211    <div className="mx-auto max-w-6xl px-6">212      <div className="mx-auto max-w-2xl text-center">213        <p className="font-mono text-[11px] tracking-[0.14em] text-[#c6f35e] uppercase">Pricing</p>214        <h2 className="mt-4 text-4xl leading-[1.05] font-medium tracking-[-0.03em] text-balance md:text-5xl">Start free. Pay when it earns its place.</h2>215      </div>216      <div className="mt-14 grid items-start gap-3 md:grid-cols-3">217        <div className="rounded-3xl bg-white/3 p-8 ring-1 ring-white/10">218          <h3 className="text-[15px] font-medium">Starter</h3>219          <p className="mt-1 text-sm text-white/50">For trying it on a real project.</p>220          <p className="mt-8 flex items-baseline gap-1.5"><span className="text-5xl font-medium tracking-[-0.04em] tabular-nums">$0</span><span className="text-sm text-white/45">forever</span></p>221          <a href="#" className="mt-8 flex items-center justify-center rounded-full bg-white/6 py-2.5 text-sm font-medium ring-1 ring-white/12 transition-[scale,background-color] duration-150 ease-out hover:bg-white/10 active:scale-[0.96]">Start for free</a>222          <ul className="mt-8 flex flex-col gap-3 text-sm text-white/70">223          <li className="flex gap-3"><svg viewBox="0 0 16 16" className="mt-1 size-4 shrink-0 text-white/40" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" /></svg>Up to 3 people</li>224          <li className="flex gap-3"><svg viewBox="0 0 16 16" className="mt-1 size-4 shrink-0 text-white/40" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" /></svg>One project</li>225          <li className="flex gap-3"><svg viewBox="0 0 16 16" className="mt-1 size-4 shrink-0 text-white/40" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" /></svg>Community support</li>226          </ul>227        </div>228        <div className="rounded-3xl bg-[#131315] p-8 ring-1 ring-[#c6f35e]/50">229          <div className="flex items-center justify-between">230            <h3 className="text-[15px] font-medium">Team</h3>231            <span className="rounded-full bg-[#c6f35e] px-2.5 py-0.5 text-[11px] font-semibold text-[#0a0a0b]">Most picked</span>232          </div>233          <p className="mt-1 text-sm text-white/50">For teams that ship every week.</p>234          <p className="mt-8 flex items-baseline gap-1.5"><span className="text-5xl font-medium tracking-[-0.04em] tabular-nums">$12</span><span className="text-sm text-white/45">per person, monthly</span></p>235          <a href="#" className="mt-8 flex items-center justify-center rounded-full bg-[#c6f35e] py-2.5 text-sm font-medium text-[#0a0a0b] transition-[scale,background-color] duration-150 ease-out hover:bg-[#d6f886] active:scale-[0.96]">Try Team free</a>236          <ul className="mt-8 flex flex-col gap-3 text-sm text-white/80">237          <li className="flex gap-3"><svg viewBox="0 0 16 16" className="mt-1 size-4 shrink-0 text-[#c6f35e]" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" /></svg>Unlimited people and projects</li>238          <li className="flex gap-3"><svg viewBox="0 0 16 16" className="mt-1 size-4 shrink-0 text-[#c6f35e]" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" /></svg>Cycles, releases and roadmaps</li>239          <li className="flex gap-3"><svg viewBox="0 0 16 16" className="mt-1 size-4 shrink-0 text-[#c6f35e]" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" /></svg>Every integration</li>240          <li className="flex gap-3"><svg viewBox="0 0 16 16" className="mt-1 size-4 shrink-0 text-[#c6f35e]" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" /></svg>Same-day support</li>241          </ul>242        </div>243        <div className="rounded-3xl bg-white/3 p-8 ring-1 ring-white/10">244          <h3 className="text-[15px] font-medium">Company</h3>245          <p className="mt-1 text-sm text-white/50">For security reviews and scale.</p>246          <p className="mt-8 flex items-baseline gap-1.5"><span className="text-5xl font-medium tracking-[-0.04em]">Custom</span></p>247          <a href="#" className="mt-8 flex items-center justify-center rounded-full bg-white/6 py-2.5 text-sm font-medium ring-1 ring-white/12 transition-[scale,background-color] duration-150 ease-out hover:bg-white/10 active:scale-[0.96]">Talk to us</a>248          <ul className="mt-8 flex flex-col gap-3 text-sm text-white/70">249          <li className="flex gap-3"><svg viewBox="0 0 16 16" className="mt-1 size-4 shrink-0 text-white/40" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" /></svg>Single sign-on and audit log</li>250          <li className="flex gap-3"><svg viewBox="0 0 16 16" className="mt-1 size-4 shrink-0 text-white/40" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" /></svg>A named person on our side</li>251          <li className="flex gap-3"><svg viewBox="0 0 16 16" className="mt-1 size-4 shrink-0 text-white/40" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" /></svg>Uptime in writing</li>252          </ul>253        </div>254      </div>255    </div>256  </section>257  <footer className="bg-[#0a0a0b] px-4 pb-10 text-[#f2f2ef] sm:px-6">258    <div className="relative mx-auto max-w-6xl overflow-hidden rounded-[32px] bg-[#131315] px-6 py-20 text-center ring-1 ring-white/10 md:py-24">259      <div className="pointer-events-none absolute inset-x-0 -bottom-40 mx-auto h-72 max-w-2xl rounded-full bg-[#c6f35e]/14 blur-3xl" aria-hidden="true" />260      <div className="relative">261        <h2 className="mx-auto max-w-2xl text-4xl leading-[1.05] font-medium tracking-[-0.03em] text-balance md:text-6xl">Your next release starts here</h2>262        <p className="mx-auto mt-5 max-w-md text-[17px] leading-relaxed text-pretty text-white/60">Set up in a few minutes. Bring the team when you are ready.</p>263        <div className="mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row">264          <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>265          <a href="#" className="inline-flex items-center justify-center rounded-full px-6 py-3 text-[15px] font-medium text-white/70 transition-colors duration-150 hover:text-white">Read the docs</a>266        </div>267      </div>268    </div>269    <div className="mx-auto mt-14 grid max-w-6xl gap-10 px-2 text-sm md:grid-cols-[1.5fr_1fr_1fr_1fr]">270      <div>271        <p className="text-[15px] font-medium tracking-tight">Onyx</p>272        <p className="mt-3 max-w-xs leading-relaxed text-white/45">The calm place where teams plan, build and ship.</p>273      </div>274      <div className="flex flex-col gap-3 text-white/55">275        <p className="font-mono text-[11px] tracking-[0.14em] text-white/35 uppercase">Product</p>276        <a href="#" className="w-fit transition-colors duration-150 hover:text-white">Features</a>277        <a href="#" className="w-fit transition-colors duration-150 hover:text-white">Pricing</a>278        <a href="#" className="w-fit transition-colors duration-150 hover:text-white">Changelog</a>279      </div>280      <div className="flex flex-col gap-3 text-white/55">281        <p className="font-mono text-[11px] tracking-[0.14em] text-white/35 uppercase">Company</p>282        <a href="#" className="w-fit transition-colors duration-150 hover:text-white">About</a>283        <a href="#" className="w-fit transition-colors duration-150 hover:text-white">Customers</a>284        <a href="#" className="w-fit transition-colors duration-150 hover:text-white">Careers</a>285      </div>286      <div className="flex flex-col gap-3 text-white/55">287        <p className="font-mono text-[11px] tracking-[0.14em] text-white/35 uppercase">Legal</p>288        <a href="#" className="w-fit transition-colors duration-150 hover:text-white">Privacy</a>289        <a href="#" className="w-fit transition-colors duration-150 hover:text-white">Terms</a>290        <a href="#" className="w-fit transition-colors duration-150 hover:text-white">Security</a>291      </div>292    </div>293    <div className="mx-auto mt-12 flex max-w-6xl flex-col justify-between gap-3 border-t border-white/8 px-2 pt-6 text-[13px] text-white/35 sm:flex-row">294      <p>© 2026 Onyx Labs</p>295      <p className="flex items-center gap-2"><span className="size-1.5 rounded-full bg-[#c6f35e]" />All systems normal</p>296    </div>297  </footer>298</main>