Skip to content
Snippets Groups Projects
Select Git revision
  • c56bccadab1a7add624ce1254a9c808244f08c38
  • master default protected
2 results

05-ppolicy.ldif

Blame
  • Home.js 1.80 KiB
    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;