Add hero

source/_data/data.json

@@ -22,6 +22,10 @@
     "landscape-16x9": {
       "src": "http://placeimg.com/640/360/tech",
       "alt": "16x9 Image"
+    },
+    "landscape-16x9-fullhd": {
+      "src": "https://loremflickr.com/1920/1080",
+      "alt": "16x9 Image Full HD"
     }
   },
   "headline": {

source/_patterns/02-organisms/03-hero/hero.mustache

+<article class="hero {{ classes }}">
+  <div class="container grid grid-cols-7 gap-1 items-start">
+    <div class="col-span-3">
+      <h1 class="head-alt-xl max-w-xl">{{ claim }}{{^ claim }}Piráti<br>Pardubického<br>kraje{{/ claim }}</h1>
+      <div class="mt-6">
+        {{> atoms-icon-button(classes: "btn--black btn--hoveractive text-lg", icon: "fas fa-chevron-right") }}
+      </div>
+    </div>
+    <div class="col-span-4">
+      <img src="/images/hero-profile-img.png" />
+    </div>
+  </div>
+</article>

source/_patterns/02-organisms/03-hero/image-hero.mustache

+<article class="hero hero--image {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
+  <div class="container flex space-x-8">
+    <div>
+      <h1 class="head-alt-lg max-w-xl">{{ claim }}{{^ claim }}{{ headline.medium }}{{/ claim }}</h1>
+      <div class="mt-6">
+        <a href="#" class="btn btn--white text-lg"><span class="btn__body">{{ cta }}</span></a>
+        <a href="#" class="btn btn--white text-lg"><span class="btn__body">{{ cta }}</span></a>
+      </div>
+    </div>
+    <div>
+      <img src="/images/hero-profile-img.png" />
+    </div>
+  </div>
+</article>

source/css/atoms/button.pcss

@@ -63,7 +63,20 @@
   }
 
   .btn__icon {
-    @apply border-l border-grey-300;
+    @apply border-l border-grey-400 bg-grey-450;
+  }
+
+  &.btn--hoveractive:hover .btn__body,
+  &.btn--hoveractive:hover .btn__icon {
+    @apply bg-grey-100 text-black;
+  }
+  &.btn--hoveractive:hover .btn__icon {
+    @apply border-grey-150;
+
+    svg, i {
+      @apply text-black;
+      fill: theme('colors.black');
+    }
   }
 }
 

source/css/organisms/hero.pcss

+.hero {
+  @apply py-8;
+}
+
+.hero--image {
+  background:
+    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
+    var(--image-url);
+
+  @apply relative bg-cover bg-no-repeat bg-center text-white;
+  /* &:before {
+    @apply absolute block top-0 left-0 bottom-0 right-0 pointer-events-none;
+    content: "";
+    background: rgba(0, 0, 0, 0.3);
+  } */
+}

source/css/style.pcss

@@ -34,6 +34,7 @@
 @import "./organisms/candidate-card-list.pcss";
 @import "./organisms/candidate-table.pcss";
 @import "./organisms/footer.pcss";
+@import "./organisms/hero.pcss";
 
 /**
 * This injects Tailwind's utility classes and any utility classes registered