Add header image.

resources/assets/styles/components/_forms.scss

@@ -9,12 +9,30 @@
 }
 
 .contact {
-  margin-bottom: 120px;
+  background: #f6f6f6;
+  padding: rem(65) 0 rem(120);
+
+  h3 {
+    color: var(--primary, $brand-primary);
+
+    &::before {
+      content: '';
+      display: block;
+      margin: 0 auto 1rem;
+      width: rem(46);
+      height: rem(5);
+      background: var(--accent, $brand-accent);
+    }
+  }
 
   p {
     font-size: 0.875rem;
     font-weight: 600;
     font-family: $font-family-sans-serif;
+
+    &:last-child {
+      margin-top: rem(47);
+    }
   }
 
   .success {
@@ -50,6 +68,11 @@
     font-size: 0.875rem;
     font-weight: 600;
     font-family: $font-family-sans-serif;
+    background: transparent;
+  }
+
+  .button {
+    background: transparent;
   }
 
   textarea {

resources/assets/styles/layouts/pages/_catalog.scss

@@ -1,11 +1,31 @@
 .catalog {
+  .banner .container {
+    height: rem(381);
+  }
+
+  .banner .primary-navigation {
+    height: rem(381);
+  }
+
   .page-header {
-    margin-top: rem(-68);
-    padding-bottom: 2rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: rem(381);
+    margin-top: rem(-381);
+
+    h1 {
+      color: var(--primary, $brand-primary);
+      margin-bottom: 2rem;
+      font-size: rem(36);
+      line-height: 0.55556;
+      letter-spacing: 0.1125rem;
+    }
   }
 
   .network-catalog {
     width: 100%;
+    padding-bottom: rem(152);
   }
 
   .controls {
@@ -267,11 +287,40 @@
 }
 
 @media (min-width: $medium) {
-  // TODO
+  .catalog {
+    .page-header {
+      h1 {
+        font-size: rem(72);
+      }
+    }
+  }
 }
 
-@media (min-width: $large) {
-  // TODO
+@media #{$breakpoint-large} {
+  .catalog {
+    .banner {
+      .container {
+        height: rem(450);
+      }
+
+      .primary-navigation {
+        height: 40px;
+      }
+
+      .brand {
+        text-align: center;
+
+        img {
+          max-height: rem(60);
+        }
+      }
+    }
+
+    .page-header {
+      height: rem(360);
+      margin-top: rem(-360);
+    }
+  }
 }
 
 @media (min-width: $extra-large) {

resources/views/partials/header.blade.php

@@ -1,4 +1,8 @@
-<section class="banner bg-bottom cover" style="background-image: url(@php(header_image()));">
+<section class="banner bg-bottom cover" style="background-image: url(@if(is_front_page())
+  @php(header_image())
+@else
+  @asset('images/catalog-header.jpg')
+@endif);">
   <div class="container flex flex-column justify-between items-center w-100 mw-100">
     <a class="toggle-menu db dn-l absolute" href="#primary-navigation">{{ __('Toggle menu', 'aldine') }}<span class="icon db absolute"></span></a>
     <a class="brand db self-start self-center-l" href="{{ home_url('/') }}"><span class="clip">{{ get_bloginfo('name', 'display') }}</span>{!! $site_logo !!}</a>