anthonyandClaude Sonnet 5
c8e991a8f7
Enrich the landing page with reassurance/trust content inspired by competitor downloader sites: a 3-step "how it works" guide, a supported-platforms grid with a non-affiliation disclaimer, and an 8-question FAQ (with FAQPage JSON-LD) -- all translated across en/fr/es/it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import { getTranslations } from 'next-intl/server'
|
|
|
|
const PLATFORMS = [
|
|
'YouTube',
|
|
'TikTok',
|
|
'Instagram',
|
|
'Facebook',
|
|
'X (Twitter)',
|
|
'Vimeo',
|
|
'Twitch',
|
|
'SoundCloud',
|
|
'Dailymotion',
|
|
]
|
|
|
|
export async function SupportedPlatformsSection({ locale }: { locale: string }) {
|
|
const t = await getTranslations({ locale, namespace: 'platforms' })
|
|
|
|
return (
|
|
<section className="py-16 px-6" aria-labelledby="platforms-heading">
|
|
<div className="max-w-5xl mx-auto text-center">
|
|
<h2 id="platforms-heading" className="text-2xl md:text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50">
|
|
{t('heading')}
|
|
</h2>
|
|
<p className="mt-2 text-gray-500 dark:text-gray-400">{t('subheading')}</p>
|
|
|
|
<div className="mt-8 flex flex-wrap justify-center gap-3">
|
|
{PLATFORMS.map((name) => (
|
|
<span
|
|
key={name}
|
|
className="px-4 py-2 rounded-full border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-sm font-medium text-gray-700 dark:text-gray-300"
|
|
>
|
|
{name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<p className="mt-4 text-sm text-gray-400 dark:text-slate-500">{t('more')}</p>
|
|
<p className="mt-6 text-xs text-gray-400 dark:text-slate-500 max-w-2xl mx-auto">{t('disclaimer')}</p>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|