Merge pull request #8 from DemocraciaEnRed/main

Deploy!

src/app/amparo/page.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import Image from 'next/image'
 import { cartoons } from '../../../public/amparo'
 import amparoIcon from '../../../public/shared/amparo.png'
-import SiteMapFooter from '../components/SiteMapFooter'
+// import SiteMapFooter from '../components/SiteMapFooter'
 import { Metadata } from 'next'
 
 export const metadata: Metadata = {
@@ -143,7 +143,7 @@ const Amparo = () => {
         </div>
       </section>
       <section className='px-[5vw] mx-auto bg-der-black border-t-2 border-t-white'>
-        <SiteMapFooter/>
+        {/* <SiteMapFooter/> */}
       </section>
     </main>
   )

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

@@ -38,18 +38,18 @@ const ID = ({ params }: { params: { id: string } }) => {
           ¿SABÍAS QUE EN ARGENTINA <br /> <span className="font-bold">HAY UNA MANERA SEGURA DE REPORTAR VULNERABILIDADES INFORMÁTICAS?</span>
         </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?
+          <a href="#reporta" type="button" className="flex items-center justify-center border-2 border-[#CC4356] rounded-xl p-2 my-2 bg-[#CC4356] text-white w-[300px] text-center font-extrabold">
+            <p>¿QUÉ Y CÓMO REPORTAR?</p>
           </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">
-            CASOS
+          <a href="#casos" type="button" className="flex items-center justify-center border-2 border-[#CC4356] rounded-xl p-2 my-2 bg-[#2D2D2D] text-[#CC4356] w-[300px] text-center font-extrabold">
+            <p>CASOS</p>
           </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'>LLEGÓ TARDE PARA ELLOS</h2>
-        <p className='font-nippo text-der-black text-xl pl-12 my-4 font-medium'>
+        <h2 className='font-nippo text-5xl bg-[#CC4356] py-4 pl-10 sm:pl-14 pr-5 inline-block font-extrabold text-white'>LLEGÓ TARDE PARA ELLOS</h2>
+        <p className='font-nippo text-der-black text-xl px-10 sm:pl-12 my-4 font-medium'>
           TE CONTAMOS QUIÉNES SON Y CUÁL ES SU HISTORIA
         </p>
         <CaseSelector cases={cases} id={id} />

src/app/casos/components/CaseSelector.tsx

@@ -14,18 +14,18 @@ const CaseSelector = ({ id, cases }: { id?: string, cases: any }) => {
   // }, [id])
 
   return (
-    <div className="flex flex-row flex-wrap justify-center">
+    <div className="flex flex-row flex-wrap justify-center" id="casos">
       {
         cases.map((c: any) => {
           return (
             <Link href={`/casos/${c.id}`} key={c.id} scroll={false} className={`grayscale hover:grayscale-0 ${id === c.id ? 'grayscale-0' : ''} m-2 shadow-lg rounded-lg overflow-hidden`}>
-              <div className="relative w-[385px] max-[390px]:w-[95%] ">
-                <p className='max-w-[385px] font-nippo z-10 absolute bottom-4 mx-5 text-3xl font-extrabold'>{c.name}</p>
+              <div className="relative w-[385px] max-[390px]:w-[88vw]">
+                <p className='flex justify-center absolute w-full font-nippo z-10 bottom-4 text-3xl font-extrabold text-center text-white'>{c.name}</p>
                 <Image
                   alt={c.name}
                   src={c.avatar}
                   placeholder="blur"
-                  className='min-h-full min-w-full'
+                  className='min-h-full min-w-full object-cover'
                 />
               </div>
             </Link>

src/app/casos/components/HowToReport.tsx

@@ -3,29 +3,29 @@ import { otherLogos } from '~/reporta/'
 
 const HowToReport = () => {
     return (
-        <section className='bg-[#2D2D2D] py-[3vh] h-4/6'>
-            <h2 className='font-nippo text-5xl bg-[#008BB4] py-4 pl-14 pr-5 inline-block font-extrabold w-[90%] max-[375px]:text-3xl lg:w-auto mb-12'>ENTONCES, <br />
+        <section className='bg-[#2D2D2D] py-[3vh] h-4/6'id='reporta'>
+            <h2 className='font-nippo text-5xl bg-[#008BB4] py-4 px-5 sm:pl-14 inline-block font-extrabold w-[90%] max-[375px]:text-3xl lg:w-auto mb-12'>ENTONCES, <br />
                 ¿QUÉ Y CÓMO PUEDO REPORTAR?
             </h2>
 
             <div className="flex flex-col justify-center items-center">
-                <p className='text-left w-[850px] text-xl max-[856px]:w-[600px] max-[610px]:w-[310px]'>
+                <p className='text-left w-[850px] text-xl max-[856px]:w-[600px] max-[610px]:w-[90vw] mx-auto'>
                 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-auto bg-[#D9D9D9] flex flex-col items-center rounded-md my-10 p-6 max-[856px]:w-[600px] max-[610px]:w-[310px]'>
+                <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-[90vw] mx-auto'>
                     <Image
                         src={otherLogos.lupa}
                         alt="Reportá logo"
                         width={112}
                         height={135}
                         className='my-8'
                     />
-                    <p className='uppercase text-2xl font-bold text-center px-4 text-der-black'>
+                    <p className='uppercase text-lg 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 mt-4 bg-[#CC4356] text-white w-[300px] text-center text-lg font-bold">
-                        ¿CÓMO REPORTAR?
+                        ¿QUÉ Y CÓMO REPORTAR?
                     </a>
                 </div>
             </div>

src/app/casos/page.tsx

@@ -17,18 +17,18 @@ const Casos = () => {
           ¿SABÍAS QUE EN ARGENTINA <br /> <span className="font-bold">HAY UNA MANERA SEGURA DE REPORTAR VULNERABILIDADES INFORMÁTICAS?</span>
         </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?
+          <a href="#reporta" type="button" className="flex items-center justify-center border-2 border-[#CC4356] rounded-xl p-2 my-2 bg-[#CC4356] text-white w-[300px] text-center font-extrabold">
+            <p>¿QUÉ Y CÓMO REPORTAR?</p>
           </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
+          <a href="#casos" type="button" className="flex items-center justify-center border-2 border-[#CC4356] rounded-xl p-2 my-2 bg-[#2D2D2D] text-[#CC4356] w-[300px] text-center font-extrabold">
+            <p>CASOS</p>
           </a>
         </div>
       </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'>LLEGÓ TARDE PARA ELLOS</h2>
-        <p className='font nippo text-der-black text-xl pl-12 my-4 font-medium'>
+        <h2 className='font-nippo text-5xl bg-[#CC4356] py-4 pl-10 sm:pl-14 pr-5 inline-block font-extrabold text-white'>LLEGÓ TARDE PARA ELLOS</h2>
+        <p className='font-nippo text-der-black text-xl px-10 sm:pl-12 my-4 font-medium'>
           TE CONTAMOS QUIÉNES SON Y CUÁL ES SU HISTORIA
         </p>
         <CaseSelector cases={cases} />

src/app/components/CollapseNavBar.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { useState } from "react"
+import NavLinks from "./NavLinks"
+import der from "~/shared/logoDerPastel.png"
+import Image from "next/image"
+import Link from "next/link"
+
+const CollapseNavBar = () => {
+    const [showMenu, setShowMenu] = useState(false)
+    let burgerMenuClass = 'hidden'
+    const navElemsSize = "w-8 h-8"
+
+    if (!showMenu) burgerMenuClass = 'hidden opacity-0'
+    else burgerMenuClass = 'flex flex-col items-center content-center z-20 fixed top-0 left-0 bg-der-black w-full h-[100vh] opacity-100'
+
+    return (
+        <>
+            <nav className="flex justify-between sm:hidden bg-black p-4">
+                <Link href={"/"} className={navElemsSize}>
+                    <Image src={der} alt="Inicio" />
+                </Link>
+                <button onClick={() => setShowMenu(prev => !prev)}>
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={navElemsSize}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+                    </svg>
+                </button>
+            </nav>
+            <div className={burgerMenuClass + ' transition-opacity delay-0 duration-500'} onClick={(event) => {
+                event.stopPropagation()
+                setShowMenu(false)
+            }}>
+                <button className="self-end p-4" onClick={() => setShowMenu(false)}>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-7 h-7">
+                        <path fillRule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" clipRule="evenodd" />
+                    </svg>
+                </button>
+                <ul className="font-raleway m-auto uppercase text-4xl [&_li]:mb-[3vh]">
+                    <NavLinks />
+                </ul>
+            </div>
+        </>
+    )
+}
+export default CollapseNavBar

src/app/components/Footer.tsx

@@ -13,29 +13,26 @@ const Footer = () => {
   const darkTheme = isDarkTheme(pathname)
 
   return (
-    <footer className={`${darkTheme ? 'bg-[#212121] text-white' : 'bg-[#F1F1F1] text-black'} flex flex-row justify-around flex-wrap gap-y-5 py-3 max-[425px]:flex-col max-[425px]:items-center`}>
-      <div>
-        <Link href="https://democraciaenred.org" target="_blank">
+    <footer className={`${darkTheme ? 'bg-[#212121] text-white' : 'bg-[#F1F1F1] text-black'} flex flex-row justify-around flex-wrap gap-y-5 py-3 max-[780px]:flex-col max-[780px]:items-center`}>
+      <Link href="https://democraciaenred.org" target="_blank">
+        <div className="w-full max-w-[300px] h-[54px] flex">
           {
             darkTheme ?
               <Image
                 alt="DER Logo"
                 src={sharedImages.der}
-                width={300}
-                height={54}
+                className="m-auto"
                 priority
               /> :
               <Image
                 alt="DER Logo"
                 src={sharedImages.dern}
-                width={300}
-                height={54}
+                className="m-auto"
                 priority
               />
           }
-        </Link>
-      </div>
-
+        </div>
+      </Link>
       <div className="flex flex-row gap-5 justify-center items-center content-center">
         <Link href="https://twitter.com/fundacionDER" target="_blank">
           <Image

src/app/components/LandingArticles.tsx

@@ -30,7 +30,7 @@ const LandingArticles = async () => {
                         {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>
+                        <span className="uppercase">Más novedades</span>
                     </Link>
                 </>)
             }

src/app/components/LandingTopics.tsx

@@ -28,10 +28,10 @@ const Card = ({ backgroundColor, title, description }: { backgroundColor: string
 
 const LandingTopics = () => {
   return (
-    <div className='bg-white text-black text-center flex flex-col items-center justify-center py-12 w-full'>
+    <div className='bg-white text-black text-center flex flex-col items-center justify-center py-12 w-full border-t-[#CC4356] border-t-4'>
       <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='flex flex-row flex-wrap justify-around gap-4 my-12 text-white'>
         <div className="h-[260px] w-[389px]">
           <Card
             backgroundColor="#CC4356"

src/app/components/NavBar.tsx

@@ -1,12 +1,16 @@
+import CollapseNavBar from "./CollapseNavBar"
 import NavLinks from "./NavLinks"
 
 const NavBar = () => {
     return (
-        <nav className="bg-black p-4">
-            <ul className="flex justify-center flex-wrap gap-5 uppercase font-inter">
-                <NavLinks />
-            </ul>
-        </nav>
+        <>
+            <nav className="hidden sm:block bg-black p-4">
+                <ul className="flex justify-center flex-wrap gap-5 uppercase font-inter">
+                    <NavLinks />
+                </ul>
+            </nav>
+            <CollapseNavBar/>
+        </>
     )
 }
 export default NavBar

src/app/components/SiteMapFooter.tsx

@@ -7,13 +7,13 @@ 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-4 text-xl font-roboto'>Un proyecto de</p>
+                <p className='mb-4 text-xl font-roboto text-white'>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]' />
                 </div>
             </div>
-            <ul className="grid grid-cols-3 sm:grid-cols-2 justify-items-center sm:justify-items-start capitalize text-lg whitespace-nowrap gap-4 sm:gap-x-14 md:mr-[10vw] lg:mr-[15vw]">
+            <ul className="grid grid-cols-3 sm:grid-cols-2 justify-items-center sm:justify-items-start capitalize text-lg whitespace-nowrap gap-4 sm:gap-x-14 md:mr-[10vw] lg:mr-[15vw] text-white">
                 <NavLinks />
             </ul>
         </div>

src/app/globals.css

@@ -10,18 +10,18 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --foreground-rgb: 255, 255, 255;
+    /* --foreground-rgb: 255, 255, 255;
     --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0; */
+    --foreground-rgb: 0, 0, 0;
+    --background-start-rgb: 214, 219, 220;
+    --background-end-rgb: 255, 255, 255;
   }
 }
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
+  background: linear-gradient(to bottom,
       transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
+      rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
+}

src/app/page.tsx

@@ -12,9 +12,9 @@ export default function Home() {
 
   return (
     <main className='bg-der-black'>
-      <div className="relative text-black">
-        <video className='w-full' autoPlay loop muted>
-          <source src={`https://democraciaenred.github.io/datosenfuga-next/home/background.mp4`} type="video/mp4" className='w-full' />
+      <div className="relative text-black h-[80vh]">
+        <video className='object-cover object-center w-full h-full' autoPlay loop muted>
+          <source src={`https://democraciaenred.github.io/datosenfuga-next/home/background.mp4`} type="video/mp4" />
         </video>
         <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full text-center">
           <h1 className="text-6xl font-extrabold mb-4 max-md:text-4xl">#DATOSENFUGA</h1>
@@ -82,12 +82,12 @@ export default function Home() {
         <div className="w-1/2 h-full bg-center bg-no-repeat bg-cover max-lg:w-full"  style={{ backgroundImage: `url(https://democraciaenred.github.io/datosenfuga-next/home/DER.png)`}}>
 
         </div>
-        <div className="w-full lg:w-[50%] py-2 my-11 px-11 max-lg:w-full">
+        <div className="flex flex-col justify-center gap-[2vw] w-full lg:w-[50%] max-lg:w-full p-[2vw]">
           <h2 className='text-4xl font-bold text-[#4C4C4E]'>Acerca de</h2>
-          <p className="text-sm my-8">
+          <p className="text-sm">
             Queremos que el Estado asegure estándares de ciberseguridad y que atienda a las alarmas que suenan por todos lados. Queremos que el Estado deje de perseguir penalmente a quienes identifican, denuncian y reportan vulnerabilidades informáticas.
           </p>
-          <Link href="/about" type="button" className="border-full border-[#CC4356] rounded-full py-4 px-16 bg-[#CC4356] text-white w-auto text-center uppercase text-lg">
+          <Link href="/about" type="button" className="self-start border-full border-[#CC4356] rounded-full py-4 px-16 bg-[#CC4356] text-white w-auto text-center uppercase text-lg">
             <span>Conocé más  </span>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className=" align-text-bottom inline w-5 h-5">
               <path fillRule="evenodd" d="M16.72 7.72a.75.75 0 011.06 0l3.75 3.75a.75.75 0 010 1.06l-3.75 3.75a.75.75 0 11-1.06-1.06l2.47-2.47H3a.75.75 0 010-1.5h16.19l-2.47-2.47a.75.75 0 010-1.06z" clipRule="evenodd" />