feat(qrcode): add qr code + add matomo event on iframe

SocialGouv · Mar 4, 2024 · 7f2af23 · 7f2af23
1 parent 42edf08
commit 7f2af23
Show file tree

Hide file tree

Showing 7 changed files with 145 additions and 16 deletions.
diff --git a/frontend-next/src/app/landing/[city]/[indicator]/layout.tsx b/frontend-next/src/app/landing/[city]/[indicator]/layout.tsx
@@ -1 +1,16 @@
-export { Layout as default } from '@/components/Layout';
+import { Footer } from '@/components/Footer';
+import { Header } from '@/components/landing/Header';
+import { Banner } from '@/components/banner';
+import { Toaster } from '@/components/toast';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Banner />
+      <Header />
+      <main className='flex-auto'>{children}</main>
+      <Toaster position='top-right' expand={false} />
+      <Footer />
+    </>
+  );
+}
diff --git a/frontend-next/src/components/Header.tsx b/frontend-next/src/components/Header.tsx
@@ -9,13 +9,16 @@ export function Header() {
     <header>
       <nav>
         <Container className='relative z-50 flex justify-between py-8'>
-          <div className='relative z-10 flex items-center gap-16 w-full justify-between'>
+          <div className='relative z-10 flex md:flex-row flex-col-reverse items-center w-full justify-between '>
+            <h1 className='md:text-4xl text-3xl font-bold  mt-4 md:mt-0 tracking-tight leading-10 text-app-primary   font-app uppercase'>
+              Votre nouvelle application de santé au quotidien.
+            </h1>
             <div
               aria-label='Home'
-              className='flex items-center  w-full  justify-between'
+              className='flex items-center  w-full  justify-between md:justify-end space-x-2'
             >
-              <Logo className='h-20 w-auto' />
-              <GouvLogo className='h-32 w-auto ' />
+              <Logo className='h-12  md:h-16' />
+              <GouvLogo className='h-24 md:h-32 w-auto ' />
             </div>
           </div>
         </Container>

diff --git a/frontend-next/src/components/Logo.tsx b/frontend-next/src/components/Logo.tsx
@@ -1,6 +1,12 @@
 export function Logomark(props: React.ComponentPropsWithoutRef<'svg'>) {
   return (
-    <svg width='174' height='55' viewBox='0 0 174 55' aria-hidden='true'>
+    <svg
+      width='174'
+      height='55'
+      viewBox='0 0 174 55'
+      aria-hidden='true'
+      {...props}
+    >
       <path d='M9.90357 55C7.98077 55 6.11589 54.7482 4.30892 54.2445C2.52512 53.718 1.08881 53.0426 0 52.2184L1.91121 48.0288C2.9537 48.7843 4.19309 49.391 5.6294 49.8489C7.0657 50.3067 8.50201 50.5357 9.93832 50.5357C11.5368 50.5357 12.7183 50.3067 13.4827 49.8489C14.2472 49.3681 14.6295 48.7385 14.6295 47.9601C14.6295 47.3877 14.3978 46.9184 13.9345 46.5521C13.4943 46.1629 12.9152 45.8538 12.197 45.6249C11.502 45.396 10.5522 45.1441 9.34758 44.8694C7.49428 44.4344 5.97689 43.9994 4.79541 43.5644C3.61393 43.1294 2.59462 42.4312 1.73747 41.4696C0.903483 40.5081 0.486491 39.226 0.486491 37.6234C0.486491 36.2269 0.868734 34.9677 1.63322 33.8459C2.39771 32.7012 3.54443 31.7968 5.07341 31.1329C6.62554 30.469 8.51359 30.137 10.7376 30.137C12.2897 30.137 13.8071 30.3202 15.2897 30.6865C16.7724 31.0528 18.0697 31.5794 19.1816 32.2662L17.4442 36.4901C15.1971 35.231 12.9499 34.6014 10.7028 34.6014C9.1275 34.6014 7.9576 34.8532 7.19312 35.3569C6.4518 35.8606 6.08114 36.5245 6.08114 37.3487C6.08114 38.1729 6.50971 38.791 7.36686 39.2031C8.24718 39.5923 9.57924 39.9815 11.363 40.3707C13.2163 40.8057 14.7337 41.2407 15.9152 41.6757C17.0967 42.1106 18.1044 42.7975 18.9384 43.7361C19.7955 44.6748 20.2241 45.9454 20.2241 47.548C20.2241 48.9216 19.8303 50.1808 19.0426 51.3255C18.2782 52.4473 17.1199 53.3402 15.5677 54.0041C14.0156 54.6681 12.1275 55 9.90357 55Z'></path>
       <path d='M40.0902 49.4368H28.7966L26.6422 54.5879H20.8738L31.7156 30.5491H37.2755L48.152 54.5879H42.2446L40.0902 49.4368ZM38.318 45.2128L34.4608 36.0094L30.6036 45.2128H38.318Z'></path>
       <path d='M72.9848 30.5491V54.5879H68.3631L56.2356 39.9929V54.5879H50.6757V30.5491H55.3321L67.4249 45.1441V30.5491H72.9848Z'></path>
@@ -20,7 +26,13 @@ export function Logomark(props: React.ComponentPropsWithoutRef<'svg'>) {
 
 export function Logo(props: React.ComponentPropsWithoutRef<'svg'>) {
   return (
-    <svg width='174' height='55' viewBox='0 0 174 55' aria-hidden='true'>
+    <svg
+      width='174'
+      height='55'
+      viewBox='0 0 174 55'
+      aria-hidden='true'
+      {...props}
+    >
       <path d='M9.90357 55C7.98077 55 6.11589 54.7482 4.30892 54.2445C2.52512 53.718 1.08881 53.0426 0 52.2184L1.91121 48.0288C2.9537 48.7843 4.19309 49.391 5.6294 49.8489C7.0657 50.3067 8.50201 50.5357 9.93832 50.5357C11.5368 50.5357 12.7183 50.3067 13.4827 49.8489C14.2472 49.3681 14.6295 48.7385 14.6295 47.9601C14.6295 47.3877 14.3978 46.9184 13.9345 46.5521C13.4943 46.1629 12.9152 45.8538 12.197 45.6249C11.502 45.396 10.5522 45.1441 9.34758 44.8694C7.49428 44.4344 5.97689 43.9994 4.79541 43.5644C3.61393 43.1294 2.59462 42.4312 1.73747 41.4696C0.903483 40.5081 0.486491 39.226 0.486491 37.6234C0.486491 36.2269 0.868734 34.9677 1.63322 33.8459C2.39771 32.7012 3.54443 31.7968 5.07341 31.1329C6.62554 30.469 8.51359 30.137 10.7376 30.137C12.2897 30.137 13.8071 30.3202 15.2897 30.6865C16.7724 31.0528 18.0697 31.5794 19.1816 32.2662L17.4442 36.4901C15.1971 35.231 12.9499 34.6014 10.7028 34.6014C9.1275 34.6014 7.9576 34.8532 7.19312 35.3569C6.4518 35.8606 6.08114 36.5245 6.08114 37.3487C6.08114 38.1729 6.50971 38.791 7.36686 39.2031C8.24718 39.5923 9.57924 39.9815 11.363 40.3707C13.2163 40.8057 14.7337 41.2407 15.9152 41.6757C17.0967 42.1106 18.1044 42.7975 18.9384 43.7361C19.7955 44.6748 20.2241 45.9454 20.2241 47.548C20.2241 48.9216 19.8303 50.1808 19.0426 51.3255C18.2782 52.4473 17.1199 53.3402 15.5677 54.0041C14.0156 54.6681 12.1275 55 9.90357 55Z'></path>
       <path d='M40.0902 49.4368H28.7966L26.6422 54.5879H20.8738L31.7156 30.5491H37.2755L48.152 54.5879H42.2446L40.0902 49.4368ZM38.318 45.2128L34.4608 36.0094L30.6036 45.2128H38.318Z'></path>
       <path d='M72.9848 30.5491V54.5879H68.3631L56.2356 39.9929V54.5879H50.6757V30.5491H55.3321L67.4249 45.1441V30.5491H72.9848Z'></path>

diff --git a/frontend-next/src/components/download-page/hero-banner.tsx b/frontend-next/src/components/download-page/hero-banner.tsx
@@ -1,11 +1,14 @@
+'use client';
+
 import { useId } from 'react';
 import { LandingMobileScreen } from '@/components/app-demo';
 import { Container } from '@/components/Container';
 import { PhoneFrame } from '@/components/PhoneFrame';
 import { GouvLogo } from '@/images/logos/gouv';
-import { Logo } from '../Logo';
+
 import { AppStoreLink } from '../AppStoreLink';
 import { GoogleStoreLink } from '../GoogleStoreLink';
+import { MatomoService } from '@/services/matomo';
 
 function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
   let id = useId();
@@ -76,34 +79,49 @@ function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
 }
 
 export function Hero() {
+  function handleClick() {
+    MatomoService.trackClick('link-in-iframe');
+  }
   return (
     <div className='overflow-hidden pt-2 lg:pb-32 xl:pb-36 '>
       <Container>
         <div>
           <div className='relative z-50  mx-auto  lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6'>
             <div className='flex items-start flex-col '>
               <a
+                onClick={handleClick}
                 className='w-full  '
                 href='https://recosante.beta.gouv.fr'
                 target='_blank'
               >
                 <GouvLogo className='-ml-2 md:max-w-[120px] max-w-[70px] ' />
               </a>
-              <a href='https://recosante.beta.gouv.fr' target='_blank'>
+              <a
+                href='https://recosante.beta.gouv.fr'
+                target='_blank'
+                onClick={handleClick}
+              >
                 <h1 className='md:text-3xl text-xl  font-bold  tracking-tight  text-app-primary  font-app uppercase '>
                   RECOSANTé,
                   <br /> VOTRE NOUVELLE APPLICATION POUR LA SANTÉ AU QUOTIDIEN.
                 </h1>
               </a>
             </div>
-            <a href='https://recosante.beta.gouv.fr' target='_blank'>
+            <a
+              href='https://recosante.beta.gouv.fr'
+              target='_blank'
+              onClick={handleClick}
+            >
               <p className=' text-md md:text-xl mt-4  text-["#2D2D2D"]  '>
                 Découvrez comment l’environnement impacte votre santé.
                 <br /> Protégez vous de la pollution de l’air, de l’eau, des UV
                 ou du pollen.
               </p>
             </a>
-            <div className=' z-50 scale-[0.7] md:scale-100 flex items-center space-x-4  md:mt-6 mt-2 mx-auto justify-center '>
+            <div
+              className='z-50 scale-[0.7] md:scale-100 flex items-center space-x-4  md:mt-6 mt-2 mx-auto justify-center'
+              onClick={handleClick}
+            >
               <AppStoreLink />
               <GoogleStoreLink />
             </div>

diff --git a/frontend-next/src/components/hero-banner.tsx b/frontend-next/src/components/hero-banner.tsx
@@ -12,6 +12,7 @@ import irsnLogo from '@/images/logos/irsn.png';
 import { AppStoreLink } from './AppStoreLink';
 import { GoogleStoreLink } from './GoogleStoreLink';
 import { MatomoService } from '@/services/matomo';
+import qrCode from '@/images/qr-code.svg';
 
 function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
   let id = useId();
@@ -87,10 +88,25 @@ export function Hero() {
       <Container>
         <div className='lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-12'>
           <div className='relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6'>
-            <h1 className='md:text-4xl text-3xl font-bold  tracking-tight text-app-primary   font-app uppercase'>
-              Votre nouvelle application de santé au quotidien.
-            </h1>
-            <p className='mt-6 text-lg text-gray-600'>
+            <div className='hidden mb-12 md:mb-0 group relative md:flex sm:self-auto sm:rounded-2xl space-x-6'>
+              <div className=' relative flex flex-none items-center justify-center '>
+                <QrCodeBorder className='absolute inset-0 h-full w-full stroke-black   ' />
+                <Image
+                  src={qrCode}
+                  alt='qr code'
+                  unoptimized
+                  className='animate-pulse'
+                />
+              </div>
+              <div className='  flex flex-col  justify-center mx-auto items-start'>
+                <p className='text-md text-app-primary '>
+                  Scannez ici
+                  <br /> pour télécharger l'application.
+                </p>
+                <Arrow className='rotate-[100deg]    ' />
+              </div>
+            </div>
+            <p className='mt-12 text-lg text-gray-600'>
               Une application gratuite et personnalisable pour protéger votre
               santé et celle de votre famille.
             </p>
@@ -112,7 +128,7 @@ export function Hero() {
           <div className='relative lg:col-span-7 lg:mt-0 xl:col-span-6'>
             <ul
               role='list'
-              className=' mx-auto   mt-8 grid md:grid-cols-4 grid-cols-2 items-center grayscale flex-wrap justify-center gap-x-10 gap-y-8 lg:mx-0 lg:justify-start'
+              className=' mx-auto mt-8 grid md:grid-cols-4 grid-cols-2 items-center grayscale flex-wrap justify-center gap-x-10 gap-y-8 lg:mx-0 lg:justify-start'
             >
               {[
                 ['meteoLogo', meteoLogo],
@@ -148,3 +164,41 @@ export function Hero() {
     </div>
   );
 }
+
+function QrCodeBorder(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox='0 0 96 96' fill='none' aria-hidden='true' {...props}>
+      <path
+        d='M1 17V9a8 8 0 0 1 8-8h8M95 17V9a8 8 0 0 0-8-8h-8M1 79v8a8 8 0 0 0 8 8h8M95 79v8a8 8 0 0 1-8 8h-8'
+        strokeWidth='2'
+        strokeLinecap='round'
+        stroke='#3343BD'
+      />
+    </svg>
+  );
+}
+
+function Arrow(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg
+      width='102'
+      height='88'
+      viewBox='0 0 102 148'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <g clip-path='url(#clip0_3_224)'>
+        <path
+          d='M0 2.65037C6.14938 -1.37392 12.2988 -0.103094 17.812 1.80315C25.4458 4.55662 32.8674 8.1573 39.6529 12.3934C70.3998 32.7267 88.8479 61.744 96.4816 97.539C98.39 106.647 99.0262 116.178 100.299 126.556C108.78 121.685 113.233 112.154 121.715 106.647C122.776 110.883 120.655 113.636 118.959 115.966C111.961 125.497 104.752 135.028 97.3299 144.348C93.7251 148.796 90.9684 149.219 87.1515 145.407C79.0937 137.57 74.2167 128.039 72.7323 117.025C72.7323 116.601 73.3684 115.966 74.2166 114.907C83.3347 117.237 81.2142 128.886 89.06 133.122C92.4527 118.508 89.9082 104.529 86.0913 90.973C82.0624 76.7821 76.7612 63.2266 68.2793 51.1537C60.0095 39.2926 49.6191 29.7614 38.1686 20.8656C26.93 11.758 14.2072 6.03925 0 2.65037Z'
+          fill='#3343BD'
+        />
+      </g>
+      <defs>
+        <clipPath id='clip0_3_224'>
+          <rect width='122' height='148' fill='white' />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/frontend-next/src/components/landing/Header.tsx b/frontend-next/src/components/landing/Header.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import { Container } from '@/components/Container';
+import { Logo } from '@/components/Logo';
+import { GouvLogo } from '@/images/logos/gouv';
+
+export function Header() {
+  return (
+    <header>
+      <nav>
+        <Container className='relative z-50 flex justify-between py-8'>
+          <div className='relative z-10 flex items-center gap-16 w-full justify-between'>
+            <div
+              aria-label='Home'
+              className='flex items-center  w-full  justify-between'
+            >
+              <Logo className='h-20 w-auto' />
+              <GouvLogo className='h-32 w-auto ' />
+            </div>
+          </div>
+        </Container>
+      </nav>
+    </header>
+  );
+}