feat: add legal notices page

messages/en/layout.json

@@ -11,7 +11,8 @@
     "footer": {
       "allRight": "All rights reserved",
       "and": "and",
-      "donation": "Make a donation"
+      "donation": "Make a donation",
+      "legalNotice": "Legal notices"
     }
   },
   "siteConfig": {

messages/en/pages/legal.json

@@ -0,0 +1,10 @@
+{
+  "legal": {
+    "meta": {
+      "title": "Legal notices"
+    },
+    "title": "PinkBombs - Legal notices",
+    "sub": "In force as of October 10, 2024",
+    "content": "<p>In accordance with the provisions of Law No. 2004-575 of June 21, 2004 on Confidence in the Digital Economy, users and visitors, hereinafter the \"<strong>User</strong>\", of the site <a href=\"https://www.pinkbombs.org/en\">www.pinkbombs.org</a>, hereinafter the \"<strong>Site</strong>\", are hereby informed of these legal notices.</p><p>Connection and navigation on the Site by the User implies full and unreserved acceptance of these legal notices.</p><h2>Site publisher:</h2><p>The website <a href=\"https://www.pinkbombs.org/en\">www.pinkbombs.org</a> is published by the Seastemik association.</p><h2>Corporate name:</h2><p>Seastemik, Association declared according to the law of 1901, with the SIRET 92449298600014 and the head office at 6 rue Gambetta, 56100 Lorient, France</p><h2>Contact:</h2><p>Email: <a href=\"mailto:[email protected]\">[email protected]</a></p><h2>Publication manager:</h2><p>The publication manager is the Seastemik association.</p><h2>Website host:</h2><p>The website <a href=\"https://www.pinkbombs.org/en\">www.pinkbombs.org</a> is hosted by:<br />Vercel Inc.<br />Located at 340 S Lemon Ave #4133 Walnut, CA 91789<br />Phone: (559) 288-7060.</p><h2>Intellectual Property:</h2><p>All content on the <a href=\"https://www.pinkbombs.org/en\">www.pinkbombs.org</a> website, including but not limited to text, images, logos and graphics, is protected by copyright. Any total or partial reproduction of the site without the express authorization of the Seastemik association is prohibited.</p><h2>Personal data:</h2><p>The site <a href=\"https://www.pinkbombs.org/en\">www.pinkbombs.org</a> may collect personal data from its users, in accordance with the amended \"Informatique et Libertés\" law of January 6, 1978 and the General Data Protection Regulation (GDPR). Users have the right to access, rectify and delete personal data concerning them, which they can exercise by contacting the association at the following address: <a href=\"mailto:[email protected]\">[email protected]</a>.</p>"
+  }
+}

messages/fr/layout.json

@@ -11,7 +11,8 @@
     "footer": {
       "allRight": "Tous droits réservés",
       "and": "et",
-      "donation": "Faire un don"
+      "donation": "Faire un don",
+      "legalNotice": "Mentions légales"
     }
   },
   "siteConfig": {

messages/fr/pages/legal.json

@@ -0,0 +1,10 @@
+{
+  "legal": {
+    "meta": {
+      "title": "Mentions légales"
+    },
+    "title": "PinkBombs - Mentions légales",
+    "sub": "En vigueur au 10 octobre 2024",
+    "content": "<p>Conformément aux dispositions de la loi n°2004-575 du 21 juin 2004 pour la Confiance en l’économie numérique, il est porté à la connaissance des utilisateurs et visiteurs, ci-après l’« <strong>Utilisateur</strong> », du site <a href=\"https://www.pinkbombs.org\">www.pinkbombs.org</a>, ci-après le « <strong>Site</strong> », les présentes mentions légales.</p><p>La connexion et la navigation sur le Site par l’Utilisateur implique acceptation intégrale et sans réserve des présentes mentions légales.</p><h2>Éditeur du site :</h2><p>Le site internet <a href=\"https://www.pinkbombs.org\">www.pinkbombs.org</a> est édité par l’association Seastemik.</p><h2>Dénomination sociale :</h2><p>Seastemik, Association déclarée selon la loi de 1901, avec le SIRET 92449298600014 et le siège social  au 6 rue Gambetta, 56100 Lorient, France</p><h2>Contact :</h2><p>Email : <a href=\"mailto:[email protected]\">[email protected]</a></p><h2>Responsable de la publication :</h2><p>Le responsable de la publication est l'association Seastemik.</p><h2>Hébergeur du site :</h2><p>Le site <a href=\"https://www.pinkbombs.org\">www.pinkbombs.org</a> est hébergé par :<br />Vercel Inc.<br />Située 340 S Lemon Ave #4133 Walnut, CA 91789<br />Téléphone : (559) 288-7060.</p><h2>Propriété intellectuelle :</h2><p>L’ensemble des contenus présents sur le site <a href=\"https://www.pinkbombs.org\">www.pinkbombs.org</a>, y compris, mais sans s’y limiter, les textes, images, logos et graphismes, sont protégés par le droit d’auteur. Toute reproduction totale ou partielle du site sans autorisation expresse de l’association Seastemik est interdite.</p><h2>Données personnelles :</h2><p>Le site <a href=\"https://www.pinkbombs.org\">www.pinkbombs.org</a> peut collecter des données personnelles de ses utilisateurs, conformément à la loi « Informatique et Libertés » du 6 janvier 1978 modifiée et au Règlement Général sur la Protection des Données (RGPD). Les utilisateurs disposent d’un droit d’accès, de rectification et de suppression des données personnelles les concernant, qu’ils peuvent exercer en contactant l’association à l’adresse : <a href=\"mailto:[email protected]\">[email protected]</a>.</p>"
+  }
+}

src/app/[locale]/legal-notice/legal-notice.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import * as React from "react";
+import "@/lib/env";
+
+import IntroBlock from "@/components/IntroBlock";
+
+const LegalNotice = () => {
+  const t = useTranslations("legal");
+
+  return (
+    <>
+      <IntroBlock title={t("title")} baseline={t("sub")} />
+
+      <div
+        className="p-6 md:p-12 max-w-[1000px] mx-auto prose"
+        dangerouslySetInnerHTML={{ __html: t.raw("content") }}
+      />
+    </>
+  );
+};
+
+export default LegalNotice;

src/app/[locale]/legal-notice/page.tsx

@@ -0,0 +1,25 @@
+import { getTranslations } from "next-intl/server";
+import React from "react";
+import "@/lib/env";
+
+import { locales } from "@/navigation";
+
+import LegalNotice from "./legal-notice";
+
+export async function generateMetadata({
+  params: { locale },
+}: {
+  params: { locale: typeof locales };
+}) {
+  const t = await getTranslations({ locale, namespace: "legal" });
+
+  return {
+    title: t("meta.title"),
+  };
+}
+
+const Page = () => {
+  return <LegalNotice />;
+};
+
+export default Page;

src/components/IntroBlock.tsx

@@ -7,12 +7,14 @@ import Summary, { SummaryLinksProps } from "@/components/Summary";
 const IntroBlock = ({
   className,
   title,
+  baseline,
   image,
   summary,
 }: {
   className?: string;
   title: string;
   image?: string;
+  baseline?: string;
   summary?: SummaryLinksProps;
 }) => {
   if (!title) {
@@ -35,6 +37,9 @@ const IntroBlock = ({
         )}
         <div className="row-start-3 self-end items-left flex flex-wrap gap-2 items-end">
           <h1 className={clsx("h1", "flex-1")}>{title}</h1>
+          {baseline ? (
+            <p className="mt-2 w-full text-black">{baseline}</p>
+          ) : null}
 
           {summary ? <Summary className="w-full" links={summary} /> : null}
         </div>

src/components/layout/Footer.tsx

@@ -97,8 +97,12 @@ const Footer = () => {
         </div>
 
         <p className="p-caption mt-6 lg:mt-12">
-          {t("footer.allRight")} <br />© {currentYear} Seastemik{" "}
-          {t("footer.and")} Data for Good
+          {t("footer.allRight")} - © {currentYear} Seastemik {t("footer.and")}{" "}
+          Data for Good
+          <br />
+          <a href="/legal-notice" className="underline hover:no-underline">
+            {t("footer.legalNotice")}
+          </a>
         </p>
       </div>
     </footer>

src/i18n.ts

@@ -11,6 +11,7 @@ export default getRequestConfig(async ({ locale }) => {
     messages: {
       ...(await import(`../messages/${locale}/pages/about.json`)).default,
       ...(await import(`../messages/${locale}/pages/act.json`)).default,
+      ...(await import(`../messages/${locale}/pages/legal.json`)).default,
       ...(await import(`../messages/${locale}/pages/dashboard.json`)).default,
       ...(await import(`../messages/${locale}/pages/story.json`)).default,
       ...(await import(`../messages/${locale}/components.json`)).default,

src/styles/globals.css

@@ -100,6 +100,10 @@
     @apply font-bold;
   }
 
+  .prose h2 {
+    @apply text-red1 mt-16 lg:mt-20 mb-8;
+  }
+
   .prose h3 {
     @apply text-red1 mt-16 lg:mt-20 mb-8;
   }