Merge pull request #4 from DemocraciaEnRed/main

Deploy

README.md

@@ -2,10 +2,7 @@
 
 # Datos en Fuga - Web
 
-[![GitHub license](https://img.shields.io/github/license/DemocraciaEnRed/leyesabiertas-notifier)](https://github.com/DemocraciaEnRed/leyesabiertas-notifier/blob/master/LICENSE)
-
-Este es uno de los cuatros modulos que se requieren descargar, hacer setup e instalar cada uno de los repositorios para poder utilizar Leyes Abiertas.
-Para saber mas del conjunto de modulos que compone leyes abiertas, hace [click aqui](https://github.com/DemocraciaEnRed/leyesabiertas) 
+[![GitHub license](https://img.shields.io/github/license/DemocraciaEnRed/datosenfuga-next)](https://github.com/DemocraciaEnRed/datosenfuga-next/blob/master/LICENSE)
 
 ---
 

src/app/abc/_data.tsx

@@ -5,22 +5,26 @@ export const subtopics = [
         title: 'sobre la temática',
         details: [{
             q: '¿qué es la ciberseguridad?',
-            a: ['La ciberseguridad se centra en la protección de sistemas, redes y datos contra amenazas cibernéticas. Su objetivo es proteger la confidencialidad, integridad y disponibilidad de la información y los recursos digitales contra distintos tipos de amenazas como pueden ser ataques de malware, phishing, ingeniería social, etc. Ante la creciente dependencia de las intermediaciones tecnológicas que atraviesan toda la vida diaria, tanto en el sector privado como estatal,  la ciberseguridad es esencial  para protegerse contra estas amenazas y mantener la confianza en la seguridad de sus datos y sistemas.']
+            a: ['La ciberseguridad se centra en la protección de sistemas, redes y datos contra amenazas cibernéticas. Su objetivo es proteger la confidencialidad, integridad y disponibilidad de la información y los recursos digitales contra distintos tipos de amenazas como pueden ser ataques de malware, phishing, ingeniería social, etc. Ante la creciente dependencia de las intermediaciones tecnológicas que atraviesan toda la vida diaria, tanto en el sector privado como estatal,  la ciberseguridad es esencial  para protegerse contra estas amenazas y mantener la confianza en la seguridad de sus datos y sistemas.'],
+            videoKey: '7neHhi_cpsc'
         },
         {
             q: '¿qué es la ciberresiliencia?',
-            a: ['La ciberresiliencia es la capacidad de una organización, estatal o privada, de prevenir, adaptarse y recuperarse de ciberataques, fallas tecnológicas u otras amenazas cibernéticas. Implica una combinación de estrategias, procesos y tecnologías orientados a minimizar el impacto de las interrupciones cibernéticas y garantizar la rápida recuperación. Para esto es clave que las organizaciones cuentes con protocolos de diversificación de sistemas y datos, seguridad proactiva, respuesta y recuperación rápida ante incidentes, etc. Si bien la ciberresiliencia reconoce que es casi imposible evitar por completo los ciberataques, se busca garantizar que una organización pueda contener y recuperarse, con la menor impacto para el usuario posible,  en caso de un incidente cibernético.']
+            a: ['La ciberresiliencia es la capacidad de una organización, estatal o privada, de prevenir, adaptarse y recuperarse de ciberataques, fallas tecnológicas u otras amenazas cibernéticas. Implica una combinación de estrategias, procesos y tecnologías orientados a minimizar el impacto de las interrupciones cibernéticas y garantizar la rápida recuperación. Para esto es clave que las organizaciones cuentes con protocolos de diversificación de sistemas y datos, seguridad proactiva, respuesta y recuperación rápida ante incidentes, etc. Si bien la ciberresiliencia reconoce que es casi imposible evitar por completo los ciberataques, se busca garantizar que una organización pueda contener y recuperarse, con la menor impacto para el usuario posible,  en caso de un incidente cibernético.'],
+            videoKey: 'dF2jmBf8Tko'
         },
         {
             q: '¿nuestros datos están seguros?',
-            a: ['Nuestros datos personales nos identifican, nos individualizan en la masa social. La realidad nos muestra que los organismos estatales sufren de manera continua filtraciones de datos, ataques cibernéticos, secuestros de información, etc., en los cuales nuestros datos personales se filtran de manera masiva, quedando a merced de quien pueda o quiera comprarlos o utilizarlos de cualquier manera, muchas veces delictivas. Lo que mas preocupa es que ante este escenario preocupante, el estado se muestra inactivo, sin invertir lo necesario en seguridad informática. El estado debería garantizar los estándaresde seguridad informática necesarios, cumpliendo con la ley vigente, para garantizar nuestros derechosfundamentales a la privacidad, intimidad y autodeterminación informativa. Enterate mas sobre el tema en la entrevista.']
+            a: ['Nuestros datos personales nos identifican, nos individualizan en la masa social. La realidad nos muestra que los organismos estatales sufren de manera continua filtraciones de datos, ataques cibernéticos, secuestros de información, etc., en los cuales nuestros datos personales se filtran de manera masiva, quedando a merced de quien pueda o quiera comprarlos o utilizarlos de cualquier manera, muchas veces delictivas. Lo que mas preocupa es que ante este escenario preocupante, el estado se muestra inactivo, sin invertir lo necesario en seguridad informática. El estado debería garantizar los estándaresde seguridad informática necesarios, cumpliendo con la ley vigente, para garantizar nuestros derechosfundamentales a la privacidad, intimidad y autodeterminación informativa. Enterate mas sobre el tema en la entrevista.'],
+            videoKey: 'FIMkE6u9pqs'
         }]
     },
     {
         title: 'sobre el proyecto',
         details: [{
             q: '¿qué es una vulnerabilidad informática?',
-            a: ['Una vulnerabilidad informática es una debilidad o fallo en un sistema de software, hardware o en las prácticas de seguridad de una organización que puede darse de diversas formas como errores de programación, debilidades en sistemas operativos, falta de actualizaciones de seguridad, contraseñas débiles, etc. Estas fallas o debilidades suelen ser aprovechadas por individuos malintencionados para comprometer la integridad, confidencialidad o disponibilidad de los datos, información y  recursos de un sistema. La gestión de vulnerabilidades es una parte fundamental de la ciberseguridad, es fundamental que las organizaciones tomen medidas para identificar, remediar y prevenir vulnerabilidades en sus sistemas, como la aplicación de parches y actualizaciones de seguridad, la configuración adecuada de sistemas y redes, la educación en seguridad para el personal y la implementación de políticas de seguridad sólidas.']
+            a: ['Una vulnerabilidad informática es una debilidad o fallo en un sistema de software, hardware o en las prácticas de seguridad de una organización que puede darse de diversas formas como errores de programación, debilidades en sistemas operativos, falta de actualizaciones de seguridad, contraseñas débiles, etc. Estas fallas o debilidades suelen ser aprovechadas por individuos malintencionados para comprometer la integridad, confidencialidad o disponibilidad de los datos, información y  recursos de un sistema. La gestión de vulnerabilidades es una parte fundamental de la ciberseguridad, es fundamental que las organizaciones tomen medidas para identificar, remediar y prevenir vulnerabilidades en sus sistemas, como la aplicación de parches y actualizaciones de seguridad, la configuración adecuada de sistemas y redes, la educación en seguridad para el personal y la implementación de políticas de seguridad sólidas.'],
+            videoKey: 'c5uOX2G2NGw'
         }]
     },
 ]

src/app/abc/components/Subtopic.tsx

@@ -1,3 +1,4 @@
+import SubtopicVideo from "./SubtopicVideo"
 import { SubtopicIF } from "./SubtopicsMap"
 
 const Subtopic = ({ subtopic }: { subtopic: SubtopicIF }) => {
@@ -15,14 +16,16 @@ const Subtopic = ({ subtopic }: { subtopic: SubtopicIF }) => {
                                     <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                 </svg>
                             </summary>
-                            {detail.a.map((answer, i2) => {
-                                return (
-                                    <p key={`'a${i}${i2}`}
-                                        className="p-4 mx-2 bg-white shadow-md last:rounded-b-lg tracking-wide">
-                                        {answer}
-                                    </p>
-                                )
-                            })}
+                            <div className="p-4 mx-2 bg-white shadow-md last:rounded-b-lg tracking-wide">
+                                {detail.videoKey && <SubtopicVideo videoKey={detail.videoKey} />}
+                                {detail.a.map((answer, i2) => {
+                                    return (
+                                        <p key={`'a${i}${i2}`}>
+                                            {answer}
+                                        </p>
+                                    )
+                                })}
+                            </div>
                         </details>
                     )
                 })}

src/app/abc/components/SubtopicVideo.tsx

@@ -0,0 +1,14 @@
+import Iframe from "@/app/components/Iframe"
+import { iframes } from "../_data"
+
+const SubtopicVideo = ({ videoKey }: { videoKey: string }) => {
+    const v = iframes.find((v) => v.key === videoKey)
+    if (v) {
+        return (
+            <div className="rounded-md overflow-hidden mb-4">
+                <Iframe title={v.title} source={v.src} />
+            </div>
+        )
+    } else null
+}
+export default SubtopicVideo

src/app/abc/components/SubtopicsMap.tsx

@@ -7,7 +7,8 @@ export interface SubtopicIF {
 
 export interface Detail {
     q: string,
-    a: string[]
+    a: string[],
+    videoKey?: string
 }
 
 const SubtopicsMap = ({ subtopics }: { subtopics: SubtopicIF[] }) => {

src/app/abc/page.tsx

@@ -49,12 +49,12 @@ const page = () => {
                     )}
                 </div>
             </section>
-            <section className="p-[6vw] md:p-[3vw] bg-gray-100 text-der-black text-lg">
+            {/* <section className="p-[6vw] md:p-[3vw] bg-gray-100 text-der-black text-lg">
                 <h2 className="font-nippo text-5xl font-bold uppercase">videos informativos</h2>
                 <div className="py-[6vw] md:py-[3vw]">
                     <VideosSLider iframes={iframes} />
                 </div>
-            </section>
+            </section> */}
         </main >
     )
 }

src/app/amparo/page.tsx

@@ -125,7 +125,7 @@ const Amparo = () => {
             width={96}
           />
           <p className='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 (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 para evitar la transferencia y el mal uso de nuestros datos personales.
+          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="#" type="button" className="border-2 border-[#CC4356] rounded-xl p-2 bg-[#CC4356] text-white w-[295px] text-center font-bold uppercase">

src/app/components/Footer.tsx

@@ -4,7 +4,7 @@ import Link from "next/link"
 import { usePathname } from "next/navigation"
 import { sharedImages } from "~/shared/index"
 
-const darkThemeSegments = ['about', 'abc', 'eventos']
+const darkThemeSegments = ['about', 'abc', 'novedades']
 const isDarkTheme = (path: string) => darkThemeSegments.some(segment => segment === path.split('/')[1])
 
 const Footer = () => {

src/app/eventos/[slug]/components/YTVideo.tsx → src/app/components/Iframe.tsx

@@ -1,15 +1,8 @@
-const getVideoId = (url: string) => {
-    const splittedURL = url?.split('/')
-    const id = splittedURL[splittedURL?.length - 1]
-    return id
-}
-
-const YTVideo = ({ url, title }: { url: string, title?: string }) => {
-    const videoID = url ? getVideoId(url):''
+const Iframe = ({ source, title }: { source: string, title: string }) => {
     return (
-        <div className="relative overflow-hidden pb-[56.25%] h-0 my-2">
+        <div className="relative overflow-hidden pb-[56.25%] h-0">
             <iframe
-                src={`https://www.youtube.com/embed/${videoID}?enablejsapi=1`}
+                src={source}
                 title={title}
                 width="1920"
                 height="1080"
@@ -20,4 +13,4 @@ const YTVideo = ({ url, title }: { url: string, title?: string }) => {
         </div>
     )
 }
-export default YTVideo
+export default Iframe

src/app/components/LandingArticles.tsx

@@ -0,0 +1,40 @@
+import { ISbStoriesParams, ISbStoryData, StoryblokComponentType, getStoryblokApi } from "@storyblok/react";
+import EventsCard from "../novedades/components/EventsCard";
+import Link from "next/link";
+
+const fetchLatestArticles = async () => {
+    const storyblokApi = getStoryblokApi()
+
+    let sbParams: ISbStoriesParams = {
+        version: 'draft',
+        starts_with: "events/",
+        excluding_fields: 'body,_editable,_uid',
+        sort_by: "created_at:desc",
+        page: 1,
+        per_page: 3
+    };
+
+    const article = await storyblokApi.get(`cdn/stories`, sbParams);
+
+    return article
+}
+
+const LandingArticles = async () => {
+    const articles = (await fetchLatestArticles()).data.stories
+    return (
+        <>
+            {articles.length > 0 && (
+                <>
+                    <h2 className="text-center text-4xl text-der-black mb-5 uppercase font-bold">Novedades</h2>
+                    <div className="flex gap-4 [&_a]:max-w-[374px] justify-center flex-wrap">
+                        {articles.map((story: ISbStoryData) => <EventsCard key={story.id} story={story} />)}
+                    </div>
+                    <Link href="/novedades" type="button" className="block border-full border-[#CC4356] rounded-full py-4 px-16 bg-[#CC4356] text-white w-fit text-center uppercase text-lg mx-auto mt-[4vw]">
+                        <span className="uppercase">conocé todas las novedades</span>
+                    </Link>
+                </>)
+            }
+        </>
+    )
+}
+export default LandingArticles

src/app/components/LandingTopics.tsx

@@ -0,0 +1,60 @@
+'use client'
+import { useState } from "react";
+
+const Card = ({ backgroundColor, title, description }: { backgroundColor: string, title: string, description: string }) => {
+  const [showText, setShowText] = useState(true);
+
+  return (
+    <div
+      className={`h-[260px] w-[389px] bg-[${backgroundColor}] flex flex-col justify-center items-center rounded-md max-[584px]:min-w-[300px] relative overflow-hidden`}
+      onMouseEnter={() => setShowText(false)}
+      onMouseLeave={() => setShowText(true)}
+    >
+      <div className={`text-white text-center transition-all duration-500 ease-in-out transform ${showText ? 'translate-y-0 opacity-100' : '-translate-y-full opacity-0'}`}>
+        <p className='uppercase text-3xl font-bold'>{title}</p>
+      </div>
+      <div className="absolute bottom-0 left-0 w-full text-white text-center transition-all duration-500 ease-in-out transform flex items-center flex-col my-8 max-[768px]:my-4">
+        <div className={`transition-all duration-500 ease-in-out ${showText ? 'translate-y-[100%] opacity-0' : 'translate-y-0 opacity-100'}`}>
+          <p className='uppercase 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>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const LandingTopics = () => {
+  return (
+    <div className='bg-white text-black text-center flex flex-col items-center justify-center py-12 w-full'>
+      <h2 className='font-bold text-4xl'>¿QUÉ ES #DATOSENFUGA?</h2>
+      <p className='uppercase'>Cuidar tus datos no solo depende de que tengas una contraseña segura</p>
+      <div className='flex flex-row flex-wrap justify-around gap-4 my-12 text-white w-1/2'>
+        <div className="h-[260px] w-[389px]">
+          <Card
+            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. "
+          />
+        </div>
+        <div className="h-[260px] w-[389px]">
+          <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."
+          />
+        </div>
+        <div className="h-[260px] w-[389px]">
+          <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."
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LandingTopics;

src/app/components/NavLinks.tsx

@@ -11,7 +11,7 @@ const links: Navlink[] = [
     { href: "/amparo", label: "amparo" },
     { href: "/casos", label: "casos" },
     { href: "/reporta", label: "reportá" },
-    { href: "/eventos", label: "eventos" },
+    { href: "/novedades", label: "novedades" },
     { href: "/about", label: "acerca de" },
     { href: "/abc", label: "ABC" }
 ]

src/app/components/Spinner.tsx

@@ -1,11 +1,17 @@
-const Spinner = ({ customColor, customSize }: { customColor?: string, customSize?: string }) => {
-    // let color = customColor ? customColor : 'white'
-    // let size = customSize ? customSize : '[4vw]'
+type Color = 'white' | 'black'
+type Size = 'M' | 'L'
+const Spinner = ({ color, size }: { color?: Color, size?: Size }) => {
+    let textColor = 'text-white'
+    let width = 'w-[4vw]'
+    let strokeColor = 'currentColor'
+    let fillColor = 'currentColor'
+    if (color === 'black') textColor = 'text-black'
+    if (size === 'L') width = 'w-[5vw]'
 
     return (
-        <svg className={`animate-spin text-white w-[4vw]`} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        <svg className={`animate-spin ${textColor} ${width}`} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke={strokeColor} strokeWidth="4"></circle>
+            <path className="opacity-75" fill={fillColor} d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
         </svg>
     )
 }