Landing page improvements and general fixes

app/components/addon-tabs.js

@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  currentTab: 0,
+  tagName: '',
+});

app/helpers/eq.js

@@ -0,0 +1,7 @@
+import { helper } from '@ember/component/helper';
+
+export function eq(params) {
+  return params[0] === params[1];
+}
+
+export default helper(eq);

app/router.js

@@ -31,6 +31,7 @@ Router.map(function() {
   });
   this.route('security');
   this.route('sponsors');
+  this.route('team-redirect', { path: 'team' });
   this.route('team', { path: 'teams' });
 
   this.route('mascots', function() {

app/routes/team-redirect.js

@@ -0,0 +1,7 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+  redirect() {
+    this.transitionTo('team');
+  }
+});

app/styles/app.css

@@ -1,4 +1,6 @@
+@import "components/addon-tabs.css";
 @import "components/brand-logos.css";
+@import "components/ecosystem-icons.css";
 @import "components/faqs.css";
 @import "components/homepage-image-grid.css";
 @import "components/release-timeline.css";

app/styles/components/addon-tabs.css

@@ -0,0 +1,58 @@
+.addon-tabs {
+  width: 460px;
+
+  background: rgb(52,55,62);
+  background: linear-gradient(0deg, rgba(52,55,62,1) 0%, rgba(66,69,77,1) 100%);
+  border-radius: 15px;
+  box-shadow: 0px 5px 15px -10px rgba(0,0,0,0.75);
+}
+
+@media (max-width: 1007px) {
+  .addon-tabs {
+    width: 100%;
+  }
+}
+
+.addon-tabs--header {
+  text-align: left;
+  display: flex;
+}
+
+.addon-tabs--tab {
+  background: none;
+  margin: 0;
+  padding: 0 10px;
+  height: 50px;
+  border-width: 1px;
+  border-color: #54565E;
+  margin-left: -1px;
+  color: var(--color-gray-300);
+  text-align: left;
+}
+
+.addon-tabs--tab.active-tab {
+  background-color: var(--color-button-bg);
+  color: var(--color-button-text);
+}
+
+.addon-tabs--tab:first-child {
+  border-top-left-radius: 15px;
+  margin-left: 0;
+}
+.addon-tabs--tab:last-child {
+  border-top-right-radius: 15px;
+  flex-grow: 1;
+}
+.addon-tabs--content {
+  text-align: left;
+  padding: 30px;
+  display: none;
+}
+.addon-tabs--content.active-tab {
+  display: block;
+}
+.addon-tabs--code {
+  font-style: var(--font-family-mono);
+  font-size: .8em;
+  color: var(--color-gray-400)
+}

app/styles/components/ecosystem-icons.css

@@ -0,0 +1,38 @@
+.ecosystem-icons {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 30px;
+  width: 190px;
+  margin: auto;
+}
+
+@media (max-width: 1007px) {
+  .ecosystem-icons {
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    width: inherit;
+  }
+
+  .ecosystem-icon {
+    margin: auto;
+  }
+}
+
+.ecosystem-icon {
+  position: relative;
+  width: 130px;
+  height: 130px;
+}
+
+.ecosystem-icon .logo {
+  bottom: 20px;
+  right: 10px;
+  position: absolute;
+}
+.ecosystem-icon .logo.rotate {
+  transform: rotate(-9deg);
+}
+
+.ecosystem-icon .background {
+  position: absolute;
+  left: 0;
+}

app/templates/application.hbs

@@ -1,7 +1,7 @@
 {{head-layout}}
 {{title "Ember.js"}}
 
-<EsHeader @links={{this.links}} />
+<EsHeader @links={{this.links}} @home="/" />
 
 <main>
   {{outlet}}

app/templates/components/addon-tabs.hbs

