Deprecated banner

components/blocks/deprecated-banner.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@components/elements/button'
+import styled from 'styled-components'
+
+export const DeprecatedBanner = () => {
+  const { i18n } = useTranslation()
+
+  return (
+    <DeprecatedBannerDiv>
+      <CenterDiv>
+        <div>
+          <h2>{i18n.t('home.announcementTitle2')}</h2>
+          <DeprecatedText>
+            {i18n.t('home.announcementText2')}
+          </DeprecatedText>
+        </div>
+
+        <ActionsContainer>
+          <Button positive href="https://app.vocdoni.io">
+            {i18n.t('home.request_access2')}
+          </Button>
+        </ActionsContainer>
+      </CenterDiv>
+    </DeprecatedBannerDiv>
+  )
+}
+
+const CenterDiv = styled.div`
+  max-width: 1400px;
+  margin:0px auto;
+  display: flex;
+  flex-direction: row;
+
+  @media ${({ theme }) => theme.screenMax.tablet} {
+    flex-direction: column;
+  }
+`
+
+const ActionsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  & > a {
+    margin:0px auto;
+    min-width: 200px;
+    margin-left: 20px;
+
+    & div {
+      width: 300px;
+      padding-left:0px;
+    }
+  }
+`
+
+const DeprecatedBannerDiv = styled.div`
+  position: relative;
+  top:0;
+  left:0;
+  width: 100%;
+  border: 3px solid #fff;
+  background-color: #fff;
+  margin: 0px auto;
+  background: linear-gradient(101.89deg,rgb(255, 223, 223) 17.32%,rgb(255, 248, 225) 68.46%);
+  padding: 20px 40px;
+  box-shadow: rgba(180, 193, 228, 0.35) 0px 3px 3px;
+  display:flex;
+
+  & h2 {
+    text-align: left;
+    font-size: 22px;
+    margin-top: 5px;
+  }
+`
+const DeprecatedText = styled.p`
+  font-size: 18px;
+  color: rgb(13, 71, 82);
+  margin-bottom: 20px;
+  text-align: left;
+  max-width: 850px;
+`

components/pages/app/header/header.tsx

@@ -125,8 +125,7 @@ const HeaderContainer = styled.div`
   width: 100%;
   z-index: 100;
   min-height: 50px;
-  position: fixed;
-  top: 0;
+  top: 50px;
   padding: 10px 0 10px;
 
   backdrop-filter: blur(10px);

components/pages/app/layout-v2/default.tsx

@@ -16,6 +16,7 @@ const LayoutContainer = styled.div<{isHomePage?: boolean}>`
   ${({isHomePage}) => isHomePage? '': `max-width: ${sizes.laptopL}px;` }
   margin-left: auto;
   margin-right: auto;
+  margin-top: -72px;
 
   @media ${({ theme }) => theme.screenMin.tablet} {
     ${({isHomePage, theme}) => isHomePage? 'padding: 110px 0;': `padding: 110px ${theme.margins.desktop.horizontal} 120px;`}

components/pages/app/layout-v2/entity.tsx

@@ -15,6 +15,7 @@ const LayoutContainer = styled.div`
   max-width: ${sizes.laptopL}px;
   margin-left: auto;
   margin-right: auto;
