feat(extra-features): A bunch of improvements

falcon/_dev/css/abstracts/variables/bootstrap/_forms.scss

@@ -6,3 +6,5 @@ $input-btn-padding-x-sm:      rem-calc(8px);
 
 $input-btn-padding-y-lg: rem-calc(14px);
 $input-btn-padding-x-lg: rem-calc(20px);
+
+$input-height: rem-calc(50px);

falcon/_dev/css/abstracts/variables/bootstrap/_typography.scss

@@ -1,8 +1,7 @@
-$font-family-sans-serif: "Roboto", -apple-system, blinkmacsystemfont, "Segoe UI",
+$font-family-sans-serif: "Plus Jakarta Sans", sans-serif;
-    roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 $font-family-base: $font-family-sans-serif;
 $headings-font-family: $font-family-sans-serif;
+$font-weight-base: 400;
 
 $font-size-base: rem-calc(14px);
 $font-size-lg: $font-size-base * 1.125;

falcon/_dev/css/theme/custom/_custom.scss

@@ -16,7 +16,7 @@ Look up all available Bootstrap variables here: https://rstudio.github.io/bslib/
 //@import "abstracts/utilities";
 
 // Components: parts of the theme itself that are not associated with a module.
-//@import "components/buttons";
+@import "components/buttons";
 @import "components/forms";
 
 // Modules: Styling for specific modules.

falcon/_dev/css/theme/custom/components/_buttons.scss

@@ -1,4 +1,5 @@
-// To customize text colors per button, use this map
+// To customize text colors per button, use this map and below function
+
 $btn-color: (
     "primary": $white,
     "secondary": $white,
@@ -6,7 +7,6 @@ $btn-color: (
     "dark": $white,
 );
 
-// Generate button color overrides from the map
 @each $name, $color in $btn-color {
     .btn-#{$name},
     .btn-lg-#{$name},
@@ -15,33 +15,21 @@ $btn-color: (
     }
 }
 
-// bootstrap touchspin. Edit icons under js/theme/components/product.js
+// Bootstrap touchspin
 .bootstrap-touchspin {
-    min-width: 100px;
     flex-wrap: nowrap;
 
-    > input {
-        border-left: 0px;
-        color: $primary;
-        &:focus {
-            box-shadow: none;
-        }
-    }
-
-    .btn {
-        height: 50%;
-        width: 100%;
-        border-radius: 0px;
-        &:first-child {
-            border-bottom: 1px solid $border-color;
-        }
-    }
-
     .input-touchspin {
-        min-width: rem-calc(66px);
+        height: rem-calc(50px);
+        min-width: rem-calc(75px);
+        border-left: 0px;
     }
 
     .input-group-btn-vertical {
-        min-width: rem-calc(33px);
+        display: flex;
+        flex-direction: column;
+        button {
+            border-radius: 0px;
+        }
     }
 }

falcon/_dev/css/theme/custom/components/_forms.scss

@@ -1,12 +1,10 @@
-.field-password-policy .input-group.js-parent-focus {
+.input-group.js-parent-focus {
-    > * {
-        max-height: rem-calc(39px);
-    }
-    .form-control {
-        height: unset;
-    }
     .input-group-append .btn {
         border-top-right-radius: $border-radius !important;
         border-bottom-right-radius: $border-radius !important;
     }
 }
+
+.input-group.js-parent-focus {
+    height: $input-height;
+}

falcon/_dev/css/theme/custom/layout/_header.scss

@@ -10,4 +10,8 @@
             margin: 0;
         }
     }
+
+    .header-top__badge {
+        right: -0.9em;
+    }
 }

falcon/_dev/js/theme/components/cart/cart.js

@@ -1,6 +1,6 @@
-import $ from 'jquery';
+import $ from "jquery";
-import prestashop from 'prestashop';
+import prestashop from "prestashop";
-import debounce from '@js/theme/utils/debounce';
+import debounce from "@js/theme/utils/debounce";
 
 prestashop.cart = prestashop.cart || {};
 
