Styling contact form page

resources/assets/sass/_variables.sass

@@ -15,7 +15,7 @@ $yellow:            #FED040
 $orange:            #FF6A2C
 $pink:              #FB308B
 $purple:            #5F51E4
-$off-light:         #E5E5E5
+$off-light:         #f0f2f6
 $gray-light:        #989898
 $gray-dark:         #595656
 

resources/assets/sass/components/_contact-form.sass

@@ -1,8 +1,30 @@
 
 .wpcf7-form
+    background: $off-light
+    padding: 40px
+
     > p
         @extend .field
 
+    h2, h3, h4, h5, h6
+        @extend .title
+        color: $blue
+        font-weight: 500
+
+        +mobile
+            font-size: 1.5rem        
+
+    h2
+        @extend .is-2
+    h3
+        @extend .is-3
+    h4
+        @extend .is-4
+    h5
+        @extend .is-5
+    h6
+        @extend .is-3
+
     label
         @extend .label
 
@@ -12,6 +34,7 @@
     input
         &:not([type="submit"])
             @extend .input
+            box-shadow: none
 
         &.wpcf7-submit
             @extend .button
@@ -27,6 +50,7 @@
 
     textarea
         @extend .textarea
+        box-shadow: none
 
     span.wpcf7-not-valid-tip
         color: #f00

resources/assets/sass/main.sass

@@ -3,7 +3,7 @@
 @import ~bulma
 @import ~bulma-checkradio
 @import node_modules/bulma-badge/dist/css/bulma-badge
-// @import node_modules/font-awesome/scss/font-awesome
+@import node_modules/font-awesome/scss/font-awesome
 @import fonts
 @import pageloader
 @import components/index

resources/assets/sass/sections/_section-contact.sass

@@ -0,0 +1,25 @@
+
+.section-contact
+
+    &__column-left
+        padding-top: 15px
+        @extend .content
+        +tablet
+            max-width: 90%
+
+        i.fa-whatsapp
+            color: #25CC63
+
+    &__security-warning
+        padding: 20px 28px
+        background-color: #f5f5f5
+        margin-top: 25px
+        display: flex
+        align-items: center
+
+        p
+            font-size: 14px
+
+        img
+            height: 60px
+            margin-right: 21px

resources/assets/sass/sections/index.sass

@@ -3,5 +3,6 @@
 @import featured-boxes
 @import section-tours
 @import section-about
+@import section-contact
 @import latest-articles
 @import hero

resources/assets/sass/woocommerce/_common.sass

@@ -11,8 +11,8 @@ textarea
 
 label
   @extend .label
-  // &:not(:last-child)
-  //   margin-bottom: 0 !important
+  &:not(:last-child)
+    margin-bottom: 0 !important
 
 button.button
   @extend .button
@@ -112,12 +112,12 @@ label.radio
   margin-bottom: 30px
 
 .woocommerce-billing-fields
-  background-color: #ececec
+  background-color: $off-light
   padding: 31px
   border-radius: 2px
 
 .woocommerce-checkout #payment
-  background: #ececec
+  background: $off-light
   border-radius: 2px
 
 // Select2 Custom Styles

resources/views/template-contact.twig

@@ -6,7 +6,18 @@
         <div class="container">
             <div class="columns">
                 <div class="column">
-                    {{ post.content }}
+                    <div class="section-contact__column-left">
+                        {{ post.content }}
+
+                        {% if security_warning_text is not empty %}
+                        <div class="section-contact__security-warning">
+                            {% if security_warning_image  is not empty %}
+                            <img src="{{ security_warning_image }}" alt="Attention icon">
+                            {% endif %}
+                            <p>{{ security_warning_text }}</p>
+                        </div>
+                        {% endif %}
+                    </div>
                 </div>
                 <div class="column">
                     {{ contact_shortcode }}

static/manifest.json

@@ -1,16 +1,21 @@
 {
-  "app.css": "css/app.cd7fb5d4b77f1c552dab.css",
-  "app.js": "js/app.9a3d1a571d3ea42019d0.js",
+  "app.css": "css/app.e53f2840341fa61dcb81.css",
+  "app.js": "js/app.3291053a49cd2c975c18.js",
   "login.css": "css/login.1d74128b88bfc70aea2f.css",
   "login.js": "js/login.9caa3fd3b4682e79cf02.js",
   "admin.css": "css/admin.2013b7037ab119ed3b29.css",
   "admin.js": "js/admin.45e1d7f519c849113793.js",
   "vendor.js": "js/vendor.7196053fda12b7810276.js",
+  "images/icon-cart-white.png": "images/icon-cart-white.png",
   "images/logo.png": "images/logo.png",
+  "fonts/fontawesome-webfont.woff2?v=4.7.0": "fonts/fontawesome-webfont.af7ae50.woff2",
+  "fonts/fontawesome-webfont.woff?v=4.7.0": "fonts/fontawesome-webfont.fee66e7.woff",
+  "fonts/fontawesome-webfont.ttf?v=4.7.0": "fonts/fontawesome-webfont.b06871f.ttf",
+  "images/fontawesome-webfont.svg?v=4.7.0": "images/fontawesome-webfont.svg",
+  "images/arrow-prev-white.png": "images/arrow-prev-white.png",
   "images/arrow-next-white.png": "images/arrow-next-white.png",
   "images/texture-blue-carnival.jpg": "images/texture-blue-carnival.jpg",
-  "images/icon-cart-white.png": "images/icon-cart-white.png",
+  "fonts/fontawesome-webfont.eot": "fonts/fontawesome-webfont.674f50d.eot",
   "images/down-arrow.png": "images/down-arrow.png",
-  "images/base-camp-logo.png": "images/base-camp-logo.png",
-  "images/arrow-prev-white.png": "images/arrow-prev-white.png"
+  "images/base-camp-logo.png": "images/base-camp-logo.png"
 }

template-contact.php

@@ -8,5 +8,7 @@
 $context['post'] = $post;
 
 $context['contact_shortcode'] = do_shortcode(get_field('contact_form_shortcode'));
+$context['security_warning_image'] = get_field('security_warning_image');
+$context['security_warning_text'] = get_field('security_warning_text');
 
 Timber::render('template-contact.twig', $context);