Updating links and styles in table of content nav

diff --git a/docs/pages/index.md b/docs/pages/index.md
index 5813ddcd17caea90fef7a966785d7ce94c7ede21..542fa0ad2ae1116806598e14fcf3f80cba625a4b 100644 (file)
--- a/docs/pages/index.md
+++ b/docs/pages/index.md
@@ -1,183 +1,85 @@
 ---
-title: Foundation for Sites
+title: Welcome to Foundation 6
 description: We built Foundation for Sites to be the most advanced responsive front-end framework in the world.
 tags:
   - index
   - home
 ---
 
-## Installing
+## Installing Foundation
 
-There are a number of ways to install Foundation for Sites. If you're just getting started, we recommend installing our Node CLI, which allows you to quickly set up starter projects with any Foundation framework.
-
-It's also possible to manually install Foundation for Sites into your project through npm, Bower, Meteor, NuGet or Composer.
+There are a number of ways to install Foundation for Sites. Our installatin page will help you find the best option for you. 
 
 <a href="installation.html" class="large button">Install Foundation for Sites</a>
 
-### Looking for Foundation 5?
-We're still supporting Foundation 5 for those who don't want to take the leap into the future with us. You can view the docs, download a package or visit the Github page.
-
-<div class="button-group">
-  <a href="http://foundation.zurb.com/downloads/foundation-5.5.3.zip" class="button">Download</a>
-  <a href="http://foundation.zurb.com/sites/docs/v/5.5.3" class="button">Docs</a>
-  <a href="https://github.com/zurb/foundation-sites/tree/V5" class="button">GitHub</a>
-</div>
-
 ---
 
-## What's in the Box?
-
-Get to know the pieces of Foundation.
-
-### General
-
-<div class="row up-1 medium-up-2 large-up-3 docs-big-index">
-  <div class="column"><a href="global.html">
-    <strong>Global Styles</strong>
-    <p>Global styles applied by the Foundation framework.</p>
-  </a></div>
-  <div class="column"><a href="accessibility.html">
-    <strong>Accessibility</strong>
-    <p>An overview of Foundation's accessibility hooks.</p>
-  </a></div>
-  <div class="column"><a href="rtl.html">
-    <strong>Right-to-Left Support</strong>
-    <p>Getting Foundation working with RTL languages.</p>
-  </a></div>
-  <div class="column"><a href="sass.html">
-    <strong>Sass</strong>
-    <p>Installing and using the Sass version of Foundation.</p>
-  </a></div>
-  <div class="column"><a href="javascript.html">
-    <strong>JavaScript</strong>
-    <p>Initializing and using Foundation's JavaScript plugins.</p>
-  </a></div>
-  <div class="column"><a href="media-queries.html">
-    <strong>Media Queries</strong>
-    <p>Working with Foundation's breakpoints.</p>
-  </a></div>
-  <div class="column"><a href="flexbox.html">
-    <strong>Flexbox Mode</strong>
-    <p>Supercharge your CSS with flexbox.</p>
-  </a></div>
-  <div class="column"><a href="compatibility.html">
-    <strong>Compatibility</strong>
-    <p>What browsers does Foundation work with?</p>
-  </a></div>
-  <div class="column"><a href="kitchen-sink.html">
-    <strong>Kitchen Sink</strong>
-    <p>Every component on one page.</p>
-  </a></div>
-</div>
-
-### Components
+## New to Foundation for Sites?
+
+With an easy to understand syntax and consistent structure, you'll learn your way around Foudnation in no time!
+
+<ul class="accordion" data-accordion>
+  <li class="accordion-item is-active" data-accordion-item>
+    <a href="#" class="accordion-title">Intro Videos</a>
+    <div class="accordion-content" data-tab-content>
+      I would start in the open state, due to using the `is-active` state class.
+    </div>
+  </li>
+  <li class="accordion-item" data-accordion-item>
+    <a href="#" class="accordion-title">Beginner Lessons</a>
+    <div class="accordion-content" data-tab-content>
+      I would start in the open state, due to using the `is-active` state class.
+    </div>
+  </li>
+  <li class="accordion-item" data-accordion-item>
+    <a href="#" class="accordion-title">Simple Templates</a>
+    <div class="accordion-content" data-tab-content>
+      I would start in the open state, due to using the `is-active` state class.
+    </div>
+  </li>
+  <li class="accordion-item" data-accordion-item>
+    <a href="#" class="accordion-title">Basic Documentation</a>
+    <div class="accordion-content" data-tab-content>
+      I would start in the open state, due to using the `is-active` state class.
+    </div>
+  </li>
+</ul>
 
