Co-authored-by: Nico <[email protected]>

src/app/abc/_data.tsx

@@ -5,22 +5,22 @@ export const subtopics = [
         title: 'sobre la temática',
         details: [{
             q: '¿qué es la ciberseguridad?',
-            a: ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, eligendi.']
+            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.']
         },
         {
-            q: '¿qué es la ciberreciliencia?',
-            a: ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, eligendi.']
+            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.']
         },
         {
             q: '¿nuestros datos están seguros?',
-            a: ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, eligendi.']
+            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.']
         }]
     },
     {
         title: 'sobre el proyecto',
         details: [{
             q: '¿qué es una vulnerabilidad informática?',
-            a: ['Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, eligendi.']
+            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.']
         }]
     },
 ]

src/app/abc/components/Subtopic.tsx

@@ -7,7 +7,7 @@ const Subtopic = ({ subtopic }: { subtopic: SubtopicIF }) => {
             <div className="mx-auto">
                 {subtopic?.details.map((detail, i) => {
                     return (
-                        <details key={'details' + i} className="group my-5 select-none">
+                        <details key={'details' + i} className="group my-5">
                             <summary className="flex cursor-pointer bg-black rounded-lg p-2 uppercase shadow-md text-white">
                                 {detail.q}
                                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor"
@@ -18,7 +18,7 @@ const Subtopic = ({ subtopic }: { subtopic: SubtopicIF }) => {
                             {detail.a.map((answer, i2) => {
                                 return (
                                     <p key={`'a${i}${i2}`}
-                                        className="p-2 mx-2 bg-white shadow-md last:rounded-b-lg">
+                                        className="p-4 mx-2 bg-white shadow-md last:rounded-b-lg tracking-wide">
                                         {answer}
                                     </p>
                                 )

src/app/abc/page.tsx

@@ -1,7 +1,9 @@
 import { subtopics, resources, iframes, items } from './_data'
 import VideosSLider from "../components/VideosSLider"
-import Resource from "./components/Resource"
+// import Resource from "./components/Resource"
+import amparoIcon from '../../../public/shared/amparo.png'
 import SubtopicsMap from "./components/SubtopicsMap"
+import Image from 'next/image'
 
 const page = () => {
     return (
@@ -14,11 +16,36 @@ const page = () => {
             </section>
             <section className="p-[6vw] md:p-[3vw] bg-gray-100 text-der-black text-lg">
                 <h2 className="font-nippo text-5xl font-bold uppercase">recursos útiles</h2>
-                <div className={`grid grid-cols-1 md:grid-cols-2 ${resources.length > 2 && 'lg:grid-cols-3'} gap-5 mb-5 mt-[6vw] md:mt-[3vw]`}>
+                <div className='flex flex-col justify-center items-center bg-white text-black shadow-md rounded-lg my-[3vw] p-6 gap-5'>
+                    <p className='text-2xl font-bold'>AMPARO</p>
+                    <Image
+                        alt="icon"
+                        src={amparoIcon}
+                        height={96}
+                        width={96}
+                    />
+                    <p className='text-2xl 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="#" 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="#" 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>
+                </div>
+                <div className='text-lg font-nippo mx-auto text-black mb-[3vw]'>
+                    <h3 className='font-bold underline uppercase mb-3'>estado:</h3>
+                    <p className='text-lg mb-3'>El amparo colectivo se presento el 18 de abril de 2023 y radica en el juzgado Contencioso Administrativo Federal N 8, a cargo de la Jueza Dra. María Cecilia GILARDI MADARIAGA de NEGRE. Luego de 5 meses, el 07/09/2023, la Sra. Jueza se pronuncio sobre la medida cautelar solicitada por nosotros y rechazo la misma. Este rechazo fue apelado por nosotros y  desde el 11 de septiembre aguardamos que la Sala V del mismo fuero revise la decisión del Juzgado de origen y nos conceda la medida cautelar.</p>
+                    <p className='font-extralight'>Ultima actualización: 21/11/2023</p>
+                </div>
+                {/* <div className={`grid grid-cols-1 md:grid-cols-2 ${resources.length > 2 && 'lg:grid-cols-3'} gap-5 mb-5 mt-[6vw] md:mt-[3vw]`}>
                     {resources.map((resource, i) =>
                         <Resource key={'resrc' + i} resource={resource} />
                     )}
-                </div>
+                </div> */}
                 <div className={`grid grid-cols-1 md:grid-cols-2 ${resources.length > 2 && 'lg:grid-cols-3'} gap-5`}>
                     {items.map((item, i) =>
                         <button key={'iList' + i} className="bg-white shadow-md rounded-lg overflow-hidden">

src/app/about/page.tsx

@@ -27,12 +27,13 @@ const About = () => {
                     <VideosSLider iframes={iframes} />
                 </div>
             </section>
-            <section className="p-[6vw] md:p-[3vw] bg-der-black text-white">
+            {/* <section className="p-[6vw] md:p-[3vw] bg-der-black text-white">
                 <ActionsList />
-            </section>
+            </section> */}
             <section className="p-[6vw] md:p-[3vw] ">
                 <h2 className="font-nippo text-4xl font-bold uppercase mb-7">¿quiénes somos?</h2>
-                <p className="mb-7 text-xl w-[70vw]">Descripcion breve: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                <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>
                 <div>
                     <Quienes />
                 </div>

src/app/amparo/page.tsx

@@ -15,7 +15,7 @@ const Amparo = () => {
           PRESENTAMOS UN AMPARO CONTRA EL <br /> ESTADO PARA PROTEGER NUESTROS DATOS <br /> PERSONALES EN UN AÑO DE ELECCIONES.
         </p>
       </header>
-      <section className='py-[3vh] px-5 h-4/6 bg-[#F1F1F1] text-black'>
+      <section className='py-[4vh] px-5 h-4/6 bg-[#F1F1F1] text-black'>
         <h2 className='md:w-[65%] mx-auto text-center text-2xl font-nippo font-bold sm:text-4xl'>
           PRESENTAMOS UN AMPARO PARA PROTEGER NUESTROS DATOS PERSONALES Y NUESTRA DEMOCRACIA
         </h2>
@@ -107,10 +107,10 @@ const Amparo = () => {
           />
         </div>
       </section>
-      <section className='py-[8vh] bg-der-black'>
+      <section className='py-[4vh] bg-der-black'>
         <h2 className='font-nippo text-4xl bg-[#006482] py-4 pl-14 pr-5 inline-block font-extrabold max-[466px]:text-2xl'>¿QUÉ PRESENTAMOS?
         </h2>
-        <div className='flex flex-col justify-center items-center w-[90vw] md:w-[70vw] max-w-[950px] bg-gray-100 text-black rounded-md mx-auto my-[3vw] p-6 gap-5'>
+        <div className='flex flex-col justify-center items-center w-[90vw] md:w-[75vw] max-w-[950px] bg-gray-100 text-black rounded-md mx-auto my-[3vw] p-6 gap-5'>
           <p className='text-2xl font-bold'>AMPARO</p>
           <Image
             alt="icon"
@@ -119,7 +119,7 @@ const Amparo = () => {
             width={96}
           />
           <p className='text-2xl 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 y solicitando se dicte una medida cautelar que ordena la suspensión de lo que disponen.
+          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.
           </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">
@@ -136,7 +136,7 @@ const Amparo = () => {
           <p className='font-extralight'>Ultima actualización: 21/11/2023</p>
         </div>
       </section>
-      <section className='bg-gray-950 w-[90vw] mx-auto'>
+      <section className='px-[5vw] mx-auto bg-der-black border-t-2 border-t-white'>
         <SiteMapFooter/>
       </section>
     </main>

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

@@ -26,16 +26,16 @@ const ID = ({ params }: { params: { id: string } }) => {
         </h1>
         <div className="flex flex-row gap-4 text-lg my-3">
           <a href="#reporta" type="button" className="border-2 border-[#CC4356] rounded-xl p-2 my-2 bg-[#CC4356] text-white w-[300px] text-center font-extrabold">
-            ¿CÓMO REPORTAR SEGURO?
+            ¿CÓMO REPORTAR?
           </a>
           <a href="#reporta" type="button" className="border-2 border-[#CC4356] rounded-xl p-2 my-2 bg-[#2D2D2D] text-[#CC4356] w-[300px] text-center font-extrabold">
-            ¿CÓMO REPORTAR SEGURO?
+            CASOS
           </a>
         </div>
       </header>
 
       <section className='bg-[#F1F1F1] py-[3vh] h-4/6'>
-        <h2 className='font-nippo text-5xl bg-[#CC4356] py-4 pl-14 pr-5 inline-block font-extrabold'>ELLOS, NO LO SABÍAN</h2>
+        <h2 className='font-nippo text-5xl bg-[#CC4356] py-4 pl-14 pr-5 inline-block font-extrabold'>LLEGÓ TARDE PARA ELLOS</h2>
         <p className='font-nippo text-der-black text-xl pl-12 my-4 font-medium'>
           TE CONTAMOS QUIÉNES SON Y CUÁL ES SU HISTORIA
         </p>

src/app/casos/components/HowToReport.tsx

@@ -12,19 +12,19 @@ const HowToReport = () => {
                 <p className='text-left w-[850px] text-xl max-[856px]:w-[600px] max-[610px]:w-[310px]'>
                 La Fundación Via Libre recibe informes sobre fallos en aplicaciones que puedan afectar los derechos de las personas, especialmente la seguridad de sus datos personales. Si encuentras vulnerabilidades, como la posibilidad de extracción o modificación no autorizada de datos, o identificas versiones obsoletas o inseguras de software, este es el lugar para informarlo.
                 </p>
-                <div className='w-[850px] h-[340px] bg-[#D9D9D9] flex flex-col items-center rounded-md my-10 max-[856px]:w-[600px] max-[856px]:h-[400px] max-[610px]:w-[310px] max-[610px]:h-[550px]'>
+                <div className='w-[850px] h-auto bg-[#D9D9D9] flex flex-col items-center rounded-md my-10 p-6 max-[856px]:w-[600px] max-[610px]:w-[310px]'>
                     <Image
                         src={otherLogos.lupa}
                         alt="Reportá logo"
                         width={112}
                         height={135}
                         className='my-8'
                     />
-                    <p className='text-2xl font-bold text-center px-4 text-der-black'>
+                    <p className='uppercase text-2xl font-bold text-center px-4 text-der-black'>
                         Todos los esfuerzos técnicos son importantes para conservar datos personales a través de los reportes realizados
                     </p>
 
-                    <a href="/reporta" type="button" className="border-2 border-[#CC4356] rounded-xl p-2 my-4 bg-[#CC4356] text-white w-[300px] text-center text-lg font-bold">
+                    <a href="/reporta" type="button" className="border-2 border-[#CC4356] rounded-xl p-2 mt-4 bg-[#CC4356] text-white w-[300px] text-center text-lg font-bold">
                         ¿CÓMO REPORTAR?
                     </a>
                 </div>

src/app/casos/page.tsx

@@ -11,7 +11,7 @@ const Casos = () => {
         </h1>
         <div className="flex flex-row gap-4 text-lg my-3">
           <a href="#reporta" type="button" className="border-2 border-[#CC4356] rounded-xl p-2 my-2 bg-[#CC4356] text-white w-[300px] text-center font-extrabold">
-            ¿CÓMO REPORTAR SEGURO?
+            ¿CÓMO REPORTAR?
           </a>
           <a href="#reporta" type="button" className="border-2 border-[#CC4356] rounded-xl p-2 my-2 bg-[#2D2D2D] text-[#CC4356] w-[300px] text-center font-extrabold flex items-center justify-center">
             CASOS
@@ -20,7 +20,7 @@ const Casos = () => {
       </header>
 
       <section className='bg-[#F1F1F1] py-[3vh] h-4/6'>
-        <h2 className='font-nippo text-6xl bg-[#CC4356] py-4 pl-[4vw] md:pl-14 pr-5 inline-block font-extrabold max-[500px]:text-4xl max-[375px]:text-3xl'>ELLOS, NO LO SABÍAN</h2>
+        <h2 className='font-nippo text-6xl bg-[#CC4356] py-4 pl-[4vw] md:pl-14 pr-5 inline-block font-extrabold max-[500px]:text-4xl max-[375px]:text-3xl'>LLEGÓ TARDE PARA ELLOS</h2>
         <p className='font nippo text-der-black text-xl pl-12 my-4 font-medium'>
           TE CONTAMOS QUIÉNES SON Y CUÁL ES SU HISTORIA
         </p>

src/app/components/LandingFlourish.tsx

@@ -0,0 +1,21 @@
+import Image from "next/image"
+
+const LandingFlourish = () => {
+    return (
+        <div className="w-[60%] max-lg:w-full">
+            <iframe src='https://flo.uri.sh/story/1969359/embed'
+                title='Interactive or visual content'
+                className='flourish-embed-iframe w-full h-[600px]'
+                sandbox='allow-same-origin allow-forms allow-scripts allow-downloads allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation'
+            />
+            <div className="w-full mt-1 text-right">
+                <a className='flourish-credit no-underline' href='https://public.flourish.studio/story/1969359/?utm_source=embed&utm_campaign=story/1969359'
+                    target='_top'
+                />
+                <Image alt="Flourish logo" src="https://public.flourish.studio/resources/bosh.svg" width={105} height={16} className="w-auto h-3 border-none mx-1 my-0 align-middle inline-block shadow-none" />
+                <span className='text-gray-500 align-middle inline-block shadow-none text-xs font-bold'>A Flourish data visualization</span>
+            </div>
+        </div>
+    )
+}
+export default LandingFlourish

src/app/components/SiteMapFooter.tsx

@@ -7,7 +7,7 @@ const SiteMapFooter = () => {
     return (
         <div className="flex flex-col gap-10 sm:justify-between sm:items-center sm:flex-row sm:gap-5 p-6">
             <div>
-                <p className='mb-3'>Un proyecto de</p>
+                <p className='mb-4 text-xl'>Un proyecto de</p>
                 <div className="flex flex-wrap items-center justify-between sm:justify-normal gap-7">
                     <Image src={derLogo} width={2724} height={742} alt='Democracia en Red' className='w-[176px]' />
                     <Image src={odiaLogo} width={130.35} height={29.61} alt='Democracia en Red' className='w-[130px]' />