diff --git a/public/_includes/_hero-home.jade b/public/_includes/_hero-home.jade index 1041253c39..92d7932d64 100644 --- a/public/_includes/_hero-home.jade +++ b/public/_includes/_hero-home.jade @@ -5,7 +5,8 @@ header(class="background-sky") .hero-cta a(href="/docs/ts/latest/quickstart.html" class="md-raised button button-large button-plain" md-button) Get Started -.banner.is-centered +.banner.banner-floaty .banner-ng-annoucement - h4 Watch the ng-conf Live Stream May 4th-6th.  + div(class="banner-text") Watch the ng-conf Live Stream May 4th-6th.  + div(class="banner-button") a(href="https://www.ng-conf.org/#/extended" target="_blank") View Live Stream \ No newline at end of file diff --git a/public/index.jade b/public/index.jade index fa9bb30168..4632367cf3 100644 --- a/public/index.jade +++ b/public/index.jade @@ -1,73 +1,53 @@ include _includes/_util-fns -div(layout-gt-sm='row' style='margin: 0 -24px') - div(flex=33 style='padding:0 24px') - h3.text-headline Fast - p.text-body Angular computes updates based on changes to data, not DOM, for fast updates that scale to the largest data sets with minimal memory overhead. - div(flex=33 style='padding:0 24px') - h3.text-headline Mobile - p.text-body With Angular Universal for server-side rendering and Web Workers for smooth scrolling and transitions, Angular 2 solves the core challenges in mobile web performance. - div(flex=33 style='padding:0 24px') - h3.text-headline Flexible - p.text-body Supports several languages including plain JavaScript, TypeScript, and Dart. Also supports both object-style data structure with POJO data-binding and functional reactive style with unidirectional data flow and support for observables and immutable data structures. -br -div - h3.text-headline The Basics - p.text-body In Angular you display data by defining components. Data in your component classes is automatically available to display in your templates or control how they render as in the example below. - p.text-body While this example uses TypeScript, Angular works equally well with ES5, ES6 and Dart as well. - p(style='text-align:right') - md-button.md-primary(href='/resources/live-examples/homepage-hello-world/ts/plnkr.html' target='_blank') - span.icon-open-in-new - | Try in Plunker - +makeTabs(` - ../docs/_fragments/homepage-hello-world/ts/app/hello_world.html, - ../docs/_fragments/homepage-hello-world/ts/app/hello_world.ts, - ../docs/_fragments/homepage-hello-world/ts/app/main.ts, - ../docs/_fragments/homepage-hello-world/ts/index.1.html`, - null, - `app/hello_world.html, - app/hello_world.ts, - app/main.ts, - index.html`) -br -div - h3.text-headline Structuring Apps With Components - p.text-body Groups of coordinated components divide the responsibilities of our application. This ToDo list app has a separate component for the form, the list, and the core app logic. Where the previous example component referenced templates in separate files, this one shows using inline templates. - p.text-body Defining types as we do here in Todo.ts communicates our intention to other developers, helps us find bugs in our code, and lets IDEs do more work for us in refactoring, code navigation, and code completion. - p(style='text-align:right') - md-button.md-primary(href='/resources/live-examples/homepage-todo/ts/plnkr.html' target='_blank') - span.icon-open-in-new - | Try in Plunker - +makeTabs(` - ../docs/_fragments/homepage-todo/ts/app/todo_app.ts, - ../docs/_fragments/homepage-todo/ts/app/todo_form.ts, - ../docs/_fragments/homepage-todo/ts/app/todo_list.ts, - ../docs/_fragments/homepage-todo/ts/app/todo.ts, - ../docs/_fragments/homepage-todo/ts/app/main.ts, - ../docs/_fragments/homepage-todo/ts/index.1.html`, - null, - `app/todo_app.ts, - app/todo_form.ts, - app/todo_list.ts, - app/todo.ts, - app/main.ts, - index.html`) -br -div - h3.text-headline Advanced Component Communication - p.text-body This demo shows an efficient implementation of tabs/panes. Each pane is only instantiated while it is visible. Panes which are not visible are released and do not have associated memory, DOM and change detection cost. - p.text-body The demo also showcases dependency injection and the ability of one component to query for other components. Such queries automatically update even as detail panes are added. This allows the tabs component to work with ngFor without any special knowledge of it. - p(style='text-align:right') - md-button.md-primary(href='/resources/live-examples/homepage-tabs/ts/plnkr.html' target='_blank') - span.icon-open-in-new - | Try in Plunker - +makeTabs(` - ../docs/_fragments/homepage-tabs/ts/app/di_demo.ts, - ../docs/_fragments/homepage-tabs/ts/app/ui_tabs.ts, - ../docs/_fragments/homepage-tabs/ts/app/main.ts, - ../docs/_fragments/homepage-tabs/ts/index.1.html`, - null, - `app/di_demo.ts, - app/ui_tabs.ts, - app/main.ts, - index.html`) +div(class="home-rows") + // Group 1 + div(layout="row" layout-xs="column" class="home-row") + div(class="promo-img-container promo-1") + div + img(src="resources/images/home/responsive-framework.svg") + div(class="text-container") + div(class="text-block promo-1-desc l-pad-top-2") + h3(class="text-headline") Develop Across All Platforms + p(class="text-body"). + Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile and native desktop. + + // Group 2 + div(layout="row" layout-xs="column" class="home-row") + div(class="text-container") + div(class="text-block") + h3(class="text-headline") Speed & Performance + p(class="text-body"). + Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering. + br + p(class="text-body"). + Angular puts you in control over scalability. Meet huge data requirements by building data models on RxJS, Immutable.js or another push-model. + div(class="promo-img-container promo-2") + div + img(src="resources/images/home/speed-performance.svg") + + // Group 3 + div(layout="row" layout-xs="column" class="home-row") + div(class="promo-img-container promo-3") + div + img(src="resources/images/home/joyful-development.png") + div(class="text-container") + div(class="text-block promo-3-desc") + h3(class="text-headline") Incredible Tooling + p(class="text-body"). + Build features quickly with simple, declarative templates. Extend the template language with your own components and use a wide array of existing components. Get immediate Angular-specific help and feedback with nearly every IDE and editor. All this comes together so you can focus on building amazing apps rather than trying to make the code work. + + // Group 4 + div(layout="row" layout-xs="column" class="home-row") + div(class="text-container") + div(class="text-block l-pad-top-2") + h3(class="text-headline") Loved by Millions + p(class="text-body"). + Supports you from your first scrappy launch all the way through global deployment -- Angular brings you the scaling infrastructure and techniques that support Google's largest applications. + div(class="promo-img-container promo-4") + div + img(src="resources/images/home/loved-by-millions.png") + + .cta-bar + a(href="/docs/ts/latest/quickstart.html" class="button button-large button-shield md-raised " + "md-primary" md-button) Get Started + diff --git a/public/resources/css/layout/_layout.scss b/public/resources/css/layout/_layout.scss index 186302c06f..142259417b 100644 --- a/public/resources/css/layout/_layout.scss +++ b/public/resources/css/layout/_layout.scss @@ -270,4 +270,4 @@ button.verbose.on {display: none} font-size: $unit * 2; margin-bottom: $unit; margin-top: $unit * 4; -} +} \ No newline at end of file diff --git a/public/resources/css/main.scss b/public/resources/css/main.scss index 500a8808b4..942c41cfdb 100644 --- a/public/resources/css/main.scss +++ b/public/resources/css/main.scss @@ -51,7 +51,7 @@ @import 'module/style-guide'; @import 'module/_press-kit'; @import 'module/resources'; - +@import 'module/home-promos'; /* * PRINT STYLES diff --git a/public/resources/css/module/_banner.scss b/public/resources/css/module/_banner.scss index 22f5698cd0..610f084a23 100644 --- a/public/resources/css/module/_banner.scss +++ b/public/resources/css/module/_banner.scss @@ -4,6 +4,80 @@ * Addtional announcements that generally follow a hero */ +.banner-floaty { + width: 920px; + height: 112px; + background-color: rgba(255, 255, 255, 1) !important; + -moz-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.5); + -webkit-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.5); + box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.5); + position: absolute; + margin-top: -50px; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; + z-index: 1; + display: table; + padding: 0 !important; + + @media handheld and (max-width: $phone-breakpoint), + screen and (max-device-width: $phone-breakpoint), + screen and (max-width: $tablet-breakpoint) { + padding: 0; + } + + @media(max-width: 959px) { + width: 100%; + height: 56px; + padding: 16px 0 !important; + } + + .banner-ng-annoucement { + display: flex; + justify-content: space-around; + align-content: space-around; + align-items: center; + height: 100%; + + @media(max-width: 959px) { + flex-direction: column; + justify-content: space-between; + align-content: space-between; + + .banner-text { + padding: 16px 0; + margin: 0 16px; + } + } + + .banner-text { + font-size: 16px; + color: #607D8B; + } + + .banner-button { + a { + color: #607D8B; + background-color: #ECEFF1; + padding: 0; + line-height: 36px; + padding-left: 20px; + padding-right: 20px; + } + } + + @media handheld and (max-width: $phone-breakpoint), + screen and (max-device-width: $phone-breakpoint), + screen and (max-width: $tablet-breakpoint) { + background: none; + padding-left: 0px; + margin: 0px 0px $unit 0px; + text-align: center; + } + } +} + .banner { background: $mist; padding: ($unit * 2) ($unit * 6); @@ -25,7 +99,6 @@ screen and (max-width: $tablet-breakpoint) { display: block; } - padding: 0; } .ng-conf-logo { @@ -38,20 +111,6 @@ padding: $unit 0 $unit 108px; } - .banner-ng-annoucement { - display: inline-block; - text-align: left; - - @media handheld and (max-width: $phone-breakpoint), - screen and (max-device-width: $phone-breakpoint), - screen and (max-width: $tablet-breakpoint) { - background: none; - padding-left: 0px; - margin: 0px 0px $unit 0px; - text-align: center; - } - } - h3 { opacity: .87; line-height: 34px; diff --git a/public/resources/css/module/_footer.scss b/public/resources/css/module/_footer.scss index 88e4a6329a..d0376f476c 100644 --- a/public/resources/css/module/_footer.scss +++ b/public/resources/css/module/_footer.scss @@ -39,6 +39,8 @@ } h3 { + font-size: 20px; + @media handheld and (max-width: $phone-breakpoint), screen and (max-device-width: $phone-breakpoint), screen and (max-width: $tablet-breakpoint) { diff --git a/public/resources/css/module/_hero.scss b/public/resources/css/module/_hero.scss index 734378dcf4..568b84945d 100644 --- a/public/resources/css/module/_hero.scss +++ b/public/resources/css/module/_hero.scss @@ -5,6 +5,13 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7); padding: $hero-padding; height: $unit * 10; + .hero-cta { + a { + padding-left: 48px; + padding-right: 48px; + } + } + .hero-title-with-badges { margin-bottom: $unit; } diff --git a/public/resources/css/module/_home-promos.scss b/public/resources/css/module/_home-promos.scss new file mode 100644 index 0000000000..606773f48f --- /dev/null +++ b/public/resources/css/module/_home-promos.scss @@ -0,0 +1,81 @@ +// TODO: (ericjim) is the best place to put this? +.home-rows { + margin-top: 112px; +} + +.home-row { + max-width: 920px; + margin: 0 0 60px 0; + margin-left: auto; + margin-right: auto; + + h3.text-headline { + font-size: 28px; + margin-top: 10px; + color: #37474F; + } + + .promo-image-container, .text-container { + max-width: 50%; + } + + // NOTE (ericjim): remove if graphic changes. + .promo-3 { + margin-top: 15px; + + @media(max-width: 599px) { + margin-top: 0; + } + } + + // -- Utility margins for promos + .promo-1-desc, .promo-3-desc { + padding-left: 5px; + } + + // -- Reset margins for the utility margins + @media(max-width: 599px) { + .promo-1, .promo-2, .promo-3, .promo-4 { + margin: 0; + } + } + + .text-block { + padding-right: 15%; + + @media(max-width: 599px) { + padding: 0; + } + } + + @media(max-width: 599px) { + .promo-image-container, .text-container { + max-width: 100%; + } + + &:nth-child(even) { + flex-direction: column-reverse; + } + } + + .promo-img-container { + + @media (max-width: 375px) { + text-align: initial; + } + + p { + margin: 0 20px; + } + + img { + max-width: 90%; + + + @media (max-width: 599px) { + max-width: 100%; + float: initial !important; + } + } + } +} diff --git a/public/resources/images/home/joyful-development.gif b/public/resources/images/home/joyful-development.gif new file mode 100644 index 0000000000..95f1acad3d Binary files /dev/null and b/public/resources/images/home/joyful-development.gif differ diff --git a/public/resources/images/home/joyful-development.jpg b/public/resources/images/home/joyful-development.jpg new file mode 100644 index 0000000000..97a6b87068 Binary files /dev/null and b/public/resources/images/home/joyful-development.jpg differ diff --git a/public/resources/images/home/joyful-development.png b/public/resources/images/home/joyful-development.png new file mode 100644 index 0000000000..f9aff10f46 Binary files /dev/null and b/public/resources/images/home/joyful-development.png differ diff --git a/public/resources/images/home/joyful-development.svg b/public/resources/images/home/joyful-development.svg new file mode 100644 index 0000000000..dbdb5d8da2 --- /dev/null +++ b/public/resources/images/home/joyful-development.svg @@ -0,0 +1,56 @@ + + + + Joyful Development Copy 2 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/resources/images/home/loved-by-millions.png b/public/resources/images/home/loved-by-millions.png new file mode 100644 index 0000000000..41c6ac1906 Binary files /dev/null and b/public/resources/images/home/loved-by-millions.png differ diff --git a/public/resources/images/home/loved-by-millions.svg b/public/resources/images/home/loved-by-millions.svg new file mode 100644 index 0000000000..30821a037a --- /dev/null +++ b/public/resources/images/home/loved-by-millions.svg @@ -0,0 +1,521 @@ + + + + Loved by Millions Copy + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/resources/images/home/responsive-framework.png b/public/resources/images/home/responsive-framework.png new file mode 100644 index 0000000000..ee41a27e7e Binary files /dev/null and b/public/resources/images/home/responsive-framework.png differ diff --git a/public/resources/images/home/responsive-framework.svg b/public/resources/images/home/responsive-framework.svg new file mode 100644 index 0000000000..0ff2b594fa --- /dev/null +++ b/public/resources/images/home/responsive-framework.svg @@ -0,0 +1,169 @@ + + + + Responsive Framework + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/resources/images/home/speed-performance.svg b/public/resources/images/home/speed-performance.svg new file mode 100644 index 0000000000..0331dbdec2 --- /dev/null +++ b/public/resources/images/home/speed-performance.svg @@ -0,0 +1,279 @@ + + + + Speed & Performance + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file