@@ -0,0 +1,63 @@
+<div class="addon-tabs">
+  <div class="addon-tabs--header">
+    <button
+      class="addon-tabs--tab {{if (eq this.currentTab 0) "active-tab"}}"
+      onclick={{action (mut this.currentTab) 0}}
+    >
+      ember-cli-sass
+    </button>
+    <button
+      class="addon-tabs--tab {{if (eq this.currentTab 1) "active-tab"}}"
+      onclick={{action (mut this.currentTab) 1}}
+    >
+      SVG jar
+    </button>
+    <button
+      class="addon-tabs--tab {{if (eq this.currentTab 2) "active-tab"}}"
+      onclick={{action (mut this.currentTab) 2}}
+    >
+      Percy
+    </button>
+    <button
+      class="addon-tabs--tab {{if (eq this.currentTab 3) "active-tab"}}"
+      onclick={{action (mut this.currentTab) 3}}
+    >
+      ember-cli-deploy
+    </button>
+  </div>
+  {{!-- template-lint-disable block-indentation  --}}
+  <div class="addon-tabs--content {{if (eq this.currentTab 0) "active-tab"}}">
+    <p>Ember CLI Sass wires up your app with Sass, in a single command.</p>
+
+    <code class="addon-tabs--code">
+      <pre class="mt-3">&gt; ember install ember-cli-sass
+
+// app.scss
+body {
+  @extend .font-serif;
+}</pre>
+    </code>
+  </div>
+  <div class="addon-tabs--content {{if (eq this.currentTab 1) "active-tab"}}">
+    <p>TODO one</p>
+
+    <code class="addon-tabs--code">
+      <pre class="mt-3"></pre>
+    </code>
+  </div>
+  <div class="addon-tabs--content {{if (eq this.currentTab 2) "active-tab"}}">
+    <p>TODO two</p>
+
+    <code class="addon-tabs--code">
+      <pre class="mt-3"></pre>
+    </code>
+  </div>
+  <div class="addon-tabs--content {{if (eq this.currentTab 3) "active-tab"}}">
+    <p>TODO three</p>
+
+    <code class="addon-tabs--code">
+      <pre class="mt-3"></pre>
+    </code>
+  </div>
+  {{!-- template-lint-enable block-indentation  --}}
+</div>

app/templates/components/ecosystem-icon.hbs

@@ -0,0 +1,4 @@
+<div class="ecosystem-icon">
+  <svg class="background" xmlns="http://www.w3.org/2000/svg" width="133" height="130"><defs/><path fill={{@bg}} fill-rule="nonzero" d="M.91 27.535l15.047 93.176c.878 5.44 5.993 9.145 11.436 8.283l96.19-15.233c5.45-.863 9.172-5.98 8.314-11.43L117.264 9.301c-.857-5.451-5.969-9.178-11.42-8.326L9.238 16.06a10 10 0 00-8.33 11.475z"/></svg>
+  <img class="logo {{if @rotate "rotate"}}" src="/images/home/logos/{{@icon}}.svg" alt="">
+</div>

app/templates/components/ecosystem-icons.hbs

@@ -0,0 +1,8 @@
+<div class="ecosystem-icons">
+  <EcosystemIcon @icon="babel" @bg="#323330"/>
+  <EcosystemIcon @icon="js" @bg="#FAE125" @rotate={{true}} />
+  <EcosystemIcon @icon="prettier" @bg="#FFFFFF" />
+  <EcosystemIcon @icon="code" @bg="#272827" @rotate={{true}} />
+  <EcosystemIcon @icon="ts" @bg="#0075C7" @rotate={{true}} />
+  <EcosystemIcon @icon="yarn" @bg="#2C8EBB" @rotate={{true}}/>
+</div>

app/templates/editions/index.hbs

@@ -20,7 +20,7 @@
 
   <h2>Editions</h2>
   <ul class="grid lg:grid-3 unstyled-list">
