Merge pull request #345 from dataforgoodfr/feat/donation-video

feat: add video donation

Author: TCatinaud

frontend/src/app/[locale]/donations/donation.tsx

@@ -69,19 +69,21 @@ export default function DonationsPage({ data }: DonationProps) {
         iframe={<div className='p-4 [&>iframe]:rounded-2xl' ref={donationSectionRef}>
           <a href="https://soutenir.dataforgood.fr/native-/#iraiser_native"></a>
         </div>}
-        image={data.banner_video?.url}
         background="purple"
         className="my-lg"
         internalClassName='min-h-[850px]'
       />
 
-      <EditoCard contentClassName=" md:max-w-[80%] md:mx-auto" className="my-lg">
+      <div className="container-lg mx-auto flex flex-col lg:flex-row items-center gap-12">
+        {data.banner_video?.url && <div className="shadow-lg bg-building w-full lg:max-w-60 rotate-[-2deg]" dangerouslySetInnerHTML={{ __html: data.banner_video?.url ?? '' }} />}
 
-        <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>
-      </EditoCard>
+        <EditoCard contentClassName="flex-1 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="flex justify-center mt-sm">
+            <DonationButton />
+          </div>
+        </EditoCard>
+      </div>
 
       <div className="bg-violet-light py-lg">
         <TalksBlock

frontend/src/components/molecules/LargeTextImageDonation/LargeTextImageDonation.tsx

@@ -1,14 +1,12 @@
 import clsx from 'clsx';
-import Image from 'next/image';
-import { Button, Title, TitleProps } from '@/components';
+import { Title, TitleProps } from '@/components';
 
 export type LargeTextImageDonationProps = {
   id?: string;
   title?: string;
   titleLevel?: TitleProps['level'];
   content?: React.ReactNode;
   iframe?: React.ReactNode;
-  image?: string;
   citation?: string;
   citationAuthor?: string;
   citationAuthorImage?: string;
@@ -23,7 +21,6 @@ const LargeTextImageDonation: React.FC<LargeTextImageDonationProps> = ({
   titleLevel = 2,
   content,
   iframe,
-  image,
   citation,
   citationAuthor,
   citationAuthorImage,
@@ -42,7 +39,6 @@ const LargeTextImageDonation: React.FC<LargeTextImageDonationProps> = ({
         className={clsx(
           'overflow-hidden grid grid-cols-1 grid-rows-[200px_1fr] md:grid-cols-2 md:grid-rows-1 h-full',
           `text-white bg-[url("/images/donation-background.jpg")]`,
-          // `text-white bg-[url("/images/bg-donation.jpg")]`,
           internalClassName,
         )}
       >

frontend/src/components/molecules/TalkCard/TalkCard.tsx

@@ -41,7 +41,7 @@ const TalkCard: React.FC<TalkCardProps> = ({
         imagePosition === 'right' && 'sm:order-2',
       )}>
         <div className={clsx(
-          'relative inline-flex before:absolute before:content-[""] before:bg-black before:-z-1 before:w-full before:h-full before:top-3 before:left-3',
+          'relative flex before:absolute before:content-[""] before:bg-black before:-z-1 before:w-full before:h-full before:top-3 before:left-3',
           imagePosition === 'right' ? 'rotate-3' : '-rotate-3',
         )}>
           <Image

frontend/src/components/molecules/ThematicsCard/ThematicsCard.tsx

@@ -43,7 +43,7 @@ const ThematicsCard: React.FC<ThematicsCardProps> = ({
       <Image
         src={image}
         alt=""
-        className="absolute m-auto left-0 right-0 top-0 pb-lg justify-center h-fit -z-30 object-cover"
+        className="absolute m-auto left-0 right-0 top-0 bottom-0 lg:bottom-auto pb-lg justify-center h-full lg:h-fit -z-30 object-contain lg:object-cover"
         loading="lazy"
         width="301"
         height="401"