pricing cards

Gemfile

@@ -4,5 +4,6 @@ source 'https://rubygems.org' do
   gem 'jekyll-contentblocks'
   gem 'jekyll-redirect-from'
   gem 'jekyll-toc'
+  gem 'jekyll-random'
   gem 'public_suffix', '3.0.0'
 end

_config.yml

@@ -7,6 +7,7 @@ plugins:
   - jekyll-tidy
   - jekyll-contentblocks
   - jekyll-toc
+  - jekyll-random
 
 exclude:
   - regenerate-images.sh

src/_data/menu.yml

@@ -17,6 +17,10 @@ interface:
       icon: fe fe-pie-chart
       url: charts.html
 
+    pricing-cards:
+      name: Pricing cards
+      url: pricing-cards.html
+
 components:
   name: Components
   icon: fe fe-calendar

src/_includes/cards/card-pricing.html

+{% assign features = "Sharing Tools|Design Tools|Private Messages|Twitter API" | split: '|' %}
+{% assign available-features = include.features | default: '1000' | split: '' %}
+<div class="card">
+	{% if include.featured-color %}
+	<div class="card-status bg-{{ include.featured-color }}"></div>
+	{% endif %}
+
+	<div class="card-body text-center">
+		<div class="card-category">{{ include.category | default: 'Enterprise' }}</div>
+		<div class="display-3 my-4">${{ include.price | default: '79' }}</div>
+
+		<ul class="list-unstyled leading-loose">
+			<li><strong>{{ include.users | default: 10 }}</strong> Users</li>
+			{% for feature in features %}
+			<li><i class="fe {% if available-features[forloop.index0] == '1' %}fe-check text-success{% else %}fe-x text-danger{% endif %} mr-2" aria-hidden="true"></i> {{ feature }}</li>
+			{% endfor %}
+		</ul>
+		
+		<div class="text-center mt-6">
+			<a href="#" class="btn btn-{{ include.featured-color | default: 'secondary' }} btn-block">Choose plan</a>
+		</div>
+	</div>
+</div>
\ No newline at end of file

src/_includes/page-title.html

 <div class="page-header">
 	<h1 class="page-title">
-		<i class="{{ include.icon }} page-title-icon"></i>
+		{% if include.icon %}
+			<i class="{{ include.icon }} page-title-icon"></i>
+		{% endif %}
 
-		{{ include.title }}
+		{{ include.title | default: page.title }}
 	</h1>
 
 	{% if include.subtitle %}

src/_plugins/jekyll-tabler.rb

 module Jekyll
   module TablerFilter
 
-    def random_number(value, min=0, max=100, offset=0, round=0)
-      formatter = round ? '%.' + round.to_s + 'f' : '%'
-      value = formatter % ((Math.sin(Math.sin(value + offset)) + 1) * ((max - min) / 2) + min)
-
-      value
-    end
-
     def to_pretty_time(value)
       a = (Time.now-value).to_i
 

src/assets/scss/dashboard/_cards.scss

@@ -402,4 +402,13 @@ Card alert
 .card-alert {
 	border-radius: 0;
 	margin: -1px -1px 0;
+}
+
+.card-category {
+	font-size: px2rem(14px);
+	text-transform: uppercase;
+	text-align: center;
+	font-weight: 600;
+	letter-spacing: .05em;
+	margin: 0 0 .5rem;
 }
\ No newline at end of file

src/cards.html

@@ -8,9 +8,6 @@ menu: interface.cards
 <div class="container">
 
 	<div class="row">
-		<div class="col-lg-12">
-
-		</div>
 		<div class="col-md-6 col-xl-4">
 			{% include cards/card.html title="This is a standard card" show-footer=true %}
 		</div>

src/pricing-cards.html

+---
+layout: default
+title: Pricing cards
+menu: interface.pricing-cards
+---
+
+<div class="container">
+	{% include page-title.html %}
+
+	<div class="row">
+		<div class="col-3">
+			{% include cards/card-pricing.html price="0" users=3 category="Free" %}
+		</div>
+		<div class="col-3">
+			{% include cards/card-pricing.html price="49" users=10 category="Premium" features="1100" featured-color="green" %}
+		</div>
+		<div class="col-3">
+			{% include cards/card-pricing.html price="99" category="Enterprise" users=100 features="1110" %}
+		</div>
+		<div class="col-3">
+			{% include cards/card-pricing.html price="139" category="Unlimited" users="Unlimited" features="1111" %}
+		</div>
+	</div>
+</div>
\ No newline at end of file

src/users-list.html

@@ -84,7 +84,7 @@ layout: default
 						<td><span class="avatar d-block rounded" style="background-image: url({{ user.photo }})"></span></td>
 						<td>{{ user.name }} {{user.surname }}</td>
 						<td class="d-none d-sm-table-cell">{{ user.birthday.dmy | date: '%B %d, %Y' }}</td>
-						<td class="d-none d-md-table-cell">${{ forloop.index | random_number: 500, 2000, 0, 2 }}</td>
+						<td class="d-none d-md-table-cell">${{ forloop.index | random_number: 500, 2000, 2 }}</td>
 					</tr>
 					{% endfor %}
 				</table>