From 077df3bdcf198a962467d73b55b8e57a411ef341 Mon Sep 17 00:00:00 2001
From: Luis Cielak <luis+dds@promptworks.com>
Date: Thu, 24 May 2018 13:56:35 -0400
Subject: [PATCH] Add sidebar navigation and placeholder text

---
 scss/atat.scss           |  2 +-
 scss/variables.scss      |  1 -
 templates/header.html.to |  2 +-
 templates/hello.html.to  | 61 ++++++++++++++++++++++++++++++++++++++--
 4 files changed, 60 insertions(+), 6 deletions(-)

diff --git a/scss/atat.scss b/scss/atat.scss
index b25f4223..65ec64a6 100644
--- a/scss/atat.scss
+++ b/scss/atat.scss
@@ -1,2 +1,2 @@
-@import 'variables.scss';
 @import '../node_modules/uswds/src/stylesheets/uswds.scss';
+@import 'variables.scss';
\ No newline at end of file
diff --git a/scss/variables.scss b/scss/variables.scss
index 8b137891..e69de29b 100644
--- a/scss/variables.scss
+++ b/scss/variables.scss
@@ -1 +0,0 @@
-
diff --git a/templates/header.html.to b/templates/header.html.to
index 56d84dc2..b9ad64bd 100644
--- a/templates/header.html.to
+++ b/templates/header.html.to
@@ -11,7 +11,7 @@
     <nav role="navigation" class="usa-nav">
       <ul class="usa-nav-primary usa-accordion">
         <li><a class="usa-nav-link" href="#"><span>Home</span></a></li>
-        <li><a class="usa-nav-link" href="#"><span>JEDI Requests</span></a></li>
+        <li><a class="usa-nav-link usa-current" href="#"><span>JEDI Requests</span></a></li>
         <li><a class="usa-nav-link" href="#"><span>Users</span></a></li>
         <li><a class="usa-nav-link" href="#"><span>Reports</span></a></li>
         <li><a class="usa-nav-link" href="#"><span>Usage Calculator</span></a></li>
diff --git a/templates/hello.html.to b/templates/hello.html.to
index bb2e3337..987b0f28 100644
--- a/templates/hello.html.to
+++ b/templates/hello.html.to
@@ -1,11 +1,66 @@
 {% extends "base.html.to" %}
 
 {% block title %}
-hello
+AT-AT
 {% end %}
 
 {% block content %}
-<h1>Hello!</h1>
-is it me you're looking for?
+
+<main class="usa-grid usa-section usa-content usa-layout-docs" id="main-content">
+
+  <h1>New JEDI Request</h1><br>
+
+  <aside class="usa-width-one-fourth usa-layout-docs-sidenav">
+    <ul class="usa-sidenav-list">
+      <li>
+        <a class="usa-current" href="#details-of-use">1. Details of Use</a>
+        <ul class="usa-sidenav-sub_list">
+          <li>
+            <a href="#application-details">Application Details</a>
+          </li>
+          <li>
+            <a href="#application-computation">Computation</a>
+          </li>
+          <li>
+            <a href="#application-storage">Storage</a>
+          </li>
+        </ul>
+      </li>
+
+      <li>
+        <a href="#">2. Organizational Info</a>
+      </li>
+      <li>
+        <a href="#">3. Funding/Contracting</a>
+      </li>
+      <li>
+        <a href="#">4. Readiness Survey</a>
+      </li>
+      <li>
+        <a href="#">5. Review &amp; Submit</a>
+      </li>      
+    </ul>
+  </aside>
+
+  <div class="usa-width-three-fourths usa-layout-docs-main_content">
+    <h2 id="details-of-use">Details of Use</h2>
+    <p class="usa-font-lead">
+      To use JEDI, we want to know more about your needs for cloud services. Please fill out the form regarding computation, storage, and usage.
+    </p>
+
+    <h3 id="application-details">Application Details</h3>
+    <p>These headings introduce, respectively, sections and subsections within your body copy. As you create these headings, follow the same guidelines that you use when writing section headings: Be succinct, descriptive, and precise.</p>
+    
+    <h3 id="application-details">Computation</h3>
+    <p>These headings introduce, respectively, sections and subsections within your body copy. As you create these headings, follow the same guidelines that you use when writing section headings: Be succinct, descriptive, and precise.</p>
+
+    <h3 id="application-storage">Storage</h3>
+    <p>The particulars of your body copy will be determined by the topic of your page. Regardless of topic, it’s a good practice to follow the inverted pyramid structure when writing copy: Begin with the information that’s most important to your users and then present information of less importance.</p>
+    <p>Keep each section and subsection focused — a good approach is to include one theme (topic) per section.</p>
+
+  </div>
+</main>
+
+
 {% end %}