feat(web): afegir pagina /qui-som amb transparencia i privacitat

web/src/components/Header.astro

@@ -4,7 +4,7 @@ import LanguageToggle from "./LanguageToggle.astro";
 
 interface Props {
   lang?: Lang;
-  active: "home" | "map" | "methodology" | "islands" | "data" | "press";
+  active: "home" | "map" | "methodology" | "islands" | "data" | "press" | "about";
 }
 
 const { lang: langProp, active } = Astro.props;
@@ -16,8 +16,9 @@ const isMetod = path.startsWith("/metodologia");
 const isIslands = path.startsWith("/illes");
 const isData = path.startsWith("/dades");
 const isPress = path.startsWith("/premsa");
+const isAbout = path.startsWith("/qui-som");
 
-const navLink = (key: "home" | "map" | "methodology" | "islands" | "data" | "press") =>
+const navLink = (key: "home" | "map" | "methodology" | "islands" | "data" | "press" | "about") =>
   `text-sm font-medium px-3 py-1.5 rounded transition-colors ${
     active === key
       ? "text-orange-700 bg-orange-50"
@@ -26,7 +27,7 @@ const navLink = (key: "home" | "map" | "methodology" | "islands" | "data" | "pre
 ---
 
 <header class="border-b border-stone-200 bg-white sticky top-0 z-40">
-  <div class="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between gap-4">
+  <div class="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between gap-4 flex-wrap">
     <a href="/" class="flex items-baseline gap-2 group">
       <span class="text-lg font-bold text-stone-900 group-hover:text-orange-700">
         {t(lang, "site.title")}
@@ -71,6 +72,13 @@ const navLink = (key: "home" | "map" | "methodology" | "islands" | "data" | "pre
       >
         {t(lang, "nav.press")}
       </a>
+      <a
+        href="/qui-som"
+        class={navLink("about")}
+        aria-current={isAbout ? "page" : undefined}
+      >
+        {t(lang, "nav.about")}
+      </a>
       <a
         href="/metodologia"
         class={navLink("methodology")}

web/src/i18n/ca.json

@@ -11,7 +11,8 @@
     "methodology": "Metodologia",
     "islands": "Per illa",
     "data": "Dades",
-    "press": "Premsa"
+    "press": "Premsa",
+    "about": "Qui som"
   },
   "lang_toggle": {
     "label": "Idioma",
@@ -231,5 +232,24 @@
     "cite_3": "Segons dades de l'INE (2024)...",
     "section_disclaimer_title": "Avís legal",
     "disclaimer_body": "Totes les dades provenen de fonts públiques oficials o obertes. No fem cap acusació individual. Si detectes una errada, escriu-nos i la corregirem."
+  },
+  "about": {
+    "title": "Qui som",
+    "lead": "Una iniciativa ciutadana independent. Sense afiliació política, sense finançament públic o privat. Només dades, mètode i codi obert.",
+    "section_who_title": "Qui som",
+    "section_who_p1": "Cases Tancades és un projecte personal d'anàlisi de dades sobre l'habitatge a les Illes Balears. Va néixer de la impressió que el debat públic sobre el lloguer turístic es quedava en opinions i titulars, sense xifres compartides i verificables.",
+    "section_who_p2": "L'objectiu és posar sobre la taula una lectura honesta del que sabem i del que no sabem. Creuar dades oficials existents — sense inventar-ne cap — i fer-les accessibles a la ciutadania.",
+    "section_who_p3": "El projecte no està vinculat a cap partit polític, associació professional, empresa ni administració. No rebem finançament públic ni privat. Si en algun moment es plantegés, es faria públic aquí.",
+    "section_interest_title": "Conflicte d'interès",
+    "section_interest_body": "Cap. L'autora no té propietats a Balears, ni participació en empreses turístiques, immobiliàries o de mitjans. L'objectiu és periodístic i documental, no comercial.",
+    "section_privacy_title": "Privacitat",
+    "section_privacy_body": "Aquesta web no utilitza cap eina d'analítica ni de seguiment. No hi ha Google Analytics, ni Facebook Pixel, ni cap cookie de tercers. L'única cookie que es desa és la de preferència d'idioma (ca/es) — sense ella el botó d'idioma no funciona.",
+    "section_contribute_title": "Com contribuir",
+    "section_contribute_intro": "El projecte és obert. Tothom hi pot col·laborar:",
+    "contribute_issues": " Obrir un issue a GitHub si detectes una errada a les dades",
+    "contribute_prs": " Enviar un pull request amb millores al codi o noves visualitzacions",
+    "contribute_sources": " Proposar noves fonts de dades públiques que es puguin afegir",
+    "contribute_share": " Difondre el projecte a través de xarxes o mitjans",
+    "section_methodology_link": "Per saber com hem fet el càlcul, consulta la"
   }
 }

web/src/i18n/es.json

@@ -11,7 +11,8 @@
     "methodology": "Metodología",
     "islands": "Por isla",
     "data": "Datos",
-    "press": "Prensa"
+    "press": "Prensa",
+    "about": "Quiénes somos"
   },
   "lang_toggle": {
     "label": "Idioma",
@@ -231,5 +232,24 @@
     "cite_3": "Según datos del INE (2024)...",
     "section_disclaimer_title": "Aviso legal",
     "disclaimer_body": "Todos los datos provienen de fuentes públicas oficiales o abiertas. No hacemos ninguna acusación individual. Si detectas un error, escríbenos y lo corregiremos."
+  },
+  "about": {
+    "title": "Quiénes somos",
+    "lead": "Una iniciativa ciudadana independiente. Sin afiliación política, sin financiación pública o privada. Solo datos, método y código abierto.",
+    "section_who_title": "Quiénes somos",
+    "section_who_p1": "Cases Tancades es un proyecto personal de análisis de datos sobre la vivienda en las Islas Baleares. Nació de la impresión de que el debate público sobre el alquiler turístico se quedaba en opiniones y titulares, sin cifras compartidas y verificables.",
+    "section_who_p2": "El objetivo es poner sobre la mesa una lectura honesta de lo que sabemos y lo que no sabemos. Cruzar datos oficiales existentes — sin inventar ninguno — y hacerlos accesibles a la ciudadanía.",
+    "section_who_p3": "El proyecto no está vinculado a ningún partido político, asociación profesional, empresa ni administración. No recibimos financiación pública ni privada. Si en algún momento se planteara, se haría público aquí.",
+    "section_interest_title": "Conflicto de interés",
+    "section_interest_body": "Ninguno. La autora no tiene propiedades en Baleares, ni participación en empresas turísticas, inmobiliarias o de medios. El objetivo es periodístico y documental, no comercial.",
+    "section_privacy_title": "Privacidad",
+    "section_privacy_body": "Esta web no utiliza ninguna herramienta de analítica ni de seguimiento. No hay Google Analytics, ni Facebook Pixel, ni ninguna cookie de terceros. La única cookie que se guarda es la de preferencia de idioma (ca/es) — sin ella el botón de idioma no funciona.",
+    "section_contribute_title": "Cómo contribuir",
+    "section_contribute_intro": "El proyecto es abierto. Todo el mundo puede colaborar:",
+    "contribute_issues": " Abrir un issue en GitHub si detectas un error en los datos",
+    "contribute_prs": " Enviar un pull request con mejoras al código o nuevas visualizaciones",
+    "contribute_sources": " Proponer nuevas fuentes de datos públicos que se puedan añadir",
+    "contribute_share": " Difundir el proyecto a través de redes o medios",
+    "section_methodology_link": "Para saber cómo hemos hecho el cálculo, consulta la"
   }
 }

web/src/pages/qui-som.astro

@@ -0,0 +1,85 @@
+---
+export const prerender = false;
+import Base from "../layouts/Base.astro";
+import { getLangFromAstroCookies, t, type Lang } from "../i18n";
+
+const lang: Lang = getLangFromAstroCookies(Astro.cookies);
+const repoUrl = "https://github.com/itziarZG/Vivienda";
+const description = t(lang, "about.lead");
+---
+
+<Base
+  lang={lang}
+  active="about"
+  title={t(lang, "about.title")}
+  description={description}
+>
+  <section class="bg-gradient-to-b from-orange-50 to-stone-50 border-b border-stone-200">
+    <div class="max-w-4xl mx-auto px-4 py-12 sm:py-16 text-center">
+      <h1 class="text-3xl sm:text-4xl font-bold text-stone-900 mb-4">
+        {t(lang, "about.title")}
+      </h1>
+      <p class="text-base sm:text-lg text-stone-700 max-w-2xl mx-auto">
+        {description}
+      </p>
+    </div>
+  </section>
+
+  <section class="max-w-3xl mx-auto px-4 py-12">
+    <h2 class="text-2xl sm:text-3xl font-bold text-stone-900 mb-6">
+      {t(lang, "about.section_who_title")}
+    </h2>
+    <div class="prose prose-stone max-w-none space-y-4 text-stone-800 leading-relaxed">
+      <p>{t(lang, "about.section_who_p1")}</p>
+      <p>{t(lang, "about.section_who_p2")}</p>
+      <p>{t(lang, "about.section_who_p3")}</p>
+    </div>
+  </section>
+
+  <section class="max-w-3xl mx-auto px-4 py-12 border-t border-stone-200">
+    <h2 class="text-2xl sm:text-3xl font-bold text-stone-900 mb-4">
+      {t(lang, "about.section_interest_title")}
+    </h2>
+    <p class="text-stone-800 leading-relaxed">
+      {t(lang, "about.section_interest_body")}
+    </p>
+  </section>
+
+  <section class="max-w-3xl mx-auto px-4 py-12 border-t border-stone-200">
+    <h2 class="text-2xl sm:text-3xl font-bold text-stone-900 mb-4">
+      {t(lang, "about.section_privacy_title")}
+    </h2>
+    <p class="text-stone-800 leading-relaxed">
+      {t(lang, "about.section_privacy_body")}
+    </p>
+  </section>
+
+  <section class="max-w-3xl mx-auto px-4 py-12 border-t border-stone-200">
+    <h2 class="text-2xl sm:text-3xl font-bold text-stone-900 mb-4">
+      {t(lang, "about.section_contribute_title")}
+    </h2>
+    <p class="text-stone-800 mb-4">{t(lang, "about.section_contribute_intro")}</p>
+    <ul class="space-y-2 text-stone-800 list-none">
+      <li>· {t(lang, "about.contribute_issues")}</li>
+      <li>· {t(lang, "about.contribute_prs")}</li>
+      <li>· {t(lang, "about.contribute_sources")}</li>
+      <li>· {t(lang, "about.contribute_share")}</li>
+    </ul>
+    <p class="text-stone-800 mt-6 leading-relaxed">
+      {t(lang, "about.section_methodology_link")}
+      <a href="/metodologia" class="text-orange-700 hover:text-orange-800 underline underline-offset-2">{t(lang, "nav.methodology").toLowerCase()}</a>.
+    </p>
+  </section>
+
+  <section class="max-w-3xl mx-auto px-4 py-12 border-t border-stone-200">
+    <a
+      href={repoUrl}
+      class="inline-flex items-center gap-2 px-5 py-2.5 border border-stone-300 text-stone-800 font-medium rounded hover:bg-stone-100"
+    >
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.4 3-.405 1.02.005 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+      </svg>
+      {repoUrl} →
+    </a>
+  </section>
+</Base>