feat(copilot): flesh out mobile fallback with illustration and copilot link

Add the form-copilot illustration, reuse the desktop tagline, and link
out to simplepdf.com/copilot so mobile visitors who cannot run the demo
still understand what Copilot is and where to learn more. Headline +
tagline are bumped one Tailwind step up for legibility.

Author: bendersej

copilot/src/components/layout.tsx

@@ -8,6 +8,8 @@ import { CerfaDorModal } from './easter-eggs/cerfa_dor_modal'
 import { FormPicker } from './form_picker'
 
 const CERFA_DOR_LOGO_URL = 'https://cdn.simplepdf.com/simple-pdf/assets/form-copilot/cerfa-dor.jpeg'
+const MOBILE_ILLUSTRATION_URL =
+  'https://cdn.simplepdf.com/simple-pdf/assets/common/form-copilot-illustration.png'
 
 const homeRoute = getRouteApi('/')
 
@@ -20,6 +22,7 @@ type LayoutProps = {
 
 export const Layout = ({ locale, currentFormId, editor, chat }: LayoutProps) => {
   const { t } = useTranslation()
+  const learnMoreHref = buildSimplepdfUrl({ locale, path: '/copilot', query: { s: 'copilot' } })
   return (
     <div className="flex h-screen flex-col bg-slate-50">
       <Header locale={locale} currentFormId={currentFormId} />
@@ -33,7 +36,22 @@ export const Layout = ({ locale, currentFormId, editor, chat }: LayoutProps) =>
       </main>
       <div className="flex flex-1 items-center justify-center p-6 lg:hidden">
         <div className="flex w-full max-w-md flex-col items-center gap-6 text-center">
-          <h1 className="text-lg font-semibold text-slate-900">{t('mobileFallback.headline')}</h1>
+          <h1 className="text-2xl font-semibold text-slate-900">{t('mobileFallback.headline')}</h1>
+          <img
+            src={MOBILE_ILLUSTRATION_URL}
+            alt=""
+            aria-hidden="true"
+            className="block h-auto w-full max-w-xs object-contain"
+          />
+          <p className="max-w-[300px] text-base font-medium text-slate-900">{t('header.tagline')}</p>
+          <a
+            href={learnMoreHref}
+            target="_blank"
+            rel="noreferrer"
+            className="text-sm font-medium text-sky-700 hover:text-sky-800 underline underline-offset-4"
+          >
+            {t('mobileFallback.learnMore')}
+          </a>
         </div>
       </div>
     </div>

copilot/src/locales/ar.json

@@ -7,7 +7,8 @@
     "poweredBy": "مدعوم من SimplePDF"
   },
   "mobileFallback": {
-    "headline": "SimplePDF Copilot يُستخدم بأفضل شكل على سطح المكتب"
+    "headline": "SimplePDF Copilot يُستخدم بأفضل شكل على سطح المكتب",
+    "learnMore": "تعرّف على المزيد حول SimplePDF Copilot"
   },
   "infoModal": {
     "title": "تعبئة نماذج بمساعدة الذكاء الاصطناعي، مع إشراف بشري",

copilot/src/locales/cs.json

@@ -7,7 +7,8 @@
     "poweredBy": "Pohoní SimplePDF"
   },
   "mobileFallback": {
-    "headline": "SimplePDF Copilot si nejlépe vychutnáte na počítači"
+    "headline": "SimplePDF Copilot si nejlépe vychutnáte na počítači",
+    "learnMore": "Zjistěte více o SimplePDF Copilot"
   },
   "infoModal": {
     "title": "Vyplňování formulářů s podporou AI, s člověkem ve smyčce",

copilot/src/locales/da.json

@@ -7,7 +7,8 @@
     "poweredBy": "Drevet af SimplePDF"
   },
   "mobileFallback": {
-    "headline": "SimplePDF Copilot opleves bedst på skrivebordet"
+    "headline": "SimplePDF Copilot opleves bedst på skrivebordet",
+    "learnMore": "Læs mere om SimplePDF Copilot"
   },
   "infoModal": {
     "title": "AI-assisteret udfyldning af formularer, med et menneske i løkken",

copilot/src/locales/de.json

@@ -7,7 +7,8 @@
     "poweredBy": "Unterstützt von SimplePDF"
   },
   "mobileFallback": {
-    "headline": "SimplePDF Copilot erleben Sie am besten auf dem Desktop"
+    "headline": "SimplePDF Copilot erleben Sie am besten auf dem Desktop",
+    "learnMore": "Mehr über SimplePDF Copilot erfahren"
   },
   "infoModal": {
     "title": "KI-gestütztes Ausfüllen von Formularen, mit einem Menschen in der Schleife",

copilot/src/locales/el.json

@@ -7,7 +7,8 @@
     "poweredBy": "Με την υποστήριξη του SimplePDF"
   },
   "mobileFallback": {
-    "headline": "Το SimplePDF Copilot αποδίδει καλύτερα σε υπολογιστή"
+    "headline": "Το SimplePDF Copilot αποδίδει καλύτερα σε υπολογιστή",
+    "learnMore": "Μάθετε περισσότερα για το SimplePDF Copilot"
   },
   "infoModal": {
     "title": "Συμπλήρωση φορμών με υποστήριξη AI, με άνθρωπο στη διαδικασία",

copilot/src/locales/en.json

@@ -7,7 +7,8 @@
     "poweredBy": "Powered by SimplePDF"
   },
   "mobileFallback": {
-    "headline": "SimplePDF Copilot is best experienced on desktop"
+    "headline": "SimplePDF Copilot is best experienced on desktop",
+    "learnMore": "Learn more about SimplePDF Copilot"
   },
   "infoModal": {
     "title": "AI-assisted form filling, with a human in the loop",

copilot/src/locales/es.json

@@ -7,7 +7,8 @@
     "poweredBy": "Con tecnología de SimplePDF"
   },
   "mobileFallback": {
-    "headline": "SimplePDF Copilot se disfruta mejor en un ordenador"
+    "headline": "SimplePDF Copilot se disfruta mejor en un ordenador",
+    "learnMore": "Más información sobre SimplePDF Copilot"
   },
   "infoModal": {
     "title": "Completado de formularios asistido por IA, con un humano en el proceso",

copilot/src/locales/et.json

@@ -7,7 +7,8 @@
     "poweredBy": "Jooksutab SimplePDF"
   },
   "mobileFallback": {
-    "headline": "SimplePDF Copilot töötab kõige paremini arvutis"
+    "headline": "SimplePDF Copilot töötab kõige paremini arvutis",
+    "learnMore": "Loe lähemalt SimplePDF Copiloti kohta"
   },
   "infoModal": {
     "title": "Tehisintellekti abil vormide täitmine, inimene silmusesse",

copilot/src/locales/fi.json

@@ -7,7 +7,8 @@
     "poweredBy": "Toteuttaja: SimplePDF"
   },
   "mobileFallback": {
-    "headline": "SimplePDF Copilot toimii parhaiten tietokoneella"
+    "headline": "SimplePDF Copilot toimii parhaiten tietokoneella",
+    "learnMore": "Lue lisää SimplePDF Copilotista"
   },
   "infoModal": {
     "title": "Tekoälyavusteinen lomakkeiden täyttö, ihminen mukana",