added pricing on index.html

mindovermiles262 · Apr 9, 2018 · b42b36b · b42b36b
1 parent 0362816
commit b42b36b
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 1 deletion.
diff --git a/app/assets/stylesheets/static_pages.css.scss b/app/assets/stylesheets/static_pages.css.scss
@@ -0,0 +1,12 @@
+.card {
+  margin: auto;
+  padding: 15px;
+
+  .content > .fa {
+    margin-bottom: 32px;
+  }
+}
+
+.max-width-300 {
+  max-width: 300px !important;
+}
diff --git a/app/assets/stylesheets/typography.css.scss b/app/assets/stylesheets/typography.css.scss
@@ -1,3 +1,10 @@
 h2 {
   margin-bottom: 1rem !important;
+}
+
+.section-heading {
+  color: #363636;
+  font-size: 3rem;
+  font-weight: 600;
+  line-height: 1.125;
 }
diff --git a/app/views/layouts/_navbar.html.erb b/app/views/layouts/_navbar.html.erb
@@ -68,7 +68,7 @@
           <%= link_to "More Information", "#info", class: 'navbar-item' %>
         </div>
         <div class="navbar-item is-hoverable">
-          <%= link_to "Pricing", root_path, class: 'navbar-item' %>
+          <%= link_to "Pricing", '#pricing', class: 'navbar-item' %>
         </div>
       <% end %>
     </div>

diff --git a/app/views/static_pages/index.html.erb b/app/views/static_pages/index.html.erb
@@ -56,3 +56,45 @@
     </div>
   </div>
 </div>
+
+<div class="columns level" id="pricing">
+  <div class="column">
+    <div class="section-heading has-text-centered">
+      <p>Pricing to fit your business needs</p>
+    </div>
+  </div>
+</div>
+<div class="columns level">
+  <div class="column">
+    <div class="card max-width-300">
+      <div class="content has-text-centered">
+        <p class="title">Startup</p>
+        <i class="fa fa-group fa-5x" aria-hidden="true"></i>
+        <p class="pricing">For businesses of less than 20 employees.</p>
+        <p class="pricing">Includes interface customization, tech support, and a dedicated server. Plans start at $400/mo.</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="column">
+    <div class="card max-width-300">
+      <div class="content has-text-centered">
+        <p class="title">Enterprise</p>
+        <i class="fa fa-id-card fa-5x" aria-hidden="true"></i>
+        <p>For businesses with more than 20 employees.</p>
+        <p>Includes 24/7 support, dedicated technical support and dedicated hosting plans.  Inquire for rates.</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="column">
+    <div class="card max-width-300">
+      <div class="content has-text-centered">
+        <p class="title">Open Source</p>
+        <i class="fa fa-code-fork fa-5x" aria-hidden="true"></i>
+        <p>Host it yourself</p>
+        <p>Appert has always and will always be open source. Tweak, configure, and edit to your heart's content</p>
+      </div>
+    </div>
+  </div>
+</div>