Merge pull request #265 from mpourismaiel/feat/pricing/create

Add support for pricing fragment

exampleSite/content/about/pricing/index.md

@@ -0,0 +1,11 @@
++++
+fragment = "pricing"
+weight = 100
+# background = "light"
+
+title = "Pricing fragment"
+subtitle = "Can be linked to 3rd party payment services"
++++
+
+Pricing fragment supports **markdown** as it's subtitle.  
+Supports feature listing of different plans and links to a payment service.

exampleSite/content/about/pricing/plan-1.md

@@ -0,0 +1,20 @@
++++
+weight = 10
+
+title = "Starting plan"
+subtitle = "starting at"
+
+price = "Free"
+# highlight = true
+
+button_text = "Start for free"
+button_url = "#"
+
+[[features]]
+  text = "**Basic** feature"
+  icon = "fas fa-check"
+
+[[features]]
+  text = "**Email** support"
+  icon = "fas fa-check"
++++

exampleSite/content/about/pricing/plan-2.md

@@ -0,0 +1,28 @@
++++
+weight = 20
+
+title = "Premium plan"
+subtitle = "starting at"
+
+price = "$9.99/mo"
+highlight = true
+
+button_text = "Get started"
+button_url = "#"
+
+[[features]]
+  text = "**Basic** feature"
+  icon = "fas fa-check"
+
+[[features]]
+  text = "**Premium** feature"
+  icon = "fas fa-check"
+
+[[features]]
+  text = "**Email** support"
+  icon = "fas fa-check"
+
+[[features]]
+  text = "**Chat** support"
+  icon = "fas fa-check"
++++

exampleSite/content/about/pricing/plan-3.md

@@ -0,0 +1,32 @@
++++
+weight = 30
+
+title = "Enterprise plan"
+# subtitle = ""
+
+price = "Custom"
+# highlight = true
+
+button_text = "Contact us"
+button_url = "#"
+
+[[features]]
+  text = "**Basic** feature"
+  icon = "fas fa-check"
+
+[[features]]
+  text = "**Premium** feature"
+  icon = "fas fa-check"
+
+[[features]]
+  text = "**Email** support"
+  icon = "fas fa-check"
+
+[[features]]
+  text = "**Chat** support"
+  icon = "fas fa-check"
+
+[[features]]
+  text = "**Additional enterprise stuff**"
+  icon = "fas fa-check"
++++

layouts/partials/fragments/pricing.html

