Transparent infrastructure footprint and region choice
Build a carbon-aware SaaS footer with Tailwind CSS. Include conventional product, company, and support links plus a distinctive infrastructure card showing the visitor region, renewable-energy mix, current grid intensity, and a greener-region option. Add certification badges, status, privacy controls, and a concise methodology link without making unsupported environmental claims.
.
Build a carbon-aware SaaS footer with Tailwind CSS. Include conventional product, company, and support links plus a distinctive infrastructure card showing the visitor region, renewable-energy mix, current grid intensity, and a greener-region option. Add certification badges, status, privacy controls, and a concise methodology link without making unsupported environmental claims.<footer class="border-t border-emerald-900/10 bg-[#edf3ed] px-6 py-14 text-emerald-950"><div class="mx-auto max-w-6xl"><div class="grid gap-10 lg:grid-cols-[1.2fr_2fr_1.3fr]"><div><div class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-950 font-semibold text-white">N</div><p class="mt-5 max-w-xs text-sm leading-6 text-emerald-950/60">Reliable collaboration infrastructure, measured and improved in public.</p><div class="mt-5 flex gap-2"><span class="rounded-full border border-emerald-900/15 px-2.5 py-1 text-[10px]">SOC 2</span><span class="rounded-full border border-emerald-900/15 px-2.5 py-1 text-[10px]">ISO 27001</span></div></div><div class="grid grid-cols-2 gap-8 text-sm sm:grid-cols-3"><div><p class="font-semibold">Product</p><a href="#" class="mt-3 block text-emerald-950/55">Platform</a><a href="#" class="mt-2 block text-emerald-950/55">Security</a><a href="#" class="mt-2 block text-emerald-950/55">Pricing</a></div><div><p class="font-semibold">Company</p><a href="#" class="mt-3 block text-emerald-950/55">About</a><a href="#" class="mt-2 block text-emerald-950/55">Careers</a><a href="#" class="mt-2 block text-emerald-950/55">Impact</a></div><div><p class="font-semibold">Support</p><a href="#" class="mt-3 block text-emerald-950/55">Help center</a><a href="#" class="mt-2 block text-emerald-950/55">API status</a><a href="#" class="mt-2 block text-emerald-950/55">Contact</a></div></div><div class="rounded-2xl bg-emerald-950 p-5 text-white"><div class="flex items-center justify-between"><p class="text-xs font-semibold uppercase tracking-wider text-white/50">Your service region</p><span class="h-2 w-2 rounded-full bg-emerald-400"></span></div><p class="mt-3 font-medium">Frankfurt · eu-central</p><div class="mt-4 grid grid-cols-2 gap-3"><div><strong class="text-xl">71%</strong><p class="text-[10px] text-white/45">renewable mix</p></div><div><strong class="text-xl">186</strong><p class="text-[10px] text-white/45">gCO₂e/kWh now</p></div></div><a href="#" class="mt-5 block border-t border-white/10 pt-4 text-xs text-emerald-300">View methodology and greener regions →</a></div></div><div class="mt-12 flex flex-col gap-3 border-t border-emerald-900/10 pt-5 text-xs text-emerald-950/45 sm:flex-row"><span>© 2026 Northstar</span><a href="#">Privacy</a><a href="#">Terms</a><button class="sm:ml-auto">Manage privacy choices</button><a href="#" class="text-emerald-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg> Systems normal</a></div></div></footer>Build a carbon-aware SaaS footer with Tailwind CSS. Include conventional product, company, and support links plus a distinctive infrastructure card showing the visitor region, renewable-energy mix, current grid intensity, and a greener-region option. Add certification badges, status, privacy controls, and a concise methodology link without making unsupported environmental claims.