Merge pull request #354 from dataforgoodfr/feat/donation_banner

Feat/donation banner

Author: remiriv

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

frontend/public/images/confettis-banner.svg

@@ -145,7 +145,7 @@ const Header = () => {
 
   return (
     <header className={clsx(
-      "fixed top-0 left-0 w-full z-50 transition-colors duration-300",
+      "sticky top-0 left-0 w-full z-50 transition-colors duration-300",
       isScrolled && "bg-white"
     )}>
       <nav
@@ -215,7 +215,7 @@ const Header = () => {
             <ul
               role="menu"
               aria-label={t('header.nav.top.label')}
-              className="flex flex-col lg:flex-row gap-4 lg:gap-2 p-4 lg:p-0"
+              className="inline-flex lg:flex flex-col lg:flex-row gap-4 lg:gap-2 p-4 lg:p-0"
               onKeyDown={handleFocusNav}
             >
               {Object.keys(topNav).map(link => (

frontend/src/app/[locale]/_partials/header.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' }}
       >
         <NextIntlClientProvider>
+          <CampaignBanner/>
           <Header />
           <main className="flex-1">
             {children}

frontend/src/app/[locale]/layout.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<CampaignBannerProps> = ({
+  className,
+  ...props
+}) => {
+  const t = useTranslations('layout');
+  const cta_link = usePathLocale('/donations')
+
+  return (
+    <div
+      className={clsx(
+        'relative justify-center items-center text-white bg-building',
+        className,
+      )}
+      {...props}
+    >
+      <Image
+        src="/images/confettis-banner.svg"
+        alt=""
+        width={1000}
+        height={1000}
+        loading="lazy"
+        className="absolute top-0 left-0 w-full h-full opacity-90 object-cover z-1"
+      />
+      <div className="w-full relative lg:justify-start justify-between flex flex-row w-full z-2 pl-6 pr-2 md:pr-6 py-4 lg:py-2 text-left  items-center lead">
+        <p className='uppercase text-sm font-black max-md:hidden'>{t(`header.banner.top.desktopText`)}</p>
+        <p className='uppercase text-sm font-black md:hidden'>{t(`header.banner.top.mobileText`)}</p>
+        <Link
+          href={cta_link}
+          data-ref={cta_link}
+          className={clsx(
+            'flex items-center z-10 gap-2 ml-5 px-4 py-0.5',
+            'bg-white',
+            'font-primary font-black tracking-widest uppercase text-black text-xs shadow-base',
+          )}
+        >
+          <span>{t(`header.banner.top.cta`)}</span>
+          <ArrowIcon />
+        </Link>
+
+
+      </div>
+    </div>
+  );
+};
+
+export default CampaignBanner;

frontend/src/components/molecules/CampaignBanner/CampaignBanner.tsx

@@ -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';