Enhance web content (#3)

apps/web/app/[lang]/layout.tsx

@@ -28,7 +28,7 @@ export default function RootLayout({
                 zemích
               </p>
             </Link>
-            <nav className="grid grid-flow-col auto-cols-max gap-2">
+            <nav className="flex flex-wrap gap-2">
               <Link href="/cs" className="underline hover:no-underline">
                 Domů
               </Link>

apps/web/app/[lang]/page.tsx

@@ -84,6 +84,18 @@ export default function Page(): JSX.Element {
             </a>{" "}
             v&nbsp;Rakousku
           </li>
+          <li>
+            <em> ještě letos v 🇧🇦 Bosně a Hercegovině</em>
+          </li>
+          <li>
+            <em>v roce 2025 v 🇽🇰 Kosovu</em>
+          </li>
+          <li>
+            <em>v roce 2025 v 🇦🇱 Albánii</em>
+          </li>
+          <li>
+            <em>v roce 2025 v 🇲🇰 Severní Makedonii</em>
+          </li>
         </ul>
         <p>
           Naše volební kalkulačky vyplní statisíce voličů každý rok. Jen

apps/web/app/[lang]/podporte-kalkulacku/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Link from "next/link";
 import { useEffect } from "react";
 
 export default function Page(): JSX.Element {
@@ -14,5 +15,109 @@ export default function Page(): JSX.Element {
     Darujme(1, "w2acrk0w61fgr3so", 'render', "https://www.darujme.cz/widget?token=w2acrk0w61fgr3so", "100%");`);
   }, []);
 
-  return <div data-darujme-widget-token="w2acrk0w61fgr3so">Načítám…</div>;
+  return (
+    <section className="max-w-2xl grid gap-8">
+      <section className="grid gap-2">
+        <h2 className="text-3xl font-bold">
+          Podpořte Volební kalkulačku a&nbsp;demokracii
+        </h2>
+        <p>
+          Líbí se vám Volební kalkulačka? Díky dobrovolníkům a štědrým dárcům
+          můžeme kalkulačku poskytovat zdarma.
+        </p>
+        <p>
+          Abychom však mohli pokračovat v naší práci pro nadcházející volby a
+          vylepšovat kalkulačku, potřebujeme vaši pomoc. Přidejte se do klubu
+          podporovatelů nebo nás podpořte jednorázově. Každý příspěvek se
+          počítá!
+        </p>
+        <p>
+          Nebo se{" "}
+          <Link href="/cs/zapojit-se" className="underline hover:no-underline">
+            přidejte k našemu týmu dobrovolníků
+          </Link>{" "}
+          a pomozte milionům lidí, kteří Volební kalkulačku využívají.
+        </p>
+        <p>
+          Vaše podpora je klíčová pro to, abychom mohli pokračovat v naší práci
+          pro nadcházející volby a vylepšovat kalkulačku. Děkujeme!
+        </p>
+      </section>
+      <section className="grid gap-2">
+        <h3 className="text-2xl font-bold">
+          Přidejte se do klubu podporovatelů
+        </h3>
+        <p>
+          Přidejte se do klubu podporovatelů Volební kalkulačky na{" "}
+          <a
+            href="https://www.patreon.com/volebnikalkulacka"
+            className="underline hover:no-underline"
+          >
+            Patreonu
+          </a>{" "}
+          nebo{" "}
+          <a
+            href="https://herohero.co/volebnikalkulacka"
+            className="underline hover:no-underline"
+          >
+            Herohero
+          </a>{" "}
+          a kromě dobrého pocitu, že pomůžete zajistit tvorbu dalších kalkulaček
+          a podpoříte demokracii:
+        </p>
+        <ul className="list-disc pl-6">
+          <li>vám poděkujeme v kalkulačce</li>
+          <li>
+            získáte exkluzivní přístup ke kalkulačce den před oficiálním
+            spuštěním
+          </li>
+          <li>
+            budete moci navrhnout otázku do kalkulačky a společně s ostatními
+            podporovateli hlasovat, která otázka se do kalkulačky dostane
+          </li>
+        </ul>
+        <div className="flex gap-2">
+          <a
+            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+            href="https://www.patreon.com/volebnikalkulacka"
+          >
+            Přidat se na Patreonu
+          </a>
+          <a
+            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+            href="https://herohero.co/volebnikalkulacka"
+          >
+            Přidat se na Herohero
+          </a>
+        </div>
+      </section>
+      <section className="grid gap-2">
+        <h3 className="text-2xl font-bold">Jednorázový příspěvek</h3>
+        <p>Nebo nás můžete podpořit i jednorázově:</p>
+        <div className="max-w-md" data-darujme-widget-token="w2acrk0w61fgr3so">
+          Načítám…
+        </div>
+        <p>Děkujeme!</p>
+      </section>
+      <section className="grid gap-2">
+        <p>
+          Chcete se na něco zeptat? Napište nám e-mail:{" "}
+          <a
+            href="mailto:[email protected]"
+            className="underline hover:no-underline"
+          >
+            [email protected]
+          </a>{" "}
+          nebo zprávu na{" "}
+          <a
+            href="https://twitter.com/kalkulacka_one"
+            className="underline hover:no-underline"
+          >
+            <span className="line-through">Twitteru</span> X
+          </a>
+          .
+        </p>
+      </section>
+    </section>
+  );
 }

apps/web/app/[lang]/vlastni-kalkulacka/page.tsx

@@ -17,10 +17,10 @@ export default function Page(): JSX.Element {
           Zajímají vás podrobnosti nebo chcete připravit cenovou nabídku?
           Kontaktujte nás ještě dnes na{" "}
           <a
-            href="mailto:[email protected]"
+            href="mailto:[email protected]"
             className="underline hover:no-underline"
           >
-            [email protected]
+            [email protected]
           </a>{" "}
           nebo zavolejte autorovi Volební kalkulačky Michalu Škopovi na{" "}
           <a href="tel:+420735518529">+420 735 518 529</a>.

apps/web/app/[lang]/zapojte-se/page.tsx

@@ -14,13 +14,17 @@ export default function Page(): JSX.Element {
         </p>
         <p>
           <strong>A potřebujeme vaši pomoc.</strong> Přidejte se k našemu týmu
-          dobrovolníků a podpořte férové volby. Práce na volební kalkulačce je
-          pestrá i různě rozložená v&nbsp;čase, takže určitě najdete příležitost
-          vhodnou právě pro vás.
+          dobrovolníků, podpořte férové volby a pomozte milionům lidí, kteří
+          Volební kalkulačku využívají. Jen prezidentskou kalkulačku v Česku
+          vyplnilo v roce 2023 přes 1 milion lidí!
         </p>
         <p>
-          Každé pomoci si velmi vážíme. A pokud se nemůžete zapojit přímo,
-          můžete nás{" "}
+          Práce na volební kalkulačce je pestrá i různě rozložená v&nbsp;čase,
+          takže určitě najdete příležitost vhodnou právě pro vás. Každé pomoci
+          si velmi vážíme.
+        </p>
+        <p>
+          A pokud se nemůžete zapojit přímo, můžete nás{" "}
           <Link
             href="/cs/podporte-kalkulacku"
             className="underline hover:no-underline"
@@ -30,12 +34,19 @@ export default function Page(): JSX.Element {
           . Moc děkujeme!
         </p>
         <p>
-          Chcete se zapojit nebo se na něco zeptat? Napište nám na{" "}
+          Chcete se zapojit nebo se na něco zeptat? Napište nám e-mail:{" "}
+          <a
+            href="mailto:[email protected]"
+            className="underline hover:no-underline"
+          >
+            [email protected]
+          </a>{" "}
+          nebo zprávu na{" "}
           <a
-            href="mailto:[email protected]"
+            href="https://twitter.com/kalkulacka_one"
             className="underline hover:no-underline"
           >
-            [email protected]
+            <span className="line-through">Twitteru</span> X
           </a>
           .
         </p>
@@ -68,36 +79,19 @@ export default function Page(): JSX.Element {
           </li>
           <li>
             <section className="grid gap-1">
-              <h4 className="text-lg font-bold">
-                Příprava otázek a sběr odpovědí
-              </h4>
-              <p>
-                Pro každou kalkulačku musíme připravit kolem 100 precizně
-                formulovaných otázek a získat odpovědi od všech politiků či
-                politických stran. Pomůžete nám s přípravou otázek, sběrem
-                odpovědí nebo rovnou obojím?
-              </p>
-              <p>
-                <strong>Kdy?</strong> Otázky začínáme připravovat cca měsíc před
-                každými volbami a sběr odpovědí vrcholí těsně před spuštěním
-                kalkulačky. Tedy teď u krajských a senátních voleb to bude v
-                polovině srpna 2024.
-              </p>
-              <p>
-                <strong>Jak dlouho?</strong> Zapojit se můžete klidně
-                jednorázově pro jedny volby. Počítejte s flexibilní časovou
-                náročností jednotek hodin.
-              </p>
-            </section>
-          </li>
-          <li>
-            <section className="grid gap-1">
-              <h4 className="text-lg font-bold">Komunikace & sociální sítě</h4>
+              <h4 className="text-lg font-bold">Marketing & copywriting</h4>
               <p>
                 Rádi bychom zapracovali na komunikaci volební kalkulačky, aby se
                 dostala k co nejvíce voličům. A taky trochu šlápli do sociálních
                 sítí. Pomůžete nám s tím?
               </p>
+              <ul className="list-disc pl-6">
+                <li>PR a tiskové zprávy</li>
+                <li>newslettery</li>
+                <li>obsah a komunikace na sociálních sítích</li>
+                <li>doplňující obsah a články na webu</li>
+                <li>a další komunikace</li>
+              </ul>
               <p>
                 <strong>Kdy?</strong> Zejména při spuštění volební kalkulačky
                 (cca 2 týdny před volbami), ale do přípravy a strategické
@@ -106,18 +100,18 @@ export default function Page(): JSX.Element {
               <p>
                 <strong>Jak dlouho?</strong> Dlouhodobá posila do týmu by byla
                 nejlepší, ale budeme rádi i za jednorázovou pomoc pro jedny
-                volby.
+                volby nebo jen v jedné oblasti.
               </p>
             </section>
           </li>
           <li>
             <section className="grid gap-1">
               <h4 className="text-lg font-bold">Vývoj aplikace</h4>
               <p>
-                Novou generaci kalkulačky jsme spustili v roce 2022 a od té
-                doby narazili na spoustu technických limitů. Rozhodli jsme se
-                proto aplikaci přepsat, poučit se z chyb a připravit ji na
-                mezinárodní expanzi.
+                Novou generaci kalkulačky jsme spustili v roce 2022 a od té doby
+                narazili na spoustu technických limitů. Rozhodli jsme se proto
+                aplikaci přepsat, poučit se z chyb a připravit ji na mezinárodní
+                expanzi.
               </p>
               <p>
                 Pracujeme s populárními technologiemi: React, NextJS, Tailwind
@@ -126,9 +120,16 @@ export default function Page(): JSX.Element {
                   href="https://github.com/kalkulacka-one/kalkulacka"
                   className="underline hover:no-underline"
                 >
-                  open-source na GitHubu
+                  open-source na našem GitHubu
+                </a>{" "}
+                (současná kalkulačka zatím ještě na{" "}
+                <a
+                  href="https://github.com/cesko-digital/volebni-kalkulacka-2022"
+                  className="underline hover:no-underline"
+                >
+                  GitHubu Česko.Digital
                 </a>
-                , kalkulačka beží na Vercelu a developer experience je pro nás
+                ), kalkulačka beží na Vercelu a developer experience je pro nás
                 priorita číslo 1: nemusíte se bát, že spálíte týden času, než
                 něco skutečně uděláte.
               </p>
@@ -142,6 +143,30 @@ export default function Page(): JSX.Element {
               </p>
             </section>
           </li>
+          <li>
+            <section className="grid gap-1">
+              <h4 className="text-lg font-bold">
+                Příprava otázek a sběr odpovědí
+              </h4>
+              <p>
+                Pro každou kalkulačku musíme připravit kolem 100 precizně
+                formulovaných otázek a získat odpovědi od všech politiků či
+                politických stran. Pomůžete nám s přípravou otázek, sběrem
+                odpovědí nebo rovnou obojím?
+              </p>
+              <p>
+                <strong>Kdy?</strong> Otázky začínáme připravovat cca měsíc před
+                každými volbami a sběr odpovědí vrcholí těsně před spuštěním
+                kalkulačky. Tedy teď u krajských a senátních voleb to bude v
+                polovině srpna 2024.
+              </p>
+              <p>
+                <strong>Jak dlouho?</strong> Zapojit se můžete klidně
+                jednorázově pro jedny volby. Počítejte s flexibilní časovou
+                náročností jednotek hodin.
+              </p>
+            </section>
+          </li>
           <li>
             <section className="grid gap-1">
               <h4 className="text-lg font-bold">UX design & grafika</h4>
@@ -160,17 +185,41 @@ export default function Page(): JSX.Element {
               </p>
             </section>
           </li>
+          <li>
+            <section className="grid gap-1">
+              <h4 className="text-lg font-bold">Právní služby</h4>
+              <p>
+                Potřebovali bychom pomoct s právními dokumenty, jako je licence
+                pro open-source aplikaci, podmínky použití a ochrana osobních
+                údajů. Něco máme, ale potřebujeme to doladit.
+              </p>
+              <p>
+                <strong>Kdy?</strong> Kdykoliv.
+              </p>
+              <p>
+                <strong>Jak dlouho?</strong> Jednorázově a případně na
+                konzultace nebo zapracování nové legislativy v budoucnu.
+              </p>
+            </section>
+          </li>
         </ul>
         <h2 className="text-2xl font-bold">Jak se zapojit?</h2>
         <p>
           Napište nám e-mail:{" "}
           <a
-            href="mailto:[email protected]"
+            href="mailto:[email protected]"
             className="underline hover:no-underline"
           >
-            [email protected]
+            [email protected]
+          </a>{" "}
+          nebo zprávu na{" "}
+          <a
+            href="https://twitter.com/kalkulacka_one"
+            className="underline hover:no-underline"
+          >
+            <span className="line-through">Twitteru</span> X
           </a>
-          .
+          . Děkujeme!
         </p>
       </section>
     </section>