Select Git revision
05-ppolicy.ldif
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;