diff --git a/frontend/src/app/[locale]/about/about.tsx b/frontend/src/app/[locale]/about/about.tsx index 857a5ed3..80e2536e 100644 --- a/frontend/src/app/[locale]/about/about.tsx +++ b/frontend/src/app/[locale]/about/about.tsx @@ -1,16 +1,16 @@ 'use client'; -import { useTranslations } from 'next-intl'; import { CtaWithImage, EditoCard, LargeTextImage, MembersBlock, PartnersBlock, - Title, TestimoniesCarousel, + Title, } from '@/components'; import { IMembers } from '@/lib/types'; +import { useTranslations } from 'next-intl'; import { AboutPageData } from './page'; function transformTestimonials( @@ -21,6 +21,7 @@ function transformTestimonials( author: testimonial.author, content: testimonial.quote, image: testimonial.avatar?.url, + imageCredit: testimonial.avatar?.caption ?? null, })); } @@ -41,6 +42,7 @@ function transformMember( name: member.name, role: member.role, image: member.avatar?.url, + imageCredit: member.avatar?.caption ?? null, linkedin: member.linkedin, }; } @@ -131,6 +133,7 @@ export default function AboutPage({ data }: AboutProps) { rotation: -3.7, className: 'relative sm:left-[182px] md:-top-4', }} + imageCredit={data.cta_left?.image?.caption} /> @@ -145,6 +148,7 @@ export default function AboutPage({ data }: AboutProps) { className: 'sm:left-6', }} image={data.cta_right?.image.url ?? ''} + imageCredit={data.cta_right?.image.caption ?? null} className="w-full lg:w-[770px] overflow-hidden md:overflow-visible" contentClassName="relative lg:top-24" cta={{ @@ -166,6 +170,7 @@ export default function AboutPage({ data }: AboutProps) { ) { rawDate: resource.published_date, date: new Date(resource.published_date).toLocaleString(undefined, {dateStyle: 'medium'}), image: element.thumbnail?.url ?? "/images/dataforgood.svg", + imageCredit: element.thumbnail?.caption ?? null, link: isBlog ? `/blog/${element.slug}` : element.article_link, subInfos: element.tags ? element.tags.map(tag => tag.name) : [], tags: [new Date(element.published_date).toLocaleDateString(undefined, {dateStyle: 'long'}), element.media_name], diff --git a/frontend/src/app/[locale]/climate-and-biodiversity/climate.tsx b/frontend/src/app/[locale]/climate-and-biodiversity/climate.tsx index db9ff43b..14496d86 100644 --- a/frontend/src/app/[locale]/climate-and-biodiversity/climate.tsx +++ b/frontend/src/app/[locale]/climate-and-biodiversity/climate.tsx @@ -34,6 +34,7 @@ export default function SocialPage({ data , thematicsData }: ThematicsProps) { @@ -42,6 +43,7 @@ export default function SocialPage({ data , thematicsData }: ThematicsProps) { diff --git a/frontend/src/app/[locale]/democracy/democracy.tsx b/frontend/src/app/[locale]/democracy/democracy.tsx index 18243a70..66145637 100644 --- a/frontend/src/app/[locale]/democracy/democracy.tsx +++ b/frontend/src/app/[locale]/democracy/democracy.tsx @@ -34,6 +34,7 @@ export default function SocialPage({ data, thematicsData }: ThematicsProps) { @@ -42,6 +43,7 @@ export default function SocialPage({ data, thematicsData }: ThematicsProps) { diff --git a/frontend/src/app/[locale]/home.tsx b/frontend/src/app/[locale]/home.tsx index 780b4fbe..ef7e52e2 100644 --- a/frontend/src/app/[locale]/home.tsx +++ b/frontend/src/app/[locale]/home.tsx @@ -14,6 +14,7 @@ export default function Homepage({ data }: HomepageProps) { const heroData = { image: data.hero?.image?.url, + imageCredit: data.hero?.image?.caption ?? null, title: { level: 1 as TitleProps['level'], variant: "big" as TitleProps['variant'], @@ -36,6 +37,7 @@ export default function Homepage({ data }: HomepageProps) { const projects = data.featured_projects?.map(project => ({ id: (project.id ?? "" ).toString(), src: project.thumbnail?.url || '', + credit: project.thumbnail?.caption ?? null, title: project.title || '', alt: project.title || '', description: project.short_description || '', @@ -56,6 +58,7 @@ export default function Homepage({ data }: HomepageProps) { title: event.name || '', date: new Date(event.date || '').toLocaleString(undefined, { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric' }), image: event.image?.url, + imageCredit: event.image?.caption ?? null, tag: [t('events.tag')], link: event.link || '', })).filter(event => event.title && event.link) ?? []; @@ -69,6 +72,7 @@ export default function Homepage({ data }: HomepageProps) { author: isBlog ? ( (resource.blog?.author as { name: string })?.name || t('resources.defaultAuthor')) : (resource.press_release as { media_name: string })?.media_name || '', talk: isBlog ? (resource.blog as { title: string })?.title || '' : (resource.press_release as { title: string })?.title || '', image: isBlog ? resource.blog?.thumbnail?.url || '' : resource.press_release?.thumbnail?.url || '', + imageCredit: isBlog ? (resource.blog?.thumbnail?.caption ?? null) : (resource.press_release?.thumbnail?.caption ?? null), ctaText: isBlog ? t('resources.articleCtaText') : t('resources.pressCtaText'), ctaLink: isBlog ? `/articles/${resource.blog?.slug || ''}` : (resource.press_release as { article_link: string })?.article_link || '', } @@ -87,6 +91,7 @@ export default function Homepage({ data }: HomepageProps) { talk: thematic.short_description || '', talkOffset: 10, image: thematic.thumbnail?.url || '', + imageCredit: thematic.thumbnail?.caption ?? null, ctaText: thematic.cta_text, ctaLink: thematic.cta_link, })).filter(thematic => thematic.talk) ?? []; diff --git a/frontend/src/app/[locale]/projects/[slug]/projectDetail.tsx b/frontend/src/app/[locale]/projects/[slug]/projectDetail.tsx index aa718b68..1635a02e 100644 --- a/frontend/src/app/[locale]/projects/[slug]/projectDetail.tsx +++ b/frontend/src/app/[locale]/projects/[slug]/projectDetail.tsx @@ -58,7 +58,8 @@ function getSlides(project: ProjectPageData) { id: index + 1, description: image.caption, image: image.url, - altImage: image.alternativeText + altImage: image.alternativeText, + credit: image.caption })) || []; } @@ -119,6 +120,7 @@ export default function ProjectDetailPage({ project }: ProjectPageProps) { <> {project.title && - + @@ -42,6 +43,7 @@ export default function SocialPage({ data, thematicsData }: ThematicsProps) { diff --git a/frontend/src/components/molecules/BaseCard/BaseCard.tsx b/frontend/src/components/molecules/BaseCard/BaseCard.tsx index c433f63a..ba90e53f 100644 --- a/frontend/src/components/molecules/BaseCard/BaseCard.tsx +++ b/frontend/src/components/molecules/BaseCard/BaseCard.tsx @@ -1,5 +1,6 @@ import clsx from 'clsx'; import Image from 'next/image'; +import ImageWithCredit from '@/components/molecules/ImageWithCredit'; import { Tag, Title } from '@/components/atoms'; import Link from 'next/link'; @@ -8,6 +9,7 @@ export type BaseCardProps = { title: string; tags?: string[]; image?: string; + imageCredit?: string | null; link: string; subInfos: string[]; className?: string; @@ -18,11 +20,11 @@ const BaseCard: React.FC = ({ title, tags, image, + imageCredit, link, subInfos, className, isBlank = false, - ...props }) => { if (!title || !link) { return null; @@ -38,7 +40,6 @@ const BaseCard: React.FC = ({ rel={isBlank ? 'noreferrer' : undefined} href={link} aria-label={title} - {...props} >
@@ -64,7 +65,7 @@ const BaseCard: React.FC = ({
}
- {image && } + {image && }
diff --git a/frontend/src/components/molecules/CtaWithImage/CtaWithImage.tsx b/frontend/src/components/molecules/CtaWithImage/CtaWithImage.tsx index f7b9e9a2..6d42a9a2 100644 --- a/frontend/src/components/molecules/CtaWithImage/CtaWithImage.tsx +++ b/frontend/src/components/molecules/CtaWithImage/CtaWithImage.tsx @@ -1,5 +1,5 @@ import clsx from 'clsx'; -import Image from 'next/image'; +import ImageWithCredit from '@/components/molecules/ImageWithCredit'; import { Button, Title, TitleProps, TiltedTitle, TiltedTitleProps } from '@/components'; export type CtaWithImageProps = { @@ -10,6 +10,7 @@ export type CtaWithImageProps = { className?: string; }; image?: string; + imageCredit?: string | null; imageClassName?: string; imagePosition?: "left" | "right"; cta: { @@ -26,12 +27,12 @@ const CtaWithImage: React.FC = ({ title, content, image = "/images/default-image.svg", + imageCredit, imageClassName, imagePosition = "right", cta, className, contentClassName, - ...props }) => { if (!cta) { return null; @@ -44,7 +45,6 @@ const CtaWithImage: React.FC = ({ 'relative flex flex-col justify-center items-start min-h-96 md:min-h-[770px]', className, )} - {...props} >
@@ -59,7 +59,7 @@ const CtaWithImage: React.FC = ({ {cta.text}
- +
); }; diff --git a/frontend/src/components/molecules/EditoCard/EditoCard.tsx b/frontend/src/components/molecules/EditoCard/EditoCard.tsx index 996e8c8a..5eb99343 100644 --- a/frontend/src/components/molecules/EditoCard/EditoCard.tsx +++ b/frontend/src/components/molecules/EditoCard/EditoCard.tsx @@ -1,5 +1,5 @@ import clsx from 'clsx'; -import Image from 'next/image'; +import ImageWithCredit from '@/components/molecules/ImageWithCredit'; import { Button, Title, TitleProps } from '@/components'; import { PropsWithChildren } from 'react'; @@ -10,6 +10,7 @@ export type EditoCardProps = PropsWithChildren<{ titleClassName?: string; contentClassName?: string; image?: string; + imageCredit?: string | null; imageClassName?: string; imagePosition?: 'left' | 'right'; imageAlt?: string; @@ -29,6 +30,7 @@ const EditoCard: React.FC = ({ titleClassName, contentClassName = 'prose my-xs', image, + imageCredit, imageClassName = '', imagePosition = 'right', imageAlt = '', @@ -52,7 +54,7 @@ const EditoCard: React.FC = ({ 'container flex flex-col sm:flex-row sm:items-center gap-md', className, )} - {...props} + >
{title && ( @@ -78,7 +80,7 @@ const EditoCard: React.FC = ({ imageClassName, imagePosition === 'left' && 'sm:-order-1', )}> - {imageAlt} + {imageText && (
= ({ + src, + alt = '', + credit, + creditClassName, + className, + ...props +}) => { + const hasCredit = credit && credit.trim() !== ''; + + return ( + <> + {alt} + {hasCredit && ( + + Crédit {credit} + + )} + + ); +}; + +export default ImageWithCredit; diff --git a/frontend/src/components/molecules/ImageWithCredit/index.ts b/frontend/src/components/molecules/ImageWithCredit/index.ts new file mode 100644 index 00000000..5d161587 --- /dev/null +++ b/frontend/src/components/molecules/ImageWithCredit/index.ts @@ -0,0 +1,2 @@ +export { default } from './ImageWithCredit'; +export type { ImageWithCreditProps } from './ImageWithCredit'; diff --git a/frontend/src/components/molecules/ImagesCarousel/ImagesCarousel.tsx b/frontend/src/components/molecules/ImagesCarousel/ImagesCarousel.tsx index c8c6c72f..c40c670f 100644 --- a/frontend/src/components/molecules/ImagesCarousel/ImagesCarousel.tsx +++ b/frontend/src/components/molecules/ImagesCarousel/ImagesCarousel.tsx @@ -1,7 +1,7 @@ import React from 'react'; import clsx from 'clsx'; -import Image from 'next/image'; +import ImageWithCredit from '@/components/molecules/ImageWithCredit'; import { Carousel, CarouselContent, @@ -17,6 +17,7 @@ export type ImagesCarouselProps = { id: string | number; src: string; alt?: string; + credit?: string | null; title?: string; description?: string; ctaText?: string; @@ -95,9 +96,10 @@ const ImagesCarousel: React.FC = React.memo(({ key={image.id} className="grid grid-cols-1 grid-rows-[5rem_1fr_5rem] h-[700px] bg-black text-white" > - {image.alt = ({ content, iframe, image, + imageCredit, ctaText, ctaLink, citation, @@ -42,7 +45,7 @@ const LargeTextImage: React.FC = ({
= ({ internalClassName, )} > - {image && } + {image && }
{title && {title}} diff --git a/frontend/src/components/molecules/MemberCard/MemberCard.tsx b/frontend/src/components/molecules/MemberCard/MemberCard.tsx index eb337432..07176354 100644 --- a/frontend/src/components/molecules/MemberCard/MemberCard.tsx +++ b/frontend/src/components/molecules/MemberCard/MemberCard.tsx @@ -1,5 +1,5 @@ import clsx from 'clsx'; -import Image from 'next/image'; +import ImageWithCredit from '@/components/molecules/ImageWithCredit'; import { TiltedTitle } from '@/components'; import Link from 'next/link'; @@ -7,6 +7,7 @@ export type MemberCardProps = { name: string; role: string; image?: string; + imageCredit?: string | null; linkedin?: string; className?: string; }; @@ -15,6 +16,7 @@ const MemberCard: React.FC = ({ name, role, image, + imageCredit, linkedin, className, ...props @@ -30,9 +32,9 @@ const MemberCard: React.FC = ({ className, !linkedin && "shadow-block shadow-block--black" )} - {...props} + > - {image && } + {image && }
{name}

{role}

diff --git a/frontend/src/components/molecules/NewsSmallCard/NewsSmallCard.tsx b/frontend/src/components/molecules/NewsSmallCard/NewsSmallCard.tsx index df485156..bfabc44e 100644 --- a/frontend/src/components/molecules/NewsSmallCard/NewsSmallCard.tsx +++ b/frontend/src/components/molecules/NewsSmallCard/NewsSmallCard.tsx @@ -1,5 +1,6 @@ import clsx from 'clsx'; import Image from 'next/image'; +import ImageWithCredit from '@/components/molecules/ImageWithCredit'; import { Tag } from '@/components/atoms'; import Link from 'next/link'; @@ -8,6 +9,7 @@ export type NewsSmallCardProps = { title?: string; tags: string[]; image?: string; + imageCredit?: string | null; link: string; date: string; className?: string; @@ -17,6 +19,7 @@ const NewsSmallCard: React.FC = ({ title, tags, image, + imageCredit, link, date, className, @@ -34,11 +37,11 @@ const NewsSmallCard: React.FC = ({ )} href={link} aria-label={title} - {...props} + >
{image &&
- +
}
{tags?.map((tag) => ({tag}))} diff --git a/frontend/src/components/molecules/PartnerCard/PartnerCard.tsx b/frontend/src/components/molecules/PartnerCard/PartnerCard.tsx index 1cc0da01..b6b59f57 100644 --- a/frontend/src/components/molecules/PartnerCard/PartnerCard.tsx +++ b/frontend/src/components/molecules/PartnerCard/PartnerCard.tsx @@ -1,5 +1,5 @@ import clsx from 'clsx'; -import Image from 'next/image'; +import ImageWithCredit from '@/components/molecules/ImageWithCredit'; import Link from 'next/link'; import { Title, TitleProps } from '@/components'; @@ -8,6 +8,7 @@ export type PartnerCardProps = { titleLevel?: TitleProps['level']; description?: string; image?: string; + imageCredit?: string | null; link: string; className?: string; }; @@ -17,6 +18,7 @@ const PartnerCard: React.FC = ({ titleLevel = 3, description, image = "/images/default-image.svg", + imageCredit, link, className, ...props @@ -33,10 +35,10 @@ const PartnerCard: React.FC = ({ )} href={link} aria-label={name} - {...props} + >
- +
{name} {description &&

{description}

} diff --git a/frontend/src/components/molecules/ProjectCarousel/ProjectCarousel.tsx b/frontend/src/components/molecules/ProjectCarousel/ProjectCarousel.tsx index 3c9d80a2..89f00b1b 100644 --- a/frontend/src/components/molecules/ProjectCarousel/ProjectCarousel.tsx +++ b/frontend/src/components/molecules/ProjectCarousel/ProjectCarousel.tsx @@ -1,7 +1,7 @@ import React from 'react'; import clsx from 'clsx'; -import Image from 'next/image'; +import ImageWithCredit from '@/components/molecules/ImageWithCredit'; import { Carousel, CarouselContent, @@ -20,6 +20,7 @@ export type ProjectCarouselProps = { description: string; image?: string; altImage?: string; + credit?: string | null; }>; className?: string; carouselClassName?: string; @@ -82,9 +83,10 @@ const ProjectCarousel: React.FC = ({ index !== current ? "bg-violet-light/80 px-0 py-0 h-[460px]" : "z-1 shadow-lg", )} > - {slide.altImage = ({ description, thematics, image, + imageCredit, className, ...props }) => { @@ -32,9 +34,9 @@ const ProjectListCard: React.FC = ({ 'relative grid grid-cols-1 grid-rows-1 h-[360px] shadow-lg', className )} - {...props} + > - {image && } + {image && }
{thematics.map((thematic, index) => (
))} diff --git a/frontend/src/components/molecules/TalkCard/TalkCard.tsx b/frontend/src/components/molecules/TalkCard/TalkCard.tsx index 08a86409..86e5d120 100644 --- a/frontend/src/components/molecules/TalkCard/TalkCard.tsx +++ b/frontend/src/components/molecules/TalkCard/TalkCard.tsx @@ -1,11 +1,12 @@ import clsx from 'clsx'; -import Image from 'next/image'; +import ImageWithCredit from '@/components/molecules/ImageWithCredit'; import { Button } from '@/components'; export type TalkCardProps = { author: string; talk: string; image?: string; + imageCredit?: string | null; ctaText?: string; ctaLink?: string; className?: string; @@ -17,6 +18,7 @@ const TalkCard: React.FC = ({ author, talk, image = "/images/default-image.svg", + imageCredit, ctaText, ctaLink, className, @@ -34,7 +36,7 @@ const TalkCard: React.FC = ({ 'flex flex-col sm:flex-row sm:items-center gap-md py-md max-w-4xl', className, )} - {...props} + >
= ({ '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', )}> - ; className?: string; }; @@ -63,7 +64,7 @@ const TestimoniesCarousel: React.FC = ({ >
- + {testimony.author} diff --git a/frontend/src/components/molecules/ThumbnailProject/ThumbnailProject.tsx b/frontend/src/components/molecules/ThumbnailProject/ThumbnailProject.tsx index 45e499ff..d40c8c22 100644 --- a/frontend/src/components/molecules/ThumbnailProject/ThumbnailProject.tsx +++ b/frontend/src/components/molecules/ThumbnailProject/ThumbnailProject.tsx @@ -1,11 +1,15 @@ import clsx from 'clsx'; import Image from 'next/image'; +import ImageWithCredit from '@/components/molecules/ImageWithCredit'; import { Button, TiltedTitle, TiltedTitleProps, Title, TitleProps } from '@/components'; import { useTranslations } from 'next-intl'; export type ThumbnailProjectProps = { name: TiltedTitleProps; - images?: string[]; + images?: Array<{ + src: string; + credit?: string | null; + }> | string[]; link: string; company?: string; description?: string; @@ -38,11 +42,15 @@ const ThumbnailProject: React.FC = ({
{name.children} {images?.length &&
- {images.map((image, index) => ( -
- -
- ))} + {images.map((image, index) => { + const src = typeof image === 'string' ? image : image.src; + const credit = typeof image === 'string' ? null : image.credit; + return ( +
+ +
+ ); + })}
} {company && {company}} {description &&

{description}

} diff --git a/frontend/src/components/organisms/ArticleHeroBlock/ArticleHeroBlock.tsx b/frontend/src/components/organisms/ArticleHeroBlock/ArticleHeroBlock.tsx index a9732a55..d30c19e7 100644 --- a/frontend/src/components/organisms/ArticleHeroBlock/ArticleHeroBlock.tsx +++ b/frontend/src/components/organisms/ArticleHeroBlock/ArticleHeroBlock.tsx @@ -1,11 +1,12 @@ import clsx from 'clsx'; -import Image from 'next/image' +import ImageWithCredit from '@/components/molecules/ImageWithCredit'; import { TiltedTitle } from '@/components/atoms'; import { useTranslations } from 'next-intl'; import Link from 'next/link'; export type ArticleHeroBlockProps = { image?: string; + imageCredit?: string | null; title: string; introduction?: string; date: string; @@ -19,13 +20,13 @@ export type ArticleHeroBlockProps = { const ArticleHeroBlock: React.FC = ({ image = "/images/default-image.svg", + imageCredit, title, introduction, date, readTime, author, className, - ...props }) => { const t = useTranslations('components.articleHeroBlock'); @@ -39,11 +40,10 @@ const ArticleHeroBlock: React.FC = ({ '', className, )} - {...props} >
{image &&
- +
}
{title} diff --git a/frontend/src/components/organisms/HeroBlock/HeroBlock.tsx b/frontend/src/components/organisms/HeroBlock/HeroBlock.tsx index 7d301e84..006236fb 100644 --- a/frontend/src/components/organisms/HeroBlock/HeroBlock.tsx +++ b/frontend/src/components/organisms/HeroBlock/HeroBlock.tsx @@ -1,9 +1,10 @@ import clsx from 'clsx'; -import Image from 'next/image' +import ImageWithCredit from '@/components/molecules/ImageWithCredit'; import { TiltedTitle, TiltedTitleProps } from '@/components/atoms'; export type HeroBlockProps = { image?: string; + imageCredit?: string | null; title: TiltedTitleProps; subtitle?: TiltedTitleProps; talk?: string; @@ -12,11 +13,11 @@ export type HeroBlockProps = { const HeroBlock: React.FC = ({ image, + imageCredit, title, subtitle, talk, className, - ...props }) => { if (!title.children) { return null; @@ -28,10 +29,9 @@ const HeroBlock: React.FC = ({ 'container max-sm:px-0 grid grid-cols-1 grid-rows-[100px_1fr] md:grid-rows-[200px_1fr_200px] md:grid-cols-2 min-h-[850px] h-screen', className, )} - {...props} > {image &&
- +
}
diff --git a/frontend/src/components/organisms/ProjectHeroBlock/ProjectHeroBlock.tsx b/frontend/src/components/organisms/ProjectHeroBlock/ProjectHeroBlock.tsx index c81920eb..e3279e30 100644 --- a/frontend/src/components/organisms/ProjectHeroBlock/ProjectHeroBlock.tsx +++ b/frontend/src/components/organisms/ProjectHeroBlock/ProjectHeroBlock.tsx @@ -1,11 +1,12 @@ import clsx from 'clsx'; -import Image from 'next/image' +import ImageWithCredit from '@/components/molecules/ImageWithCredit'; import { TiltedTitle } from '@/components/atoms'; import { useTranslations } from 'next-intl'; import Link from 'next/link'; export type ProjectHeroBlockProps = { image?: string; + imageCredit?: string | null; title: string; introduction?: string; className?: string; @@ -13,10 +14,10 @@ export type ProjectHeroBlockProps = { const ProjectHeroBlock: React.FC = ({ image = "/images/default-image.svg", + imageCredit, title, introduction, className, - ...props }) => { if (!title) { return null; @@ -28,10 +29,9 @@ const ProjectHeroBlock: React.FC = ({ "grid grid-cols-1 grid-rows-1 min-h-[400px] h-screen mask-papper", className, )} - {...props} >
- +
{title} diff --git a/frontend/src/components/organisms/ThematicHeroBlock/ThematicHeroBlock.tsx b/frontend/src/components/organisms/ThematicHeroBlock/ThematicHeroBlock.tsx index f3922213..1382c6cd 100644 --- a/frontend/src/components/organisms/ThematicHeroBlock/ThematicHeroBlock.tsx +++ b/frontend/src/components/organisms/ThematicHeroBlock/ThematicHeroBlock.tsx @@ -1,9 +1,10 @@ import clsx from 'clsx'; -import Image from 'next/image' +import ImageWithCredit from '@/components/molecules/ImageWithCredit'; import { TiltedTitle, TiltedTitleProps } from '@/components/atoms'; export type ThematicHeroBlockProps = { image?: string; + imageCredit?: string | null; title: string; className?: string; titleClassName?: string; @@ -12,11 +13,11 @@ export type ThematicHeroBlockProps = { const ThematicHeroBlock: React.FC = ({ image = "/images/default-image.svg", + imageCredit, title, className, titleClassName, colors = "alive", - ...props }) => { if (!title) { return null; @@ -35,10 +36,9 @@ const ThematicHeroBlock: React.FC = ({ 'container grid grid-rows-1 grid-cols-1', className, )} - {...props} >
- +
{title}