new section: features (simple)

locomotivecms · May 24, 2019 · 62e8eef · 62e8eef
1 parent e9dc44e
commit 62e8eef
Show file tree

Hide file tree

Showing 13 changed files with 373 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -1,16 +1,18 @@
-# site
+# LocomotiveCMS official Website.
 
-These are the source files of the Locomotive website.
+These are the source files of the Locomotive website based on the [Bulma](https://bulma.io), the popular HTML/CSS framework.
+Design wise, we took inspiration from the Pasquale Vitiello's awesome work: [https://cruip.com/](https://cruip.com/).
 
 ## Installation
 
     bundle install
-    bower install
+    yarn
 
 ## Development
 
 Run wagon:
 
+    yarn start
     bundle exec wagon serve
 
 ## License
@@ -19,7 +21,7 @@ MIT License
 
 ## Contributing
 
-1. Fork it ( https://github.com/[my-github-username]/kickster/fork )
+1. Fork it ( https://github.com/locomotivecms/site/fork )
 2. Create your feature branch (`git checkout -b my-new-feature`)
 3. Commit your changes (`git commit -am 'Add some feature'`)
 4. Push to the branch (`git push origin my-new-feature`)

diff --git a/app/assets/javascripts/app.js b/app/assets/javascripts/app.js
@@ -13,6 +13,7 @@ document.addEventListener('DOMContentLoaded', event => {
   const sectionsManager = new SectionsManager();
 
   // Register sections here. DO NOT REMOVE OR UPDATE THIS LINE
+  sectionsManager.registerSection('features', Sections.Feature);
   sectionsManager.registerSection('clients', Sections.Client);
   sectionsManager.registerSection('hero', Sections.Hero);
   sectionsManager.registerSection('footer', Sections.Footer);

diff --git a/app/assets/javascripts/sections/features.js b/app/assets/javascripts/sections/features.js
@@ -0,0 +1,26 @@
+const Section = {
+
+  // load: (section) => {
+  // },
+
+  // unload: (section) => {
+  // },
+
+  // select: (section) => {
+  // },
+
+  // deselect: (section) => {
+  // },
+
+  // reorder: (section) => {
+  // },
+
+  // blockSelect: (section, block) => {
+  // },
+
+  // blockDeSelect: (section, block) => {
+  // }
+
+}
+
+export default Section;
diff --git a/app/assets/javascripts/sections/index.js b/app/assets/javascripts/sections/index.js
@@ -7,3 +7,4 @@ export { default as Header } from './header';
 export { default as Footer } from './footer';
 export { default as Hero } from './hero';
 export { default as Client } from './clients';
+export { default as Feature } from './features';
diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss
@@ -12,3 +12,4 @@
 @import './sections/header';
 @import './sections/hero';
 @import './sections/clients';
+@import './sections/features';
diff --git a/app/assets/stylesheets/sections/clients.scss b/app/assets/stylesheets/sections/clients.scss
@@ -26,7 +26,7 @@
       flex-direction: column;
 
       img {
-        margin: 1rem 0;
+        margin: 2rem 0;
       }
     }
   }

diff --git a/app/assets/stylesheets/sections/features.scss b/app/assets/stylesheets/sections/features.scss
@@ -0,0 +1,87 @@
+.section-features {
+  position: relative;
+  background: #fff;
+  padding: 4rem 0;
+
+  .feature-list {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 5rem;
+  }
+
+  .feature-item {
+    margin: 0 4rem;
+
+    &-inner {
+      padding: 4rem 2rem;
+      position: relative;
+
+      &:before {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        box-shadow: 0 16px 48px #E3E7EB;
+        mix-blend-mode: multiply;
+      }
+    }
+
+    &-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 4rem;
+      height: 4rem;
+      margin: 0 auto;
+      background: #1D7AC8;
+      border-radius: 2px;
+
+      i {
+        color: #fff;
+        font-size: 2rem;
+      }
+    }
+
+    .title {
+      margin-top: 2rem;
+    }
+
+    &-dots {
+      margin-top: 2rem;
+
+      span {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        margin: 0 2px;
+        background: #1D7AC8;
+        border-radius: 2px;
+      }
+    }
+  }
+}
+
+// Mobile & Tablet
+@include until($desktop) {
+
+  .section-features {
+
+    .feature-list {
+      flex-direction: column;
+      justify-content: space-around;
+      margin-top: 3rem;
+    }
+
+    .feature-item {
+      margin: 0 3rem;
+    }
+
+    .feature-item-inner {
+      margin: 2rem 0;
+    }
+
+  }
+
+}
diff --git a/app/assets/stylesheets/sections/header.scss b/app/assets/stylesheets/sections/header.scss
@@ -11,6 +11,7 @@
 
 // Mobile & Tablet
 @include until($desktop) {
+
   .section-header {
 
     .navbar-menu {
@@ -47,8 +48,8 @@
       background-color: #242E3B;
     }
   }
-}
 
+}
 
 @keyframes navUnFoldMenuAnim {
   0% {

diff --git a/app/assets/stylesheets/sections/hero.scss b/app/assets/stylesheets/sections/hero.scss
@@ -71,9 +71,11 @@
 
 // Mobile & Tablet
 @include until($desktop) {
+
   .section-hero {
     &:before {
       height: calc(#{$navbar-height} + 80%);
     }
   }
+
 }
diff --git a/app/views/pages/index.liquid b/app/views/pages/index.liquid
@@ -63,6 +63,37 @@ sections_content: >
           }
         }
       ]
+    },
+    "features": {
+      "settings": {
+        "title": "Super easy workflow"
+      },
+      "blocks": [
+        {
+          "type": "feature",
+          "settings": {
+            "title": "Install Wagon",
+            "description": "Our development tool that lets you create sites with your favorite text and coding tools.",
+            "icon": "fa fa-cloud-download"
+          }
+        },
+        {
+          "type": "feature",
+          "settings": {
+            "title": "Craft your content",
+            "description": "Create custom content and freely mark what parts of pages are editable for your clients.",
+            "icon": "fa fa-paint-brush"
+          }
+        },
+        {
+          "type": "feature",
+          "settings": {
+            "title": "Deploy website",
+            "description": "With a single command, the back-office editor will be automatically generated for your client.",
+            "icon": "fa fa-diamond"
+          }
+        }
+      ]
     }
   }
 ---