-    <EsCard @image="/images/tomster-beta.png" vertical full-image card-link class="lg:col-2">
+    <EsCard @image="/images/tomsters/octane.png" vertical full-image card-link class="lg:col-2">
       <h3>
         {{link-to "Octane (March 2019)" "editions.octane"}}
       </h3>

app/templates/editions/octane.hbs

@@ -1,53 +1,118 @@
 {{title "Editions"}}
 {{title "Octane"}}
+
 <section class="container" aria-labelledby="octane-edition">
-  <h1 id="octane-edition">The Octane Edition of Ember</h1>
+  <h1>The Octane Edition of Ember</h1>
+  <p class="intro">
+    It has arrived!
+    As of version 3.15 of Ember, when you generate a new app, you get everything you need to build your app using Octane.
+    You can read more about features and upgrade strategies in the
+    <a href="https://blog.emberjs.com/2019/12/20/octane-is-here.html">the official Ember blog post</a>.
+  </p>
   <p class="mb-3">
-    The <strong>preview</strong> of Ember Octane has begun. This means that everything here is experimental and subject to change. Keep that in mind while you peruse this information!
+    Ember Octane describes a set of new features that, when taken together, represent a foundational improvement to the way you use Ember.
+    It has modern, streamlined components and state management that make it fun to build web applications.
+    With seamless interoperability for existing apps, teams can migrate at their own pace, while developers building new apps start out with the best that Ember has to offer.
   </p>
-  <ul class="unstyled-list grid lg:grid-4">
-    <EsCard class="lg:col-3" card-link>
+  <ul class="unstyled-list grid lg:grid-5">
+    <EsCard card-link>
+      <h3>
+        <a href="https://blog.emberjs.com/2019/12/20/octane-is-here.html">Read the announcement</a>
+      </h3>
+    </EsCard>
+    <EsCard card-link>
       <h3>
-        <a href="https://emberjs.github.io/rfcs/0364-roadmap-2018.html">Read The Roadmap RFC</a>
+        <a href="https://guides.emberjs.com/release/getting-started/quick-start/">Try the new app Quick Start</a>
       </h3>
     </EsCard>
-    <EsCard class="lg:col-3" card-link>
+    <EsCard card-link>
       <h3>
-        <a href="https://octane-guides-preview.emberjs.com/release/getting-started/quick-start/">Try the new app Quick Start</a>
+        <a href="https://guides.emberjs.com/release/tutorial/">Follow the Tutorial</a>
       </h3>
     </EsCard>
-    <EsCard class="lg:col-3" card-link>
+    <EsCard card-link>
       <h3>
-        <a href="https://octane-guides-preview.emberjs.com/release/upgrading/editions/">Read the Upgrade Guide</a>
+        <a href="https://guides.emberjs.com/release/">Read the Guides</a>
       </h3>
     </EsCard>
-    <EsCard class="lg:col-3" card-link>
+    <EsCard card-link>
       <h3>
-        <a href="https://guides.emberjs.com/release/reference/syntax-conversion-guide/">Read The Syntax Conversion Guide</a>
+        <a href="https://guides.emberjs.com/release/upgrading/current-edition">Learn how to upgrade</a>
       </h3>
     </EsCard>
   </ul>
 
+
   <h2>How you can help</h2>
-  <p>During this preview phase, we are asking the community to help us in any way they can. Try Octane out in your app. Report bugs back to us. Let us know where your pain points are. Read the guides and see if they make sense to you. It genuinely takes all parts of our community working together to make this a polished, complete project- and no contribution is too small!</p>
+  <p>
+    Now that Octane is available, we ask developers of all experience levels to create their own blog posts, tutorials, and videos.
+    Even if you think a topic has already been covered by someone else, it is helpful to put it in your own words.
+    For most developers, official documentation is only one piece of the learning journey.
+  </p>
+
+  <p>
+    If you notice any problems with Octane or the official learning resources, you can open an issue or pull request to the following repositories:
+  </p>
 
