feat: react-based website

src/components/cards/CardHeadline.js

+import React from "react";
+import classNames from "classnames";
+
+const CardHeadline = ({ children, className }) => {
+  const cls = classNames("card-headline", className);
+  return <h1 className={cls}>{children}</h1>;
+};
+
+export default CardHeadline;

src/components/cards/index.js

+export { default as Card } from "./Card";
+export { default as CardActions } from "./CardActions";
+export { default as CardBody } from "./CardBody";
+export { default as CardBodyText } from "./CardBodyText";
+export { default as CardHeadline } from "./CardHeadline";

src/config.js

+export const basics = {
+  appTitle: "CF 2022",
+  appDesc:
+    "Oficiální stránka letošního ročníku zasedání Celostátního fóra České pirátské strany, 8. - 9. 1. 2022.",
+};
+
+export const map = {
+  center: { lat: 50.03470585017971, lon: 15.781673696482517, zoom: 15 },
+  markers: [
+    {
+      title: "IDEON",
+      desc: "Zde bude probíhat jednání celostátního fóra",
+      coords: { lat: 50.03470585017971, lon: 15.781673696482517 },
+      type: "event",
+    },
+    {
+      title: "Hotel Atrium",
+      desc: "Ubytování",
+      coords: { lat: 50.03466167295331, lon: 15.773254154152989 },
+      type: "accommodation",
+    },
+    {
+      title: "Hotel Euro",
+      desc: "Ubytování",
+      coords: { lat: 50.032624029755524, lon: 15.780811840658778 },
+      type: "accommodation",
+    },
+    {
+      title: "Hotel Zlatá Štíka",
+      desc: "Ubytování",
+      coords: { lat: 50.039564111827566, lon: 15.783966227164703 },
+      type: "accommodation",
+    },
+    {
+      title: "Hotel Labe",
+      desc: "Ubytování",
+      coords: { lat: 50.037675717487396, lon: 15.767554754153124 },
+      type: "accommodation",
+    },
+    {
+      title: "Hotel Arnošt Pardubice",
+      desc: "Ubytování",
+      coords: { lat: 50.03237624692707, lon: 15.776134011823473 },
+      type: "accommodation",
+    },
+    {
+      title: "Hotel Kristl",
+      desc: "Ubytování",
+      coords: { lat: 50.0353806704769, lon: 15.788852027164491 },
+      type: "accommodation",
+    },
+  ],
+};
+
+export const nav = [
+  {
+    link: "/registrace",
+    accent: "black",
+    title: "Registrace",
+  },
+  {
+    link: "/ubytovani",
+    accent: "green-400",
+    title: "Ubytování",
+  },
+  {
+    accent: "green-300",
+    title: "Stravování",
+  },
+  {
+    accent: "cyan-500",
+    title: "Doprava",
+  },
+  {
+    accent: "blue-300",
+    title: "Program",
+  },
+  {
+    accent: "cyan-200",
+    title: "Party",
+  },
+  {
+    link: "/mapa",
+    accent: "violet-500",
+    title: "Mapa",
+  },
+  {
+    link: "/organizatori",
+    accent: "violet-400",
+    title: "Organizátoři",
+  },
+  {
+    link: "/pro-dobrovolniky",
+    accent: "red-600",
+    title: "Pro dobrovolníky",
+  },
+];
+
+export const organisers = [
+  {
+    title: "Organizační tým",
+    members: [
+      {
+        name: "Andrea Linhartová",
+        position: "Hlavní organizátorka",
+        email: "andrea.linhartova@pirati.cz",
+        avatarUrl:
+          "https://a.pirati.cz/crop/100x100/cf/2022/img/people/andrea-linhartova-2020.jpg",
+      },
+      {
+        name: "Andrej Ramašeuski",
+        position: "Organizátor",
+        phone: "+420605234197",
+        email: "andrej.ramaseuski@pirati.cz",
+        avatarUrl:
+          "https://a.pirati.cz/crop/100x100/cf/2022/img/people/andrej-ramaseuski-2020.jpg",
+      },
+      {
+        name: "Jan Hrubeš",
+        position: "Organizátor",
+        email: "jan.hrubes@pirati.cz",
+        avatarUrl:
+          "https://a.pirati.cz/crop/100x100/cf/2022/img/people/jan-hrubes.jpg",
+      },
+      {
+        name: "Karsten Sachs",
+        position: "Organizátor",
+        phone: "+420739261443",
+        email: "karsten.sachs@pirati.cz",
+        avatarUrl:
+          "https://a.pirati.cz/crop/100x100/cf/2022/img/people/karsten-sachs.jpg",
+      },
+      {
+        name: "Lucie Procházková",
+        position: "Organizátorka",
+        email: "lucie.prochazkova@pirati.cz",
+        avatarUrl:
+          "https://a.pirati.cz/crop/100x100/cf/2022/img/people/lucie.prochazkova-2020.jpg",
+      },
+      {
+        name: "Zdeněk Kubala",
+        position: "Organizátor",
+        email: "zdenek.kubala@pirati.cz",
+        avatarUrl:
+          "https://a.pirati.cz/crop/100x100/cf/2022/img/people/andrej-ramaseuski-2020.jpg",
+      },
+    ],
+  },
+  {
+    title: "Předsedající",
+    members: [
+      {
+        name: "Georgia Hejduková",
+        position: "Předsedající",
+        phone: "+420775864103",
+        email: "georgia.hejdukova@pirati.cz",
+        avatarUrl:
+          "https://a.pirati.cz/crop/100x100/cf/2022/img/people/georgia.hejdukova.jpg",
+      },
+      {
+        name: "Vojtěch Pikal",
+        position: "Organizátor",
+        phone: "+420778702714",
+        email: "vojtech.pikal@pirati.cz",
+        avatarUrl:
+          "https://a.pirati.cz/crop/100x100/cf/2022/img/people/vojtech-pikal.jpg",
+      },
+    ],
+  },
+  {
+    title: "Obsluha Heliosu",
+    members: [
+      {
+        name: "Jan Hora",
+        position: "Trustee",
+        phone: "+420775608734",
+        email: "honza.hora@pirati.cz",
+        avatarUrl:
+          "https://a.pirati.cz/crop/100x100/cf/2022/img/people/jan-hora.jpg",
+      },
+    ],
+  },
+  {
+    title: "Mediální tým",
+    members: [
+      {
+        name: "Martin Saifrt",
+        position: "Vedoucí krajského mediálního odboru",
+        phone: "+42778439559",
+        email: "martin.saifrt@pirati.cz",
+        avatarUrl:
+          "https://a.pirati.cz/crop/100x100/cf/2022/img/people/martin.saifrt.jpg",
+      },
+    ],
+  },
+];
+
+export const accommodation = [
+  {
+    title: "Hotel Atrium",
+    link: "http://www.hotelatrium.cz",
+    distance: 800,
+    variants: [
+      {
+        bedCount: 1,
+        price: 1600,
+      },
+      {
+        bedCount: 2,
+        price: 1700,
+      },
+    ],
+  },
+  {
+    title: "Hotel Euro",
+    link: "https://www.hoteleuro.cz",
+    distance: 250,
+    variants: [
+      {
+        bedCount: 1,
+        price: 1500,
+      },
+      {
+        bedCount: 2,
+        price: 1700,
+      },
+    ],
+  },
+  {
+    title: "Hotel Zlatá Štika",
+    link: "http://www.zlatastika.cz",
+    distance: 700,
+    variants: [
+      {
+        bedCount: 1,
+        price: 1100,
+      },
+      {
+        bedCount: 2,
+        price: 1400,
+      },
+      {
+        bedCount: 3,
+        price: 1800,
+      },
+      {
+        bedCount: 5,
+        price: 2400,
+      },
+    ],
+  },
+  {
+    title: "Hotel Labe",
+    link: "http://www.hotellabe.cz",
+    distance: 1500,
+    variants: [
+      {
+        bedCount: 1,
+        price: 1000,
+      },
+      {
+        bedCount: 2,
+        price: 1200,
+      },
+    ],
+  },
+  {
+    title: "Hotel Arnošt Pardubice",
+    link: "http://hotel-arnost.cz",
+    distance: 550,
+    variants: [
+      {
+        bedCount: 1,
+        price: 900,
+      },
+      {
+        bedCount: 2,
+        price: 1240,
+      },
+      {
+        bedCount: 3,
+        price: 1800,
+      },
+      {
+        bedCount: 4,
+        price: 2100,
+      },
+    ],
+  },
+  {
+    title: "Hotel Kristl",
+    link: "http://www.hotelkristl.cz",
+    distance: 650,
+    variants: [
+      {
+        bedCount: 2,
+        price: 600,
+      },
+    ],
+  },
+];

