make features data based

home/_data/for_b.yml

@@ -0,0 +1,37 @@
+header:
+  title: For buisness
+  text: |
+    This pipe does something a little different.
+    It preserves the breaks.
+    This is really helpful for code samples,
+    since you can format the code samples with
+       the appropriate
+
+features:
+  - title: mountain bikes
+    subtitle: very intresting
+    description: long text describing this
+    link: Https://example.com/
+
+  - title: mountain bikes1
+    subtitle: very intresting1
+    description: long text describing this1
+    link: Https://example.com/1
+
+  - title: mountain bikes2
+    subtitle: very intresting2
+    description: long text describing this2
+    link: Https://example.com/2
+
+  - title: mountain bikes3
+    subtitle: very intresting3
+    description: long text describing this3
+    link: Https://example.com/3
+
+cta:
+  text: Want to know more? Try out our demo or read more in the enterprise docs!
+  btn:
+    - text: open demo
+      link: https://a.bb/
+    - text: enterprise docs
+      link: https://c.dd/

home/_data/for_h.yml

@@ -0,0 +1,17 @@
+header:
+  title: For hobbists
+  text: |
+    This pipe does something a little different.
+    It preserves the breaks.
+
+
+features:
+  - title: mountain bikes
+    subtitle: very intresting
+    description: long text describing this
+    link: Https://example.com/
+
+  - title: mountain bikes3
+    subtitle: very intresting3
+    description: long text describing this3
+    link: Https://example.com/3

home/_includes/cta.html

@@ -1,8 +1,14 @@
-<section class="text-gray-600 body-font">
+<section class="cm-text-body">
+  {% unless include.no_container %}
     <div class="container px-5 py-24 mx-auto">
+  {% endunless %}
       <div class="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
-        <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">Slow-carb next level shoindxgoitch ethical authentic, scenester sriracha forage.</h1>
+        <h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">{{ include.cta.text }}</h1>
-        <button class="flex-shrink-0 text-white bg-primarylg border-0 py-2 px-8 focus:outline-none hover:bg-primary rounded text-lg mt-10 sm:mt-0">Button</button>
+        {% for item in include.cta.btn %}
+        <button href="{{ item.link }}" class="flex-shrink-0 text-white bg-primarylg border-0 py-2 px-8 focus:outline-none hover:bg-primary rounded text-lg mt-10 sm:mt-0">{{ item.text }}</button>
+        {% endfor %}
       </div>
+  {% unless include.no_container %}
     </div>
+  {% endunless %}
 </section>

home/_includes/features.html

@@ -1,41 +1,27 @@
-<section class="text-gray-600 body-font">
+<section class="cm-text-body">
     <div class="container px-5 py-24 mx-auto">
-      <div class="flex flex-wrap w-full mb-20">
+      <div class="flex flex-wrap w-full mb-4">
         <div class="lg:w-1/2 w-full mb-6 lg:mb-0">
-          <h1 class="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">Pitchfork Kickstarter Taxidermy</h1>
+          <h1 class="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">{{ include.data.header.title }}</h1>
           <div class="h-1 w-20 bg-primarylg rounded"></div>
         </div>
-        <p class="lg:w-1/2 w-full leading-relaxed text-gray-500">Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of them man bun deep jianbing selfies heirloom prism food truck ugh squid celiac humblebrag.</p>
+        <p class="lg:w-1/2 w-full leading-relaxed text-gray-500">{{ include.data.header.text }}</p>
       </div>
+
       <div class="flex flex-wrap -m-4">
+      {% for item in include.data.features %}
         <div class="xl:w-1/4 md:w-1/2 p-4">
           <div class="bg-gray-100 p-6 rounded-lg">
-            <h3 class="tracking-widest text-purple-500 text-xs font-medium title-font">SUBTITLE</h3>
+            <h3 class="tracking-widest text-purple-500 text-xs font-medium title-font">{{ item.subtitle }}</h3>
-            <h2 class="text-lg text-gray-900 font-medium title-font mb-4">Chichen Itza</h2>
+            <h2 class="text-lg text-gray-900 font-medium title-font mb-4">{{ item.title }}</h2>
-            <p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waistcoat. Distillery hexagon disrupt edison bulbche.</p>
+            <p class="leading-relaxed text-base">{{ item.tagline }}</p>
-          </div>
-        </div>
-        <div class="xl:w-1/4 md:w-1/2 p-4">
-          <div class="bg-gray-100 p-6 rounded-lg">
-            <h3 class="tracking-widest text-purple-500 text-xs font-medium title-font">SUBTITLE</h3>
-            <h2 class="text-lg text-gray-900 font-medium title-font mb-4">Colosseum Roma</h2>
-            <p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waistcoat. Distillery hexagon disrupt edison bulbche.</p>
-          </div>
-        </div>
-        <div class="xl:w-1/4 md:w-1/2 p-4">
-          <div class="bg-gray-100 p-6 rounded-lg">
-            <h3 class="tracking-widest text-purple-500 text-xs font-medium title-font">SUBTITLE</h3>
-            <h2 class="text-lg text-gray-900 font-medium title-font mb-4">Great Pyramid of Giza</h2>
-            <p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waistcoat. Distillery hexagon disrupt edison bulbche.</p>
-          </div>
-        </div>
-        <div class="xl:w-1/4 md:w-1/2 p-4">
-          <div class="bg-gray-100 p-6 rounded-lg">
-            <h3 class="tracking-widest text-purple-500 text-xs font-medium title-font">SUBTITLE</h3>
-            <h2 class="text-lg text-gray-900 font-medium title-font mb-4">San Francisco</h2>
-            <p class="leading-relaxed text-base">Fingerstache flexitarian street art 8-bit waistcoat. Distillery hexagon disrupt edison bulbche.</p>
           </div>
         </div>
+      {% endfor %}
       </div>
+
+      {% if include.data.cta %}
+        {% include cta.html no_container=true cta=include.data.cta %}
+      {% endif %}
     </div>
   </section>

home/index.md

@@ -6,11 +6,13 @@ backLink: false
 
 {% include hero.html %}
 
-{% include cta.html %}
+{% assign for_b = site.data.for_b %}
+{% include features.html data=for_b %}
 
-{% include features.html %}
+
+{% assign for_h = site.data.for_h %}
+{% include features.html data=for_h %}
 
 {% include cta.html %}
 
-
 ---

home/styles/index.css

@@ -22,6 +22,10 @@
         @apply title-font font-medium text-gray-900 tracking-widest text-sm mb-3
         */
     }
+
+    .cm-text-body {
+        @apply text-gray-600 body-font
+    }
 }
 
 .bg-primary {