🎨(frontend) add dsfr proconnect homepage

If we are with the DSFR theme, we need to add the
proconnect button to the homepage.
We add an option in the cunningham theme to
display the proconnect section instead of the
opensource section.

src/frontend/apps/impress/cunningham.ts

@@ -253,6 +253,9 @@ const config = {
         'la-gauffre': {
           activated: false,
         },
+        'home-proconnect': {
+          activated: false,
+        },
       },
     },
     dsfr: {
@@ -468,6 +471,9 @@ const config = {
         'la-gauffre': {
           activated: true,
         },
+        'home-proconnect': {
+          activated: true,
+        },
       },
     },
   },

src/frontend/apps/impress/src/cunningham/cunningham-tokens.css

@@ -345,6 +345,7 @@
   --c--components--button--disabled--color: white;
   --c--components--button--disabled--background--color: #b3cef0;
   --c--components--la-gauffre--activated: false;
+  --c--components--home-proconnect--activated: false;
 }
 
 .cunningham-theme--dark {
@@ -590,6 +591,7 @@
   );
   --c--components--forms-textarea--border-radius: 0;
   --c--components--la-gauffre--activated: true;
+  --c--components--home-proconnect--activated: true;
 }
 
 .clr-secondary-text {

src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts

@@ -336,6 +336,7 @@ export const tokens = {
           disabled: { color: 'white', background: { color: '#b3cef0' } },
         },
         'la-gauffre': { activated: false },
+        'home-proconnect': { activated: false },
       },
     },
     dark: {
@@ -581,6 +582,7 @@ export const tokens = {
         },
         'forms-textarea': { 'border-radius': '0' },
         'la-gauffre': { activated: true },
+        'home-proconnect': { activated: true },
       },
     },
   },

src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx

@@ -1,6 +1,11 @@
 import { Button } from '@openfun/cunningham-react';
+import Image from 'next/image';
 import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
 
+import { BoxButton } from '@/components';
+
+import ProConnectImg from '../assets/button-proconnect.svg?url';
 import { useAuth } from '../hooks';
 import { gotoLogin, gotoLogout } from '../utils';
 
@@ -22,3 +27,22 @@ export const ButtonLogin = () => {
     </Button>
   );
 };
+
+export const ProConnectButton = () => {
+  const { t } = useTranslation();
+
+  return (
+    <BoxButton
+      onClick={gotoLogin}
+      aria-label={t('Proconnect Login')}
+      $css={css`
+        background-color: var(--c--theme--colors--primary-text);
+        &:hover {
+          background-color: var(--c--theme--colors--primary-action);
+        }
+      `}
+    >
+      <Image src={ProConnectImg} alt={t('ProConnect Image')} />
+    </BoxButton>
+  );
+};

src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx

@@ -6,7 +6,7 @@ import { css } from 'styled-components';
 import DocLogo from '@/assets/icons/icon-docs.svg?url';
 import { Box, Icon, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
-import { gotoLogin } from '@/features/auth';
+import { ProConnectButton, gotoLogin } from '@/features/auth';
 import { useResponsiveStore } from '@/stores';
 
 import banner from '../assets/banner.jpg';
@@ -15,9 +15,10 @@ import { getHeaderHeight } from './HomeHeader';
 
 export default function HomeBanner() {
   const { t } = useTranslation();
-  const { spacingsTokens } = useCunninghamTheme();
+  const { componentTokens, spacingsTokens } = useCunninghamTheme();
   const spacings = spacingsTokens();
   const { isMobile, isSmallMobile } = useResponsiveStore();
+  const withProConnect = componentTokens()['home-proconnect'].activated;
 
   return (
     <Box
@@ -69,16 +70,20 @@ export default function HomeBanner() {
               'Collaborate and write in real time, without layout constraints.',
             )}
           </Text>
-          <Button
-            onClick={gotoLogin}
-            icon={
-              <Text $isMaterialIcon $color="white">
-                bolt
-              </Text>
-            }
-          >
-            {t('Start Writing')}
-          </Button>
+          {withProConnect ? (
+            <ProConnectButton />
+          ) : (
+            <Button
+              onClick={gotoLogin}
+              icon={
+                <Text $isMaterialIcon $color="white">
+                  bolt
+                </Text>
+              }
+            >
+              {t('Start Writing')}
+            </Button>
+          )}
         </Box>
         {!isMobile && (
           <Image

src/frontend/apps/impress/src/features/home/components/HomeBottom.tsx

@@ -1,20 +1,38 @@
+import Image from 'next/image';
 import { Trans, useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
+import DocLogo from '@/assets/icons/icon-docs.svg?url';
 import { Box, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
+import { ProConnectButton } from '@/features/auth';
+import { Title } from '@/features/header';
+import { useResponsiveStore } from '@/stores';
 
 import SC5 from '../assets/SC5.png';
 
 import { HomeSection } from './HomeSection';
 
-export function HomeOpenSource() {
+export function HomeBottom() {
+  const { componentTokens } = useCunninghamTheme();
+  const withProConnect = componentTokens()['home-proconnect'].activated;
+
+  if (withProConnect) {
+    return <HomeProConnect />;
+  } else {
+    return <HomeOpenSource />;
+  }
+}
+
+function HomeOpenSource() {
   const { t } = useTranslation();
   const { colorsTokens } = useCunninghamTheme();
+  const { isTablet } = useResponsiveStore();
 
   return (
     <HomeSection
       isColumn={false}
+      isSmallDevice={isTablet}
       illustration={SC5}
       title={t('Govs ❤️ Open Source.')}
       tag={t('Open Source')}
@@ -101,3 +119,41 @@ export function HomeOpenSource() {
     />
   );
 }
+
+function HomeProConnect() {
+  const { t } = useTranslation();
+  const { spacingsTokens } = useCunninghamTheme();
+  const spacings = spacingsTokens();
+  const { isMobile } = useResponsiveStore();
+  const parentGap = '230px';
+
+  return (
+    <Box
+      $justify="center"
+      $height={!isMobile ? `calc(100vh - ${parentGap})` : 'auto'}
+    >
+      <Box
+        $gap={spacings['md']}
+        $direction="column"
+        $align="center"
+        $margin={{ top: isMobile ? 'none' : `-${parentGap}` }}
+      >
+        <Box
+          $align="center"
+          $gap={spacings['3xs']}
+          $direction="row"
+          $position="relative"
+          $height="fit-content"
+          $css="zoom: 1.9;"
+        >
+          <Image src={DocLogo} alt="DocLogo" />
+          <Title />
+        </Box>
+        <Text $size="md" $variation="1000" $textAlign="center">
+          {t('Docs is already available, log in to use it now.')}
+        </Text>
+        <ProConnectButton />
+      </Box>
+    </Box>
+  );
+}

src/frontend/apps/impress/src/features/home/components/HomeContent.tsx

@@ -19,7 +19,7 @@ import SC4ResponsiveEn from '../assets/SC4-responsive-en.png';
 import SC4ResponsiveFr from '../assets/SC4-responsive-fr.png';
 
 import HomeBanner from './HomeBanner';
-import { HomeOpenSource } from './HomeOpenSource';
+import { HomeBottom } from './HomeBottom';
 import { HomeHeader, getHeaderHeight } from './HomeHeader';
 import { HomeSection } from './HomeSection';
 
@@ -110,7 +110,7 @@ export function HomeContent() {
                 'Docs transforms your documents into knowledge bases thanks to subpages, powerful search and the ability to pin your important documents.',
               )}
             />
-            <HomeOpenSource />
+            <HomeBottom />
           </Box>
         </Box>
         <Footer />