added product vairations buttons on frontpage

web/themes/custom/materiotheme/assets/dist/main.css

@@ -1731,10 +1731,24 @@ article.node--type-frontpage .node__content > section.home-pricing .field--name-
     color: #fff;
     position: relative;
     height: 18em; }
+    article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item a.btn {
+      display: inline-block;
+      font-size: 0.9em;
+      font-weight: bold;
+      padding: 0.7em 1em;
+      margin-bottom: 0.3em;
+      background-color: #fff;
+      color: #000;
+      border-radius: 5px;
+      background-color: #fff; }
     article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item:nth-child(1) {
       background-color: #69cdcf; }
+      article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item:nth-child(1) a.btn {
+        color: #69cdcf; }
     article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item:nth-child(2) {
       background-color: #ff9f50; }
+      article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item:nth-child(2) a.btn {
+        color: #ff9f50; }
     article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item > div {
       position: absolute;
       top: 50%;

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -849,11 +849,21 @@ article.node--type-frontpage{
             flex:0 0 50%;
             text-align: center;
             padding: 2em 0;
+            a.btn{
+              @include btn;
+              background-color: #fff;
+            }
             &:nth-child(1){
-              background-color: $color-base
+              background-color: $color-base;
+              a.btn{
+                color: $color-base;
+              }
             }
             &:nth-child(2){
               background-color: $color-webshowroom;
+              a.btn{
+                color: $color-webshowroom;
+              }
             }
             color: #fff;
             position: relative;

web/themes/custom/materiotheme/templates/content/commerce-product-variation--materio-product-variation-type--summary.html.twig

@@ -0,0 +1,27 @@
+{#
+/**
+ * @file
+ *
+ * Default template for product variations.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the wrapper.
+ * - product_variation: The rendered product variation fields.
+ *   Use 'product_variation' to print them all, or print a subset such as
+ *   'product_variation.title'. Use the following code to exclude the
+ *   printing of a given field:
+ *   @code
+ *   {{ product_variation|without('title') }}
+ *   @endcode
+ * - product_variation_entity: The product variation entity.
+ * - product_url: The product URL.
+ *
+ * @ingroup themeable
+ */
+#}
+<div{{ attributes }}>
+  {{- product_variation -}}
+  <a href="/pricing" @click.prevent="onClickLink" class="btn">
+    {% trans %}View Option Details{% endtrans %}
+  </a>
+</div>