Home.js

import Button from "components/Button";
import CrossroadCard from "components/CrossroadCard";
import VenueCard from "components/VenueCard";
import { nav } from "config";
import { venues } from "config";

import cfLogo from "../cf2023_kormidlo_lod.svg";

import cfPattern from "./gingerbread-pattern-colourful-384px.svg";

const Home = () => {
  const delta = Math.abs(new Date(2023, 3, 29, 9, 0, 0) - new Date()) / 1_000;
  const days = Math.floor(delta / 86_400);
  const hours = Math.floor((delta - days * 86_400) / 3_600) % 24;

  return (
    <article className="space-y-8 md:space-y-16">
      <div className="bg-blue-300 text-white p-8 md:p-16">
        <div className="content-block">
          <h1 className="head-alt-md lg:head-alt-lg">Zasedání Celostátního fóra proběhne 29.&nbsp;dubna 2023 v&nbsp;Domě Kultury v&nbsp;Liberci</h1>
          <p className="text-md lg:text-lg">
            Zasedání bude možno sledovat on-line na adrese{" "}
            <a href="https://cf2023.online" className="font-bold">
              cf2023.online
            </a>
            .
          </p>
        </div>
  {/*
        <Button
          className="md:text-xl btn--to-blue-300"
          bodyClassName="whitespace-no-wrap"
          color="white"
          href="https://cf2023.online"
          icon="ico--chevron-right"
          rel="noreferrer noopener"
          target="_blank"
        >
          Sledovat CF 2023 online
        </Button>
  */}
      </div>

      <div className="content-block">
          <p className="text-md lg:text-lg">
            <strong>Letos se zasedání CF s doprovodným programem bude konat v&nbsp;Liberci v termínu 28.&nbsp;–&nbsp;30. dubna 2023.</strong><br/><br/>
            Už se to blíží. Po dlouhé době bude možnost se konečně osobně setkat, projednat, co je potřeba, vyměnit si zkušenosti napříč republikou a&nbsp;skvěle se pobavit. Setkání Celostátního fóra je stěžejní událost, kterou si umíme užít se vším všudy. I&nbsp;tentokrát nás čeká pestrý a&nbsp; pěkně nabitý program.<br/>
          </p>
      </div>

      <div className="grid md:grid-cols-3 gap-4 md:gap-8 content-block">
        {venues.map((venueItem) => (
          <VenueCard
            showtop="true"
            key={venueItem.title + "__" + venueItem.link}
            title_short={venueItem.title_short}
            startinfo={venueItem.startinfo}
            endinfo={venueItem.endinfo}
            street={venueItem.street}
            city={venueItem.city}
            gps={venueItem.gps}
            href={venueItem.href}
            title={venueItem.title}
            text={venueItem.text}
            infolink={venueItem.infolink}
            programlink={venueItem.programlink}
            accent={venueItem.accent}
            link={venueItem.link}
            underConstruction={!venueItem.link}
          />