src/index.js

+import React from "react";
+import ReactDOM from "react-dom";
+
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById("root")
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

src/logo-full-black.svg

+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="172" height="55.25" viewBox="0 0 172 55.25">
+  <defs>
+    <path id="a" d="M2.716 4.385h165.333V51.1H2.716z"/>
+  </defs>
+  <clipPath id="b">
+    <use xlink:href="#a" overflow="visible"/>
+  </clipPath>
+  <path clip-path="url(#b)" d="M24.691 7.159c-5.866 0-11.384 2.289-15.542 6.438-4.147 4.149-6.435 9.669-6.435 15.535 0 5.876 2.287 11.396 6.435 15.539 4.158 4.147 9.675 6.429 15.542 6.429 5.87 0 11.384-2.281 15.531-6.429 4.158-4.144 6.44-9.663 6.44-15.539 0-5.866-2.282-11.386-6.44-15.535-4.146-4.15-9.66-6.438-15.531-6.438m0 41.857c-10.965 0-19.885-8.915-19.885-19.884 0-10.962 8.919-19.88 19.885-19.88 10.961 0 19.883 8.918 19.883 19.88.001 10.969-8.922 19.884-19.883 19.884"/>
+  <path clip-path="url(#b)" d="M18.068 16.063v-3.077h-1.921v3.552c-1.301.401-2.056.815-1.932 1.069.431-.118 1.115-.169 1.932-.121v18.495c-1.962 3.833.861 9.698.861 9.698s-2.124-6.299 2.6-9.272c4.337-2.732 19.302-1.451 19.246-9.894-.065-11.962-13.868-11.891-20.786-10.45m6.177 11.597c-.673 3.185-4.147 4.845-6.177 6.224V17.779c3.459.83 7.525 3.489 6.177 9.881M59.936 9.602c-1.753 0-3.416.112-4.987.344v16.436h4.42v-5.167c.393.042.884.066 1.474.066 2.222 0 3.912-.517 5.071-1.554 1.153-1.033 1.733-2.559 1.733-4.569 0-3.702-2.571-5.556-7.711-5.556m2.722 7.709c-.529.455-1.288.682-2.268.682-.379 0-.718-.021-1.021-.068v-4.804c.346-.079.688-.114 1.021-.114 2.04 0 3.061.794 3.061 2.38 0 .827-.264 1.474-.793 1.924"/>
+  <path d="M69.733 9.832h4.987v16.55h-4.987z"/>
+  <defs>
+    <path id="c" d="M2.716 4.385h165.333V51.1H2.716z"/>
+  </defs>
+  <clipPath id="d">
+    <use xlink:href="#c" overflow="visible"/>
+  </clipPath>
+  <path clip-path="url(#d)" d="M86.441 26.381h4.648l-1.63-4.536c-.272-.734-.561-1.307-.863-1.708-.3-.398-.682-.729-1.135-.986v-.045c.938-.348 1.704-.932 2.295-1.744.588-.819.885-1.704.885-2.654 0-3.401-2.269-5.104-6.805-5.104-1.967 0-3.933.114-5.897.342v16.435h4.423v-5.778h1.019c.423 0 .765.114 1.022.337.257.229.467.603.634 1.136l1.404 4.305zM83.61 17.31h-1.248v-4.188c.344-.078.761-.112 1.248-.112 1.658 0 2.494.717 2.494 2.153 0 .662-.225 1.186-.669 1.574-.449.383-1.058.573-1.825.573"/>
+  <path d="M97.507 23.208h4.603l.772 3.174h4.806l-5.441-16.553h-4.76l-5.441 16.553h4.714l.747-3.174zm2.29-9.523h.046l1.474 6.125h-2.993l1.473-6.125zM104.399 4.385h-4.988l-2.267 4.088h3.626M111.863 26.382h4.625v-12.81h4.487v-3.74H107.37v3.74h4.493"/>
+  <defs>
+    <path id="e" d="M2.716 4.385h165.333V51.1H2.716z"/>
+  </defs>
+  <clipPath id="f">
+    <use xlink:href="#e" overflow="visible"/>
+  </clipPath>
+  <path clip-path="url(#f)" d="M128.277 23.097c-.756 0-1.586-.152-2.482-.458-.898-.302-1.734-.717-2.506-1.24l-1.021 3.508c.668.486 1.555.893 2.668 1.215 1.109.327 2.148.486 3.117.486 2.309 0 4.041-.43 5.189-1.301 1.148-.87 1.725-2.133 1.725-3.798 0-1.377-.484-2.506-1.455-3.39-.965-.885-2.635-1.644-5.008-2.278-.982-.27-1.475-.726-1.475-1.36 0-.411.184-.735.547-.989.365-.249.898-.371 1.605-.371 1.574 0 3.125.38 4.65 1.13l.793-3.51c-1.541-.758-3.426-1.138-5.666-1.138-2.088 0-3.705.442-4.854 1.316-1.15.877-1.723 2.064-1.723 3.562 0 1.36.467 2.487 1.406 3.379.936.891 2.508 1.653 4.715 2.288 1.211.348 1.814.837 1.814 1.475.002.98-.679 1.474-2.039 1.474"/>
+  <path d="M151.451 9.832h-5.215l-4.265 7.029h-.043V9.832h-4.537v16.55h4.537v-7.708h.043l4.492 7.708h5.213l-5.44-8.616M164.762 4.385h-4.991l-2.269 4.088h3.631M162.607 9.832h-4.76l-5.445 16.55h4.715l.75-3.174h4.602l.771 3.174h4.809l-5.442-16.55zm-3.925 9.976l1.475-6.125h.045l1.475 6.125h-2.995z"/>
+  <g>
+    <defs>
+      <path id="g" d="M2.716 4.385h165.333V51.1H2.716z"/>
+    </defs>
+    <clipPath id="h">
+      <use xlink:href="#g" overflow="visible"/>
+    </clipPath>
+    <path clip-path="url(#h)" d="M60.617 38.221c-.982-.27-1.476-.726-1.476-1.36 0-.407.184-.733.545-.987.363-.249.901-.372 1.608-.372 1.575 0 3.122.378 4.651 1.129l.792-3.508c-1.541-.76-3.43-1.14-5.667-1.14-2.085 0-3.707.442-4.851 1.319-1.151.876-1.724 2.062-1.724 3.559 0 1.36.467 2.487 1.406 3.38.937.892 2.509 1.652 4.716 2.287 1.207.349 1.812.839 1.812 1.474 0 .986-.678 1.476-2.038 1.476-.756 0-1.583-.148-2.483-.456-.9-.304-1.735-.715-2.507-1.242l-1.019 3.509c.665.486 1.553.891 2.665 1.215 1.111.327 2.149.489 3.118.489 2.31 0 4.042-.432 5.19-1.303 1.15-.871 1.726-2.135 1.726-3.798 0-1.375-.485-2.507-1.454-3.392-.966-.888-2.638-1.642-5.01-2.279"/>
+  </g>
+  <path d="M68.483 35.953h4.495v12.81h4.625v-12.81h4.486v-3.74H68.483"/>
+  <g>
+    <defs>
+      <path id="i" d="M2.716 4.385h165.333V51.1H2.716z"/>
+    </defs>
+    <clipPath id="j">
+      <use xlink:href="#i" overflow="visible"/>
+    </clipPath>
+    <path clip-path="url(#j)" d="M95.178 42.517c-.304-.398-.684-.73-1.141-.984v-.046c.939-.345 1.703-.93 2.291-1.745.592-.816.885-1.701.885-2.652 0-3.403-2.266-5.104-6.801-5.104-1.967 0-3.929.113-5.896.345v16.435h4.422v-5.779h1.021c.422 0 .765.112 1.02.338.257.227.469.604.636 1.134l1.405 4.308h4.646l-1.631-4.537c-.27-.741-.559-1.312-.857-1.713m-3.17-3.4c-.44.388-1.051.576-1.824.576h-1.246v-4.192c.347-.08.762-.113 1.246-.113 1.662 0 2.497.717 2.497 2.152 0 .664-.224 1.192-.673 1.577"/>
+  </g>
+  <path d="M104.287 32.213l-5.439 16.55h4.713l.748-3.174h4.605l.772 3.174h4.8l-5.438-16.55h-4.761zm.838 9.975l1.475-6.123h.047l1.475 6.123h-2.997zM125.762 41.282h-.049l-4.942-9.071h-4.421v16.553h4.421v-9.073h.047l4.944 9.073h4.42V32.211h-4.42M137.484 32.213l-5.443 16.55h4.717l.75-3.174h4.596l.773 3.174h4.812l-5.441-16.55h-4.764zm.838 9.975l1.473-6.123h.043l1.475 6.123h-2.991z"/>
+</svg>

