Init

themes/agico-hugo/layouts/_default/product.html

@@ -0,0 +1,86 @@
+{{ define "main" }}
+
+<section class="section section-lg-bottom">
+  <div class="container">
+
+    {{ range $idx, $tbl := .Params.pricing_tables }}
+
+      {{ $odd          := eq (mod $idx 2) 1 }}
+      {{ $textOrderLg  := cond $odd "order-lg-1" "order-lg-2" }}
+      {{ $tableOrderLg := cond $odd "order-lg-2" "order-lg-1" }}
+      {{ $delay        := mul (add $idx 1) 100 }}
+      {{ $textAOS      := cond $odd "fade-right" "fade-left" }}
+      {{ $tableAOS     := "fade-up" }}
+
+      <div class="row justify-content-center align-items-start mb-5 g-8">
+
+        {{/* --------- TEKSTKOLOM (altijd boven op mobiel) --------- */}}
+        <div class="col-lg-7 col-md-12 col-sm-12 p-sm-4 px-lg-6 order-1 {{ $textOrderLg }}"
+            data-aos="{{ $textAOS }}" data-aos-delay="{{ $delay }}">
+          {{ range $tbl.pricing_table_info }}
+            {{ with .header }}
+              {{ partial "image.html" (dict
+                  "Src" . 
+                  "Alt" (printf "Logo %s" $.Page.Title)
+                  "Class" "img-fluid mb-3 logo-header img-product" 
+              ) }}
+            {{ end }}
+            {{ with .subheader }}
+              <h4 class="mt-2 {{ $textOrderLg }}" data-aos="{{ $textAOS }}" data-aos-delay="{{ $delay }}">{{ . }}</h4>
+            {{ end }}
+
+            {{ with .text }}
+              <p class="{{ $textOrderLg }}" data-aos="{{ $textAOS }}" data-aos-delay="{{ $delay }}">{{ . | markdownify }}</p>
+            {{ end }}
+          {{ end }}
+        </div>
+
+        {{/* --------- TABELKOLOM (altijd onder op mobiel) --------- */}}
+        <div class="col-lg-5 col-md-12 col-sm-12 my-4 order-2 {{ $tableOrderLg }}" data-aos="{{ $tableAOS }}" data-aos-delay="{{ $delay }}">
+          <table class="pricing-table shadow-lg" style="width: 100%;">
+            <tbody>
+
+              {{/* PRIJS-REEKS (bovenste rij met kolommen) */}}
+              <tr>
+                {{ range $tbl.pricing_table_info }}
+                <td>
+                  {{ with .price }}<h6>{{ . | markdownify }}</h6>{{ end }}
+                  {{ with .content }}<h6>{{ . | markdownify }}</h6>{{ end }}
+                  {{ with .info }}<small>{{ . | markdownify }}</small>{{ end }}
+                </td>
+                {{ end }}
+              </tr>
+
+              {{/* BODY-REEKSEN */}}
+              {{ range $tbl.pricing_table_data }}
+              <tr>
+                {{ range .table_row }}
+                <td style="width:60%;">
+                  <div>
+                    {{ with .icon }}<i class="{{ . }}"></i>{{ end }}
+                    {{ with .price }}<span class="d-flex align-items-center">{{ . }}</span>{{ end }}
+                    <p><b>{{ .product | markdownify }}</b></p>
+                    {{ with .info }}<small>{{ . | markdownify }}</small>{{ end }}
+                  </div>
+                </td>
+                {{ end }}
+              </tr>
+              {{ end }}
+
+            </tbody>
+          </table>
+        </div>
+
+      </div>
+    {{ end }}
+
+    <!-- <div class="row justify-content-center" data-aos="fade-up" data-aos-delay="200">
+      <div class="col-lg-8 col-md-8 col-sm-12 mb-40">
+        {{ .Content }}
+      </div>
+    </div> -->
+
+  </div>
+</section>
+
+{{ end }}