-  <p><strong>We will be able to declare a stable Octane edition faster with the community's help!</strong></p>
-  <p>As in all areas of Ember, there are different ways you can contribute. Visit the #st-octane channel on the Ember Discord server to get started today.</p>
-  <ul class="decorative-boxes">
-    <li><a href="https://github.com/emberjs/ember.js/issues/17234">Implement Features</a></li>
-    <li><a href="https://github.com/ember-learn/guides-source/issues/394">Write Guides</a></li>
-    <li><a href="https://github.com/ember-learn/guides-source/issues/588">Review & Edit Guides</a></li>
+  <ul>
+    <li>
+      <a href="https://github.com/ember-learn/guides-source">
+        The Guides
+      </a>
+    </li>
+    <li>
+      <a href="https://github.com/ember-learn/super-rentals-tutorial">
+        The Tutorial
+      </a>
+    </li>
+    <li>
+      <a href="https://github.com/emberjs/ember.js">
+        Ember.js source code and API docs
+      </a>
+    </li>
+    <li>
+      <a href="https://github.com/ember-learn/ember-octane-vs-classic-cheat-sheet">
+        The Octane vs Classic Cheat Sheet
+      </a>
+    </li>
   </ul>
 
   <h2>Frequently Asked Questions</h2>
   <dl class="dl-faq">
-    <dt>What Happened to Module Unification?</dt>
+    <dt>Which release of Ember is Octane?</dt>
     <dd>
-      Read the full statement about Module Unification on our blog- <a href="https://blog.emberjs.com/2019/03/11/update-on-module-unification-and-octane.html">https://blog.emberjs.com/2019/03/11/update-on-module-unification-and-octane.html</a>
+      The Octane Edition was declared for Ember 3.15.
+    </dd>
+    <dt>Do I need to refactor my whole app in order to use Octane features?</dt>
+    <dd>
+      Good news - you do not need to change your whole app to use Octane's features! All are available for you to opt into, one piece at a time. Some features are even available in earlier versions.
+    </dd>
+    <dt>If I want to upgrade my app to Octane, do I need to make all the changes by hand?</dt>
+    <dd>
+      No, codemods and CLI tools are available to help you.
+      Visit the <a href="https://guides.emberjs.com/release/upgrading/current-edition">Octane Upgrade Guide</a> to learn more about them.
+    </dd>
+    <dt>If I'm not ready to use Octane, does that mean I should keep my app on version 3.14?</dt>
+    <dd>
+      No, you should go ahead and update to version 3.15 or later.
+      Octane's big changes are all opt-in, meaning that you can enable them when you are ready, and in the meantime, you can keep updating your app as you normally would.
     </dd>
     <dt>I'm starting a new app at work. Should I use Octane?</dt>
     <dd>
-      Octane is in <em>preview</em> mode- there are bound to be rough edges, and upcoming changes. Since we don't know <i>what</i> we don't know just yet, we advise that Octane be used for experimentation only. We recommend that you continue to use stable versions of Ember for new production applications.
+      Yes! Octane is stable and well supported.
+      It is the present and future of Ember, so you are saving yourself some upgrade work down the line.
+      Be sure to budget some time for learning and experimentation.
+    </dd>
+    <dt>Where can I get help or ask questions?</dt>
+    <dd>
+      Visit <LinkTo @route="community">the community page</LinkTo> to join the forums or chat!
+      Discord has channels specifically for Octane where you can search for other people's questions too. Read the "welcome" and "setup profile" channels to learn how to get posting permissions.
+    </dd>
+    <dt>What Happened to Module Unification?</dt>
+    <dd>
+      Octane ships with "co-location," where the templates and JavaScript files for components are in the same directory.
+      This was one of the most popular aspects of Module Unification, and it's available now!
+      Read the full statement on our blog- <a href="https://blog.emberjs.com/2019/03/11/update-on-module-unification-and-octane.html">Update on Module Unification</a>
     </dd>
   </dl>
 </section>