Merge pull request #16 from DemocraciaEnRed/main

Deploy New Version!

src/app/abc/page.tsx

@@ -30,22 +30,22 @@ const page = () => {
             </section>
             <section className="py-[6vw] md:py-[3vw] px-8 sm:px-[65px] md:px-[130px] bg-gray-100 text-der-black text-lg">
                 <h2 className="font-nippo text-2xl sm:text-3xl font-bold uppercase">recursos útiles</h2>
-                <div className='flex flex-col justify-center items-center bg-white text-black shadow-md rounded-lg my-[3vw] p-6 gap-5'>
+                <div className='flex flex-col justify-center items-center bg-white text-black shadow-xl rounded-lg my-[3vw] p-6 gap-5'>
                     <p className='text-xl font-bold'>AMPARO</p>
                     <Image
                         alt="icon"
                         src={amparoIcon}
                         height={96}
                         width={96}
                     />
-                    <p className='text-xl font-nippo'>
+                    <p className='text-center text-xl font-nippo'>
                         Presentamos un amparo colectivo solicitando el pronunciamiento de inconstitucionalidad de la DA 431/2020 y de determinados artículos de Ley de Datos Personales (art. 5, inc. 2 ap. b - ley 25.326) y solicitando se dicte una medida cautelar que ordena la suspensión de lo que disponen. Estas normas habilitan la transferencia de los datos personales de los ciudadanos entre todas las dependencias de la Administración pública, sin contar con el consentimiento expreso de sus titulares para su tratamiento.
                     </p>
                     <div className='flex justify-center items-center gap-5 flex-wrap'>
-                        <a href="https://drive.google.com/file/d/1E98MIeIvUPRuz2jz_EODQy4TKd3Xahnw/view" type="button" className="border-2 border-[#CC4356] rounded-xl p-2 bg-[#CC4356] text-white w-[295px] text-center font-bold uppercase">
+                        <a href="https://drive.google.com/file/d/1E98MIeIvUPRuz2jz_EODQy4TKd3Xahnw/view" type="button" target='_blank' className="border-2 border-[#CC4356] rounded-xl p-2 bg-[#CC4356] text-white w-[295px] text-center font-bold uppercase">
                             descargar amparo
                         </a>
-                        <a href="https://drive.google.com/file/d/1kw6bYhov5m9-YloW4B5_d8OiasdJzIwO/view" type="button" className="border-2 border-[#CC4356] rounded-xl p-2 bg-[#CC4356] text-white w-[295px] text-center font-bold uppercase">
+                        <a href="https://drive.google.com/file/d/1kw6bYhov5m9-YloW4B5_d8OiasdJzIwO/view" type="button" target='_blank' className="border-2 border-[#CC4356] rounded-xl p-2 bg-[#CC4356] text-white w-[295px] text-center font-bold uppercase">
                             descargar gacetilla
                         </a>
                     </div>

src/app/about/page.tsx

@@ -29,12 +29,15 @@ const About = () => {
         }]
     return (
         <main className="bg-gray-100 text-der-black font-open-sans">
-            <header className="p-[6vw] md:p-[3vw] border-b-2 border-b-der-black">
-                <h1 className="font-nippo text-4xl font-bold uppercase">¿qué queremos?</h1>
-                <p className="my-7 md:w-[65vw] lg:w-[55vw] text-xl">Queremos que el Estado asegure estándares de ciberseguridad y que atienda a las alarmas que suenan por todos lados.</p>
-                <p className="my-7 md:w-[65vw] lg:w-[55vw] text-xl">Queremos que el Estado deje de perseguir penalmente a quienes identifican, denuncian y reportan vulnerabilidades informáticas.</p>
+            <header className="p-[6vw] md:p-[3vw] bg-[#212121] text-[#F1F1F1]">
+                <div className="mx-[10%]">
+                    <h1 className="font-nippo text-4xl font-bold uppercase">¿qué queremos?</h1>
+                    <p className="my-7 md:w-[65vw] lg:w-[55vw] text-xl">Queremos que el Estado asegure estándares de ciberseguridad y que atienda a las alarmas que suenan por todos lados.</p>
+                    <p className="my-7 md:w-[65vw] lg:w-[55vw] text-xl">Queremos que el Estado deje de perseguir penalmente a quienes identifican, denuncian y reportan vulnerabilidades informáticas.</p>
+                </div>
+
             </header>
-            <section className="p-[6vw] md:p-[3vw] border-b-2 border-b-der-black">
+            <section className="p-[6vw] md:p-[3vw] mx-[10%]">
                 <h2 className="font-nippo text-4xl font-bold uppercase">¿por qué datos en fuga?</h2>
                 <div className="py-[6vw] md:py-[3vw]">
                     <VideosSLider iframes={iframes} />
@@ -43,7 +46,14 @@ const About = () => {
             {/* <section className="p-[6vw] md:p-[3vw] bg-der-black text-white">
                 <ActionsList />
             </section> */}
-            <section className="p-[6vw] md:p-[3vw] ">
+            <section className="p-[6vw] md:p-[3vw] bg-[#212121]">
+                <div className="mx-[10%] text-[#F1F1F1]">
+                    <h2 className="font-nippo text-4xl font-bold uppercase mb-7">¿POR QUÉ NOS INTERESA?</h2>
+                    <p className="mb-7 text-xl w-[70vw]">Porque las filtraciones que sufrieron diversas reparticiones del Estado en el último tiempo nos hacen temer que sus sistemas son vulnerables. Porque nos sentimos cada vez más expuestos al mal uso de nuestros datos para distintos fines, ninguno bueno. Porque se persigue penalmente a activistas de la comunidad de seguridad informática, que podrían ayudar. Porque se legitima una “cultura del miedo” que silencia el debate en materia de seguridad informática.
+                    </p>
+                </div>
+            </section>
+            <section className="p-[6vw] md:p-[3vw] mx-[10%]">
                 <h2 className="font-nippo text-4xl font-bold uppercase mb-7">¿quiénes somos?</h2>
                 <p className="mb-7 text-xl w-[70vw]">Somos varias organizaciones de la sociedad civil que buscan que el Estado asegure estándares de ciberseguridad y que atienda a las alarmas que suenan por todos lados. 
                 </p>

src/app/amparo/page.tsx

@@ -131,14 +131,14 @@ const Amparo = () => {
             height={96}
             width={96}
           />
-          <p className='text-2xl font-nippo'>
+          <p className='text-center text-2xl font-nippo'>
             Presentamos un amparo colectivo contra el Estado solicitando el pronunciamiento de inconstitucionalidad de la DA 431/2020 y de determinados artículos de Ley de Datos Personales, y solicitando se dicte una medida cautelar que ordena la suspensión de lo que disponen para evitar la transferencia y el mal uso de nuestros datos personales.
           </p>
           <div className='flex justify-center items-center gap-5 flex-wrap'>
-            <a href="https://drive.google.com/file/d/1E98MIeIvUPRuz2jz_EODQy4TKd3Xahnw/view" type="button" className="border-2 border-[#CC4356] rounded-xl p-2 bg-[#CC4356] text-white w-[295px] text-center font-bold uppercase">
+            <a href="https://drive.google.com/file/d/1E98MIeIvUPRuz2jz_EODQy4TKd3Xahnw/view" target='_blank' type="button" className="border-2 border-[#CC4356] rounded-xl p-2 bg-[#CC4356] text-white w-[295px] text-center font-bold uppercase">
               descargar amparo
             </a>
-            <a href="https://drive.google.com/file/d/1kw6bYhov5m9-YloW4B5_d8OiasdJzIwO/view" type="button" className="border-2 border-[#CC4356] rounded-xl p-2 bg-[#CC4356] text-white w-[295px] text-center font-bold uppercase">
+            <a href="https://drive.google.com/file/d/1kw6bYhov5m9-YloW4B5_d8OiasdJzIwO/view" target='_blank' type="button" className="border-2 border-[#CC4356] rounded-xl p-2 bg-[#CC4356] text-white w-[295px] text-center font-bold uppercase">
               descargar gacetilla
             </a>
           </div>

src/app/casos/[id]/page.tsx

@@ -23,6 +23,7 @@ export async function generateMetadata(
   return {
     title: metaTitle,
     description: metaDescription,
+    keywords: `${caso?.name}, ${caso?.year}, ciberseguridad, ${caso?.keywords.join(', ')}`,
     openGraph: {
       title: metaTitle,
       description: metaDescription

src/app/casos/_cases.js

@@ -17,7 +17,8 @@ const cases = [
       <p className="mb-4">
         Dos días antes de las elecciones, <b>la división de cibercrimen de la Policía Metropolitana allanó su casa</b> y le secuestró una computadora, cuatro discos rígidos, pendrives y memorias. <b>Lo acusaron de ingresar al sistema de la empresa para “causar daño”</b>, es decir, <b>con intenciones de generar fallas en la transparencia electoral</b>. En 2016, un año después, <a href="https://www.lanacion.com.ar/tecnologia/sobreseyeron-al-programador-que-revelo-fallas-en-el-sistema-de-boleta-unica-electronica-nid1924088/" target="_blank" rel="noopener noreferrer">Sorianello fue sobreseído del proceso judicial</a> porque <b>se determinó que había entrado al sistema, pero no de manera indebida ni causando daño alguno, sino que actuó con la (buena) intención de alertar sobre la facilidad de ejecutar un fraude informático.</b>
       </p>
-    </>
+    </>,
+    keywords: ["sistema de votación", "Boleta Única Electrónica", "vulnerabilidades", "reportar"]
   },
   {
     id: 'gaspar-ariel-ortmann',
@@ -39,7 +40,8 @@ const cases = [
       <p>
         Además, no fueron detectadas transferencias de dinero u otro tipo de operaciones que impidieran el recupero de los fondos, así como tampoco la adopción de ningún otro tipo de maniobra que tuviera por objeto encubrir, enmascarar y/o dificultar el rastreo de la procedencia y origen de dichas operaciones.
       </p>
-    </>
+    </>,
+    keywords: ['homebanking', 'Banco de la Nación Argentina', 'vulnerabilidades', 'identificar']
   },
   {
     id: 'javier-smaldone',
@@ -79,7 +81,8 @@ const cases = [
         text: 'NOTA PERIODÍSTICA',
         url: 'https://www.lanacion.com.ar/tecnologia/varios-detenidos-robo-datos-del-sistema-informatico-nid2295293/'
       }
-    ]
+    ],
+    keywords: ['sistema de Boleta unica electronica', 'fallas', 'denuncias', '#LaGorraLeaks']
   }
 ]
 

src/app/casos/components/HowToReport.tsx

@@ -4,8 +4,7 @@ import { otherLogos } from '~/reporta/'
 const HowToReport = () => {
     return (
         <section className='bg-[#2D2D2D] py-[3vh] h-4/6' id='reporta'>
-            <h2 className='font-nippo text-2xl sm:text-4xl bg-[#008BB4] py-4 pr-5 pl-8 sm:pl-[65px] md:pl-[130px] inline-block font-extrabold w-[90%] max-[375px]:text-3xl lg:w-auto mb-12'>ENTONCES, <br />
-                ¿QUÉ Y CÓMO PUEDE REPORTAR?
+            <h2 className='font-nippo text-2xl sm:text-4xl bg-[#008BB4] py-4 pr-5 pl-8 sm:pl-[65px] md:pl-[130px] inline-block font-extrabold w-[90%] max-[375px]:text-3xl lg:w-auto mb-12'>¿QUÉ Y CÓMO REPORTAR?
             </h2>
 
             <div className="flex flex-col justify-center items-center">

src/app/casos/page.tsx

@@ -9,9 +9,18 @@ import CasesDescription from './components/CasesDescriptions'
 const metaTitle = 'Casos | Datos en Fuga'
 const metaDescription = 'Conoce más sobre los casos y consecuencias de los #DatosEnFuga'
 
+const allKeywords = cases
+  .map(c => [c.name, c.year, ...c.keywords])
+  .reduce((acc, currentArray) => {
+    return acc.concat(currentArray);
+  }, []);
+
+const keywords = Array.from(new Set([...allKeywords,'Ciberseguridad']))
+
 export const metadata: Metadata = {
   title: metaTitle,
   description: metaDescription,
+  keywords: keywords || 'Ciberseguridad',
   openGraph: {
     title: metaTitle,
     description: metaDescription

src/app/components/LandingTopics.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { useState } from "react";
 
-const Card = ({ backgroundColor, title, description }: { backgroundColor: string, title: string, description: string }) => {
+const Card = ({ backgroundColor, title, description, size }: { backgroundColor: string, title: string, description: string, size:string }) => {
   const [showText, setShowText] = useState(true);
 
   return (
@@ -19,7 +19,7 @@ const Card = ({ backgroundColor, title, description }: { backgroundColor: string
           <p className='uppercase text-2xl xl:text-3xl font-bold'>{title}</p>
         </div>
         <div className={`transition-all duration-500 ease-in-out ${showText ? 'translate-y-[100%] opacity-0' : 'translate-y-0 opacity-100'}`}>
-          <p className='uppercase text-sm my-2 mx-2'>{description}</p>
+          <p className={`uppercase my-2 mx-2 ${size} `}>{description}</p>
         </div>
       </div>
     </div>
@@ -36,16 +36,19 @@ const LandingTopics = () => {
             backgroundColor="#CC4356"
             title="Ley de datos personales"
             description="La Ley  25.326 establece normas para el tratamiento de información personal, garantizando que los ciudadanos tengan derechos de privacidad y control sobre sus datos personales, tanto en manos del sector público como privado. "
+            size="text-sm"
           />
           <Card
             backgroundColor="#008BB4"
             title="Ciberseguridad"
             description="Es el conjunto de medidas y prácticas destinadas a proteger la integridad de la información en entornos digitales. Se busca prevenir y responder a amenazas, garantizando la seguridad de sistemas, redes, datos y la privacidad de los usuarios."
+            size="text-sm"
           />
           <Card
             backgroundColor="#00D79E"
             title="Reportes de vulnerabilidades"
             description="Es el acto de informar sobre fallos de seguridad o debilidades en sistemas informáticos, aplicaciones o redes, a las autoridades competentes, empresas u organizaciones responsables, con el objetivo principal de mejorar la ciberseguridad al  al corregir riesgos antes de su explotación."
+            size="text-xs"
           />
       </div>
     </div>

src/app/layout.tsx

@@ -72,6 +72,7 @@ const metaTitle = 'Datos en Fuga | ¿Tu información está segura?'
 const metaDescription = 'Queremos que el Estado asegure estándares de ciberseguridad y que  deje de perseguir hackers que realizan denuncias.'
 
 export const metadata: Metadata = {
+  metadataBase: new URL(process.env.GITHUB_PAGES_ROOT || 'https://democraciaenred.github.io/datosenfuga-next/'),
   title: metaTitle,
   description: metaDescription,
   colorScheme: 'dark',

src/app/novedades/[slug]/page.tsx

@@ -40,8 +40,8 @@ const EventosBySlug = async ({ params }: { params: { slug: string } }) => {
                     <article className="flex-grow w-full md:w-auto">
                         <Content document={content.body} />
                     </article>
-                    <aside className="flex flex-col gap-6 text-right md:-translate-y-10 w-full md:w-auto">
-                        <div>
+                    <aside className="flex flex-col gap-6 text-right md:-translate-y-10 w-full md:w-auto max-sm:flex-row max-sm:flex-wrap max-sm:justify-around max-sm:mt-2">
+                        <div className="max-sm:w-[1/2]">
                             <p className="font-bold">{content.authors?.length > 1 ? 'Autores' : 'Autor'}</p>
                             {content.authors ?
                                 (content.authors.map((author: { name: string }) => {
@@ -51,13 +51,13 @@ const EventosBySlug = async ({ params }: { params: { slug: string } }) => {
                                 <p className="text-sm">Anónimo</p>
                             }
                         </div>
-                        <div>
+                        <div className="max-sm:w-[1/2]">
                             <p className="font-bold">Publicado</p>
                             <p className="text-sm">{first_published_at ? formatDate(first_published_at) : 'Sin publicar'}</p>
                         </div>
-                        <div className="self-end">
-                            <p className="font-bold">Etiquetas</p>
-                            <div className="flex flex-col items-end gap-2 md:w-[10vw]">
+                        <div className="self-end max-sm:w-full">
+                            <p className="font-bold max-sm:text-center max-sm:my-3">Etiquetas</p>
+                            <div className="flex flex-col items-end gap-2 md:w-[10vw] max-sm:flex-row max-sm:py-2 max-sm:justify-center max-sm:flex-wrap">
                                 {tag_list.length > 0 ? tag_list.map((tag) => {
                                     return (
                                         <span className="md:max-w-[10vw] text-white bg-[#008BB4] text-[10px] rounded-3xl font-roboto font-bold text-center py-1 px-3 capitalize truncate hover:whitespace-normal" key={tag}>
@@ -83,7 +83,7 @@ export default EventosBySlug
 const fetchArticleBySlug = async (slug: string): Promise<ISbStory> => {
     const storyblokApi = getStoryblokApi()
 
-    let sbParams: ISbStoryParams = { version: 'draft' };
+    let sbParams: ISbStoryParams = { version: 'published' };
     const article = await storyblokApi.get(`cdn/stories/events/${slug}`, sbParams);
 
     if (!article) notFound()

src/app/page.tsx

@@ -5,7 +5,12 @@ import Link from 'next/link'
 import LandingArticles from './components/LandingArticles'
 import LandingTopics from './components/LandingTopics'
 import { flourishImages } from "~/home/index"
-import derAboutImg from "~/home/DER.png"
+import { Metadata } from 'next'
+// import derAboutImg from "~/home/DER.png"
+
+export const metadata: Metadata = {
+  keywords: "Hacker, ciberseguridad, Observatorio de Derecho Informático Argentina, Fundación vía libre, ley de datos personales, ley penal argentina, Javier Smaldone, Incidentes, ciberseguridad, filtración de datos"
+}
 
 export default function Home() {
 

src/app/reporta/page.tsx

@@ -2,6 +2,7 @@ import Image from "next/image"
 import squaresData from "./_dataReporta.js"
 import squaresData2 from "./_dataProteger.js"
 import { otherLogos } from "../../../public/reporta/index.js"
+import Link from "next/link.js"
 
 const Reportes = () => {
     return (
@@ -16,9 +17,9 @@ const Reportes = () => {
                     priority
                 />
                 <h1 className="text-3xl font-extrabold text-der-black my-5">¿ENCONTRASTE UNA FALLA DE SEGURIDAD Y TEMÉS REPORTARLA?</h1>
-                <a href="#reporta" type="button" target="_blank" rel="noopener noreferrer" className="border-2 border-black rounded-xl p-2 my-2 bg-[#212121] text-white w-full max-w-[270px] text-center">
+                <Link href="#reporta" className="border-2 border-black rounded-xl p-2 my-2 bg-[#212121] text-white w-full max-w-[270px] text-center">
                     ¿CÓMO REPORTAR SEGURO?
-                </a>
+                </Link>
             </header>
             <section className="text-center bg-[#212121]" id="reporta">
                 <div className="w-[85vw] mx-auto py-10 sm:py-[4vw]">