flourish map & data

DemocraciaEnRed · Nov 27, 2023 · 2141851 · 2141851
1 parent 5abff78
commit 2141851
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 84 deletions.
diff --git a/public/home/databreach.png b/public/home/databreach.png
diff --git a/public/home/desconocido.png b/public/home/desconocido.png
diff --git a/public/home/incidente.png b/public/home/incidente.png
diff --git a/public/home/ransomware.png b/public/home/ransomware.png
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -3,92 +3,63 @@ import Script from 'next/script'
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-
-      <div className="relative flex place-items-center ">
-        <Image
-          className="relative"
-          src="/gifCanilla.gif"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className="flourish-embed w-[750px]" data-src="story/1969359">
-        <Script src="https://public.flourish.studio/resources/embed.js" />
+    <main className="flex flex-col justify-center items-center min-h-screen px-5">
+      <h1 className='text-4xl font-extrabold mb-16 mt-16 text-center'>CIBERINCIDENTES EN ARGENTINA</h1>
+      <div className='flex flex-row gap-5 w-[90vw] max-lg: max-lg:flex-col max-lg:items-center'>
+        <div className="flourish-embed w-[60%] max-lg:w-full" data-src="story/1969359">
+          <Script src="https://public.flourish.studio/resources/embed.js" />
+        </div>
+        <div className='w-[40%] flex flex-col text-center max-lg:w-full'>
+          <h3 className='font-bold text-4xl mb-11'>GLOSARIO Y REFERENCIAS</h3>
+          <div className='grid grid-cols-2'>
+            <div>
+              <p className='text-2xl'>Término</p>
+            </div>
+            <div>
+              <p className='text-2xl'>Definición</p>
+            </div>
+          </div>
+          <div className='grid grid-cols-2 items-center gap-y-4 h-[90%]'>
+            <div className='flex justify-center items-center'>
+              <Image
+                alt="desconocido"
+                src="/home/desconocido.png"
+                width={106}
+                height={64}
+              />
+            </div>
+            <div>No se da suficiente información en el artículo para determinar el tipo de ataque.</div>
+            <div className='flex justify-center'>
+              <Image
+                alt="databreach"
+                src="/home/databreach.png"
+                width={106}
+                height={64}
+              />
+            </div>
+            <div>Incidente de seguridad en el que un externo accede de manera no autorizada a información confidencial.</div>
+            <div className='flex justify-center'>
+              <Image
+                alt="ransomware"
+                src="/home/ransomware.png"
+                width={106}
+                height={64}
+              />
+            </div>
+            <div>Es un tipo de código malicioso que impide la utilización de los equipos o sistemas, secuestrando la información de las víctimas hasta que se pague un rescate.</div>
+            <div className='flex justify-center'>
+              <Image
+                alt="incidente"
+                src="/home/incidente.png"
+                width={106}
+                height={64}
+              />
+            </div>
+            <div>Cualquier situación o comportamiento adverso de un software informático</div>
+          </div>
+        </div>
       </div>
 
-      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Hola{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Gera{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Nico{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Explore starter templates for Next.js.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Todo listo pa desarrollar{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
     </main>
   )
 }