Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add qr code for landing and iframe #494

Merged
merged 1 commit into from
Mar 20, 2024
Merged

Add qr code for landing and iframe #494

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 0 additions & 31 deletions frontend-next/src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,9 @@
import Image from 'next/image';
import Link from 'next/link';

import { Container } from '@/components/Container';
import { Logo } from '@/components/Logo';

import { NavLinks } from '@/components/NavLinks';
import qrCode from '@/images/qr-code.png';
import { GouvLogo } from '@/images/logos/gouv';

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'
/>
</svg>
);
}

export function Footer() {
return (
<footer className='border-t border-gray-200'>
Expand All @@ -33,21 +17,6 @@ export function Footer() {
<Logo />
<GouvLogo className='h-40 w-auto' />
</div>
{/* <div className='mb-12 md:mb-0 group relative -mx-4 flex items-center self-stretch p-4 transition-colors sm:self-auto sm:rounded-2xl lg:mx-0 lg:self-auto lg:p-6'>
<div className='relative flex h-24 w-24 flex-none items-center justify-center '>
<QrCodeBorder className='absolute inset-0 h-full w-full stroke-gray-300 transition-colors ' />
<Image src={qrCode} alt='qr code' unoptimized />
</div>
<div className='ml-8 lg:w-64'>
<p className='text-base font-semibold text-gray-900'>
<span className='absolute inset-0 sm:rounded-2xl' />
Télécharger l'application
</p>
<p className='mt-1 text-sm text-gray-700'>
Scannez le code QR pour télécharger l'application.
</p>
</div>
</div> */}
</div>
</div>
</Container>
Expand Down
134 changes: 102 additions & 32 deletions frontend-next/src/components/download-page/hero-banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,12 @@ import { LandingMobileScreen } from '@/components/app-demo';
import { Container } from '@/components/Container';
import { PhoneFrame } from '@/components/PhoneFrame';
import { GouvLogo } from '@/images/logos/gouv';

import qrCode from '@/images/qr-code-iframe.svg';
import Image from 'next/image';
import { AppStoreLink } from '../AppStoreLink';
import { GoogleStoreLink } from '../GoogleStoreLink';
import { MatomoService } from '@/services/matomo';
import { Logo } from '../Logo';

function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
let id = useId();
Expand Down Expand Up @@ -84,40 +86,71 @@ export function Hero() {
}
return (
<div className='overflow-hidden pt-2 lg:pb-32 xl:pb-36 '>
<header>
<nav>
<Container className='relative z-50 py-8'>
<div
aria-label='Home'
className='flex items-center w-full justify-between '
>
<div className='flex items-center space-x-6'>
<a
onClick={handleClick}
href='https://recosante.beta.gouv.fr'
target='_blank'
>
<GouvLogo className='h-24 md:h-32 w-auto -ml-4 ' />
</a>

<a
onClick={handleClick}
href='https://recosante.beta.gouv.fr'
target='_blank'
>
<Logo className='h-12 md:h-16' />
</a>
</div>
<div className='hidden md:mb-0 group relative md:flex sm:self-auto sm:rounded-2xl space-x-6'>
<div className='flex flex-col justify-center mx-auto items-end '>
<p className='text-md text-app-primary '>
Scannez ici
<br /> pour télécharger l'application.
</p>
<Arrow className='rotate-[280deg] -mr-6 ' />
</div>
<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 scale-[0.8]'
/>
</div>
</div>
</div>
<div className='relative z-10 flex md:flex-row flex-col-reverse items-start w-full justify-between mt-12'>
<h1 className='md:text-5xl w-full text-3xl mt-4 md:mt-0 text-dark font-app'>
Suivez <span className='text-app-primary'>les pollens</span>,
<br />
<span className='text-app-primary'>
la qualité de l'air
</span> et{' '}
<span className='text-app-primary'>la qualité de l'eau</span>{' '}
<br />
en temps réel dans votre ville.
</h1>
</div>
<p className='mt-4 text-xl text-gray-700'>
Une application gratuite pour protéger votre santé et celle de
votre famille.
</p>
</Container>
</nav>
</header>
<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'
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'
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'
onClick={handleClick}
Expand All @@ -141,3 +174,40 @@ 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='50'
viewBox='0 0 102 148'
fill='none'
xmlns='http://www.w3.org/2000/svg'
{...props}
>
<g clipPath='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>
);
}
2 changes: 2 additions & 0 deletions frontend-next/src/images/qr-code-iframe.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions frontend-next/src/images/qr-code-iframeOld.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading