From 77cdd394b947a99b70654cd1f5aff3ee724b76fc Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Thu, 1 Jan 2026 02:46:29 +0100
Subject: Add enmarcha announcement

---
 .../app/components/EnMarchaAnnouncement.tsx        | 119 +++++++++++++++++++++
 src/frontend/app/components/layout/AppShell.tsx    |   5 +
 2 files changed, 124 insertions(+)
 create mode 100644 src/frontend/app/components/EnMarchaAnnouncement.tsx

(limited to 'src/frontend/app/components')

diff --git a/src/frontend/app/components/EnMarchaAnnouncement.tsx b/src/frontend/app/components/EnMarchaAnnouncement.tsx
new file mode 100644
index 0000000..0e7d0dd
--- /dev/null
+++ b/src/frontend/app/components/EnMarchaAnnouncement.tsx
@@ -0,0 +1,119 @@
+import { AlertCircle, CheckCircle2, ExternalLink, Smartphone, X } from "lucide-react";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Sheet } from "react-modal-sheet";
+
+interface EnMarchaAnnouncementProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const EnMarchaAnnouncement: React.FC<EnMarchaAnnouncementProps> = ({
+  isOpen,
+  onClose,
+}) => {
+  const { t } = useTranslation();
+
+  const features = [
+    "feature_planner",
+    "feature_realtime",
+    "feature_operators",
+    "feature_ui",
+    "feature_more",
+  ];
+
+  return (
+    <Sheet isOpen={isOpen} onClose={onClose} detent="content">
+      <Sheet.Container className="bg-white! dark:bg-black! !rounded-t-[20px]">
+        <Sheet.Header className="bg-white! dark:bg-black! !rounded-t-[20px]" />
+        <Sheet.Content>
+          <div className="p-6 pb-10 flex flex-col gap-6 overflow-y-auto max-h-[85vh] text-slate-900 dark:text-slate-100">
+            <div className="flex justify-between items-start">
+              <h2 className="text-2xl font-bold tracking-tight">
+                {t("enmarcha_announcement.title")}
+              </h2>
+              <button
+                onClick={onClose}
+                className="p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
+                aria-label={t("enmarcha_announcement.close")}
+              >
+                <X className="w-6 h-6 text-slate-400" />
+              </button>
+            </div>
+
+            <div className="space-y-4">
+              <div className="p-4 rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-100 dark:border-amber-900/30 flex gap-3 items-center">
+                <AlertCircle className="w-5 h-5 text-amber-600 dark:text-amber-400 shrink-0" />
+                <p className="text-sm font-semibold text-amber-800 dark:text-amber-300">
+                  {t("enmarcha_announcement.discontinuation_notice")}
+                </p>
+              </div>
+
+              <p className="text-slate-600 dark:text-slate-300 leading-relaxed">
+                {t("enmarcha_announcement.description")}
+              </p>
+
+              <div className="space-y-3 py-2">
+                <h3 className="font-bold text-sm uppercase tracking-wider text-slate-500 dark:text-slate-400">
+                  {t("enmarcha_announcement.features_title")}
+                </h3>
+                <ul className="space-y-2">
+                  {features.map((feature) => (
+                    <li key={feature} className="flex gap-3 items-start text-sm">
+                      <CheckCircle2 className="w-4 h-4 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5" />
+                      <span>{t(`enmarcha_announcement.${feature}`)}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              <a
+                href="https://enmarcha.app"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center justify-center gap-2 w-full py-3 px-6 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-xl transition-all active:scale-[0.98]"
+              >
+                {t("enmarcha_announcement.link_text")}
+                <ExternalLink className="w-5 h-5" />
+              </a>
+            </div>
+
+            <div className="space-y-4 pt-2">
+              <div className="flex items-center gap-2">
+                <Smartphone className="w-5 h-5 text-slate-400" />
+                <h3 className="font-bold text-lg">
+                  {t("enmarcha_announcement.install_title")}
+                </h3>
+              </div>
+
+              <div className="grid gap-3">
+                <div className="p-4 rounded-xl bg-slate-50 dark:bg-slate-900 border border-slate-100 dark:border-slate-800">
+                  <h4 className="font-bold text-slate-700 dark:text-slate-300 mb-1">Android</h4>
+                  <div className="space-y-2 text-sm text-slate-600 dark:text-slate-400">
+                    <p>{t("enmarcha_announcement.android_chrome")}</p>
+                    <p>{t("enmarcha_announcement.android_firefox")}</p>
+                  </div>
+                </div>
+
+                <div className="p-4 rounded-xl bg-slate-50 dark:bg-slate-900 border border-slate-100 dark:border-slate-800">
+                  <h4 className="font-bold text-slate-700 dark:text-slate-300 mb-1">iOS</h4>
+                  <p className="text-sm text-slate-600 dark:text-slate-400">
+                    {t("enmarcha_announcement.ios_safari")}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <button
+              onClick={onClose}
+              className="w-full py-2 text-slate-500 dark:text-slate-400 text-sm font-medium hover:text-slate-700 dark:hover:text-slate-200 transition-colors"
+            >
+              {t("enmarcha_announcement.close")}
+            </button>
+          </div>
+        </Sheet.Content>
+      </Sheet.Container>
+      <Sheet.Backdrop onTap={onClose} />
+    </Sheet>
+  );
+};
diff --git a/src/frontend/app/components/layout/AppShell.tsx b/src/frontend/app/components/layout/AppShell.tsx
index afc19f3..1088035 100644
--- a/src/frontend/app/components/layout/AppShell.tsx
+++ b/src/frontend/app/components/layout/AppShell.tsx
@@ -1,9 +1,11 @@
 import React, { useState } from "react";
 import { Outlet } from "react-router";
+import { useEnMarchaAnnouncement } from "~/hooks/useEnMarchaAnnouncement";
 import {
   PageTitleProvider,
   usePageTitleContext,
 } from "~/contexts/PageTitleContext";
+import { EnMarchaAnnouncement } from "../EnMarchaAnnouncement";
 import { ThemeColorManager } from "../ThemeColorManager";
 import "./AppShell.css";
 import { Drawer } from "./Drawer";
@@ -13,6 +15,7 @@ import NavBar from "./NavBar";
 const AppShellContent: React.FC = () => {
   const { title } = usePageTitleContext();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const { isOpen, closeAnnouncement } = useEnMarchaAnnouncement();
 
   return (
     <div className="app-shell">
@@ -31,6 +34,8 @@ const AppShellContent: React.FC = () => {
       <footer className="app-shell__bottom-nav">
         <NavBar />
       </footer>
+
+      <EnMarchaAnnouncement isOpen={isOpen} onClose={closeAnnouncement} />
     </div>
   );
 };
-- 
cgit v1.3