Home.js

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

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

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

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="card elevation-10 bg-opacity-25 flex flex-col lg:flex-row lg:items-center my-8 xl:-mx-16 container-padding--zero md:container-padding--auto"
        style={{ backgroundImage: `url(${cfPattern})` }}
      >
        <div className="w-full flex items-center justify-center bg-blur text-center lg:text-left p-8 py-16 md:p-16">
          <img
            src={cfLogo}
            alt="CF 2022"
            className="hidden lg:block w-48 mr-16"
          />
          <div>
            <h1 className="head-alt-lg md:head-alt-xl mb-4">
              Začínáme za
              <br />
              {days} dní a {hours} hodin!
            </h1>
            <Button
              className="md:text-xl"
              bodyClassName="whitespace-no-wrap"
              color="black"
              routerTo="/registrace"
              icon="ico--chevron-right"
            >
              Zaregistrovat se
            </Button>
          </div>
        </div>
      </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;