src/logo.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file

src/pages/Accommodation.js

+import React from "react";
+import { Helmet } from "react-helmet";
+import { accommodation } from "config";
+import { basics } from "config";
+
+import { Card, CardBody, CardBodyText, CardHeadline } from "components/cards";
+import PageTitle from "components/PageTitle";
+
+const Accommodation = () => {
+  const pricePerHead = (variant) => {
+    return `${Math.round(variant.price / variant.bedCount)} Kč`;
+  };
+
+  return (
+    <div className="space-y-8 w-full">
+      <PageTitle>Ubytování</PageTitle>
+
+      <Helmet>
+        <title>Ubytování | {basics.appTitle}</title>
+        <meta property="og:title" content="Ubytování" />
+      </Helmet>
+
+      <div className="grid md:grid-cols-2 gap-4 md:gap-8 container-padding--zero md:container-padding--auto">
+        {accommodation.map((place) => (
+          <Card key={place.title}>
+            <CardBody>
+              <CardHeadline className="mb-2">{place.title}</CardHeadline>
+              <CardBodyText>
+                <div className="flex space-x-8 mb-4">
+                  <div>
+                    <i className="ico--compass mr-1" />
+                    {place.distance} m
+                  </div>
+                  <div>
+                    <i className="ico--link mr-1" />
+                    <a
+                      href={place.link}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {place.link}
+                    </a>
+                  </div>
+                </div>
+                <table className="table table--condensed table--light table--striped w-full">
+                  <thead>
+                    <tr className="text-left">
+                      <th>Počet lůžek</th>
+                      <th>Cena za osobu</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {place.variants.map((v, idx) => (
+                      <tr key={idx}>
+                        <td>{v.bedCount}</td>
+                        <td>{pricePerHead(v)}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </CardBodyText>
+            </CardBody>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Accommodation;

src/pages/Home.js

+import { nav } from "config";
+
+import CrossroadCard from "components/CrossroadCard";
+
+import cfLogo from "../gingerbread.jpg";
+
+const Home = () => {
+  const delta = Math.abs(new Date(2022, 0, 8) - new Date()) / 1_000;
+  const days = Math.floor(delta / 86_400);
+  const hours = Math.floor((delta - days * 86_400) / 3_600) % 24;
+
+  return (
+    <>
+      <div className="flex flex-col md:flex-row items-center bg-gray">
+        <h1 className="head-alt-xl">
+          Začínáme za
+          <br />
+          {days} dní a {hours} hodin!
+        </h1>
+        <img
+          src={cfLogo}
+          alt="CF 2021"
+          className="hidden md:block md:h-64 md:ml-auto"
+        />
+      </div>
+
+      <div className="grid md:grid-cols-3 gap-4 md:gap-8">
+        {nav.map((navItem) => (
+          <CrossroadCard
+            key={navItem.title + "__" + navItem.link}
+            title={navItem.title}
+            accent={navItem.accent}
+            link={navItem.link}
+            underConstruction={!navItem.link}
+          />
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default Home;

src/pages/Map.js

+import React from "react";
+import { Helmet } from "react-helmet";
+import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
+import { basics, map } from "config";
+import L from "leaflet";
+
+import PageTitle from "components/PageTitle";
+
+const Map = () => {
+  const accommodationIcon = L.divIcon({
+    html: '<i class="ico--office" style="font-size: 32px"></i>',
+    iconSize: [32, 32],
+    className: "myDivIcon",
+  });
+
+  const eventIcon = L.divIcon({
+    html: '<i class="ico--pirati" style="font-size: 48px;"></i>',
+    iconSize: [48, 48],
+    className: "myDivIcon",
+  });
+
+  const iconMap = {
+    accommodation: accommodationIcon,
+    event: eventIcon,
+  };
+
+  return (
+    <div className="space-y-8 w-full">
+      <PageTitle>Mapa</PageTitle>
+      <Helmet>
+        <title>Mapa | {basics.appTitle}</title>
+        <meta property="og:title" content="Mapa" />
+      </Helmet>
+
+      <div className="container-padding--zero md:container-padding--auto">
+        <MapContainer
+          center={[map.center.lat, map.center.lon]}
+          zoom={map.center.zoom}
+          scrollWheelZoom={false}
+          style={{ height: "600px", width: "100%" }}
+        >
+          <TileLayer
+            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          />
+          {map.markers.map((marker) => (
+            <Marker
+              position={[marker.coords.lat, marker.coords.lon]}
+              key={marker.title}
+              icon={iconMap[marker.type]}
+            >
+              <Popup>
+                <strong>{marker.title}</strong>
+                <div>{marker.desc}</div>
+              </Popup>
+            </Marker>
+          ))}
+        </MapContainer>
+      </div>
+    </div>
+  );
+};
+
+export default Map;

src/pages/Registration.js

+import { Helmet } from "react-helmet";
+import { basics } from "config";
+
+import Button from "components/Button";
+import { Card, CardBody, CardBodyText, CardHeadline } from "components/cards";
+import PageTitle from "components/PageTitle";
+
+const Registration = () => {
+  return (
+    <div className="space-y-8 w-full">
+      <PageTitle>Registrace</PageTitle>
+
+      <Helmet>
+        <title>Registrace | {basics.appTitle}</title>
+        <meta property="og:title" content="Registrace" />
+      </Helmet>
+
+      <p className="leading-normal">
+        CF2022 bude extrémně data-driven akce. Pro lepší organizaci budete muset
+        vyplnit nekolik anket a formulářů.
+      </p>
+
+      <div className="space-y-8">
+        <Card className="container-padding--zero md:container-padding--auto">
+          <CardBody>
+            <div className="flex flex-col md:flex-row">
+              <div>
+                <CardHeadline>
+                  Registrační formulář pro členy strany
+                </CardHeadline>
+                <CardBodyText>
+                  <p>Vyplnění je povinné pro všechny členy.</p>
+                </CardBodyText>
+              </div>
+              <a
+                href="https://mrak.pirati.cz/apps/forms/k4z7diaecnmekizk"
+                className="mt-8 md:ml-auto md:mt-0 md:pl-4"
+              >
+                <Button
+                  className="text-sm"
+                  bodyClassName="whitespace-no-wrap"
+                  color="blue-300"
+                  hoverActive
+                >
+                  Vyplnit formulář
+                </Button>
+              </a>
+            </div>
+          </CardBody>
+        </Card>
+
+        <Card className="container-padding--zero md:container-padding--auto">
+          <CardBody>
+            <div className="flex flex-col md:flex-row">
+              <div>
+                <CardHeadline>Registrační formulář pro hosty</CardHeadline>
+                <CardBodyText>
+                  <p>
+                    Vyplňují registrovaní příznivci a další osoby, které se
+                    chtějí zúčastnit zasedání. Vyplnění je podmínkou, není však
+                    zárukou účasti. Vaše účast může být ve výjimečných případech
+                    zamítnuta z kapacitních důvodů.
+                  </p>
+                </CardBodyText>
+              </div>
+              <a
+                href="https://mrak.pirati.cz/apps/forms/k4z7diaecnmekizk"
+                className="mt-8 md:ml-auto md:mt-0 md:pl-4"
+              >
+                <Button
+                  className="text-sm"
+                  bodyClassName="whitespace-no-wrap"
+                  color="blue-300"
+                  hoverActive
+                >
+                  Vyplnit formulář
+                </Button>
+              </a>
+            </div>
+          </CardBody>
+        </Card>
+
+        <Card className="container-padding--zero md:container-padding--auto">
+          <CardBody>
+            <div className="flex flex-col md:flex-row">
+              <div>
+                <CardHeadline>Registrační formulář pro média</CardHeadline>
+                <CardBodyText>
+                  <p>Slouží k akreditaci novinářů.</p>
+                </CardBodyText>
+              </div>
+              <a
+                href="https://mrak.pirati.cz/apps/forms/k4z7diaecnmekizk"
+                className="mt-8 md:ml-auto md:mt-0 md:pl-4"
+              >
+                <Button
+                  className="text-sm"
+                  bodyClassName="whitespace-no-wrap"
+                  color="blue-300"
+                  hoverActive
+                >
+                  Vyplnit formulář
+                </Button>
+              </a>
+            </div>
+          </CardBody>
+        </Card>
+
+        <Card className="container-padding--zero md:container-padding--auto">
+          <CardBody>
+            <div className="flex flex-col md:flex-row">
+              <div>
+                <CardHeadline>
+                  Registrační formulář pro dobrovolníky
+                </CardHeadline>
+                <CardBodyText>
+                  <p>
+                    Chcete nám pomoci s organizací CF 2022? Vyplňte tento
+                    formulář.
+                  </p>
+                </CardBodyText>
+              </div>
+              <a
+                href="https://mrak.pirati.cz/apps/forms/k4z7diaecnmekizk"
+                className="mt-8 md:ml-auto md:mt-0 md:pl-4"
+              >
+                <Button
+                  className="text-sm"
+                  bodyClassName="whitespace-no-wrap"
+                  color="blue-300"
+                  hoverActive
+                >
+                  Vyplnit formulář
+                </Button>
+              </a>
+            </div>
+          </CardBody>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default Registration;

src/pages/Team.js

+import React from "react";
+import { Helmet } from "react-helmet";
+import { basics, organisers } from "config";
+
+import Badge from "components/Badge";
+
+const Team = () => {
+  const isLastItem = (idx) => organisers.length - 1 === idx;
+
+  return (
+    <div className="space-y-8 w-full">
+      <Helmet>
+        <title>Organizátoři | {basics.appTitle}</title>
+        <meta property="og:title" content="Organizátoři" />
+      </Helmet>
+
+      {organisers.map((team, idx) => (
+        <React.Fragment key={team.title}>
+          <section key={team.title}>
+            <h2 className="head-heavy-sm mb-4">{team.title}</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 row-gap-8 col-gap-8">
+              {team.members.map((member) => (
+                <Badge
+                  name={member.name}
+                  position={member.position}
+                  avatarUrl={member.avatarUrl}
+                  phone={member.phone}
+                  email={member.email}
+                  key={member.name}
+                />
+              ))}
+            </div>
+          </section>
+          {!isLastItem(idx) && <hr className="hr--big" />}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};
+
+export default Team;

src/pages/Volunteers.js

+import { Helmet } from "react-helmet";
+import { basics } from "config";
+
+import PageTitle from "components/PageTitle";
+
+const Volunteers = () => {
+  return (
+    <div className="w-full">
+      <PageTitle>Pro dobrovolníky</PageTitle>
+
+      <Helmet>
+        <title>Pro dobrovolníky | {basics.appTitle}</title>
+        <meta property="og:title" content="Pro dobrovolníky" />
+      </Helmet>
+
+      <div className="content-block">
+        <h3>Koho hledáme</h3>
+
+        <ul>
+          <li>
+            cca 5 dobrovolníků na registrační místo (sobota 8:00 až do doby
+            potřebné k akreditaci členů)
+          </li>
+          <li>
+            cca 2-4 dobrovolníky k zajištění dalších potřebných věcí (příprava
+            prostor, běžná agenda)
+          </li>
+        </ul>
+
+        <h3>Kam se nahlásit</h3>
+        <p>
+          V případě jakýchkoliv dotazů ohledně tvé pomoci kontaktuj{" "}
+          <a href="tel:+420778111450">Ivanu Mrkvičkovu</a>.
+        </p>
+
+        <h3>Musím být k dispozici po celou dobu?</h3>
+        <p>
+          Ne. Budeme rádi za každou pomoc. Největší nápor bude mezi 8:30 až
+          10:00 v sobotu na registraci. Pak už to zvládneme v menším počtu.
+          Během dne určitě zvládneš pokec s kamarády nebo známými, tak aby sis
+          CF 2022 taky mohl(a) užít.
+        </p>
+
+        <h3>Co za to získám?</h3>
+        <p>
+          Peníze nenabízíme. Získáš dobrý pocit, skvělý zážitek, spoustu nových
+          kontaktů a pirátské body. Vhodné také pro zájemce, kteří jsou čekatelé
+          na členství u Pirátů a nebo o tom teprve uvažují.
+        </p>
+
+        <h3>Adresa jednacího sálu</h3>
+        <p>
+          Výstavní a společenské centrum IDEON
+          <br />
+          Jiráskova 1963, Pardubice
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Volunteers;

src/reportWebVitals.js

+const reportWebVitals = (onPerfEntry) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

src/setupTests.js

+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom";