- Replace claims that contradicted the app: the default hotkey is Right Alt (hold to talk), local features are free with no daily cap, there is no 14-day trial, Team/SSO/SCIM/ZDR are not offered, and the repository is not public. Remove invented metrics, status badges, the competitor table, the ad-mediation changelog, the hash calculator and the duplicate demo. - Seven sections: hero with one labelled example, features, how it works, privacy, pricing (Free / Pro 2,900 / Pro+ 8,900 KRW a month), download, FAQ. Footer links the privacy policy, terms and account deletion pages. - All copy moves into i18n and every one of the 10 locales is translated. Pricing and cloud quotas come from site/src/pricing.ts. - Accessibility: skip link, labelled sections, aria-expanded with Esc and focus return for the menu, language list and FAQ, live status for the example, reduced-motion support, 44px targets, AA contrast on the primary button. Korean keep-all line breaking is scoped to :lang(ko) because Tailwind's break-keep blocked wrapping in Japanese and Chinese. - JS 111 -> 98 KB gzip, CSS 7.8 -> 5.2 KB gzip.
47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
import { Container } from '../components/Container'
|
|
import { Wordmark } from '../components/Wordmark'
|
|
import { fmt, useI18n } from '../i18n'
|
|
import { DESKTOP_RELEASE_HUB_URL } from '../release'
|
|
|
|
export function Footer() {
|
|
const { t } = useI18n()
|
|
|
|
const links = [
|
|
{ href: './privacy/', label: t.footer.privacy },
|
|
{ href: './terms/', label: t.footer.terms },
|
|
{ href: './delete-account/', label: t.footer.deleteAccount },
|
|
]
|
|
|
|
return (
|
|
<footer className="border-t border-white/10 py-12">
|
|
<Container className="flex flex-col gap-8 md:flex-row md:items-start md:justify-between">
|
|
<div>
|
|
<Wordmark />
|
|
<p className="mt-3 text-sm text-neutral-400">{t.footer.description}</p>
|
|
<p className="mt-6 text-sm text-neutral-400">{fmt(t.footer.copyright, { year: new Date().getFullYear() })}</p>
|
|
</div>
|
|
|
|
<ul className="flex flex-wrap gap-x-6 gap-y-1 text-sm">
|
|
{links.map((link) => (
|
|
<li key={link.href}>
|
|
<a href={link.href} className="inline-block py-2 text-neutral-300 transition-colors hover:text-white">
|
|
{link.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
<li>
|
|
<a
|
|
href={DESKTOP_RELEASE_HUB_URL}
|
|
target="_blank"
|
|
rel="noopener"
|
|
className="inline-block py-2 text-neutral-300 transition-colors hover:text-white"
|
|
>
|
|
{t.footer.releaseNotes}
|
|
<span className="sr-only"> ({t.a11y.opensInNewTab})</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</Container>
|
|
</footer>
|
|
)
|
|
}
|