@@ -9,7 +9,7 @@ prestashop.cart.active_inputs = null;
 const spinnerSelector = 'input[name="product-quantity-spin"]';
 let hasError = false;
 let isUpdateOperation = false;
-let errorMsg = '';
+let errorMsg = "";
 
 const CheckUpdateQuantityOperations = {
     switchErrorStat: () => {
@@ -19,11 +19,14 @@ const CheckUpdateQuantityOperations = {
          */
         const $checkoutBtn = $(prestashop.themeSelectors.checkout.btn);
 
-    if ($(prestashop.themeSelectors.notifications.dangerAlert).length || (errorMsg !== '' && !hasError)) {
+        if (
-      $checkoutBtn.addClass('disabled');
+            $(prestashop.themeSelectors.notifications.dangerAlert).length ||
+            (errorMsg !== "" && !hasError)
+        ) {
+            $checkoutBtn.addClass("disabled");
         }
 
-    if (errorMsg !== '') {
+        if (errorMsg !== "") {
             const strError = `
         <article class="alert alert-danger" role="alert" data-alert="danger">
           <ul class="mb-0">
@@ -32,17 +35,17 @@ const CheckUpdateQuantityOperations = {
         </article>
       `;
             $(prestashop.themeSelectors.notifications.container).html(strError);
-      errorMsg = '';
+            errorMsg = "";
             isUpdateOperation = false;
             if (hasError) {
                 // if hasError is true, quantity was not updated : allow checkout
-        $checkoutBtn.removeClass('disabled');
+                $checkoutBtn.removeClass("disabled");
             }
         } else if (!hasError && isUpdateOperation) {
             hasError = false;
             isUpdateOperation = false;
-      $(prestashop.themeSelectors.notifications.container).html('');
+            $(prestashop.themeSelectors.notifications.container).html("");
-      $checkoutBtn.removeClass('disabled');
+            $checkoutBtn.removeClass("disabled");
         }
     },
     checkUpdateOperation: (resp) => {
@@ -52,11 +55,11 @@ const CheckUpdateQuantityOperations = {
          */
         const { hasError: hasErrorOccurred, errors: errorData } = resp;
         hasError = hasErrorOccurred ?? false;
-    const errors = errorData ?? '';
+        const errors = errorData ?? "";
 
         // 1.7.2.x returns errors as string, 1.7.3.x returns array
         if (errors instanceof Array) {
-      errorMsg = errors.join(' ');
+            errorMsg = errors.join(" ");
         } else {
             errorMsg = errors;
         }
@@ -71,12 +74,18 @@ const CheckUpdateQuantityOperations = {
 function createSpin() {
     $.each($(spinnerSelector), (index, spinner) => {
         $(spinner).TouchSpin({
-      verticalupclass: 'material-icons touchspin-up',
+            verticalupclass: "",
-      verticaldownclass: 'material-icons touchspin-down',
+            verticaldownclass: "",
-      buttondown_class: 'btn btn-touchspin js-touchspin js-increase-product-quantity',
+            buttondown_class:
-      buttonup_class: 'btn btn-touchspin js-touchspin js-decrease-product-quantity',
+                "btn btn-primary btn-touchspin js-touchspin js-increase-product-quantity",
-      min: parseInt($(spinner).attr('min'), 10),
+            buttonup_class:
+                "btn btn-primary btn-touchspin js-touchspin js-decrease-product-quantity",
+            min: parseInt($(spinner).attr("min"), 10),
             max: 1000000,
+            verticalup:
+                '<img src="/themes/falcon/_dev/img/chevron_up.svg" alt="Up" />',
+            verticaldown:
+                '<img src="/themes/falcon/_dev/img/chevron_down.svg" alt="Down" />',
         });
     });
 
@@ -94,41 +103,49 @@ const preventCustomModalOpen = (event) => {
 };
 
 $(() => {
-  const productLineInCartSelector = prestashop.themeSelectors.cart.productLineQty;
+    const productLineInCartSelector =
+        prestashop.themeSelectors.cart.productLineQty;
     const promises = [];
 
-  prestashop.on('updateCart', () => {
+    prestashop.on("updateCart", () => {
-    $(prestashop.themeSelectors.cart.quickview).modal('hide');
+        $(prestashop.themeSelectors.cart.quickview).modal("hide");
-    $('body').addClass('cart-loading');
+        $("body").addClass("cart-loading");
     });
 
-  prestashop.on('updatedCart', () => {
+    prestashop.on("updatedCart", () => {
         window.shouldPreventModal = false;
 
-    $(prestashop.themeSelectors.product.customizationModal).on('show.bs.modal', (modalEvent) => {
+        $(prestashop.themeSelectors.product.customizationModal).on(
+            "show.bs.modal",
+            (modalEvent) => {
                 preventCustomModalOpen(modalEvent);
-    });
+            },
+        );
 
         createSpin();
-    $('body').removeClass('cart-loading');
+        $("body").removeClass("cart-loading");
     });
 
     createSpin();
 
-  const $body = $('body');
+    const $body = $("body");
 
     function isTouchSpin(namespace) {
-    return namespace === 'on.startupspin' || namespace === 'on.startdownspin';
+        return (
+            namespace === "on.startupspin" || namespace === "on.startdownspin"
+        );
     }
 
     function shouldIncreaseProductQuantity(namespace) {
-    return namespace === 'on.startupspin';
+        return namespace === "on.startupspin";
     }
 
     function findCartLineProductQuantityInput($target) {
-    const $input = $target.parents(prestashop.themeSelectors.cart.touchspin).find(productLineInCartSelector);
+        const $input = $target
+            .parents(prestashop.themeSelectors.cart.touchspin)
+            .find(productLineInCartSelector);
 
-    if ($input.is(':focus')) {
+        if ($input.is(":focus")) {
             return null;
         }
 
@@ -136,10 +153,10 @@ $(() => {
     }
 
     function camelize(subject) {
-    const actionTypeParts = subject.split('-');
+        const actionTypeParts = subject.split("-");
         let i;
         let part;
-    let camelizedSubject = '';
+        let camelizedSubject = "";
 
         for (i = 0; i < actionTypeParts.length; i += 1) {
             part = actionTypeParts[i];
@@ -157,8 +174,8 @@ $(() => {
     function parseCartAction($target, namespace) {
         if (!isTouchSpin(namespace)) {
             return {
-        url: $target.attr('href'),
+                url: $target.attr("href"),
-        type: camelize($target.data('link-action')),
+                type: camelize($target.data("link-action")),
             };
         }
 
@@ -169,13 +186,13 @@ $(() => {
         if ($input) {
             if (shouldIncreaseProductQuantity(namespace)) {
                 cartAction = {
-          url: $input.data('up-url'),
+                    url: $input.data("up-url"),
-          type: 'increaseProductQuantity',
+                    type: "increaseProductQuantity",
                 };
             } else {
                 cartAction = {
-          url: $input.data('down-url'),
+                    url: $input.data("down-url"),
-          type: 'decreaseProductQuantity',
+                    type: "decreaseProductQuantity",
                 };
             }
         }
@@ -191,11 +208,19 @@ $(() => {
         }
     };
 
-  const getTouchSpinInput = ($button) => $($button.parents(prestashop.themeSelectors.cart.touchspin).find('input'));
+    const getTouchSpinInput = ($button) =>
+        $(
+            $button
+                .parents(prestashop.themeSelectors.cart.touchspin)
+                .find("input"),
+        );
 
-  $(prestashop.themeSelectors.product.customizationModal).on('show.bs.modal', (modalEvent) => {
+    $(prestashop.themeSelectors.product.customizationModal).on(
+        "show.bs.modal",
+        (modalEvent) => {
             preventCustomModalOpen(modalEvent);
-  });
+        },
+    );
 
     const handleCartAction = (event) => {
         event.preventDefault();
@@ -206,19 +231,19 @@ $(() => {
 
         const cartAction = parseCartAction($target, event.namespace);
         const requestData = {
-      ajax: '1',
+            ajax: "1",
-      action: 'update',
+            action: "update",
         };
 
-    if (typeof cartAction === 'undefined') {
+        if (typeof cartAction === "undefined") {
             return;
         }
 
         $.ajax({
             url: cartAction.url,
-      method: 'POST',
+            method: "POST",
             data: requestData,
-      dataType: 'json',
+            dataType: "json",
             beforeSend: (jqXHR) => {
                 promises.push(jqXHR);
             },
@@ -229,31 +254,35 @@ $(() => {
                 $quantityInput.val(resp.quantity);
 
                 // Refresh cart preview
-        prestashop.emit('updateCart', {
+                prestashop.emit("updateCart", {
                     reason: dataset,
                     resp,
                 });
             })
             .fail((resp) => {
-        prestashop.emit('handleError', {
+                prestashop.emit("handleError", {
-          eventType: 'updateProductInCart',
+                    eventType: "updateProductInCart",
                     resp,
                     cartAction: cartAction.type,
                 });
             });
     };
 
-  $body.on('click', prestashop.themeSelectors.cart.actions, handleCartAction);
+    $body.on("click", prestashop.themeSelectors.cart.actions, handleCartAction);
 
-  function sendUpdateQuantityInCartRequest(updateQuantityInCartUrl, requestData, $target) {
+    function sendUpdateQuantityInCartRequest(
+        updateQuantityInCartUrl,
+        requestData,
+        $target,
+    ) {
         abortPreviousRequests();
         window.shouldPreventModal = true;
 
         return $.ajax({
             url: updateQuantityInCartUrl,
-      method: 'POST',
+            method: "POST",
             data: requestData,
-      dataType: 'json',
+            dataType: "json",
             beforeSend: (jqXHR) => {
                 promises.push(jqXHR);
             },
@@ -262,45 +291,50 @@ $(() => {
                 CheckUpdateQuantityOperations.checkUpdateOperation(resp);
 
                 $target.val(resp.quantity);
-        const dataset = ($target && $target.dataset) ? $target.dataset : resp;
+                const dataset =
+                    $target && $target.dataset ? $target.dataset : resp;
 
                 // Refresh cart preview
-        prestashop.emit('updateCart', {
+                prestashop.emit("updateCart", {
                     reason: dataset,
                     resp,
                 });
             })
             .fail((resp) => {
-        prestashop.emit('handleError', {
+                prestashop.emit("handleError", {
-          eventType: 'updateProductQuantityInCart',
+                    eventType: "updateProductQuantityInCart",
                     resp,
                 });
             });
     }
 
     function getQuantityChangeType($quantity) {
-    return $quantity > 0 ? 'up' : 'down';
+        return $quantity > 0 ? "up" : "down";
     }
 
     function getRequestData(quantity) {
         return {
-      ajax: '1',
+            ajax: "1",
             qty: Math.abs(quantity),
-      action: 'update',
+            action: "update",
             op: getQuantityChangeType(quantity),
         };
     }
 
     function updateProductQuantityInCart(event) {
         const $target = $(event.currentTarget);
-    const updateQuantityInCartUrl = $target.data('update-url');
+        const updateQuantityInCartUrl = $target.data("update-url");
-    const baseValue = $target.attr('value');
+        const baseValue = $target.attr("value");
 
         // There should be a valid product quantity in cart
         const targetValue = $target.val();
 
         /* eslint-disable */
-    if (targetValue != parseInt(targetValue, 10) || targetValue < 0 || Number.isNaN(targetValue)) {
+        if (
+            targetValue != parseInt(targetValue, 10) ||
+            targetValue < 0 ||
+            Number.isNaN(targetValue)
+        ) {
             window.shouldPreventModal = false;
             $target.val(baseValue);
             return;
@@ -314,21 +348,29 @@ $(() => {
             return;
         }
 
-    if (targetValue === '0') {
+        if (targetValue === "0") {
-      $target.closest('.product-line-actions').find('[data-link-action="delete-from-cart"]').click();
+            $target
+                .closest(".product-line-actions")
+                .find('[data-link-action="delete-from-cart"]')
+                .click();
         } else {
-      $target.attr('value', targetValue);
+            $target.attr("value", targetValue);
-      sendUpdateQuantityInCartRequest(updateQuantityInCartUrl, getRequestData(qty), $target);
+            sendUpdateQuantityInCartRequest(
+                updateQuantityInCartUrl,
+                getRequestData(qty),
+                $target,
+            );
         }
     }
 
-  $body.on('touchspin.on.stopspin', spinnerSelector, debounce(updateProductQuantityInCart));
-
     $body.on(
-    'focusout keyup',
+        "touchspin.on.stopspin",
-    productLineInCartSelector,
+        spinnerSelector,
-    (event) => {
+        debounce(updateProductQuantityInCart),
-      if (event.type === 'keyup') {
+    );
+
+    $body.on("focusout keyup", productLineInCartSelector, (event) => {
+        if (event.type === "keyup") {
             if (event.keyCode === 13) {
                 isUpdateOperation = true;
                 updateProductQuantityInCart(event);
@@ -342,25 +384,20 @@ $(() => {
         }
 
         return false;
-    },
+    });
-  );
 
-  $body.on(
+    $body.on("click", prestashop.themeSelectors.cart.discountCode, (event) => {
-    'click',
-    prestashop.themeSelectors.cart.discountCode,
-    (event) => {
         event.stopPropagation();
         event.preventDefault();
 
         const $code = $(event.currentTarget);
-      const $discountInput = $('[name=discount_name]');
+        const $discountInput = $("[name=discount_name]");
-      const $discountForm = $discountInput.closest('form');
+        const $discountForm = $discountInput.closest("form");
 
         $discountInput.val($code.text());
         // Show promo code field
-      $discountForm.trigger('submit');
+        $discountForm.trigger("submit");
 
         return false;
-    },
+    });
-  );
 });

falcon/modules/is_favoriteproducts/views/templates/hook/button-product.tpl

@@ -1,5 +1,5 @@
 
-<div class="col-auto mt-2 px-1">
+<div class="col-auto">
     <a
         class="product-page__action-btn btn btn-light shadow rounded-circle favorite-btn p-2"
         href="#"

falcon/modules/ps_linklist/views/templates/hook/linkblock.tpl

@@ -23,8 +23,27 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  *}
 
+{* Simple display without titles for the header and footer *}
+{if $hookName == "displayFooterPrivacy"}
     {foreach $linkBlocks as $linkBlock}
-    <div class="col-md-3 col-12 mb-lg-4">
+        {foreach $linkBlock.links as $link}
+        <p class="links-list__elem mb-0">
+            <a
+                id="{$link.id}-{$linkBlock.id}"
+                class="{$link.class} links-list__link"
+                href="{$link.url}"
+                title="{$link.description}"
+                {if !empty($link.target)} target="{$link.target}" {/if}
+            >
+            {$link.title}
+            </a>
+        </p>
+        {/foreach}
+  {/foreach}
+{else}   
+{* Regular display *}
+  {foreach $linkBlocks as $linkBlock}
+    <div class="col-12 col-md-3">
       {assign var=_expand_id value=10|mt_rand:100000}
       <div class="d-flex align-items-center mb-3 justify-content-between position-relative">
         <span class="h4 mb-0">{$linkBlock.title}</span>
@@ -57,3 +76,4 @@
       </div>
     </div>
   {/foreach}
+{/if}

falcon/templates/_partials/footer-copyright.tpl

@@ -1,7 +1,8 @@
-<div class="footer-bottom py-3">
+<div class="footer-bottom py-1 py-lg-3">
-    <div class="container d-flex justify-content-between align-items-center">
+    <div class="container">
+        <div class="row d-flex flex-column flex-lg-row justify-content-between align-items-center">
             <div class="copyright">
-            <span>
+                <span class="text-white fw-400">
                     {l
                     s='Copyright © %year% %shop%'
                     sprintf=['%year%' => $smarty.now|date_format:"%Y", '%shop%' => $shop.name|capitalize]
@@ -9,17 +10,13 @@
                     }
                 </span>
             </div>
-        <a href="https://dewebsmid.nl/prestashop/" rel="noopener" target="_blank">
+            <a href="https://dewebsmid.nl/prestashop/" class="text-white fw-400" rel="noopener" target="_blank">
                 {l s='PrestaShop' d='Shop.Theme.Footer'}
             </a>
-        <div class="privacy">
+            <div class="privacy d-flex gap-20">
-            <a href="content/3-gebruiks-voorwaarden">
+                {* Need to create this hook in the db. Use ps_linklist with it- see modules/ps_linklist/views/templates/hook/linkblock.tpl *}
-                {l s='Terms & Conditions' d='Shop.Theme.Footer'}
+                {hook h='displayFooterPrivacy'}
-            </a>
+            </div>
-            <span class="mx-2"> | </span>
-            <a href="content/1-levering">
-                {l s='Privacy policy' d='Shop.Theme.Footer'}
-            </a>
         </div>
     </div>
 </div>

falcon/templates/_partials/footer.tpl

@@ -29,7 +29,7 @@
     {/block}
   </div>
 </div>
-<div class="footer-container pb-0">
+<div class="footer-container pb-0 mt-0">
   <div class="container">
     <div class="row">
       {block name='hook_footer'}

falcon/templates/_partials/head.tpl

@@ -74,9 +74,13 @@
 {/block}
 
 {block name='stylesheets'}
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
   {include file="_partials/stylesheets.tpl" stylesheets=$stylesheets}
 {/block}
 
+
 {block name='javascript_head'}
   {include file="_partials/javascript.tpl" javascript=$javascript.head vars=$js_custom_vars}
 {/block}

falcon/templates/catalog/_partials/product-add-to-cart.tpl

@@ -26,7 +26,7 @@
   {if !$configuration.is_catalog}
 
     {block name='product_quantity'}
-      <div class="product-quantity row mb-1 mx-n1 mt-n2 align-items-center">
+      <div class="product-quantity row mb-1 align-items-center">
         <div class="qty col-auto px-1">
           <input
             type="number"
@@ -46,7 +46,7 @@
           >
         </div>
 
-        <div class="add col mt-2 px-1">
+        <div class="add col">
           <button
             class="btn btn-primary add-to-cart btn-block"
             data-button-action="add-to-cart"

falcon/templates/checkout/_partials/cart-detailed-product-line.tpl

@@ -130,6 +130,7 @@
             value="{$product.quantity}"
             name="product-quantity-spin"
             min="{$product.minimal_quantity}"
+            data-verticalbuttons="true"
             aria-label="{l s='%productName% product quantity field' sprintf=['%productName%' => $product.name] d='Shop.Theme.Checkout'}"
             />
         </div>

falcon/templates/checkout/_partials/steps/addresses.tpl

@@ -72,7 +72,7 @@
         {/if}
 
         <div class="add-address mt-2 mb-3">
-          <a class="btn btn-outline-primary btn-sm" href="{$new_address_delivery_url}">{l s='add new address' d='Shop.Theme.Actions'}</a>
+          <a class="btn btn-primary btn-sm" href="{$new_address_delivery_url}">{l s='add new address' d='Shop.Theme.Actions'}</a>
         </div>
 
         {if $use_same_address && !$cart.is_virtual}
@@ -116,7 +116,7 @@
           {/if}
 
           <div class="add-address mt-2 mb-3">
-            <a class="btn btn-outline-primary btn-sm" href="{$new_address_invoice_url}">{l s='add new address' d='Shop.Theme.Actions'}</a>
+            <a class="btn btn-primary btn-sm" href="{$new_address_invoice_url}">{l s='add new address' d='Shop.Theme.Actions'}</a>
           </div>
         {/if}
 

falcon/templates/checkout/cart.tpl

@@ -44,7 +44,7 @@
 
         {block name='continue_shopping'}
           <div class="my-3">
-            <a class="btn btn-outline-primary" href="{$urls.pages.index}">
+            <a class="btn btn-primary" href="{$urls.pages.index}">
               <span class="material-icons btn-icon mr-1">keyboard_arrow_left</span>
               {l s='Continue shopping' d='Shop.Theme.Actions'}
             </a>

falcon/templates/customer/customer-links.tpl

@@ -73,7 +73,7 @@
   </div>
 
   <div class="text-center customer-links__footer">
-    <a href="{$link->getPageLink('index', true, null, 'mylogout')}" class="customer-links__logout">
+    <a href="{$link->getPageLink('index', true, null, 'mylogout')}" class="customer-links__logout btn btn-secondary mt-2">
       {l s='Sign out' d='Shop.Theme.Actions'}
     </a>
   </div>

falcon/templates/customer/order-detail.tpl

@@ -66,7 +66,7 @@
 
       {if $order.details.reorder_url}
         <div class="mt-2 text-right">
-          <a href="{$order.details.reorder_url}" class="btn btn-outline-primary">{l s='Reorder' d='Shop.Theme.Actions'}</a>
+          <a href="{$order.details.reorder_url}" class="btn btn-primary">{l s='Reorder' d='Shop.Theme.Actions'}</a>
         </div>
       {/if}
 

falcon/templates/index.tpl

@@ -26,12 +26,6 @@
 
 {block name='page_content_container'}
     <section id="content" class="page-home">
-        {block name='page_content_top'}{/block}
+        {* {include file='pages/index/hero.tpl'} *}
-
-        {block name='page_content'}
-          {block name='hook_home'}
-            {$HOOK_HOME nofilter}
-          {/block}
-        {/block}
     </section>
 {/block}

falcon/templates/layouts/layout-both-columns.tpl

@@ -42,7 +42,7 @@
         {include file='catalog/_partials/product-activation.tpl'}
       {/block}
 
-      <header id="header" class="l-header">
+      <header id="header" class="l-header mb-0">
         {block name='header'}
           {include file='_partials/header.tpl'}
         {/block}
@@ -55,12 +55,12 @@
         {/block}
 
         {hook h="displayWrapperTop"}
-        <div class="container">
+        <div class="{if $page.page_name == 'index' } container-fluid p-0 overflow-hidden {else}container{/if}">
           {block name='breadcrumb'}
             {include file='_partials/breadcrumb.tpl'}
           {/block}
 
-          <div class="row">
+           <div {if $page.page_name != 'index' || !isset($page.body_classes['layout-full-width'])}class="row"{/if}>
             {block name="left_column"}
               <div id="left-column" class="col-12 col-md-4 col-lg-3">
                 {if $page.page_name == 'product'}
@@ -95,7 +95,7 @@
         {hook h="displayWrapperBottom"}
       </section>
 
-      <footer id="footer" class="l-footer js-footer">
+      <footer id="footer" class="l-footer js-footer mt-0">
         {block name="footer"}
           {include file="_partials/footer.tpl"}
         {/block}

falcon/templates/layouts/layout-full-width.tpl

@@ -28,7 +28,7 @@
 {block name='right_column'}{/block}
 
 {block name='content_wrapper'}
-  <div id="content-wrapper" class="col-12 js-content-wrapper">
+   <div id="content-wrapper" class="{if $page.page_name != 'index' || !isset($page.body_classes['layout-full-width'])}col-12 {/if}js-content-wrapper">
     {hook h="displayContentWrapperTop"}
     {block name='content'}
       <p>Hello world! This is HTML5 Boilerplate.</p>

falcon/templates/pages/index/hero.tpl

@@ -0,0 +1,10 @@
+{* hero section on home page *}
+<section id="home_hero" class="section-spacer-both">
+    <div class="container">
+        <div class="row">
+            <div class="col-12 col-md-8 col-xl-6">
+              
+            </div>
+        </div>
+    </div>
+</section>