Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions aio/content/marketing/docs.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@
Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop

<div class="card-container">
<a href="generated/live-examples/quickstart/eplnkr.html" target="_blank" class="card"
<a href="generated/live-examples/quickstart/eplnkr.html" target="_blank" class="docs-card"
title="Experience Angular in a live coding environment">
<section>Experience Angular</section>
<p>A quick look at an Angular application.</p>
<p class="card-footer">Angular in Action</p>
</a>

<div class="card">
<div class="docs-card">
<section>Get Going with Angular</section>
<p>Get going on your own environment with the Quickstart and Tutorial</p>
<p class="card-footer center" >
Expand All @@ -21,7 +21,7 @@ Angular is a platform that makes it easy to build applications with the web. Ang
<p class="card-footer"><a href="guide/tutorial">Tutorial</a></p>-->
</div>

<a href="guide/architecture" class="card" title="Angular Architecture">
<a href="guide/architecture" class="docs-card" title="Angular Architecture">
<section>Fundamentals</section>
<p>Learn Angular application fundamentals, starting with an architecture overview.</p>
<p class="card-footer">Architecture</p>
Expand Down
24 changes: 4 additions & 20 deletions aio/content/marketing/events.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<h1 class="no-toc">Events</h1>
<header class="marketing-banner">
<div class="banner-headline no-toc">Events</div>
</header>

<h3>Where we'll be presenting:</h3>
<article class="l-content ">
<p>Where we'll be presenting:</p>
<table class="is-full-width">
<thead>
<tr>
Expand All @@ -11,24 +13,6 @@ <h3>Where we'll be presenting:</h3>
</tr>
</thead>
<tbody>
<!-- DEVOXX - UK -->
<tr>
<th><a href="http://www.devoxx.co.uk/" title="DEVOXX - UK">DEVOXX - UK</a></th>
<td>London, United Kingdom</td>
<td>May 11, 2017</td>
</tr>
<!-- Google IO -->
<tr>
<th><a href="https://events.google.com/io" title="Google IO">Google IO</a></th>
<td>Mountain View, California</td>
<td>May 17, 2017</td>
</tr>
<!-- AngleBrackets-->
<tr>
<th><a href="https://anglebrackets.org" title="AngleBrackets">AngleBrackets</a></th>
<td>Orlando, Florida</td>
<td>May 21, 2017</td>
</tr>
<!-- ngJapan -->
<tr>
<th><a href="http://ngjapan.org/" title="ng-Japan">ng-Japan</a></th>
Expand Down
149 changes: 83 additions & 66 deletions aio/content/marketing/features.html
Original file line number Diff line number Diff line change
@@ -1,88 +1,105 @@
<h1 class="no-toc">Features &amp; Benefit</h1>

<article class="l-content ">
<div class="flex-center">
<div><h2 class="text-headline">Cross Platform</h2>
<div class="feature-row">

<div class="feature">
<h5>Progressive Web Apps</h5>
<p class="text-body">Use modern web platform capabilities to deliver app-like experiences.
High performance, offline, and zero-step installation.</p>
<div>
<div class="feature-section">
<div class="feature-header">
<div class="text-headline">Cross Platform</div>
<img src="../assets/images/icons/feature-icon.svg" height="70px">
</div>

<div class="feature">
<h5>Native</h5>
<p class="text-body">Build native mobile apps with strategies from Ionic Framework, NativeScript, and React Native.</p>
</div>

<div class="feature">
<h5>Desktop</h5>
<p class="text-body">Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you've learned for the web plus the ability to access native OS APIs.</p>
<div class="feature-row">

<div class="feature">
<h5>Progressive Web Apps</h5>
<p class="text-body">Use modern web platform capabilities to deliver app-like experiences.
High performance, offline, and zero-step installation.</p>
</div>

<div class="feature">
<h5>Native</h5>
<p class="text-body">Build native mobile apps with strategies from Ionic Framework, NativeScript, and React Native.</p>
</div>

<div class="feature">
<h5>Desktop</h5>
<p class="text-body">Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you've learned for the web plus the ability to access native OS APIs.</p>
</div>
</div>
</div>

<h2 class="text-headline">Speed and Performance</h2>
<div class="feature-row">

<div class="feature">
<h5>Code Generation</h5>
<p class="text-body">Angular turns your templates into code that's highly optimized for today's JavaScript virtual machines, giving you all the benefits of hand-written code with the productivity of a framework.</p>
<div class="feature-section">
<div class="feature-header">
<div class="text-headline">Speed and Performance</div>
<img src="../assets/images/icons/feature-icon.svg" height="70px">
</div>

