diff --git a/frontend/messages/fr/layout.json b/frontend/messages/fr/layout.json index f05cf407..f52f2567 100644 --- a/frontend/messages/fr/layout.json +++ b/frontend/messages/fr/layout.json @@ -2,6 +2,13 @@ "layout": { "header": { "title": "Data For Good, accueil", + "banner": { + "top": { + "desktopText": "Campagne de dons en cours", + "mobileText":"Campagne de dons en cours", + "cta": "Participer" + } + }, "nav": { "toggle": { "alt": "Principale", diff --git a/frontend/public/images/confettis-banner.svg b/frontend/public/images/confettis-banner.svg new file mode 100644 index 00000000..a5b65bc8 --- /dev/null +++ b/frontend/public/images/confettis-banner.svg @@ -0,0 +1,910 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/[locale]/_partials/header.tsx b/frontend/src/app/[locale]/_partials/header.tsx index 174c4d40..1c0e31a5 100644 --- a/frontend/src/app/[locale]/_partials/header.tsx +++ b/frontend/src/app/[locale]/_partials/header.tsx @@ -145,7 +145,7 @@ const Header = () => { return ( { {Object.keys(topNav).map(link => ( diff --git a/frontend/src/app/[locale]/layout.tsx b/frontend/src/app/[locale]/layout.tsx index 63794aa7..d2711f17 100644 --- a/frontend/src/app/[locale]/layout.tsx +++ b/frontend/src/app/[locale]/layout.tsx @@ -8,7 +8,7 @@ import { routing } from '@/i18n/routing'; import Footer from './_partials/footer'; import Header from './_partials/header'; import './globals.css'; -import { NewsletterBlock } from '@/components'; +import { CampaignBanner, NewsletterBlock } from '@/components'; const dmMono = DM_Mono({ subsets: ['latin'], @@ -87,6 +87,7 @@ export default async function RootLayout({ style={{ backgroundSize: '100vw 100vh' }} > + {children} diff --git a/frontend/src/components/molecules/CampaignBanner/CampaignBanner.tsx b/frontend/src/components/molecules/CampaignBanner/CampaignBanner.tsx new file mode 100644 index 00000000..c81e1e1f --- /dev/null +++ b/frontend/src/components/molecules/CampaignBanner/CampaignBanner.tsx @@ -0,0 +1,57 @@ +import { ArrowIcon, Button } from '@/components/atoms'; +import { usePathLocale } from '@/hooks/usePathLocale'; +import clsx from 'clsx'; +import { useTranslations } from 'next-intl'; +import Image from "next/image" +import Link from 'next/link'; + +export type CampaignBannerProps = { + className?: string; +}; + +const CampaignBanner: React.FC = ({ + className, + ...props +}) => { + const t = useTranslations('layout'); + const cta_link = usePathLocale('/donations') + + return ( + + + + {t(`header.banner.top.desktopText`)} + {t(`header.banner.top.mobileText`)} + + {t(`header.banner.top.cta`)} + + + + + + + ); +}; + +export default CampaignBanner; diff --git a/frontend/src/components/molecules/index.ts b/frontend/src/components/molecules/index.ts index 8ac30b11..4509d424 100644 --- a/frontend/src/components/molecules/index.ts +++ b/frontend/src/components/molecules/index.ts @@ -49,3 +49,6 @@ export type { BannerVideoProps } from './BannerVideo/BannerVideo'; export { default as LargeTextImageDonation } from './LargeTextImageDonation/LargeTextImageDonation'; export type { LargeTextImageDonationProps } from './LargeTextImageDonation/LargeTextImageDonation'; + +export { default as CampaignBanner } from './CampaignBanner/CampaignBanner'; +export type { CampaignBannerProps } from './CampaignBanner/CampaignBanner';
{t(`header.banner.top.desktopText`)}
{t(`header.banner.top.mobileText`)}