Skip to content

Commit 3dc53b7

Browse files
DnzzLDnzzL
authored
Merge pull request #395 from dataforgoodfr/manifeste-plus-visible-ywzxo
feat(positions): rendre le manifeste plus visible
2 parents 2ecb73f + d9d5948 commit 3dc53b7

7 files changed

Lines changed: 96 additions & 15 deletions

File tree

‎frontend/messages/fr/positions.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"cta": "Lire le manifeste"
2626
}
2727
],
28+
"manifestoBanner": "Découvrez notre manifeste !",
2829
"press": "Nos positions dans la presse",
2930
"resources": "Nos ressources"
3031
}

‎frontend/public/images/manifesto-page-1.png‎

211 KB
Loading

‎frontend/public/images/manifesto-page-2.png‎

175 KB
Loading

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useTranslations } from 'next-intl';
2-
import { TiltedTitle, Button } from '@/components';
2+
import { TiltedTitle } from '@/components';
33
import Image from 'next/image';
44
import {
55
useScroll,
@@ -31,7 +31,7 @@ export default function Animation({ animationData, handleSkipClick }: {
3131
return (
3232
<div className="container flex justify-center items-center h-[700dvh]" ref={refContainer}>
3333
<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]) }} />
34-
<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">
34+
<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">
3535
{t('skipLink')}
3636
<Image src="/icons/skip-arrow.svg" alt="" width={16} height={16} />
3737
</Link>
@@ -116,10 +116,9 @@ export default function Animation({ animationData, handleSkipClick }: {
116116
<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]) }}>
117117
<div className="mt-36 relative md:top-[-180px] px-4 lead flex flex-col items-center">
118118
<TiltedTitle level={1} variant="big" rotation={-3.49} className="relative top-4 drop-shadow-3 drop-shadow-black">{t('intro.5.title')}</TiltedTitle>
119-
<p className="h3-like relative p-2 max-w-[564px] rotate-[-3.49deg] drop-shadow-3 drop-shadow-black">
119+
<p className="h3-like relative p-2 max-w-[564px] rotate-[-3.49deg] drop-shadow-3 drop-shadow-black">
120120
<span className="bg-alive relative z-1">{t('intro.5.description')}</span>
121121
</p>
122-
<Button color="white" href={animationData.manifestCta.link} className="relative -bottom-2">{animationData.manifestCta.text ?? t('intro.5.cta')}</Button>
123122
</div>
124123
</motion.div>
125124
</div>

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

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22

33
import { useTranslations } from 'next-intl';
4-
import { BaseCardsBlock, LargeTextImage } from '@/components';
4+
import { BaseCardsBlock, LargeTextImage, ManifestoBanner } from '@/components';
55
import Animation from './_partials/Animations';
66
import type { PositionsPageData } from './page';
77
import { useRef } from 'react';
@@ -60,7 +60,7 @@ export default function PositionsPage({ data }: PositionPageProps) {
6060

6161
const scrollToRef = (ref: React.RefObject<HTMLElement>) => {
6262
if (ref.current) {
63-
ref.current.scrollIntoView({ behavior: "smooth", block: "nearest" });
63+
ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
6464
}
6565
};
6666

@@ -70,18 +70,23 @@ export default function PositionsPage({ data }: PositionPageProps) {
7070
<>
7171
<Animation animationData={animationData} handleSkipClick={handleSkipClick} />
7272

73-
<div ref={skipToSectionRef}>
74-
<LargeTextImage
75-
image={data.testimonial_background?.url}
76-
citation={data.testimonial?.quote}
77-
citationAuthor={data.testimonial?.author}
78-
citationAuthorImage={data.testimonial?.avatar?.url}
79-
background="purple"
80-
className="-mt-[25vh]"
81-
internalClassName='max-h-[750px]'
73+
<div id="manifesto" ref={skipToSectionRef} className="-mt-[15vh]">
74+
<ManifestoBanner
75+
text={t('manifestoBanner')}
76+
link={animationData.manifestCta.link}
77+
className="mb-lg"
8278
/>
8379
</div>
8480

81+
<LargeTextImage
82+
image={data.testimonial_background?.url}
83+
citation={data.testimonial?.quote}
84+
citationAuthor={data.testimonial?.author}
85+
citationAuthorImage={data.testimonial?.avatar?.url}
86+
background="purple"
87+
internalClassName='max-h-[750px]'
88+
/>
89+
8590
<BaseCardsBlock
8691
title={t('press')}
8792
blocks={press}

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

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import clsx from 'clsx';
2+
import Image from 'next/image';
3+
import Link from 'next/link';
4+
5+
export type ManifestoBannerProps = {
6+
text: string;
7+
link: string;
8+
className?: string;
9+
};
10+
11+
const ManifestoBanner: React.FC<ManifestoBannerProps> = ({
12+
text,
13+
link,
14+
className,
15+
...props
16+
}) => {
17+
if (!link) {
18+
return null;
19+
}
20+
21+
return (
22+
<div className={clsx('container', className)} {...props}>
23+
<Link
24+
href={link}
25+
target="_blank"
26+
rel="noreferrer"
27+
className={clsx(
28+
'group relative z-1 block',
29+
'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',
30+
'hover:before:top-1 hover:before:left-1 focus-visible:before:top-1 focus-visible:before:left-1',
31+
)}
32+
>
33+
<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">
34+
<span className="h3-like max-w-[60%] text-black">{text}</span>
35+
<svg
36+
width="34"
37+
height="34"
38+
viewBox="0 0 24 24"
39+
fill="none"
40+
aria-hidden="true"
41+
className="shrink-0 text-black transition-transform duration-200 group-hover:translate-x-1"
42+
>
43+
<path
44+
d="M8.5 4L16.5 12L8.5 20"
45+
stroke="currentColor"
46+
strokeWidth="2.5"
47+
strokeLinecap="round"
48+
strokeLinejoin="round"
49+
/>
50+
</svg>
51+
</div>
52+
<div className="pointer-events-none absolute -top-36 right-[8%] w-28 rotate-[7deg] md:-top-52 md:right-[12%] md:w-44">
53+
<Image
54+
src="/images/manifesto-page-2.png"
55+
alt=""
56+
width={520}
57+
height={735}
58+
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]"
59+
/>
60+
<Image
61+
src="/images/manifesto-page-1.png"
62+
alt="Aperçu de la première page du manifeste"
63+
width={520}
64+
height={735}
65+
className="relative z-1 h-auto w-full rounded-[2px] shadow-[5px_5px_0_0_#161031]"
66+
/>
67+
</div>
68+
</Link>
69+
</div>
70+
);
71+
};
72+
73+
export default ManifestoBanner;

‎frontend/src/components/molecules/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,3 +55,6 @@ export type { CampaignBannerProps } from './CampaignBanner/CampaignBanner';
5555

5656
export { default as CtaList } from './CtaList/CtaList';
5757
export type { CtaListProps, CtaListItem } from './CtaList/CtaList';
58+
59+
export { default as ManifestoBanner } from './ManifestoBanner/ManifestoBanner';
60+
export type { ManifestoBannerProps } from './ManifestoBanner/ManifestoBanner';

0 commit comments

Comments
 (0)