<div class="feature">
<h5>Universal</h5>
<p class="text-body">Serve the first view of your application on node.js, .NET, PHP, and other servers for near-instant rendering in just HTML and CSS. Also paves the way for sites that optimize for SEO.</p>
<div class="feature-row">

<div class="feature">
<h5>Code Generation</h5>
<p class="text-body">Angular turns your templates into code that's highly optimized for today's JavaScript virtual machines, giving you all the benefits of hand-written code with the productivity of a framework.</p>
</div>

<div class="feature">
<h5>Universal</h5>
<p class="text-body">Serve the first view of your application on node.js, .NET, PHP, and other servers for near-instant rendering in just HTML and CSS. Also paves the way for sites that optimize for SEO.</p>
</div>

<div class="feature">
<h5>Code Splitting</h5>
<p class="text-body">Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.</p>
</div>
</div>

<div class="feature">
<h5>Code Splitting</h5>
<p class="text-body">Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.</p>
</div>

</div>

<h2 class="text-headline">Productivity</h2>
<div class="feature-row">

<div class="feature">
<h5>Templates</h5>
<p class="text-body">Quickly create UI views with simple and powerful template syntax.</p>
<div class="feature-section">
<div class="feature-header">
<div class="text-headline">Productivity</div>
<img src="../assets/images/icons/feature-icon.svg" height="70px">
</div>

<div class="feature">
<h5>Angular CLI</h5>
<p class="text-body">Command line tools: start building fast, add components and tests, then instantly deploy.</p>
</div>

<div class="feature">
<h5>IDEs</h5>
<p class="text-body">Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.</p>
<div class="feature-row">

<div class="feature">
<h5>Templates</h5>
<p class="text-body">Quickly create UI views with simple and powerful template syntax.</p>
</div>

<div class="feature">
<h5>Angular CLI</h5>
<p class="text-body">Command line tools: start building fast, add components and tests, then instantly deploy.</p>
</div>

<div class="feature">
<h5>IDEs</h5>
<p class="text-body">Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.</p>
</div>
</div>
</div>

<h2 class="text-headline">Full Development Story</h2>
<div class="feature-row">

<div class="feature">
<h5>Testing</h5>
<p class="text-body">With Karma for unit tests, you can know if you've broken things every time you save. And Protractor makes your scenario tests run faster and in a stable manner.</p>
<div class="feature-section">
<div class="feature-header">
<div class="text-headline">Full Development Story</div>
<img src="../assets/images/icons/feature-icon.svg" height="70px">
</div>

<div class="feature">
<h5>Animation</h5>
<p class="text-body">Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.</p>
</div>

<div class="feature">
<h5>Accessibility</h5>
<p class="text-body">Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.</p>
<div class="feature-row">

<div class="feature">
<h5>Testing</h5>
<p class="text-body">With Karma for unit tests, you can know if you've broken things every time you save. And Protractor makes your scenario tests run faster and in a stable manner.</p>
</div>

<div class="feature">
<h5>Animation</h5>
<p class="text-body">Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.</p>
</div>

<div class="feature">
<h5>Accessibility</h5>
<p class="text-body">Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.</p>
</div>
</div>

</div>
</div>
</div>

<div class="cta-bar"><a href="guide/quickstart" md-button="md-button" class="button button-large button-shield mat-raised mat-primary">Get Started</a></div>
<div class="cta-bar"><a href="guide/quickstart" md-button="md-button" class="button button-large hero-cta">Get Started</a></div>

</article>
91 changes: 64 additions & 27 deletions aio/content/marketing/index.html
Original file line number Diff line number Diff line change
@@ -1,27 +1,47 @@
<header class="background-sky l-relative">
<!--FULL HEADER BLOCK-->
<header class="l-relative">

<div class="hero background-superhero-paper is-large">
<!--BACKGROUND IMAGE-->
<div class="background-sky hero"></div>

<img src="assets/images/logos/angular/angular.svg" class="hero-logo"/>
<h1 class="text-headline no-toc">One framework.<br>Mobile &amp; desktop.</h1>
<a href="guide/quickstart" md-button="md-button" class="hero-cta mat-raised button button-large button-plain">Get Started</a>
<!--INTRO SECTION -->
<section id="intro">

<!-- LOGO -->
<div class="hero-logo">
<img src="assets/images/logos/angular/angular.svg"/>
</div>

<!-- CONTAINER -->
<div class="homepage-container">
<!-- container content starts -->

<div class="hero-headline no-toc">One framework.<br>Mobile &amp; desktop.</div>
<button class="button button-large button-plain hero-cta">
<a href="guide/quickstart">Get Started</a>
</button>
</div><!-- CONTAINER END -->
</section>

