页脚
Simple Footer
A logo, one row of links and a copyright line - stacked on mobile, spread on desktop.
#footer#simple#links
6 个框架初级
Loading…
A row of headline stats over the link columns, marked up as a description list.
<!--
A strip of headline numbers above the link row, marked up as a description
list: each figure is a <dd> value paired with a <dt> label, so a screen reader
reads "Teams onboard, 12,000+" as one unit rather than two loose scraps. The
value sits visually above the label via flex-col-reverse while the <dt> stays
first in source, which is the order the spec wants. The grid steps 1 -> 2 -> 4
so the numbers never shrink to an unreadable sliver at 320px.
-->
<footer class="border-t border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
<div class="mx-auto max-w-6xl px-4 py-10">
<dl class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
<div class="flex flex-col-reverse text-center sm:text-left">
<dt class="mt-1 text-sm text-gray-600 dark:text-gray-400">Teams onboard</dt>
<dd class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50">12,000+</dd>
</div>
<div class="flex flex-col-reverse text-center sm:text-left">
<dt class="mt-1 text-sm text-gray-600 dark:text-gray-400">Uptime</dt>
<dd class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50">99.99%</dd>
</div>
<div class="flex flex-col-reverse text-center sm:text-left">
<dt class="mt-1 text-sm text-gray-600 dark:text-gray-400">Countries</dt>
<dd class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50">140+</dd>
</div>
<div class="flex flex-col-reverse text-center sm:text-left">
<dt class="mt-1 text-sm text-gray-600 dark:text-gray-400">Support</dt>
<dd class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50">24/7</dd>
</div>
</dl>
<div class="mt-10 flex flex-col items-center gap-4 border-t border-gray-200 pt-6 md:flex-row md:justify-between dark:border-gray-800">
<a href="/" class="font-bold text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-50 dark:focus-visible:ring-blue-400">Adysre</a>
<nav aria-label="Footer">
<ul class="flex flex-wrap justify-center gap-x-6 gap-y-2">
<li><a href="/about" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-300 dark:hover:text-gray-50 dark:focus-visible:ring-blue-400">About</a></li>
<li><a href="/customers" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Customers</a></li>
<li><a href="/pricing" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Pricing</a></li>
</ul>
</nav>
<p class="text-[0.8125rem] text-gray-500 dark:text-gray-400">
© <time datetime="2026">2026</time> Adysre Inc.
</p>
</div>
</div>
</footer>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
stats | Stat[] | - | 显示在标题下方的正文文本。 |
className | string | - | 合并到根元素上的额外类名。 |
The stats are a `<dl>`, not a row of `<div>`s: each figure is a `<dd>` value paired with a `<dt>` label, so a screen reader reads "Teams onboard, 12,000+" as one unit rather than two loose scraps. `flex-col-reverse` lifts the big number above its label visually while the `<dt>` stays first in source, the order the markup wants. The grid steps 1 → 2 → 4 so the numbers never shrink to an unreadable sliver at 320px. Pass a `stats` array of `{ value, label }`; the values are pre-formatted strings, so localise them upstream.