Started adding real content

app/assets/stylesheets/application.css.scss

@@ -74,10 +74,6 @@ Colours
 #4c82fc - Green
 */
 
-.has-text-primary {
-    color: #4c82fc !important;
-}
-
 .has-mustard-bg {
     background-color: #4c82fc;
 }
@@ -104,10 +100,6 @@ Colours
     }
 }
 
-/*
-Typography 
-*/
-
 @import url('https://fonts.googleapis.com/css?family=Calistoga|Open+Sans&display=swap');
 
 h1,
@@ -123,14 +115,6 @@ span {
     font-weight: 400;
 }
 
-@media(max-width: 767px) {
-    p {
-        max-width: 90%;
-    margin: 0 auto;
-    }
-}
-
-
 
 /*
 Links
@@ -152,11 +136,11 @@ Links
 Wrapper
 */
 .section .container,
-.hero .hero-body,
+.hero .hero-body {
-.hero .hero-head {
     width: 1200px;
     max-width: 100%;
     margin: 0 auto;
+    text-align: center;
 }
 
 /*
@@ -187,34 +171,12 @@ Hero
         background-position: 80% 50%;
         background-repeat: no-repeat;
     }
-    .hero-body p {
-        width: 600px;
-    }
 }
 
-/*
+.call-to-action {
-Button
+  margin-top: 2em;
-*/
-.btn {
-    margin-top: 20px;
-    border-radius: 50px;
-    border: none;
-    padding: 10px 30px;
-    transition: opacity 1s ease;
-    opacity: 1;
-    cursor: pointer;
 }
 
-.btn:hover {
-    opacity: 0.8;
-}
-
-/*
-Twitter Feed
-*/
-#twitter-feed .columns {
-    margin: 0px;
-}
 @media(max-width: 1024px) {
     margin: 0px 10px;
 }

app/javascript/backend_typed.js

@@ -1,6 +1,7 @@
 const Typed = require('typed.js');
 document.addEventListener("turbolinks:load", function () {
-  new Typed('.backends-cycler', {
+  document.querySelectorAll('.backends-cycler').forEach( el => {
+    new Typed(el, {
       strings: ['Google Sheets', 'Airtable', 'Google Sheets', 'Airtable'], // smoother loops
       loop: true,
       typeSpeed: 100,
@@ -10,4 +11,5 @@ document.addEventListener("turbolinks:load", function () {
       startDelay: 800,
       onBegin: (typed) => { typed.currentElContent = typed.el.innerText; }
     });
+  });
 });

app/views/home/index.html.erb

@@ -15,57 +15,23 @@
 <%
 =end%>
 
-
-
     <!-- Wrapper -->
     <div id="wrapper" class="has-text-centered-mobile">
 
   <!-- Hero -->
   <section id="hero" class="hero is-medium">
-            <div class="hero-head">
-                <nav class="navbar">
-                    <div class="container">
-                        <div class="navbar-brand">
-                            <a class="navbar-item">
-                                <h3 class="logo has-text-primary is-size-4">Fancy App</h3>
-                            </a></div>
-
-                        <div class="navbar-menu">
-
-                            <div class="navbar-end">
-                                <a class="a-menu is-size-7 navbar-item">
-                                    home
-                                </a>
-                                <a class="a-menu is-size-7 navbar-item">
-                                    about
-                                </a>
-                                <a class="a-menu is-size-7 navbar-item">
-                                    features
-                                </a>
-                                <a class="a-menu is-size-7 navbar-item">
-                                    contact
-                                </a>
-                            </div>
-                        </div>
-                        <span class="navbar-burger burger" data-target="navbarMenuHeroA">
-                            <span></span>
-                            <span></span>
-                            <span></span>
-                        </span>
-                    </div>
-                </nav>
-            </div>
       <div class="hero-body">
           <div class="container">
               <h1 class="has-text-primary is-size-1 is-size-3-mobile">
-                        An engaging headline
+                the form backend for designers and developers
               </h1>
               <p class="">
-                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+                Link your online forms to <span class="backends-cycler">Google Sheets</span> and receive form submissions in your favorite spreadsheet tool.
+              </p>
+              <p class="call-to-action">
+                <%= link_to "Signup", signup_url, class: 'button is-rounded has-mustard-bg has-text-white a-menu' %>
+                or try our <%= link_to "Demo", demo_url %>
               </p>
-                    <button class="btn has-mustard-bg has-text-white is-size-7 a-menu">
-                        try it now
-                    </button>
           </div>
       </div>
   </section>