feat: add how-it-works, supported platforms and FAQ sections to homepage

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>

src/components/SupportedPlatformsSection.tsx

@@ -0,0 +1,41 @@
+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>
+  )
+}