@@ -0,0 +1,82 @@
+{{- $items := where (.resources.Match (printf "%s/*.md" .Name)) ".Name" "ne" .self.Name -}}
+{{- $self := . -}}
+{{- $bg := .Params.background | default "light" }}
+
+{{ "<!-- Pricing -->" | safeHTML }}
+<section id="{{ .Name }}">
+  <div class="overlay container-fluid
+    {{- printf " bg-%s" $bg -}}
+  ">
+    <div class="container py-5">
+      {{- with .Params.title }}
+        <div class="row">
+          <div class="col text-center
+            {{- if or (eq $bg "white") (eq $bg "light") (eq $bg "secondary") (eq $bg "primary") -}}
+              {{- printf " text-%s" "dark" -}}
+            {{- else -}}
+              {{- printf " text-%s" "light" -}}
+            {{- end -}}
+            {{- if and (not (isset $self.Params "subtitle")) (not $self.Content) -}}
+              {{- printf " pb-4" -}}
+            {{- end -}}
+          ">
+            <h2>
+              {{- . | markdownify -}}
+            </h2>
+          </div>
+        </div>
+      {{- end -}}
+      {{- with .Params.subtitle -}}
+        <div class="row">
+          <div class="col text-center pt-2 pb-4
+            {{- if or (eq $bg "secondary") (eq $bg "primary") -}}
+              {{- printf " text-%s" "dark" -}}
+            {{- else -}}
+              {{- printf " text-muted text-%s" "secondary" -}}
+            {{- end -}}
+          ">
+            <h6>
+              {{- . | markdownify -}}
+            </h6>
+          </div>
+        </div>
+      {{- end }}
+      {{- with .Content -}}
+        <div class="row">
+          <div class="col text-center pt-4 pb-5
+            {{- if or (eq $bg "secondary") (eq $bg "primary") -}}
+              {{- printf " text-%s" "dark" -}}
+            {{- else -}}
+              {{- printf " text-muted text-%s" "secondary" -}}
+            {{- end -}}
+          ">
+            {{- . -}}
+          </div>
+        </div>
+      {{- end }}
+      <div class="row">
+        {{- range (sort $items ".Params.weight") }}
+          <div class="col-lg-4 col-md-6 col-12 py-2 pricing-plan {{- if .Params.highlight }} pricing-plan-highlight {{- end -}}">
+            <div class="card">
+              <div class="card-header
+                {{- printf " bg-%s" (.Params.header_bg | default "primary") -}}
+                {{- printf " text-%s" (.Params.header_text_color | default "light") -}}">
+                <h4 class="mt-0 font-weight-normal text-center">{{ .Title }}</h4>
+                <div class="mt-0 h6 font-weight-normal text-center">{{ (.Params.subtitle | default "") | markdownify }}</div>
+                <h2 class="card-title mb-0 pricing-card-title text-center">{{ .Params.price }}</h2>
+              </div>
+              <div class="card-body {{ printf "bg-%s" (.Params.bg | default "light") }}">
+                <div class="mb-4 features">
+                  {{- range .Params.features }}
+                    <p><i class="{{ .icon }}"></i>{{ .text | markdownify }}</p>
+                  {{- end }}
+                </div>
+                <a href="{{ .Params.button_url }}" class="btn btn-lg btn-block btn-primary">{{ .Params.button_text }}</a>
+              </div>
+            </div>
+          </div>
+        {{- end }}
+      </div>
+    </div>
+  </div>
+</section>

static-main/styles/_pricing.scss

@@ -0,0 +1,50 @@
+.pricing-plan {
+  display: flex;
+
+  .card {
+    flex: 1 0 auto;
+    overflow: hidden;
+  }
+
+  .card-header {
+    height: 125px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  &-highlight {
+    @include media-breakpoint-up(md) {
+      margin: -20px -10px 0;
+
+      .card-header {
+        height: 145px;
+      }
+    }
+
+    @include media-breakpoint-down(md) {
+      order: -1;
+    }
+  }
+
+  .card-body {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 auto;
+
+    .features {
+      display: flex;
+      flex-direction: column;
+      flex: 1 0 auto;
+    }
+
+    p {
+      margin-bottom: 0;
+
+      i {
+        color: $green;
+        margin-right: 10px;
+      }
+    }
+  }
+}

static-main/styles/index.scss

@@ -9,5 +9,6 @@ $fa-font-path: '~@fortawesome/fontawesome-free-webfonts/webfonts';
 @import './header';
 @import './form';
 @import './portfolio';
+@import './pricing';
 @import './modal';
 @import './syna';

static/main.css

@@ -9657,6 +9657,37 @@ div.form-error ul li {
   border-radius: 0;
   background-color: rgba(52, 58, 64, 0.6); }
 
+.pricing-plan {
+  display: flex; }
+  .pricing-plan .card {
+    flex: 1 0 auto; }
+  .pricing-plan .card-header {
+    height: 125px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center; }
+  @media (min-width: 768px) {
+    .pricing-plan-highlight {
+      margin: -20px -10px 0; }
+      .pricing-plan-highlight .card-header {
+        height: 145px; } }
+  @media (max-width: 991.98px) {
+    .pricing-plan-highlight {
+      order: -1; } }
+  .pricing-plan .card-body {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 auto; }
+    .pricing-plan .card-body .features {
+      display: flex;
+      flex-direction: column;
+      flex: 1 0 auto; }
+    .pricing-plan .card-body p {
+      margin-bottom: 0; }
+      .pricing-plan .card-body p i {
+        color: #008f54;
+        margin-right: 10px; }
+
 body.modal-open {
   padding-right: 15px; }