Fixed/front review

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"
     }
   }
 }

frontend/src/app/[locale]/_partials/footer.tsx

@@ -51,7 +51,7 @@ const Footer = () => {
               />
             </Link>
 
-            <p className="font-secondary">
+            <p className="font-secondary max-w-52">
               {t('description')}
             </p>
           </div>
@@ -94,7 +94,7 @@ const Footer = () => {
             </ul>
           </div>
         </div>
-        <div className="container flex flex-wrap gap-8 mx-auto px-4 mt-10 text-sm text-black/60">
+        <div className="container flex flex-wrap gap-8 mx-auto px-4 mt-10 lg:mt-36 text-xs text-black/60">
           <p>
             {t('copyright')}
             {new Date().getFullYear()}

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) {
 
       <EditoCard contentClassName=" md:max-w-[80%] md:mx-auto" className="my-lg">
 
-        <div className="prose prose--big leading-tight text-[1.5rem] text-left font-tertiary" dangerouslySetInnerHTML={{ __html: data.introduction_text }} />
+        <div className="prose prose--big leading-tight text-[1.5rem] text-left font-tertiary" dangerouslySetInnerHTML={{ __html: data.introduction_text ?? '' }} />
         <div className="flex justify-center mt-sm">
           <DonationButton />
         </div>

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;
   }

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=""
         />
         <Title level={2} className='ml-2' variant="medium">
           {data.project_carousel_title!}

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"
       />}

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,
   })) || [];

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,

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>
   );
 };

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>
           )}

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} />

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}
       </Title>}
 
@@ -68,19 +68,18 @@ const ProjectCarousel: React.FC<ProjectCarouselProps> = ({
           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,
-
         )}
       >
         <CarouselContent noOverflow className="px-[calc(50%-24rem)] items-center">
           {slides.map((slide, index) => (
             <CarouselItem
               key={slide.id}
               className={clsx(
-                "max-w-3xl p-0 h-[520px]",
-                index !== current && "bg-violet-light/80 px-0 py-0 h-[460px]",
+                "relative max-w-3xl p-0 h-[520px]",
+                index !== current ? "bg-violet-light/80 px-0 py-0 h-[460px]" : "z-1 shadow-lg",
               )}
             >
               <Image

frontend/src/components/molecules/ProjectListCard/ProjectListCard.tsx

@@ -41,7 +41,7 @@ const ProjectListCard: React.FC<ProjectListCardProps> = ({
     </div>
     <div className="col-start-1 row-start-1 flex flex-col justify-end m-5 gap-2 items-start text-white">
       <p className="lead font-bold">{project}</p>
-      {partners.map((partner, id) => (<p key={id} className="text-xs font-semibold tracking-widest uppercase opacity-50">{partner}</p>))}
+      {partners.map((partner, id) => (<p key={id} className="tag-like opacity-50">{partner}</p>))}
       {description && <p className="text-xs h-0 group-hover:h-auto transition-all overflow-hidden">{description}</p>}
     </div>
   </div>;

frontend/src/components/molecules/TestimoniesCarousel/TestimoniesCarousel.tsx

@@ -64,7 +64,7 @@ const TestimoniesCarousel: React.FC<TestimoniesCarouselProps> = ({
             <blockquote className="relative z-1 flex flex-col md:flex-row items-center before:absolute before:content-[''] before:w-full before:h-full before:bg-white before:shadow-base before:-rotate-3">
               <div className="relative flex flex-col items-center w-48 sm:-left-12">
                 <Image src={testimony.image ?? "/images/default-image.svg"} alt="" loading="lazy" width={192} height={192} className="w-full h-full object-contain" />
-                <TiltedTitle className="text-center w-full text-sm md:text-base drop-shadow-1 drop-shadow-black" level="p" variant="x-small" colors="text-dark bg-blue block w-full text-center">
+                <TiltedTitle className="text-center w-full drop-shadow-1 drop-shadow-black" level="p" variant="x-small" colors="text-dark bg-blue block w-full text-center">
                   {testimony.author}
                 </TiltedTitle>
               </div>

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<ThematicsCardProps> = ({
   talk,
   talkOffset = 0,
   image = "/images/default-image.svg",
-  imageWidth,
-  imageHeight,
   ctaText,
   ctaLink,
   className,
@@ -49,8 +45,8 @@ const ThematicsCard: React.FC<ThematicsCardProps> = ({
         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"
       />
       <div className="pt-lg mb-xs">
         <TiltedTitle {...title.props} variant="small" className={`${title.props.className} z-1. mb-xs`}>

frontend/src/components/organisms/ProjectPresentation/ProjectPresentation.tsx

@@ -44,10 +44,10 @@ const ProjectPresentation: React.FC<ProjectPresentationProps> = ({
           <Title level="p" variant="x-small" className="mb-xs">{t('tags')}</Title>
           <ul className="flex flex-row flex-wrap gap-x-1 gap-y-2.5 max-w-96">
             {tags.map((tag, index) => (
-              <li key={index}><Tag color="text-black" bgColor="bg-back-green" className="normal-case">{tag.label ?? ''}</Tag></li>
+              <li key={index}><Tag color="text-black" bgColor="bg-back-green">{tag.label ?? ''}</Tag></li>
             ))}
             {thematics?.map((thematic, index) => (
-              <li key={index}><Tag color="text-black" bgColor={`bg-${thematic.color}`} className="normal-case">{thematic.name ?? ''}</Tag></li>
+              <li key={index}><Tag color="text-black" bgColor={`bg-${thematic.color}`}>{thematic.name ?? ''}</Tag></li>
             ))}
           </ul>
         </>)}

frontend/src/components/organisms/ProjectProcesses/ProjectProcesses.tsx

@@ -33,7 +33,7 @@ const ProjectProcesses: React.FC<ProjectProcessesProps> = ({
   return (
     <div
       className={clsx(
-        "prose my-xs",
+        "prose prose--big my-xs max-w-4xl ml-0",
         className,
       )}
       {...props}

frontend/src/components/organisms/TalksBlock/TalksBlock.tsx

@@ -35,7 +35,7 @@ const TalksBlock: React.FC<TalksBlockProps> = ({
         src="/icons/dot-orange.svg"
         width={35}
         height={35}
-        alt={t('dot.orange')}
+        alt=""
         className='mx-auto mb-xs'
       />}
       {title && (

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<ThematicsProps> = ({
     return null;
   }
 
-  const t = useTranslations('home');
-
   return (
     <div
       className={clsx(
@@ -42,7 +39,7 @@ const ThematicsBlock: React.FC<ThematicsProps> = ({
             src="/icons/dot-purple.svg"
             width={35}
             height={35}
-            alt={t('dot.purple')}
+            alt=""
             className='mr-2 mb-xs'
           />}
           <Title className="mb-xs text-left" level={titleLevel} variant="medium">

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}
             </Title>