-<div class="row up-1 medium-up-3 docs-small-index">
-  <div class="column">
-    <section>
-      <h4>Layout</h4>
-      <ul>
-        <li><a href="grid.html">Grid</a></li>
-        <li><a href="flex-grid.html">Flex Grid</a></li>
-        <li><a href="forms.html">Forms</a></li>
-        <li><a href="visibility.html">Visibility Classes</a></li>
-        <li><a href="float-classes.html">Float Classes</a></li>
-        <li><a href="flexbox.html">Flexbox</a></li>
-      </ul>
-    </section>
-
-    <section>
-      <h4>Typography</h4>
-      <ul>
-        <li><a href="typography-base.html">Base Styles</a></li>
-        <li><a href="typography-helpers.html">Helper Classes</a></li>
-      </ul>
-    </section>
-
-    <section>
-      <h4>Controls</h4>
-      <ul>
-        <li><a href="button.html">Button</a></li>
-        <li><a href="button-group.html">Button Group</a></li>
-        <li><a href="close-button.html">Close Button</a></li>
-        <li><a href="slider.html">Slider</a></li>
-        <li><a href="switch.html">Switch</a></li>
-      </ul>
-    </section>
-
-    <section>
-      <h4>Libraries</h4>
-      <ul>
-        <li><a href="motion-ui.html">Motion UI</a></li>
-        <li><a href="panini.html">Panini</a></li>
-        <li><a href="style-sherpa.html">Style Sherpa</a></li>
-      </ul>
-    </section>
-  </div>
-  <div class="column">
-    <section>
-      <h4>Navigation</h4>
-      <ul>
-        <li><a href="navigation.html">Overview</a></li>
-        <li><a href="menu.html">Menu</a></li>
-        <li><a href="dropdown-menu.html">Dropdown Menu</a></li>
-        <li><a href="drilldown-menu.html">Drilldown Menu</a></li>
-        <li><a href="accordion-menu.html">Accordion Menu</a></li>
-        <li><a href="top-bar.html">Top Bar</a></li>
-        <li><a href="responsive-navigation.html">Responsive Navigation</a></li>
-        <li><a href="magellan.html">Magellan</a></li>
-        <li><a href="pagination.html">Pagination</a></li>
-        <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
-      </ul>
-    </section>
-
-    <section>
-      <h4>Containers</h4>
-      <ul>
-        <li><a href="accordion.html">Accordion</a></li>
-        <li><a href="callout.html">Callout</a></li>
-        <li><a href="card.html">Card</a></li>
-        <li><a href="dropdown.html">Dropdown</a></li>
-        <li><a href="media-object.html">Media Object</a></li>
-        <li><a href="off-canvas.html">Off-canvas</a></li>
-        <li><a href="reveal.html">Reveal</a></li>
-        <li><a href="table.html">Table</a></li>
-        <li><a href="tabs.html">Tabs</a></li>
-        <li><a href="responsive-accordion-tabs.html">Responsive Accordion Tabs</a></li>
-      </ul>
-    </section>
-  </div>
-  <div class="column">
-    <section>
-      <h4>Media</h4>
-      <ul>
-        <li><a href="badge.html">Badge</a></li>
-        <li><a href="responsive-embed.html">Responsive Embed</a></li>
-        <li><a href="label.html">Label</a></li>
-        <li><a href="orbit.html">Orbit</a></li>
-        <li><a href="progress-bar.html">Progress Bar</a></li>
-        <li><a href="thumbnail.html">Thumbnail</a></li>
-        <li><a href="tooltip.html">Tooltip</a></li>
-      </ul>
-    </section>
-
-    <section>
-      <h4>Plugins</h4>
-      <ul>
-        <li><a href="abide.html">Abide</a></li>
-        <li><a href="equalizer.html">Equalizer</a></li>
-        <li><a href="interchange.html">Interchange</a></li>
-        <li><a href="toggler.html">Toggler</a></li>
-        <li><a href="sticky.html">Sticky</a></li>
-      </ul>
-    </section>
+---
 
-    <section>
-      <h4>Sass</h4>
-      <ul>
-        <li><a href="sass-mixins.html">Mixins</a></li>
-        <li><a href="sass-functions.html">Functions</a></li>
-      </ul>
-    </section>
-  </div>
-</div>
+## Experienced with Foundation for Sites?
+
+With an easy to understand syntax and consistent structure, you'll learn your way around Foudnation in no time!
+
+<ul class="accordion" data-accordion>
+  <li class="accordion-item is-active" data-accordion-item>
+    <a href="#" class="accordion-title">Latest updates in Foundation 6.3.0</a>
+    <div class="accordion-content" data-tab-content>
+      I would start in the open state, due to using the `is-active` state class.
+    </div>
+  </li>
+  <li class="accordion-item" data-accordion-item>
+    <a href="#" class="accordion-title">New Ecommerce Templates</a>
+    <div class="accordion-content" data-tab-content>
+      I would start in the open state, due to using the `is-active` state class.
+    </div>
+  </li>
+  <li class="accordion-item" data-accordion-item>
+    <a href="#" class="accordion-title">WordPress Themes</a>
+    <div class="accordion-content" data-tab-content>
+      I would start in the open state, due to using the `is-active` state class.
+    </div>
+  </li>
+  <li class="accordion-item" data-accordion-item>
+    <a href="#" class="accordion-title">New Videos</a>
+    <div class="accordion-content" data-tab-content>
+      I would start in the open state, due to using the `is-active` state class.
+    </div>
+  </li>
+  <li class="accordion-item" data-accordion-item>
+    <a href="#" class="accordion-title">Advanced Lessons</a>
+    <div class="accordion-content" data-tab-content>
+      I would start in the open state, due to using the `is-active` state class.
+    </div>
+  </li>
+</ul>
\ No newline at end of file