<announcement-bar class="announcement-bar">
<div class="announcement-bar-slide cleafix is-visible">
<img src="assets/images/logos/angular/angular-banner-logo-grey.png" width="64"/>
<p>Angular v4.0 is out! Smaller, faster, no biggie...</p>
<a href="http://angularjs.blogspot.com/2017/03/angular-400-now-available.html" target="_blank" class="button mat-button">Learn More</a>
</div>
</announcement-bar>

</div>
</header>

<article class="l-content ">
<article class="l-content">
<div class="home-rows">

<div class="home-rows"><!-- Group 1-->
<div layout="row" layout-xs="column" class="home-row">
<!--Announcement Bar-->
<div class="homepage-container">
<div class="announcement-bar">
<img src="assets/images/logos/angular/angular-banner-logo-grey.png" width="64"/>
<p>Angular v4.0 is out! Smaller, faster, no biggie...</p>
<button class="button">
<a href="http://angularjs.blogspot.com/2017/03/angular-400-now-available.html" target="_blank">Learn More</a><span class="material-icons">arrow_forward</span>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given that this is the home page and will likely be a landing page, there is a chance that using ligatures for the icons here will cause a flash of unwanted content. We should probably add this icon to the MdIconRegistry so that it comes preloaded.

</button>
</div>
</div>

<!-- Group 1-->
<div layout="row" layout-xs="column" class="home-row homepage-container">
<div class="promo-img-container promo-1">
<div>
<img height="222" src="assets/images/home/responsive-framework.svg" alt="responsive framework">
Expand All @@ -30,17 +50,18 @@ <h1 class="text-headline no-toc">One framework.<br>Mobile &amp; desktop.</h1>

<div class="text-container">
<div class="text-block promo-1-desc l-pad-top-2">
<h2 class="text-headline">Develop Across All Platforms</h2>
<div class="text-headline">Develop Across All Platforms</div>
<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.
</p>
</div>
</div>
</div><!-- Group 2-->

</div>
<hr>
<!-- Group 2-->
<div layout="row" layout-xs="column" class="home-row">
<div class="text-container">
<div class="text-block">
<h2 class="text-headline">Speed & Performance</h2>
<div class="text-headline">Speed & Performance</div>
<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.</p>
<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.</p>
</div>
Expand All @@ -51,27 +72,32 @@ <h2 class="text-headline">Speed & Performance</h2>
<img height="222" src="assets/images/home/speed-performance.svg" alt="speed and performance">
</div>
</div>
</div><!-- Group 3-->
</div>
<hr>

<!-- Group 3-->
<div layout="row" layout-xs="column" class="home-row">
<div class="promo-img-container promo-3">
<div><img src="assets/images/home/joyful-development.png" alt="IDE example"></div>
</div>

<div class="text-container">
<div class="text-block promo-3-desc">
<h2 class="text-headline">Incredible Tooling</h2>
<div class="text-headline">Incredible Tooling</div>
<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.
</p>
</div>
</div>
</div><!-- Group 4-->

</div>
<hr>

<!-- Group 4-->
<div layout="row" layout-xs="column" class="home-row">

<div class="text-container">
<div class="text-block l-pad-top-2">
<h2 class="text-headline">Loved by Millions</h2>
<div class="text-headline">Loved by Millions</div>
<p class="text-body">From prototype through global deployment, Angular delivers the productivity and scalable infrastructure that supports Google's largest applications.</p>
</div>
</div>
Expand All @@ -83,9 +109,20 @@ <h2 class="text-headline">Loved by Millions</h2>
</div>
</div>

<div class="cta-bar">
<a href="/guide/quickstart" md-button="md-button" class="button button-large button-shield mat-raised mat-primary">Get Started</a>
</div>
<!-- CTA CARDS -->
<div layout="row" layout-xs="column" class="home-row">

<a href="tutorial">
<div class="card">
<img src="../assets/images/icons/code-icon.svg" height="70px">
<div class="card-text-container">
<div class="text-headline">Start Tutorial</div>
<p>Start building your Angular application in TypeScript.</p>
</div>
</div>
</a>
</div>

</div> <!-- end of home rows -->

</article>
9 changes: 7 additions & 2 deletions aio/content/marketing/resources.html
Original file line number Diff line number Diff line change
@@ -1,2 +1,7 @@
<h1 class="no-toc">Explore Angular Resources</h1>
<aio-resource-list></aio-resource-list>
<header class="marketing-banner">
<div class="banner-headline no-toc">Explore Angular Resources</div>
</header>

<article>
<aio-resource-list></aio-resource-list>
</article>
Loading