Onyx closing

1<footer className="bg-[#0a0a0b] px-4 pb-10 text-[#f2f2ef] sm:px-6">2  <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">3    <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" />4    <div className="relative">5      <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>6      <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>7      <div className="mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row">8        <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>9        <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>10      </div>11    </div>12  </div>13  <div className="mx-auto mt-14 grid max-w-6xl gap-10 px-2 text-sm md:grid-cols-[1.5fr_1fr_1fr_1fr]">14    <div>15      <p className="text-[15px] font-medium tracking-tight">Onyx</p>16      <p className="mt-3 max-w-xs leading-relaxed text-white/45">The calm place where teams plan, build and ship.</p>17    </div>18    <div className="flex flex-col gap-3 text-white/55">19      <p className="font-mono text-[11px] tracking-[0.14em] text-white/35 uppercase">Product</p>20      <a href="#" className="w-fit transition-colors duration-150 hover:text-white">Features</a>21      <a href="#" className="w-fit transition-colors duration-150 hover:text-white">Pricing</a>22      <a href="#" className="w-fit transition-colors duration-150 hover:text-white">Changelog</a>23    </div>24    <div className="flex flex-col gap-3 text-white/55">25      <p className="font-mono text-[11px] tracking-[0.14em] text-white/35 uppercase">Company</p>26      <a href="#" className="w-fit transition-colors duration-150 hover:text-white">About</a>27      <a href="#" className="w-fit transition-colors duration-150 hover:text-white">Customers</a>28      <a href="#" className="w-fit transition-colors duration-150 hover:text-white">Careers</a>29    </div>30    <div className="flex flex-col gap-3 text-white/55">31      <p className="font-mono text-[11px] tracking-[0.14em] text-white/35 uppercase">Legal</p>32      <a href="#" className="w-fit transition-colors duration-150 hover:text-white">Privacy</a>33      <a href="#" className="w-fit transition-colors duration-150 hover:text-white">Terms</a>34      <a href="#" className="w-fit transition-colors duration-150 hover:text-white">Security</a>35    </div>36  </div>37  <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">38    <p>© 2026 Onyx Labs</p>39    <p className="flex items-center gap-2"><span className="size-1.5 rounded-full bg-[#c6f35e]" />All systems normal</p>40  </div>41</footer>