Added some new design to Landing Page (#3178)

* Update Landing.vue

* Update Landing.vue

docs/src/pages/Landing.vue

@@ -21,11 +21,13 @@
                 q-btn(push, color="white", text-color="primary", to="/introduction-to-quasar", label="About")
                 q-btn(push, color="white", text-color="primary", to="/start", label="Get started")
                 .text-body2.q-ml-md v{{ $q.version }}
+        .text-center(style="position:absolute; bottom: 0; width: 100%;")
+          q-icon(name="expand_more", style="opacity: .4").text-h2.text-white
 
-  section.padding.landing__front
+  section.padding.landing__front.text-center
     div
       div.q-mb-lg Quasar (pronounced /ˈkweɪ.zɑɹ/) is an MIT licensed open-source Vue.js based framework, which allows you as a web developer to quickly create responsive++ websites/apps in many flavours:
-      .q-gutter-md.row
+      .q-gutter-md.row.justify-center
         q-btn(color="primary", push, no-caps, no-wrap, icon-right="launch", label="SPA (Single Page App)", to="/quasar-cli/developing-spa/introduction")
         q-btn(color="teal", push, no-caps, no-wrap, icon-right="launch", label="PWA (Progressive Web App)", to="/quasar-cli/developing-pwa/introduction")
         q-btn(color="accent", push, no-caps, no-wrap, icon-right="launch", label="SSR (Server-side Rendered App)", to="/quasar-cli/developing-ssr/introduction")
@@ -49,7 +51,7 @@
         h4 All Platforms in One Go
         p One source code for all platforms simultaneously: responsive desktop/mobile websites (SPA or SSR), PWAs (Progressive Web Apps), mobile apps (that look native) and Desktop apps (through Electron).
 
-  section.padding.bg-primary
+  section.padding.bg-primary.bg-swirl-section
     .landing__features.row.justify-between.items-start.q-col-gutter-xl
       .col-xs-12.col-sm-5
         .feature-item
@@ -263,6 +265,12 @@ export default {
     padding-top 72px !important
     padding-bottom 72px !important
 
+.bg-swirl-section
+  background-repeat no-repeat !important
+  background-position center
+  background-size cover
+  background-image url(https://cdn.quasar-framework.org/img/landing_first_section.png) !important
+
 @keyframes logo-rotate
   100%
     transform rotate(-360deg)