+  margin-top: -72px;
 
   @media ${({ theme }) => theme.screenMin.tablet} {
     ${({ theme }) => `padding: 110px ${theme.margins.desktop.horizontal} 120px;`}

components/pages/app/layout/default.tsx

@@ -17,6 +17,7 @@ const LayoutContainer = styled.div<{isHomePage?: boolean}>`
   margin-left: auto;
   margin-right: auto;
   width:100%;
+  margin-top: -72px;
 
   @media ${({ theme }) => theme.screenMin.tablet} {
     ${({isHomePage, theme}) => isHomePage? 'padding: 110px 0;': `padding: 110px ${theme.margins.desktop.horizontal} 120px;`}

components/pages/app/layout/entity.tsx

@@ -15,6 +15,7 @@ const LayoutContainer = styled.div`
   max-width: ${sizes.laptopL * 0.8}px;
   margin-left: auto;
   margin-right: auto;
+  margin-top: -72px;
 
   @media ${({ theme }) => theme.screenMin.tablet} {
     ${({ theme }) => `padding: 110px ${theme.margins.desktop.horizontal} 120px;`}

i18n/locales/ca.json

@@ -330,6 +330,8 @@
         "all_you_have_to_do_is_email_entire_social_base": "Tot el que has de fer és enviar un correu electrònic a la teva massa social amb l'enllaç per accedir al procés de votació",
         "announcementText": "L'API de Vocdoni permet un accés fàcil i sense problemes a la infraestructura de votació. Juntament amb l'SDK, podreu integrar sense fricció Vocdoni al vostre programari.",
         "announcementTitle": "Anunci: llançament de la nova API/SDK de Vocdoni",
+        "announcementText2": "Aquesta versió de l'app Vocdoni quedarà obsoleta aviat (el 15/09/23) en favor d'una nova versió millorada: més fàcil d'utilitzar, amb inici de sessió social, votació anònima i moltes altres característiques.",
+        "announcementTitle2": "Anunci - Llançament de la nova app Vocdoni v2",
         "anonymous_image_alt": "Anònim",
         "as_an_organization_wat_cant_i_do_with_vocdoni": "Com a organització, què puc fer amb Vocdoni?",
         "as_easy_as_drag_and_drop": "Tan senzill com arrossegar i deixar anar",
@@ -381,6 +383,7 @@
         "pirates_logo_alt": "Logo Pirates",
         "ready_to_start": "A punt per començar?",
         "request_access": "Demaneu accés ara!",
+        "request_access2": "Visita la v2 de Vocdoni App ara!",
         "scalable_image_alt": "Escalable",
         "secure_image_alt": "Segur",
         "secure_voting": "Vot segur",

i18n/locales/en.json

@@ -330,6 +330,8 @@
         "all_you_have_to_do_is_email_entire_social_base": "All you have to do is e-mail your entire social base with the link to access the voting process.",
         "announcementText": "The Vocdoni API enables easy and seamless access to the voting infrastructure. Along with the SDK you will be able to integrate without friction Vocdoni into your software.",
         "announcementTitle": "Announcement - New Vocdoni API/SDK launch",
+        "announcementText2": "This version of the Vocdoni App will be deprecated soon (on 09/15/23) in favor of a new and improved version: easier to use, with social login, anonymous voting, and many more features.",
+        "announcementTitle2": "Announcement - New Vocdoni App v2 launch",
         "anonymous_image_alt": "Anonymous",
         "as_an_organization_wat_cant_i_do_with_vocdoni": "As an Organization, what can I do with Vocdoni?",
         "as_easy_as_drag_and_drop": "As easy as drag&drop",
@@ -381,6 +383,7 @@
         "pirates_logo_alt": "Pirates logo",
         "ready_to_start": "Ready to start? ",
         "request_access": "Request early access now!",
+        "request_access2": "Check Vocdoni App v2 now!",
         "scalable_image_alt": "Scalable",
         "secure_image_alt": "Secure",
         "secure_voting": "Secure voting",

i18n/locales/es.json

@@ -330,6 +330,8 @@
         "all_you_have_to_do_is_email_entire_social_base": "Todo lo que tienes que hacer es enviar un correo electrónico a tu masa social con el enlace para acceder al proceso de votación.",
         "announcementText": "La API de Vocdoni permite un acceso fácil y sin problemas a la infraestructura de votación. Junto con el SDK podrás integrar sin fricciones Vocdoni en tu software.",
         "announcementTitle": "Anuncio - Lanzamiento de la nueva API/SDK de Vocdoni",
+        "announcementText2": "Esta versión de la app Vocdoni quedará obsoleta próximamente (el 15/09/23) en favor de una nueva y mejorada versión: más fácil de usar, con inicio de sesión social, votación anónima y muchas más funciones.",
+        "announcementTitle2": "Anuncio - Lanzamiento de la nueva app v2 de Vocdoni",
         "anonymous_image_alt": "Anónimo",
         "as_an_organization_wat_cant_i_do_with_vocdoni": "Como organización, ¿qué puedo hacer con Vocdoni?",
         "as_easy_as_drag_and_drop": "Tan fácil como arrastrar y soltar",
@@ -381,6 +383,7 @@
         "pirates_logo_alt": "Logo Pirates",
         "ready_to_start": "¿A punto para empezar?",
         "request_access": "¡Solicite acceso anticipado ahora!",
+        "request_access2": "Visita la v2 de Vocdoni App ahora!",
         "scalable_image_alt": "Escalable",
         "secure_image_alt": "Seguro",
         "secure_voting": "Voto seguro",

pages/_app.tsx

@@ -20,6 +20,7 @@ import { DefaultProviders } from '@components/pages/app/providers/default-provid
 import { Helpscout } from '@components/pages/app/external-dependencies/helpscout'
 import { Ruddlestack } from '@components/pages/app/external-dependencies/ruddlestack'
 import { CookiesBanner } from '@components/blocks/cookies-banner'
+import { DeprecatedBanner } from '@components/blocks/deprecated-banner'
 import { useTranslation } from 'react-i18next'
 
 type NextAppProps = AppInitialProps & {
@@ -43,6 +44,7 @@ const VocdoniApp: FC<NextAppProps> = ({ Component, pageProps }) => {
     <RecoilRoot>
       <ThemeContextProvider>
         <Providers>
+          <DeprecatedBanner />
           <FixedGlobalStyle />
 
           <Head>