feat(frontend): add reassurance strip and supported-formats section

Part of the Ombrora Convert redesign (Task 3/5).

frontend/src/pages/HomePage.jsx

@@ -4,7 +4,10 @@ import { fetchFormats, uploadFiles } from '../api.js';
 import { FileCard } from '../FileCard.jsx';
 import { Dropzone } from '../components/Dropzone.jsx';
 import { FileConfigCard } from '../components/FileConfigCard.jsx';
+import { ReassuranceStrip } from '../components/ReassuranceStrip.jsx';
+import { FormatsGrid } from '../components/FormatsGrid.jsx';
 import '../styles/home.css';
+import '../styles/sections.css';
 
 const DEFAULT_QUALITY = {
   jpg: 80,
@@ -79,41 +82,46 @@ export function HomePage() {
   }
 
   return (
-    <section className="hero">
-      <h1>{t('hero.title')}</h1>
-      <p>{t('hero.subtitle')}</p>
-      <Dropzone label={t('hero.dropzoneLabel')} onFilesSelected={handleFilesSelected} />
+    <>
+      <section className="hero">
+        <h1>{t('hero.title')}</h1>
+        <p>{t('hero.subtitle')}</p>
+        <Dropzone label={t('hero.dropzoneLabel')} onFilesSelected={handleFilesSelected} />
 
-      {pendingFiles.length > 0 && (
-        <div className="pending-files">
-          <ul>
-            {pendingFiles.map((item, index) => (
-              <FileConfigCard
-                key={`${item.file.name}-${index}`}
-                item={item}
-                index={index}
-                t={t}
-                onTargetFormatChange={updateTargetFormat}
-                onQualityChange={updateQuality}
-                onIconSizeChange={updateIconSize}
-              />
-            ))}
-          </ul>
-          <button className="convert-button" onClick={handleConvert}>
-            {t('hero.convert')}
-          </button>
-        </div>
-      )}
-
-      <ul className="job-list">
-        {submittedJobs.map((job, index) =>
-          job.id ? (
-            <FileCard key={job.id} fileName={job.file} jobId={job.id} />
-          ) : (
-            <FileCard key={`${job.file}-${index}`} fileName={job.file} initialError={job.error} />
-          )
+        {pendingFiles.length > 0 && (
+          <div className="pending-files">
+            <ul>
+              {pendingFiles.map((item, index) => (
+                <FileConfigCard
+                  key={`${item.file.name}-${index}`}
+                  item={item}
+                  index={index}
+                  t={t}
+                  onTargetFormatChange={updateTargetFormat}
+                  onQualityChange={updateQuality}
+                  onIconSizeChange={updateIconSize}
+                />
+              ))}
+            </ul>
+            <button className="convert-button" onClick={handleConvert}>
+              {t('hero.convert')}
+            </button>
+          </div>
         )}
-      </ul>
-    </section>
+
+        <ul className="job-list">
+          {submittedJobs.map((job, index) =>
+            job.id ? (
+              <FileCard key={job.id} fileName={job.file} jobId={job.id} />
+            ) : (
+              <FileCard key={`${job.file}-${index}`} fileName={job.file} initialError={job.error} />
+            )
+          )}
+        </ul>
+      </section>
+
+      <ReassuranceStrip />
+      <FormatsGrid />
+    </>
   );
 }