-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added skew effect and better css org
- Loading branch information
Showing
5 changed files
with
118 additions
and
76 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 = () => | ||
| (<section id='hero' className='section is-medium is-primary is-bold' style={{backgroundImage: `url(${bg})`}}> | ||
| <div className='hero-body'> | ||
| <div className='container'> | ||
| <p className='has-text-centered'> | ||
| <img className='logo' src={logo} alt='Serverless lab' style={{ | ||
| maxWidth: '600px', | ||
| width: '100%' | ||
| }} /> | ||
| </p> | ||
| <p className='main-text has-text-centered is-size-2'> | ||
| ( | ||
| <div style={{position: 'relative'}}> | ||
| <Separator upClass='neutral' style={{position: 'absolute', 'top': 0, zIndex: 100}} /> | ||
| <section id='hero' className='section is-medium is-primary is-bold' style={{backgroundImage: `url(${bg})`}}> | ||
| <div className='hero-body'> | ||
| <div className='container'> | ||
| <p className='has-text-centered'> | ||
| <img className='logo' src={logo} alt='Serverless lab' style={{ | ||
| maxWidth: '600px', | ||
| width: '100%' | ||
| }} /> | ||
| </p> | ||
| <p className='main-text has-text-centered is-size-2'> | ||
| Effective <strong>Serverless</strong>, <strong>AWS Lambda</strong> and <strong>Node.js</strong> training | ||
| </p> | ||
| </div> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <Separator downClass='neutral' style={{position: 'absolute', 'bottom': 0, zIndex: 100}} /> | ||
| </div> | ||
| </section>) | ||
| ) | ||
|
|
||
| export default Hero |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import { h } from 'preact' | ||
|
|
||
| const Separator = ({style, upClass, downClass}) => ( | ||
| <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='100%' height='50' viewBox='0 0 100 100' preserveAspectRatio='none' className='separator' style={style}> | ||
| { upClass ? <path className={upClass} d='M0 0 L0 100 L100 0 Z' /> : '' } | ||
| { downClass ? <path className={downClass} d='M0 101 L100 100 L100 0 Z' /> : '' } | ||
| </svg> | ||
| ) | ||
|
|
||
| export default Separator |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,61 +1,68 @@ | ||
| import { h } from 'preact' | ||
| import Separator from '../Separator' | ||
| import galaxyIcon from '../icons/galaxy.svg' | ||
|
|
||
| const Hero = () => | ||
| (<section id='why-serverless' className='section why-serverless'> | ||
| <div className='container'> | ||
| <div className='columns'> | ||
| <div className='column'> | ||
| ( | ||
| <div> | ||
| <Separator downClass='inverted' /> | ||
| <section id='why-serverless' className='section why-serverless bg-inverted'> | ||
| <div className='container'> | ||
| <div className='columns'> | ||
| <div className='column'> | ||
| | ||
| </div> | ||
| <div className='column is-three-quarters'> | ||
| <div className='content'> | ||
| <h1 className='title'>Why is time to jump into serverless?</h1> | ||
| </div> | ||
| <div className='column is-three-quarters'> | ||
| <div className='content'> | ||
| <h1 className='title'>Why is time to jump into serverless?</h1> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className='columns'> | ||
| <div className='column is-hidden-mobile'> | ||
| <p className='has-text-centered'> | ||
| <img className='section-icon' src={galaxyIcon} /> | ||
| </p> | ||
| </div> | ||
| <div className='column is-three-quarters'> | ||
| <div className='content'> | ||
| <p className='is-size-4'> | ||
| <div className='columns'> | ||
| <div className='column is-hidden-mobile'> | ||
| <p className='has-text-centered'> | ||
| <img className='section-icon' src={galaxyIcon} /> | ||
| </p> | ||
| </div> | ||
| <div className='column is-three-quarters'> | ||
| <div className='content'> | ||
| <p className='is-size-4'> | ||
| 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. | ||
| </p> | ||
| </p> | ||
|
|
||
| <p className='is-size-5'> | ||
| <p className='is-size-5'> | ||
| 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 <strong>speed up the development-release-test loop</strong> allowing you to <strong>find your product-market fit faster</strong>. | ||
| </p> | ||
| </p> | ||
|
|
||
| <p className='is-size-5'> | ||
| <p className='is-size-5'> | ||
| If you want to migrate an existing product (or parts of it) to serverless, you will then benefit of <strong>greater agility</strong> and <strong>ability to integrate with other platforms or release new features quickly</strong>, which will give you a <strong>sensible advantage over your competitors</strong>. | ||
| </p> | ||
| </p> | ||
|
|
||
| <p className='is-size-5'> | ||
| <p className='is-size-5'> | ||
| But that’s not all, there are several other important advantages that come with serverless architectures: | ||
| </p> | ||
| </p> | ||
|
|
||
| <ul className='is-size-5'> | ||
| <li> | ||
| <strong>Auto-scalability</strong>: 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. | ||
| </li> | ||
| <ul className='is-size-5'> | ||
| <li> | ||
| <strong>Auto-scalability</strong>: 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. | ||
| </li> | ||
|
|
||
| <li> | ||
| <strong>High availability & Geolocation</strong>: 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. | ||
| </li> | ||
| <li> | ||
| <strong>High availability & Geolocation</strong>: 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. | ||
| </li> | ||
|
|
||
| <li> | ||
| <strong>Efficiency & cost</strong>: 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. | ||
| </li> | ||
| </ul> | ||
| <li> | ||
| <strong>Efficiency & cost</strong>: 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. | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <Separator upClass='inverted' /> | ||
| </div> | ||
| </section>) | ||
| ) | ||
|
|
||
| export default Hero |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters