diff --git a/app/assets/images/airtable-icon.svg b/app/assets/images/airtable-icon.svg new file mode 100644 index 0000000..b0e43df --- /dev/null +++ b/app/assets/images/airtable-icon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/assets/images/airtable-logo.svg b/app/assets/images/airtable-logo.svg new file mode 100644 index 0000000..ddd3521 --- /dev/null +++ b/app/assets/images/airtable-logo.svg @@ -0,0 +1 @@ + diff --git a/app/assets/images/google-sheets-icon.svg b/app/assets/images/google-sheets-icon.svg new file mode 100644 index 0000000..62cfdd6 --- /dev/null +++ b/app/assets/images/google-sheets-icon.svg @@ -0,0 +1,90 @@ + + + + Sheets-icon + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index b06628f..f35bfa4 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -1,11 +1,9 @@ @import "bulma/sass/utilities/initial-variables"; -@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Lobster&family=Comfortaa:wght@400;500;600;700&display=swap'); @import url('https://use.fontawesome.com/releases/v5.12.0/css/all.css'); -$family-sans-serif: 'Roboto', -sans-serif; -$family-secondary: 'Comfortaa', -cursive; +@import url('https://fonts.googleapis.com/css2?family=Calistoga&family=Roboto:wght@100;400&display=swap'); + +$family-sans-serif: 'Roboto', sans-serif; // // https://coolors.co/06aed5-086788-f0c808-fff1d0-dd1c1a // $blue: #083d77; // $red: #dd1c1a; @@ -28,8 +26,12 @@ $light: #fff; @import "checkmark-icon"; @import './demo'; -.is-font-logo { - font-family: 'Lobster', cursive; +.is-logo { + font-family: $family-sans-serif; + color: $grey; + a, a:visited { + color: $grey; + } } .card { @@ -40,17 +42,17 @@ $light: #fff; height: 100vh; } -.content { - - &>h1 { - margin-bottom: 40px; - } -} body { min-height: 100vh; } +h1, h2, h3 { + font-family: 'Calistoga'; + margin-bottom: 10px; +} + + .button.google { background: rgb(225, 98, 89); color: white; @@ -99,20 +101,6 @@ Colours } } -@import url('https://fonts.googleapis.com/css?family=Calistoga|Open+Sans&display=swap'); - -h1, -h2, -h3 { - font-family: 'Calistoga'; - margin-bottom: 10px; -} -p, -a, -span { - font-family: 'Open Sans', sans-serif; - font-weight: 400; -} .features .columns { margin-bottom: 3em; @@ -124,6 +112,13 @@ span { .contact-form { margin-top: 3em; } + +.tag-line { + img { + height: 30px; + vertical-align: text-bottom; + } +} /* Links */ @@ -161,23 +156,11 @@ Hero top: 0; right: 0; } -@media(min-width: 1024px) { - .hero-body { - background-image: url(../img/hero.png); - background-size: 30%; - background-position: 80% 50%; - background-repeat: no-repeat; - } -} .call-to-action { margin-top: 2em; } -@media(max-width: 1024px) { - margin: 0px 10px; -} - .box { padding-top: 30px; padding-bottom: 30px; diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb index a1a66c7..1fc702e 100644 --- a/app/views/home/index.html.erb +++ b/app/views/home/index.html.erb @@ -1,17 +1,16 @@
-

- the form backend for designers and developers + The form backend for designers and developers

-

- Link your online forms to Google Sheets or Airtable and receive form submissions in your favorite spreadsheet tool. +

+ Link your online forms to <%= image_tag 'google-sheets-icon.svg' %> Google Sheets or <%= image_tag 'airtable-icon.svg' %> Airtable and receive form submissions in your favorite spreadsheet tool.

- <%= link_to "Signup", signup_url, class: 'button is-rounded is-primary has-text-white a-menu' %> + <%= link_to "Get started", signup_url, class: 'button is-rounded is-primary has-text-white a-menu' %> or try our <%= link_to "Live demo", demo_url %>

@@ -26,15 +25,13 @@
-

1.

+

1.

-
-

Create a new form

-

- tinyforms will automatically create and link a connected Google Sheets document for you. -

-
+

Create a new form

+

+ tinyforms will automatically create and link a connected Google Sheets document for you. +

@@ -44,15 +41,13 @@
-

2.

+

2.

-
-

Point your online form to our server

-

- Simply configure your form to POST to your tinyforms URL. -

-
+

Point your form to our server

+

+ Simply configure your form to POST to your tinyforms URL. +

@@ -62,15 +57,13 @@
-

3.

+

3.

-
-

Done!

-

- tinyforms will automatically append each submission to your Google Sheets or Airtable document. -

-
+

Done!

+

+ tinyforms will automatically append each submission to your Google Sheets or Airtable document. +

@@ -142,7 +135,7 @@
We take care of the storage for you.
- Files are added as secure links to your spreadsheet. + Files are added as secure links to your spreadsheet.

@@ -150,7 +143,7 @@ JavaScript/AJAX ready

- Use our JavaScript library or our API directly to submit data using JavaScript. + Use our JavaScript library or our API directly to submit data using JavaScript.

diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb index a154b74..da5d49d 100644 --- a/app/views/layouts/_header.html.erb +++ b/app/views/layouts/_header.html.erb @@ -1,9 +1,9 @@