feat(positions): rendre le manifeste plus visible

frontend/messages/fr/positions.json

@@ -25,6 +25,7 @@
         "cta": "Lire le manifeste"
       }
     ],
+    "manifestoBanner": "Découvrez notre manifeste !",
     "press": "Nos positions dans la presse",
     "resources": "Nos ressources"
   }

frontend/src/app/[locale]/positions/_partials/Animations.tsx

@@ -1,5 +1,5 @@
 import { useTranslations } from 'next-intl';
-import { TiltedTitle, Button } from '@/components';
+import { TiltedTitle } from '@/components';
 import Image from 'next/image';
 import {
   useScroll,
@@ -31,7 +31,7 @@ export default function Animation({ animationData, handleSkipClick }: {
   return (
     <div className="container flex justify-center items-center h-[700dvh]" ref={refContainer}>
       <motion.div className="bg-fixed bg-[url('/images/bg-paper.jpg')] bg-repeat-y bg-cover fixed top-0 left-0 right-0 bottom-0" style={{ opacity: useTransform(scrollYProgress, [0.95, 1], [1, 0]) }} />
-      <Link href="#lastContent" onClick={handleSkipClick} className="absolute z-1 top-[calc(100dvh-40px)] right-[40px] text-grey-text flex flex-col items-center hover:text-black">
+      <Link href="#manifesto" onClick={(e) => { e.preventDefault(); handleSkipClick(); }} className="absolute z-1 top-[calc(100dvh-40px)] right-[40px] text-grey-text flex flex-col items-center hover:text-black">
         {t('skipLink')}
         <Image src="/icons/skip-arrow.svg" alt="" width={16} height={16} />
       </Link>
@@ -116,10 +116,9 @@ export default function Animation({ animationData, handleSkipClick }: {
       <motion.div id="lastContent" className="fixed top-0 left-0 right-0 bottom-0 flex justify-center items-center" style={{ opacity: useTransform(scrollYProgress, [0, 0.80, 0.85, 0.95, 1], [0, 0, 1, 1, 0]) }}>
         <div className="mt-36 relative md:top-[-180px] px-4 lead flex flex-col items-center">
           <TiltedTitle level={1} variant="big" rotation={-3.49} className="relative top-4 drop-shadow-3 drop-shadow-black">{t('intro.5.title')}</TiltedTitle>
-          <p className="h3-like relative  p-2 max-w-[564px] rotate-[-3.49deg] drop-shadow-3 drop-shadow-black">
+          <p className="h3-like relative p-2 max-w-[564px] rotate-[-3.49deg] drop-shadow-3 drop-shadow-black">
             <span className="bg-alive relative z-1">{t('intro.5.description')}</span>
           </p>
-          <Button color="white" href={animationData.manifestCta.link} className="relative -bottom-2">{animationData.manifestCta.text ?? t('intro.5.cta')}</Button>
         </div>
       </motion.div>
     </div>

frontend/src/app/[locale]/positions/positions.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
-import { BaseCardsBlock, LargeTextImage } from '@/components';
+import { BaseCardsBlock, LargeTextImage, ManifestoBanner } from '@/components';
 import Animation from './_partials/Animations';
 import type { PositionsPageData } from './page';
 import { useRef } from 'react';
@@ -60,7 +60,7 @@ export default function PositionsPage({ data }: PositionPageProps) {
 
   const scrollToRef = (ref: React.RefObject<HTMLElement>) => {
     if (ref.current) {
-      ref.current.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
     }
   };
 
@@ -70,18 +70,23 @@ export default function PositionsPage({ data }: PositionPageProps) {
     <>
       <Animation animationData={animationData} handleSkipClick={handleSkipClick} />
 
-      <div ref={skipToSectionRef}>
-        <LargeTextImage
-          image={data.testimonial_background?.url}
-          citation={data.testimonial?.quote}
-          citationAuthor={data.testimonial?.author}
-          citationAuthorImage={data.testimonial?.avatar?.url}
-          background="purple"
-          className="-mt-[25vh]"
-          internalClassName='max-h-[750px]'
+      <div id="manifesto" ref={skipToSectionRef} className="-mt-[15vh]">
+        <ManifestoBanner
+          text={t('manifestoBanner')}
+          link={animationData.manifestCta.link}
+          className="mb-lg"
         />
       </div>
 
+      <LargeTextImage
+        image={data.testimonial_background?.url}
+        citation={data.testimonial?.quote}
+        citationAuthor={data.testimonial?.author}
+        citationAuthorImage={data.testimonial?.avatar?.url}
+        background="purple"
+        internalClassName='max-h-[750px]'
+      />
+
       <BaseCardsBlock
         title={t('press')}
         blocks={press}

frontend/src/components/molecules/ManifestoBanner/ManifestoBanner.tsx

@@ -0,0 +1,73 @@
+import clsx from 'clsx';
+import Image from 'next/image';
+import Link from 'next/link';
+
+export type ManifestoBannerProps = {
+  text: string;
+  link: string;
+  className?: string;
+};
+
+const ManifestoBanner: React.FC<ManifestoBannerProps> = ({
+  text,
+  link,
+  className,
+  ...props
+}) => {
+  if (!link) {
+    return null;
+  }
+
+  return (
+    <div className={clsx('container', className)} {...props}>
+      <Link
+        href={link}
+        target="_blank"
+        rel="noreferrer"
+        className={clsx(
+          'group relative z-1 block',
+          'before:absolute before:content-[""] before:-z-1 before:w-full before:h-full before:top-2 before:left-2 before:rounded-2xl before:bg-building before:transition-base',
+          'hover:before:top-1 hover:before:left-1 focus-visible:before:top-1 focus-visible:before:left-1',
+        )}
+      >
+        <div className="relative flex items-center justify-between gap-6 rounded-2xl bg-violet-light py-10 pl-8 pr-6 md:py-12 md:pl-14 md:pr-10">
+          <span className="h3-like max-w-[60%] text-black">{text}</span>
+          <svg
+            width="34"
+            height="34"
+            viewBox="0 0 24 24"
+            fill="none"
+            aria-hidden="true"
+            className="shrink-0 text-black transition-transform duration-200 group-hover:translate-x-1"
+          >
+            <path
+              d="M8.5 4L16.5 12L8.5 20"
+              stroke="currentColor"
+              strokeWidth="2.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </div>
+        <div className="pointer-events-none absolute -top-36 right-[8%] w-28 rotate-[7deg] md:-top-52 md:right-[12%] md:w-44">
+          <Image
+            src="/images/manifesto-page-2.png"
+            alt=""
+            width={520}
+            height={735}
+            className="absolute left-0 top-0 h-auto w-full translate-x-[14%] translate-y-[9%] rotate-[6deg] rounded-[2px] shadow-[5px_5px_0_0_#161031]"
+          />
+          <Image
+            src="/images/manifesto-page-1.png"
+            alt="Aperçu de la première page du manifeste"
+            width={520}
+            height={735}
+            className="relative z-1 h-auto w-full rounded-[2px] shadow-[5px_5px_0_0_#161031]"
+          />
+        </div>
+      </Link>
+    </div>
+  );
+};
+
+export default ManifestoBanner;

frontend/src/components/molecules/index.ts

@@ -55,3 +55,6 @@ export type { CampaignBannerProps } from './CampaignBanner/CampaignBanner';
 
 export { default as CtaList } from './CtaList/CtaList';
 export type { CtaListProps, CtaListItem } from './CtaList/CtaList';
+
+export { default as ManifestoBanner } from './ManifestoBanner/ManifestoBanner';
+export type { ManifestoBannerProps } from './ManifestoBanner/ManifestoBanner';