diff --git a/app/assets/images/infographic-placeholder.jpg b/app/assets/images/infographic-placeholder.jpg new file mode 100644 index 0000000000..2c160790a8 Binary files /dev/null and b/app/assets/images/infographic-placeholder.jpg differ diff --git a/app/assets/images/tile-wide.png b/app/assets/images/tile-wide.png new file mode 100644 index 0000000000..bfb5c67edd Binary files /dev/null and b/app/assets/images/tile-wide.png differ diff --git a/app/assets/stylesheets/darkswarm/branding.css.sass b/app/assets/stylesheets/darkswarm/branding.css.sass index aae280a187..76614599cf 100644 --- a/app/assets/stylesheets/darkswarm/branding.css.sass +++ b/app/assets/stylesheets/darkswarm/branding.css.sass @@ -4,7 +4,7 @@ $ofn-brand: #f27052 $ofn-grey: #808184 -// +// old colors: $clr-brick: #c1122b $clr-brick-light: #f5e6e7 diff --git a/app/assets/stylesheets/darkswarm/home_panes.css.sass b/app/assets/stylesheets/darkswarm/home_panes.css.sass index 568b6ebc66..ec10429987 100644 --- a/app/assets/stylesheets/darkswarm/home_panes.css.sass +++ b/app/assets/stylesheets/darkswarm/home_panes.css.sass @@ -1,57 +1,29 @@ @import branding @import mixins +@import typography // Styling for big panes on homepage -#beta.pane +#panes + .pane + .row + @include panepadding + @include sidepaddingBg + +#brand-story.pane, #system.pane, #stats.pane + background-color: lighten($ofn-grey, 45%) + background-image: url("/assets/tile-wide.png") + +#brand-story.pane .row - @include panepadding background-image: url("/assets/home/macbook.png") background-repeat: no-repeat background-position: center bottom padding-bottom: 280px - &, & * - max-width: 610px + p + @include bodyFont + font-size: 1.5rem + font-weight: 300 -#map.pane - @include darkbg - .row - @include panepadding - background-image: url("/assets/home/maps-bg.svg") - background-repeat: no-repeat - background-position: left center -#groups.pane - @include darkbg - .row - @include panepadding - background-image: url("/assets/home/groups-bg.svg") - background-repeat: no-repeat - background-position: left center - -#producers.pane - @include turqbg - @include panepadding - background-image: url("/assets/home/producers-bg.svg") - background-repeat: no-repeat - background-position: center center - background-size: 80% 80% - - @media all and (max-width: 768px) - background-position: center top - background-size: 100% 100% - .row - .pricing-table - .title - color: $clr-turquoise-light - .price - background-color: rgba(240, 240, 240, 0.6) - .description, .bullet-item, .cta-button - background-color: rgba(255, 255, 255, 0.8) - -// Responsive -@media all and (max-width: 768px) - #map.pane, #groups.pane, #producers.pane - .row - background-position: center center \ No newline at end of file diff --git a/app/assets/stylesheets/darkswarm/hubs.css.sass b/app/assets/stylesheets/darkswarm/hubs.css.sass index 364c8ee645..da597b5ee7 100644 --- a/app/assets/stylesheets/darkswarm/hubs.css.sass +++ b/app/assets/stylesheets/darkswarm/hubs.css.sass @@ -4,3 +4,4 @@ #hubs background-color: lighten($ofn-grey, 43%) @include panepadding + @include sidepaddingSm diff --git a/app/assets/stylesheets/darkswarm/mixins.sass b/app/assets/stylesheets/darkswarm/mixins.sass index 3a69d804fb..71632026f2 100644 --- a/app/assets/stylesheets/darkswarm/mixins.sass +++ b/app/assets/stylesheets/darkswarm/mixins.sass @@ -8,6 +8,32 @@ @mixin panepadding padding-top: 100px padding-bottom: 100px + +@mixin sidepaddingSm + padding-left: 10px + padding-right: 10px + @media all and (min-width: 768px) + padding-left: 20px + padding-right: 20px + @media all and (min-width: 1024px) + padding-left: 50px + padding-right: 50px + @media all and (min-width: 1200px) + padding-left: 100px + padding-right: 100px + +@mixin sidepaddingBg + padding-left: 20px + padding-right: 20px + @media all and (min-width: 768px) + padding-left: 40px + padding-right: 40px + @media all and (min-width: 1024px) + padding-left: 100px + padding-right: 100px + @media all and (min-width: 1200px) + padding-left: 200px + padding-right: 200px @mixin disabled color: $disabled-bright diff --git a/app/views/home/_brandstory.html.haml b/app/views/home/_brandstory.html.haml index 3b2418d424..99a0fe4371 100644 --- a/app/views/home/_brandstory.html.haml +++ b/app/views/home/_brandstory.html.haml @@ -1,6 +1,16 @@ #brand-story.pane - .row .small-12.columns.text-center - %p Sometimes in order to change a system... - %hr \ No newline at end of file + %p Sometimes the best way to fix the system is to start a new one… + %a.button.small.neutral-btn.dark{href: "/"} + Read more + %i.ofn-i_052-point-down + + .hide-show + %p We begin from the ground up. With farmers and growers ready to tell their stories proudly and truly. With distributors ready to connect people with products fairly and honestly. With buyers who believe that better weekly shopping decisions can seriously change the world. + %p Then we need a way to make it real. A way to empower everyone who grows, sells and buys food. A way to tell all the stories, to handle all the logistics. A way to turn transaction into transformation every day. + %p So we build an online marketplace that levels the playing field. It’s transparent, so it creates real relationships. It’s open source, so it‘s owned by everyone. It scales to regions and nations, so people start versions across the world. + %p It works everywhere. It changes everything. + %p + %strong We call it Open Food Network. + %p We all love food. Now we can love our food system too. \ No newline at end of file diff --git a/app/views/home/_cta1.html.haml b/app/views/home/_cta1.html.haml index 2cb260be28..2bc92e58e2 100644 --- a/app/views/home/_cta1.html.haml +++ b/app/views/home/_cta1.html.haml @@ -1,8 +1,8 @@ #cta.pane .row .small-12.columns.text-center - %h2 Ready to change the world? - %a.neutral-btn.turquoise{href: "/producers"} - %i.ofn-i_036-producers - Shop now - %hr \ No newline at end of file + %h3 Ready to change the world? + %br + %a.button.primary{href: "/shops"} + %i.ofn-i_029-shopping-basket + Shop now \ No newline at end of file diff --git a/app/views/home/_cta2.html.haml b/app/views/home/_cta2.html.haml index adf4c6465a..3b5561dba0 100644 --- a/app/views/home/_cta2.html.haml +++ b/app/views/home/_cta2.html.haml @@ -1,8 +1,8 @@ #cta.pane .row .small-12.columns.text-center - %h2 It's fun and super easy - %a.neutral-btn.turquoise{href: "/producers"} - %i.ofn-i_036-producers - Shop now - %hr \ No newline at end of file + %h3 It's fun and super easy + %br + %a.button.primary{href: "/shops"} + %i.ofn-i_029-shopping-basket + Shop now \ No newline at end of file diff --git a/app/views/home/_stats.html.haml b/app/views/home/_stats.html.haml new file mode 100644 index 0000000000..bd2513d870 --- /dev/null +++ b/app/views/home/_stats.html.haml @@ -0,0 +1,30 @@ +#stats.pane + .row + .small-12.columns.text-center + %h3 Who's using it now? + %p A bit more blurb about what's happening with Open Food Network Australia. Maybe also a bit of text about what you (end user) can do here, and how. + %br + %h5 + %strong 4 + Australian states represented + %hr + %h5 + %strong 126 + shops on OFN Australia + %hr + %h5 + %strong 345 + farmers & producers + %hr + %h5 + %strong 6,305 + food order cycles + %hr + %h5 + %strong 2,201 + happy OFN consumers + %hr + %h5 + who have placed a total of + %strong 3,902 + orders to-date \ No newline at end of file diff --git a/app/views/home/_system.html.haml b/app/views/home/_system.html.haml index 8b257b3f7e..394d6955c3 100644 --- a/app/views/home/_system.html.haml +++ b/app/views/home/_system.html.haml @@ -1,7 +1,5 @@ -#brand-story.pane - +#system.pane .row .small-12.columns.text-center %h2 How does it work? - %p sexy graphics go here - %hr \ No newline at end of file + %img{src: "/assets/infographic-placeholder.jpg"} \ No newline at end of file diff --git a/app/views/home/index.html.haml b/app/views/home/index.html.haml index 99f39b5fd3..a0584b14d0 100644 --- a/app/views/home/index.html.haml +++ b/app/views/home/index.html.haml @@ -11,12 +11,11 @@ .ng-cloak -= render partial: "home/brandstory" - -= render partial: "home/cta1" - -= render partial: "home/system" - -= render partial: "home/cta2" +#panes + = render partial: "home/brandstory" + = render partial: "home/cta1" + = render partial: "home/system" + = render partial: "home/cta2" + = render partial: "home/stats" = render partial: "shared/footer" diff --git a/app/views/layouts/darkswarm.html.haml b/app/views/layouts/darkswarm.html.haml index 505ba93a49..fdb25371b0 100644 --- a/app/views/layouts/darkswarm.html.haml +++ b/app/views/layouts/darkswarm.html.haml @@ -8,7 +8,7 @@ = favicon_link_tag - else = favicon_link_tag "/favicon-staging.ico" - %link{href: "http://fonts.googleapis.com/css?family=Roboto:400,300italic,400italic,300,700,700italic|Oswald", rel: "stylesheet", type: "text/css"} + %link{href: "http://fonts.googleapis.com/css?family=Roboto:400,300italic,400italic,300,700,700italic|Oswald:300,400,700", rel: "stylesheet", type: "text/css"} = yield :scripts %script{src: "//maps.googleapis.com/maps/api/js?libraries=places&sensor=false"} diff --git a/app/views/layouts/registration.html.haml b/app/views/layouts/registration.html.haml index a3cf979c8a..c917f01965 100644 --- a/app/views/layouts/registration.html.haml +++ b/app/views/layouts/registration.html.haml @@ -8,7 +8,7 @@ = favicon_link_tag - else = favicon_link_tag "/favicon-staging.ico" - %link{href: "http://fonts.googleapis.com/css?family=Roboto:400,300italic,400italic,300,700,700italic|Oswald", rel: "stylesheet", type: "text/css"} + %link{href: "http://fonts.googleapis.com/css?family=Roboto:400,300italic,400italic,300,700,700italic|Oswald:300,400,700", rel: "stylesheet", type: "text/css"} = yield :scripts %script{src: "//maps.googleapis.com/maps/api/js?libraries=places&sensor=false"} diff --git a/app/views/shops/index.html.haml b/app/views/shops/index.html.haml index c48c82d639..02f1ea46ec 100644 --- a/app/views/shops/index.html.haml +++ b/app/views/shops/index.html.haml @@ -1 +1,2 @@ -= render partial: "home/hubs" \ No newline at end of file += render partial: "home/hubs" += render partial: "shared/footer"