@@ -74,6 +105,8 @@ sections_content: >
 
   {% section 'clients' %}
 
+  {% section 'features' %}
+
 {% endblock %}
 
   {% comment %}

diff --git a/app/views/sections/features.liquid b/app/views/sections/features.liquid
@@ -0,0 +1,113 @@
+---
+{
+  "name": "Features",
+  "class": "section-features has-top-divider",
+  "icon": "list",
+  "keep_name": true,
+  "keep_icon": true,
+  "blocks_label": "List of features",
+  "settings": [
+    {
+      "label": "Title",
+      "id": "title",
+      "type": "text"
+    }
+  ],
+  "blocks": [
+    {
+      "name": "Feature",
+      "type": "feature",
+      "settings": [
+        {
+          "label": "Title",
+          "id": "title",
+          "type": "text"
+        },
+        {
+          "label": "Description",
+          "id": "description",
+          "type": "text"
+        },
+        {
+          "label": "Icon",
+          "id": "icon",
+          "type": "select",
+          "options": [
+            {
+              "label": "Download",
+              "value": "fa fa-cloud-download"
+            },
+            {
+              "label": "Paint",
+              "value": "fa fa-paint-brush"
+            },
+            {
+              "label": "Diamond",
+              "value": "fa fa-diamond"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "dropzone_presets": [
+    {
+      "name": "Features",
+      "category": "Category 1",
+      "settings": {
+        "title": "Hello world"
+      },
+      "blocks": [
+        {
+          "type": "list_item",
+          "settings": {
+            "title": "Item #1",
+            "description": "Description #1",
+            "icon": "fa fa-diamond"
+          }
+        },
+        {
+          "type": "list_item",
+          "settings": {
+            "title": "Item #2",
+            "description": "Description #2",
+            "icon": "fa fa-diamond"
+          }
+        },
+        {
+          "type": "list_item",
+          "settings": {
+            "title": "Item #3",
+            "description": "Description #3",
+            "icon": "fa fa-diamond"
+          }
+        }
+      ]
+    }
+  ]
+}
+---
+<div class="container has-text-centered">
+  <h2 class="title is-size-2">{{ section.settings.title }}</h2>
+
+  <div class="feature-list">
+    {% for block in section.blocks %}
+      <div class="feature-item" {{ block.locomotive_attributes }}>
+        <div class="feature-item-inner">
+          <div class="feature-item-icon">
+            <i class="{{ block.settings.icon }}"></i>
+          </div>
+          <h3 class="title is-size-4">{{ block.settings.title }}</h3>
+          <div class="feature-item-description is-size-5 has-text-grey">
+            {{ block.settings.description }}
+          </div>
+          <div class="feature-item-dots">
+            {% for num in (1..forloop.index) %}
+              <span></span>
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+</div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,7 +26,7 @@ @@
           flex-direction: column;
           img {
-            margin: 1rem 0;
+            margin: 2rem 0;
           }
         }
       }
@@ Expand Down @@