From 51e86da9cbbb354454d32addd9672ba9c1ea236f Mon Sep 17 00:00:00 2001 From: Luciano Mammino Date: Mon, 11 Sep 2017 20:13:19 +0100 Subject: [PATCH] Added skew effect and better css org --- src/components/Hero/index.js | 33 +++++---- src/components/Separator/index.js | 10 +++ src/components/ValueProposition/index.js | 45 +++++++------ src/components/WhyServerless/index.js | 85 +++++++++++++----------- src/style.sass | 21 +++++- 5 files changed, 118 insertions(+), 76 deletions(-) create mode 100644 src/components/Separator/index.js diff --git a/src/components/Hero/index.js b/src/components/Hero/index.js index 02004b3..9bc768d 100644 --- a/src/components/Hero/index.js +++ b/src/components/Hero/index.js @@ -1,22 +1,29 @@ import { h } from 'preact' +import Separator from '../Separator' import bg from './images/bg.jpg' import logo from './images/logo.svg' const Hero = () => - (
-
-
-

- Serverless lab -

-

+ ( +

+ +
+
+
+

+ Serverless lab +

+

Effective Serverless, AWS Lambda and Node.js training -

-
+

+
+
+
+ - ) + ) export default Hero diff --git a/src/components/Separator/index.js b/src/components/Separator/index.js new file mode 100644 index 0000000..da49c87 --- /dev/null +++ b/src/components/Separator/index.js @@ -0,0 +1,10 @@ +import { h } from 'preact' + +const Separator = ({style, upClass, downClass}) => ( + + { upClass ? : '' } + { downClass ? : '' } + +) + +export default Separator diff --git a/src/components/ValueProposition/index.js b/src/components/ValueProposition/index.js index 17dbccb..c6e7c59 100644 --- a/src/components/ValueProposition/index.js +++ b/src/components/ValueProposition/index.js @@ -3,33 +3,36 @@ import { h } from 'preact' import planetaryIcon from '../icons/planetarysystem.svg' const ValueProposition = () => - (
-
-
-

Our offer

-
-
-
-
-

+ (
+
+
+
+

Our offer

+
+
+
+
+

Serverless Lab has designed a training curriculum to get your organisation ready to work with serverless. -

-

+

+

Serverless Lab covers all the topics needed to build enterprise ready applications taking advantage of the Serverless paradigm and the AWS cloud infrastructure.
Our practical curriculum includes the main serverless technologies like Lambda Functions, API gateway, Dynamo DB, S3, RDS, Cloudwatch and covers a variety of topics from the basic to advanced topics like networking, performance, security, troubleshooting and continuous delivery. -

-

- Talk with us +

+

+ Talk with us +

+
+
+
+

+

-
-

- -

-
- -
) + + + ) export default ValueProposition diff --git a/src/components/WhyServerless/index.js b/src/components/WhyServerless/index.js index 863b758..fadc6a0 100644 --- a/src/components/WhyServerless/index.js +++ b/src/components/WhyServerless/index.js @@ -1,61 +1,68 @@ import { h } from 'preact' +import Separator from '../Separator' import galaxyIcon from '../icons/galaxy.svg' const Hero = () => - (
-
-
-
+ ( +
+ +
+
+
+
  -
-
-
-

Why is time to jump into serverless?

+
+
+
+

Why is time to jump into serverless?

+
+
-
-
-
-
-

- -

-
-
-
-

+

+
+

+ +

+
+
+
+

The serverless paradigm let developers shift their focus from the server level to the task level, allowing organisations to move faster and with greater focus on delivering value to their customers rather than being stuck with infrastructural concerns. -

+

-

+

If you are a startup or if you are building a new product, serverless will allow you to greatly shorten the time to production and to speed up the development-release-test loop allowing you to find your product-market fit faster. -

+

-

+

If you want to migrate an existing product (or parts of it) to serverless, you will then benefit of greater agility and ability to integrate with other platforms or release new features quickly, which will give you a sensible advantage over your competitors. -

+

-

+

But that’s not all, there are several other important advantages that come with serverless architectures: -

+

-
    -
  • - Auto-scalability: serverless infrastructure is fully managed. Developers don’t need to implement code to scale and administrators don’t need to upgrade servers or add additional ones. -
    • +
      +
    • + Auto-scalability: serverless infrastructure is fully managed. Developers don’t need to implement code to scale and administrators don’t need to upgrade servers or add additional ones. +
      • -
    • - High availability & Geolocation: since the infrastructure is fully managed you don’t have to worry about maintaining uptime on an machinery level, since this is guaranteed by the provider. Plus distributing your app over different geographic locations for reduced latency is just a click away. -
      • +
    • + High availability & Geolocation: since the infrastructure is fully managed you don’t have to worry about maintaining uptime on an machinery level, since this is guaranteed by the provider. Plus distributing your app over different geographic locations for reduced latency is just a click away. +
      • -
    • - Efficiency & cost: Serverless has a ‘pay as you use’ model: you pay for the runtime of your function and the time spent executing your code, so you incur the cost of unutilized functions as seen in a cloud computing model where even ‘idle’ resources have to be paid for. -
      • -
    +
  • + Efficiency & cost: Serverless has a ‘pay as you use’ model: you pay for the runtime of your function and the time spent executing your code, so you incur the cost of unutilized functions as seen in a cloud computing model where even ‘idle’ resources have to be paid for. +
    • +
+
+
-
+
+
-
) + ) export default Hero diff --git a/src/style.sass b/src/style.sass index 123e1d0..6ec6068 100644 --- a/src/style.sass +++ b/src/style.sass @@ -19,6 +19,9 @@ $color4invert: invert($color4) $color5light: lighten($color5, 30) $color5invert: invert($color5) +$neutral: #fff +$inverted: $color3light + // Use system default fonts $family-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" @@ -29,6 +32,21 @@ $family-primary: $family-serif @import "../node_modules/bulma/bulma" +section.section.bg-neutral + background-color: $neutral + +section.section.bg-inverted + background-color: $inverted + +svg.separator + display: block + + path.inverted + fill: $inverted + + path.neutral + fill: $neutral + img.section-icon width: 100% max-width: 10em @@ -84,6 +102,3 @@ img.section-icon .main-text color: #fff - -#why-serverless - background-color: $color3light