From e1b9bad05b05bb24ad00243c883781376753ba3d Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 2 Sep 2021 10:58:04 +0200
Subject: [PATCH] Mobile navigation

---
 docs/components/Navigation/Navigation.tsx | 8 ++++++++
 docs/components/Page/CTA.tsx              | 4 ++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/docs/components/Navigation/Navigation.tsx b/docs/components/Navigation/Navigation.tsx
index ccc0f8a4..af6a910e 100644
--- a/docs/components/Navigation/Navigation.tsx
+++ b/docs/components/Navigation/Navigation.tsx
@@ -44,6 +44,14 @@ export const Navigation: React.FunctionComponent<INavigationProps> = (props: Rea
           </a>
         ))}
       </div>
+      <div className="py-4 flex flex-wrap justify-center space-x-6 lg:hidden">
+        {navigation.social.map((link) => (
+          <a key={link.name} href={link.href} title={link.title} className={`text-base font-medium text-whisper-500 hover:text-whisper-900`} rel={`noopener noreferrer`}>
+            <span className="sr-only">{link.name}</span>
+            <link.icon className="inline-block h-6 w-6" aria-hidden="true" />
+          </a>
+        ))}
+      </div>
     </nav>
   );
 };
diff --git a/docs/components/Page/CTA.tsx b/docs/components/Page/CTA.tsx
index ebe22d1d..84c23804 100644
--- a/docs/components/Page/CTA.tsx
+++ b/docs/components/Page/CTA.tsx
@@ -8,12 +8,12 @@ export const CTA: React.FunctionComponent<ICTAProps> = (props: React.PropsWithCh
   const { t: strings } = useTranslation();
 
   return (
-    <div className="px-4 sm:px-0 pt-8 overflow-hidden sm:py-16 lg:relative lg:py-48">
+    <div className="px-4 sm:px-0 py-8 overflow-hidden lg:relative lg:py-48">
       <div className="mx-auto sm:max-w-3xl sm:px-6 lg:px-8 lg:max-w-7xl lg:grid lg:grid-cols-2 lg:gap-24">
         <div className={`my-4 sm:my-5 lg:my-6`}>
           <h1 className="text-5xl lg:text-5xl xl:text-6xl tracking-tight font-extrabold sm:leading-none">
             <span className="text-teal-500 md:block">{Extension.name}</span>{' '}
-            <span className="md:block">{strings(`cta_title`)}</span>
+            <span className="block">{strings(`cta_title`)}</span>
             <span className={`sr-only`}>{strings(`cta_title_sr`)}</span>
           </h1>