diff --git a/frontend/messages/fr/home.json b/frontend/messages/fr/home.json index 33d9f409..a293e2f3 100644 --- a/frontend/messages/fr/home.json +++ b/frontend/messages/fr/home.json @@ -45,10 +45,6 @@ "defaultAuthor": "Data For Good", "articleCtaText": "Lire l'article", "pressCtaText": "Lire la presse" - }, - "dot": { - "purple": "purple dot", - "orange": "orange dot" } } } diff --git a/frontend/public/images/donation-background.jpg b/frontend/public/images/donation-background.jpg index 1c93d105..b83f9c57 100644 Binary files a/frontend/public/images/donation-background.jpg and b/frontend/public/images/donation-background.jpg differ diff --git a/frontend/src/app/[locale]/_partials/footer.tsx b/frontend/src/app/[locale]/_partials/footer.tsx index fa3c2ea6..6a3b5502 100644 --- a/frontend/src/app/[locale]/_partials/footer.tsx +++ b/frontend/src/app/[locale]/_partials/footer.tsx @@ -51,7 +51,7 @@ const Footer = () => { /> -

+

{t('description')}

@@ -94,7 +94,7 @@ const Footer = () => { -
+

{t('copyright')} {new Date().getFullYear()} diff --git a/frontend/src/app/[locale]/donations/donation.tsx b/frontend/src/app/[locale]/donations/donation.tsx index b0a9f241..01b5451f 100644 --- a/frontend/src/app/[locale]/donations/donation.tsx +++ b/frontend/src/app/[locale]/donations/donation.tsx @@ -57,8 +57,6 @@ export default function DonationsPage({ data }: DonationProps) { id: (goal.id ?? '').toString(), talk: goal.goal_cta?.content ?? '', image: goal.goal_cta?.image?.url ?? '', - imageWidth: 301, - imageHeight: 401, ctaText: goal.goal_cta?.cta?.text, ctaLink: goal.goal_cta?.cta?.link, })) ?? [] @@ -79,7 +77,7 @@ export default function DonationsPage({ data }: DonationProps) { -

+
diff --git a/frontend/src/app/[locale]/globals.css b/frontend/src/app/[locale]/globals.css index 36abd618..b65f76b7 100644 --- a/frontend/src/app/[locale]/globals.css +++ b/frontend/src/app/[locale]/globals.css @@ -124,6 +124,10 @@ @apply text-sm font-black uppercase tracking-widest; } + .tag-like { + @apply text-[0.625rem] font-black uppercase tracking-widest; + } + .lead { @apply font-secondary font-medium; } @@ -207,6 +211,9 @@ .container-md { @apply px-5 mx-auto max-w-[920px]; } + .container-lg { + @apply px-5 mx-auto max-w-[1200px]; + } [class*="container-"] [class*="container-"] { @apply px-0; } diff --git a/frontend/src/app/[locale]/home.tsx b/frontend/src/app/[locale]/home.tsx index d9f040f9..780b4fbe 100644 --- a/frontend/src/app/[locale]/home.tsx +++ b/frontend/src/app/[locale]/home.tsx @@ -87,8 +87,6 @@ export default function Homepage({ data }: HomepageProps) { talk: thematic.short_description || '', talkOffset: 10, image: thematic.thumbnail?.url || '', - imageWidth: 251, - imageHeight: 318, ctaText: thematic.cta_text, ctaLink: thematic.cta_link, })).filter(thematic => thematic.talk) ?? []; @@ -105,7 +103,7 @@ export default function Homepage({ data }: HomepageProps) { src="/icons/dot-purple.svg" width={35} height={35} - alt={t('dot.purple')} + alt="" /> {data.project_carousel_title!} diff --git a/frontend/src/app/[locale]/projects/[slug]/projectDetail.tsx b/frontend/src/app/[locale]/projects/[slug]/projectDetail.tsx index 6079c0ad..f7bf5926 100644 --- a/frontend/src/app/[locale]/projects/[slug]/projectDetail.tsx +++ b/frontend/src/app/[locale]/projects/[slug]/projectDetail.tsx @@ -135,7 +135,6 @@ export default function ProjectDetailPage({ project }: ProjectPageProps) { />} {presentationContent.length > 0 && <Banner - image={project.thumbnail?.url} content={presentationContent} className="my-lg" />} diff --git a/frontend/src/app/[locale]/projects/projects.tsx b/frontend/src/app/[locale]/projects/projects.tsx index d8ef3391..786b3e73 100644 --- a/frontend/src/app/[locale]/projects/projects.tsx +++ b/frontend/src/app/[locale]/projects/projects.tsx @@ -24,8 +24,6 @@ function transformThematicsData(thematics: ProjectListPageData["thematics"]) { talk: thematic.short_description, talkOffset: 10, image: thematic.thumbnail?.url || '', - imageWidth: 251, - imageHeight: 318, ctaText: thematic.cta_text, ctaLink: thematic.cta_link, })) || []; diff --git a/frontend/src/components/atoms/Tag/Tag.tsx b/frontend/src/components/atoms/Tag/Tag.tsx index 0db5fc24..939fdd92 100644 --- a/frontend/src/components/atoms/Tag/Tag.tsx +++ b/frontend/src/components/atoms/Tag/Tag.tsx @@ -21,7 +21,7 @@ const Tag = ({ return ( <div className={clsx( - 'text-xs font-semibold tracking-widest px-2 py-1.5 uppercase opacity-70', + 'tag-like px-2 py-1.5 uppercase opacity-70', bgColor, color, className, diff --git a/frontend/src/components/molecules/Banner/Banner.tsx b/frontend/src/components/molecules/Banner/Banner.tsx index 72c67e3f..a8387367 100644 --- a/frontend/src/components/molecules/Banner/Banner.tsx +++ b/frontend/src/components/molecules/Banner/Banner.tsx @@ -1,43 +1,31 @@ import clsx from 'clsx'; -import Image from 'next/image'; export type BannerProps = { content?: string[]; - image?: string; className?: string; }; const Banner: React.FC<BannerProps> = ({ content, - image, className, ...props }) => { - if (!image) { + + if (!content || content.length === 0) { return null; } return ( <div className={clsx( - 'grid grid-cols-1 grid-rows-1 md:max-h-[850px] mask-papper', + 'flex justify-center items-center md:min-h-[700px] mask-papper text-white bg-black', className, )} {...props} > - {image && <Image src={image} alt="" loading="lazy" width={1000} height={400} className="col-start-1 row-start-1 w-full h-full object-cover" />} - - <div className="col-start-1 row-start-1 bg-violet-light opacity-90" /> - - {content && content.length > 0 && <div className="whitespace-pre-wrap lg:max-w-[60%] py-10 md:py-0 col-start-1 row-start-1 container self-center z-1"> - <div className={clsx( - 'prose prose--big text-center lead', - )}> - {content.map((paragraph, index) => ((<div dangerouslySetInnerHTML={{ __html: paragraph }} key={index} />)))} - - </div> + <div className="container-lg whitespace-pre-wrap py-10 prose prose--big text-center lead"> + {content.map((paragraph, index) => ((<div dangerouslySetInnerHTML={{ __html: paragraph }} key={index} />)))} </div> - } </div> ); }; diff --git a/frontend/src/components/molecules/BaseCard/BaseCard.tsx b/frontend/src/components/molecules/BaseCard/BaseCard.tsx index 44ea246d..261d7c42 100644 --- a/frontend/src/components/molecules/BaseCard/BaseCard.tsx +++ b/frontend/src/components/molecules/BaseCard/BaseCard.tsx @@ -54,7 +54,7 @@ const BaseCard: React.FC<BaseCardProps> = ({ {subInfos.length > 0 && ( <div className="flex flex-wrap gap-3"> {subInfos.map((subInfo, index) => ( - <p key={index} className="text-sm text-black/60 font-black uppercase tracking-widest">{subInfo}</p> + <p key={index} className="tag-like text-black/60">{subInfo}</p> ))} </div> )} diff --git a/frontend/src/components/molecules/NewsSmallCard/NewsSmallCard.tsx b/frontend/src/components/molecules/NewsSmallCard/NewsSmallCard.tsx index 83470586..df485156 100644 --- a/frontend/src/components/molecules/NewsSmallCard/NewsSmallCard.tsx +++ b/frontend/src/components/molecules/NewsSmallCard/NewsSmallCard.tsx @@ -43,7 +43,7 @@ const NewsSmallCard: React.FC<NewsSmallCardProps> = ({ <div className="flex flex-col items-start gap-xs w-full sm:w-1/2 p-7"> {tags?.map((tag) => (<Tag color='text-black' bgColor='bg-violet-light'>{tag}</Tag>))} <p className="font-secondary font-bold">{title}</p> - <p className="text-sm text-black/60 font-black uppercase tracking-widest">{date}</p> + <p className="tag-like text-black/60">{date}</p> </div> {!link.startsWith('/') && <div className="absolute z-1 flex items-center justify-center w-16 h-16 m-auto top-4 sm:top-0 sm:bottom-0 right-4 sm:right-10 rounded-full shadow-base bg-white"> <Image loading="lazy" src="/icons/blank-purple.svg" alt="" width={33} height={33} /> diff --git a/frontend/src/components/molecules/ProjectCarousel/ProjectCarousel.tsx b/frontend/src/components/molecules/ProjectCarousel/ProjectCarousel.tsx index 74180171..3c9d80a2 100644 --- a/frontend/src/components/molecules/ProjectCarousel/ProjectCarousel.tsx +++ b/frontend/src/components/molecules/ProjectCarousel/ProjectCarousel.tsx @@ -53,7 +53,7 @@ const ProjectCarousel: React.FC<ProjectCarouselProps> = ({ return ( <div className={clsx('container', className)}> - {title && <Title variant="medium" className="mb-md" level={titleLevel}> + {title && <Title variant="medium" className="mb-md" level={titleLevel} hasSeparator> {title} } @@ -68,10 +68,9 @@ const ProjectCarousel: React.FC = ({ dragFree: false, }} className={clsx( - 'w-full relative overflow-hidden md:overflow-visible', + 'w-full overflow-hidden md:overflow-visible', current === count - 1 && slides.length > 1 && 'md:[&>div:first-child]:pr-[10vw]', carouselClassName, - )} > @@ -79,8 +78,8 @@ const ProjectCarousel: React.FC = ({ = ({

{project}

- {partners.map((partner, id) => (

{partner}

))} + {partners.map((partner, id) => (

{partner}

))} {description &&

{description}

}
; diff --git a/frontend/src/components/molecules/TestimoniesCarousel/TestimoniesCarousel.tsx b/frontend/src/components/molecules/TestimoniesCarousel/TestimoniesCarousel.tsx index 52494f69..795b33dd 100644 --- a/frontend/src/components/molecules/TestimoniesCarousel/TestimoniesCarousel.tsx +++ b/frontend/src/components/molecules/TestimoniesCarousel/TestimoniesCarousel.tsx @@ -64,7 +64,7 @@ const TestimoniesCarousel: React.FC = ({
- + {testimony.author}
diff --git a/frontend/src/components/molecules/ThematicsCard/ThematicsCard.tsx b/frontend/src/components/molecules/ThematicsCard/ThematicsCard.tsx index 7001aafa..7b410318 100644 --- a/frontend/src/components/molecules/ThematicsCard/ThematicsCard.tsx +++ b/frontend/src/components/molecules/ThematicsCard/ThematicsCard.tsx @@ -11,8 +11,6 @@ export type ThematicsCardProps = { talk: string; talkOffset?: number; image?: string; - imageWidth: number; - imageHeight: number; ctaText?: string; ctaLink?: string; className?: string; @@ -24,8 +22,6 @@ const ThematicsCard: React.FC = ({ talk, talkOffset = 0, image = "/images/default-image.svg", - imageWidth, - imageHeight, ctaText, ctaLink, className, @@ -49,8 +45,8 @@ const ThematicsCard: React.FC = ({ alt="" className="absolute m-auto left-0 right-0 top-0 pb-lg justify-center h-fit -z-30 object-cover" loading="lazy" - width={imageWidth} - height={imageHeight} + width="301" + height="401" />
diff --git a/frontend/src/components/organisms/ProjectPresentation/ProjectPresentation.tsx b/frontend/src/components/organisms/ProjectPresentation/ProjectPresentation.tsx index 485bcb2b..bc038ebe 100644 --- a/frontend/src/components/organisms/ProjectPresentation/ProjectPresentation.tsx +++ b/frontend/src/components/organisms/ProjectPresentation/ProjectPresentation.tsx @@ -44,10 +44,10 @@ const ProjectPresentation: React.FC = ({ {t('tags')}
    {tags.map((tag, index) => ( -
  • {tag.label ?? ''}
  • +
  • {tag.label ?? ''}
  • ))} {thematics?.map((thematic, index) => ( -
  • {thematic.name ?? ''}
  • +
  • {thematic.name ?? ''}
  • ))}
)} diff --git a/frontend/src/components/organisms/ProjectProcesses/ProjectProcesses.tsx b/frontend/src/components/organisms/ProjectProcesses/ProjectProcesses.tsx index 0c7790f8..8409b0d9 100644 --- a/frontend/src/components/organisms/ProjectProcesses/ProjectProcesses.tsx +++ b/frontend/src/components/organisms/ProjectProcesses/ProjectProcesses.tsx @@ -33,7 +33,7 @@ const ProjectProcesses: React.FC = ({ return (
= ({ src="/icons/dot-orange.svg" width={35} height={35} - alt={t('dot.orange')} + alt="" className='mx-auto mb-xs' />} {title && ( diff --git a/frontend/src/components/organisms/ThematicsBlock/ThematicsBlock.tsx b/frontend/src/components/organisms/ThematicsBlock/ThematicsBlock.tsx index 3ad7f4dd..2b092b3b 100644 --- a/frontend/src/components/organisms/ThematicsBlock/ThematicsBlock.tsx +++ b/frontend/src/components/organisms/ThematicsBlock/ThematicsBlock.tsx @@ -2,7 +2,6 @@ import clsx from 'clsx'; import { Title, TitleProps } from '@/components/atoms'; import ThematicsCard, { ThematicsCardProps } from '@/components/molecules/ThematicsCard/ThematicsCard'; import Image from "next/image" -import { useTranslations } from 'next-intl'; export type ThematicsProps = { title: string; @@ -26,8 +25,6 @@ const ThematicsBlock: React.FC = ({ return null; } - const t = useTranslations('home'); - return (
= ({ src="/icons/dot-purple.svg" width={35} height={35} - alt={t('dot.purple')} + alt="" className='mr-2 mb-xs' />} diff --git a/frontend/src/components/organisms/ThumbnailProjectsBlock/ThumbnailProjectsBlock.tsx b/frontend/src/components/organisms/ThumbnailProjectsBlock/ThumbnailProjectsBlock.tsx index 97ba3961..bd0689b9 100644 --- a/frontend/src/components/organisms/ThumbnailProjectsBlock/ThumbnailProjectsBlock.tsx +++ b/frontend/src/components/organisms/ThumbnailProjectsBlock/ThumbnailProjectsBlock.tsx @@ -31,7 +31,7 @@ const ThumbnailProjectsBlock: React.FC<ThumbnailProjectsBlockProps> = ({ > <Image src="/images/scratch-purple.svg" alt="" width={212} height={48} className="object-contain w-full h-auto" /> <div className="bg-building-light pt-sm pb-md"> - <div className="container"> + <div className="container-lg"> <Title hasSeparator className="mb-xs" level={titleLevel} variant="medium"> {title}