diff --git a/public/locales/en/donationBanner.json b/public/locales/en/donationBanner.json
index f83dfb94d..27df9d740 100644
--- a/public/locales/en/donationBanner.json
+++ b/public/locales/en/donationBanner.json
@@ -1,8 +1,6 @@
{
- "title": "AletheiaFact {{date}} Donation Campaign",
- "paragraph": "AletheiaFact.org works to combat misinformation and strengthen fact-checking. With your donation, you support the movement against FAKE NEWS, ensuring reliable information reaches you.",
- "donateButton": "Donate to aletheia",
- "showButton": "Show",
- "hideButton": "Hide"
-
+ "title": "AletheiaFact.org needs you to survive",
+ "paragraph": "AletheiaFact.org is unique and relies on the community. No ads, no subscriptions, we are driven by the passion to ensure free and reliable access to information. With your help, we continue to be a trusted reference. Our strength lies in the community – and that includes you. Today, we ask you to support us in this commitment to the truth. Show Brazil that reliable and impartial information is essential and that you stand with us in this mission. Donate now and help strengthen the fight against misinformation. Even a small donation makes a big difference. This is the time to act so that together, we can promote more democratic journalism and fight misinformation. Thank you for believing in AletheiaFact.org.",
+ "yesDonateButton": "I want to contribute!",
+ "noDonateButton": "I don't want to donate"
}
diff --git a/public/locales/pt/donationBanner.json b/public/locales/pt/donationBanner.json
index 0922aaeda..ea445916b 100644
--- a/public/locales/pt/donationBanner.json
+++ b/public/locales/pt/donationBanner.json
@@ -1,8 +1,6 @@
{
- "title": "Campanha doação AletheiaFact {{date}}",
- "paragraph": "A AletheiaFact.org trabalha para combater a desinformação e fortalecer a checagem de fatos. Com sua doação, você apoia o movimento contra FAKE NEWS e informações confiáveis cheguem a você.",
- "donateButton": "Doe para aletheia",
- "showButton": "Mostrar",
- "hideButton": "Ocultar"
-
+ "title": "A AletheiaFact.org precisa de você para sobreviver",
+ "paragraph": "A AletheiaFact.org é única e depende da comunidade. Sem anúncios, sem assinaturas, somos movidos pela paixão de garantir acesso livre e confiável à informação. Com sua ajuda, continuamos sendo um referencial de confiança. Nossa força está na comunidade – e isso inclui você. Hoje, pedimos que nos apoie nesse compromisso com a verdade. Mostre ao Brasil que informações confiáveis e imparciais são essenciais e que você está ao nosso lado nessa missão. Doe agora e ajude a fortalecer o combate à desinformação. Mesmo uma doação pequena faz uma grande diferença. Este é o momento de agir para que, juntos, possamos promover um jornalismo mais democrático e combater a desinformação. Obrigado por acreditar na AletheiaFact.org.",
+ "yesDonateButton": "Quero contribuir!",
+ "noDonateButton": "Não quero doar"
}
diff --git a/src/components/Home/DonationBanner.style.tsx b/src/components/Home/DonationBanner.style.tsx
index 7c52183e9..59c5459c6 100644
--- a/src/components/Home/DonationBanner.style.tsx
+++ b/src/components/Home/DonationBanner.style.tsx
@@ -1,43 +1,45 @@
import styled from "styled-components";
import colors from "../../styles/colors";
import { Col } from "antd";
+import { queries } from "../../styles/mediaQueries";
const DonationBannerStyle = styled(Col)`
- background-color: ${colors.quartiary};
+ background-color: ${colors.inactive};
- .show-banner {
- color: ${colors.white};
- font-size: 13px;
- border: none;
- background-color: ${colors.blackTertiary};
- font-weight: 600;
- cursor: pointer;
+ .close-banner {
+ color: ${colors.primary};
+ font-size: 25px;
align-self: flex-end;
position: absolute;
right: 10px;
- bottom: -25px;
+ top: -10px;
z-index: 1;
}
.banner-content {
display: flex;
+ margin: 25px auto;
flex-direction: column;
align-items: center;
- padding: 20px 0px;
+ max-width: 60%;
+ gap: 20px;
+ }
+ .banner-buttons {
+ display: flex;
+ gap: 30px;
}
.banner-content > h1 {
width: 100%;
- color: ${colors.black};
+ color: ${colors.primary};
font-size: 26px;
- line-height: 34px;
font-weight: 800;
text-align: center;
}
.banner-content > p {
- color: ${colors.blackTertiary};
+ color: ${colors.black};
font-size: 16px;
font-weight: 600;
line-height: 24px;
@@ -45,7 +47,23 @@ const DonationBannerStyle = styled(Col)`
}
.banner-button {
- font-weight: 600;
+ font-weight: 700;
+ }
+
+ @media ${queries.md} {
+ .banner-content {
+ max-width: 80%;
+ }
+ }
+
+ @media ${queries.xs} {
+ .banner-content > h1 {
+ font-size: 20px;
+ }
+
+ .banner-content > p {
+ font-size: 12px;
+ }
}
`;
diff --git a/src/components/Home/DonationBanner.tsx b/src/components/Home/DonationBanner.tsx
index b2565379e..0f2370315 100644
--- a/src/components/Home/DonationBanner.tsx
+++ b/src/components/Home/DonationBanner.tsx
@@ -1,33 +1,44 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
import DonationBannerContent from "./DonationBanner/DonationBannerContent";
import DonationBannerStyle from "./DonationBanner.style";
import { Col } from "antd";
-import { useTranslation } from "next-i18next";
+import Cookies from "js-cookie";
+import CloseOutlined from "@mui/icons-material/CloseOutlined";
+
+const closeBanner = (onClose) => {
+ onClose();
+ Cookies.set("cta_donation_banner_show", "false");
+};
const DonationBanner = () => {
- const { t } = useTranslation();
- const [isBannerVisible, setIsBannerVisible] = useState(true);
const enableDonationBanner = process.env.NEXT_PUBLIC_ENABLE_BANNER_DONATION === "true";
- const handleToggleBanner = () => {
- setIsBannerVisible((prev) => !prev);
- }
+ const [showDonationBanner, setDonationBanner] = useState(true);
+
+ useEffect(() => {
+ const BannerCookies = Cookies.get("cta_donation_banner_show") || true;
+ if (BannerCookies === true || BannerCookies === "true") {
+ return setDonationBanner(true);
+ }
+ setDonationBanner(false);
+ }, []);
- if (!enableDonationBanner){
+ if (!enableDonationBanner) {
return null
};
- return (
+ return showDonationBanner && (