feat: improve aligning and hero banner

src/App.js

@@ -15,6 +15,8 @@ import Team from "./pages/Team";
 import Volunteers from "./pages/Volunteers";
 import partyLogo from "./logo-full-black.svg";
 
+import "./styles.css";
+
 /**
  * If configured, set up Sentry client that reports uncaught errors down to
  * https://sentry.io.
@@ -31,7 +33,7 @@ const WithNav = ({ children }) => {
   return (
     <div className="flex flex-col md:flex-row md:space-x-8">
       {children}
-      <VNav className="mt-8 md:mt-0 md:w-1/4" />
+      <VNav className="mt-8 md:mt-0 md:w-1/4 p-4 md:p-8" />
     </div>
   );
 };
@@ -47,7 +49,7 @@ function BaseApp() {
       </Helmet>
 
       <div className="container container--default my-4 md:my-16 space-y-8 md:space-y-16">
-        <div className="md:flex items-center">
+        <div className="md:flex items-center text-center md:text-left">
           <h1 className="head-alt-xl">
             <Link to="/" className="no-underline hover:no-underline">
               {basics.appTitle}
@@ -91,7 +93,7 @@ function BaseApp() {
           </Route>
         </Switch>
 
-        <div className="border-t border-grey-125 pt-4 flex flex-col md:flex-row md:justify-between space-y-4">
+        <div className="border-t border-grey-125 pt-4 flex flex-col md:flex-row items-center md:justify-between space-y-4  text-center md:text-left">
           <img src={partyLogo} className="w-32" alt="Pirátská strana" />
           <p>Piráti, {year}. Všechna práva vyhlazena.</p>
         </div>

src/components/PageTitle.js

 const PageTitle = ({ children }) => {
   return (
-    <h1 className="head-alt-md md:head-alt-lg max-w-5xl mb-8">{children}</h1>
+    <h1 className="head-alt-md md:head-alt-lg max-w-5xl mb-8 text-center md:text-left">
+      {children}
+    </h1>
   );
 };
 

src/components/cards/CardBody.js

@@ -2,7 +2,7 @@ import React from "react";
 import classNames from "classnames";
 
 const CardBody = ({ children, className, ...props }) => {
-  const cls = classNames("card__body", className);
+  const cls = classNames("card__body p-4 md:p-8", className);
   return (
     <div className={cls} {...props}>
       {children}

src/pages/Accommodation.js

@@ -14,8 +14,8 @@ const Accommodation = () => {
 
   const priceClassClass = (priceClass) => {
     return classNames("text-white font-bold px-2 py-2 text-xs ml-auto", {
-      "bg-blue-100": priceClass === "$",
-      "bg-blue-200": priceClass === "$$",
+      "bg-blue-300 bg-opacity-75": priceClass === "$",
+      "bg-blue-300 bg-opacity-85": priceClass === "$$",
       "bg-blue-300": priceClass === "$$$",
     });
   };

src/pages/Home.js

@@ -2,7 +2,9 @@ import Button from "components/Button";
 import CrossroadCard from "components/CrossroadCard";
 import { nav } from "config";
 
-import cfPattern from "./gingerbread-pattern-384px.svg";
+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;
@@ -12,10 +14,16 @@ const Home = () => {
   return (
     <>
       <div
-        className="card elevation-10 bg-opacity-25 flex flex-col lg:flex-row lg:items-center p-8 md:p-16 my-8 xl:-mx-16 container-padding--zero md:container-padding--auto"
+        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="p-4 md:p-8 lg:pr-16 bg-white text-center lg:text-left">
+        <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 />
@@ -32,6 +40,7 @@ const Home = () => {
             </Button>
           </div>
         </div>
+      </div>
 
       <div className="grid md:grid-cols-3 gap-4 md:gap-8">
         {nav.map((navItem) => (

src/styles.css

+@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
+
+  .bg-blur {
+    backdrop-filter: blur(6px);
+    background-color: rgba(255, 255, 255, 0.8);
+  }
+}