From f18a0d5aa01dc4cd5dde830697b9c59fd5f67209 Mon Sep 17 00:00:00 2001
From: James Jiang <jmendre@berkeley.edu>
Date: Tue, 26 Jul 2016 13:27:37 -0700
Subject: [PATCH 1/5] landing page initial commit

---
 app/controllers/application_controller.rb |  6 +-
 app/helpers/application_helper.rb         | 11 +++
 app/views/application/landing.html.haml   | 86 +++++++++++++++++++++++
 app/views/design_methods/index.html.haml  |  2 +-
 config/routes.rb                          |  3 +-
 5 files changed, 105 insertions(+), 3 deletions(-)
 create mode 100644 app/views/application/landing.html.haml

diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index d5c16e6..5d22ebe 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -1,6 +1,6 @@
 class ApplicationController < ActionController::Base
   check_authorization :unless => :devise_controller?
-  skip_authorization_check :only => [:index, :search, :search_db, :about]
+  skip_authorization_check :only => [:landing, :index, :search, :search_db, :about]
   protect_from_forgery with: :exception
   add_flash_types :success, :warning, :danger, :info
 
@@ -41,6 +41,10 @@ def index
     render layout: "custom"
   end
 
+  def landing
+    render layout: "wide"
+  end 
+
   def search
     # temp param replacement for autocomplete
     if params[:term]
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index c0f126a..37780b2 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -265,5 +265,16 @@ def get_filters(design_methods)
 
     return filters
   end
+  
+  def resource_name
+    :user
+  end
+
+  def resource
+    @resource ||= User.new
+  end
 
+  def devise_mapping
+    @devise_mapping ||= Devise.mappings[:user]
+  end
 end
diff --git a/app/views/application/landing.html.haml b/app/views/application/landing.html.haml
new file mode 100644
index 0000000..64c78d6
--- /dev/null
+++ b/app/views/application/landing.html.haml
@@ -0,0 +1,86 @@
+:css
+  .howdoesitwork{
+    background-color: "gray";
+  }
+= render :partial => "layouts/deheader"
+- if !user_signed_in?
+  .panel.panel-default.login-margin.panel-primary
+    .panel-heading
+      %h3.panel-title Register
+    .panel-body
+      = form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f|
+        = devise_error_messages!
+        .input
+          = f.text_field :username, {:autofocus => true, :class => "form-control", :placeholder => "Username"}
+        %br/
+        .input
+          = f.text_field :first_name, {:autofocus => true, :class => "form-control", :placeholder => "First name"}
+        %br/
+        .input
+          = f.text_field :last_name, {:autofocus => true, :class => "form-control", :placeholder => "Last name"}
+        %br/
+        .input
+          = f.email_field :email, {:autofocus => true, :class => "form-control", :placeholder => "Email"}
+        %br/
+        .input
+          = f.password_field :password, { :class => "form-control", :placeholder => "Password"}
+        %br/
+        .input
+          = f.password_field :password_confirmation, { :class => "form-control", :placeholder => "Password Confirmation"}
+        %br/
+        .row
+          .col-md-12
+            .col-md-8
+              = link_to "Sign in", new_session_path(resource_name)
+            .col-md-4
+              = f.submit "Register", {:class=> "btn btn-default pull-right" }
+.howdoesitwork{:style=>"margin-top:15%;"}
+  %hr/
+  .h1{:style=>"text-align:center;margin-bottom:10%;"}
+    How Does it Work?
+  .col-md-4
+    .thumbnail{:style=>"height:300px;"}
+      .h3{:style=>"text-align:center"}
+        1
+        %br
+        JOIN
+      .p{:style=>"text-align:center"}
+        Join the community to find designers who share similar interests as you
+        and start building your professional network.
+  .col-md-4 
+    .thumbnail{:style=>"height:300px;"}
+      .h3{:style=>"text-align:center"}
+        2
+        %br
+        LEARN
+      .p{:style=>"text-align:center"}
+        Browse methods and case studies to improve your design skills. Learn what to do
+        and what to not do to successfully complete your next design task.
+  .col-md-4
+    .thumbnail{:style=>"height:300px;"}
+      .h3{:style=>"text-align:center"}
+        3
+        %br
+        SHARE
+      .p{:style=>"text-align:center"}
+        Participate in discussions where you can post questions
+        and answers regarding various design topics.
+.getstarted{:style=>"margin-top:60%;"}
+  %hr/
+  .h2{:style=>"text-align:center; font-size:4em;margin-bottom:10%;"}
+    Get Started!
+  .col-md-6
+    .thumbnail{:style=>"text-align:center; font-size:3em"}
+      %span.glyphicon.glyphicon-envelope
+      %br
+      Case Studies
+  .col-md-6
+    .thumbnail{:style=>"text-align:center; font-size:3em"}
+      %span.glyphicon.glyphicon-envelope
+      %br
+      Design Methods
+  .col-md-12
+    .thumbnail{:style=>"text-align:center; font-size:3em"}
+      %span.glyphicon.glyphicon-comment
+      %br
+      Discussions
diff --git a/app/views/design_methods/index.html.haml b/app/views/design_methods/index.html.haml
index daae61c..5d1c871 100644
--- a/app/views/design_methods/index.html.haml
+++ b/app/views/design_methods/index.html.haml
@@ -4,7 +4,7 @@
   	var eH = $('#create-btn').height()
   	$('#create-btn').css('margin-top', (pH - eH)/2)
     $('#hidden').click(function() {
-      $("#hiddenMethods").toggle();
+      $("#hiddenMethods").toggle(this.checked);
     });
   });
 :css
diff --git a/config/routes.rb b/config/routes.rb
index 50b150a..ad44934 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -9,7 +9,8 @@
   resources :characteristics 
   resources :tags
   resources :method_case_studies
-  root "application#index"
+  # root "application#index"
+  root "application#landing"
 
   resources :case_studies do
     collection do

From 64eee873ea16e363cf6d72b807b8cd7d04f3e1e3 Mon Sep 17 00:00:00 2001
From: James Jiang <jmendre@berkeley.edu>
Date: Wed, 27 Jul 2016 14:21:11 -0700
Subject: [PATCH 2/5] langing page initial design

---
 app/views/application/landing.html.haml | 30 +++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/app/views/application/landing.html.haml b/app/views/application/landing.html.haml
index 64c78d6..33c1c41 100644
--- a/app/views/application/landing.html.haml
+++ b/app/views/application/landing.html.haml
@@ -84,3 +84,33 @@
       %span.glyphicon.glyphicon-comment
       %br
       Discussions
+.thedxcommunity{:style=>"margin-top:60%;"}
+  %hr/
+  .h2{:style=>"text-align:center; font-size:2em;margin-bottom:10%;"}
+    The Design Exchange Community
+  .col-md-4
+    .thumbnail{:style=>"text-align:center; font-size:1em"}
+      - if User.find_by(id:1).profile_picture.present?
+        = image_tag(user.profile_picture, class: "img-responsive", :style => "padding: 5%")
+      - else
+        = image_tag("no-profile-available.jpg", class: "img-responsive" , :style => "padding: 5%", :size=>"150x150")
+
+      .p
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+
+
+  .col-md-4
+    .thumbnail{:style=>"text-align:center; font-size:1em"}
+      = image_tag("no-profile-available.jpg", class: "img-responsive" , :style => "padding: 5%", :size=>"150x150")
+      .p
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+
+
+  .col-md-4
+    .thumbnail{:style=>"text-align:center; font-size:1em"}
+      = image_tag("no-profile-available.jpg", class: "img-responsive" , :style => "padding: 5%", :size=>"150x150")
+      .p
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+
+
+

From eb091d055dec35bfa160358f000a56800d2de105 Mon Sep 17 00:00:00 2001
From: James Jiang <jmendre@berkeley.edu>
Date: Wed, 27 Jul 2016 14:57:02 -0700
Subject: [PATCH 3/5] added some padding

---
 app/views/application/landing.html.haml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/views/application/landing.html.haml b/app/views/application/landing.html.haml
index 33c1c41..983c72d 100644
--- a/app/views/application/landing.html.haml
+++ b/app/views/application/landing.html.haml
@@ -34,7 +34,7 @@
               = link_to "Sign in", new_session_path(resource_name)
             .col-md-4
               = f.submit "Register", {:class=> "btn btn-default pull-right" }
-.howdoesitwork{:style=>"margin-top:15%;"}
+.howdoesitwork{:style=>"margin-top:15%;padding:0 10% 0 10%"}
   %hr/
   .h1{:style=>"text-align:center;margin-bottom:10%;"}
     How Does it Work?
@@ -65,7 +65,7 @@
       .p{:style=>"text-align:center"}
         Participate in discussions where you can post questions
         and answers regarding various design topics.
-.getstarted{:style=>"margin-top:60%;"}
+.getstarted{:style=>"margin-top:60%;padding:0 10% 0 10%"}
   %hr/
   .h2{:style=>"text-align:center; font-size:4em;margin-bottom:10%;"}
     Get Started!
@@ -84,7 +84,7 @@
       %span.glyphicon.glyphicon-comment
       %br
       Discussions
-.thedxcommunity{:style=>"margin-top:60%;"}
+.thedxcommunity{:style=>"margin-top:60%;padding:0 10% 0 10%"}
   %hr/
   .h2{:style=>"text-align:center; font-size:2em;margin-bottom:10%;"}
     The Design Exchange Community

From 01821f8918a46ae6b1cbb568f2b50de8420813ec Mon Sep 17 00:00:00 2001
From: James Jiang <jmendre@berkeley.edu>
Date: Thu, 28 Jul 2016 14:29:47 -0700
Subject: [PATCH 4/5] mockup design one

---
 app/controllers/application_controller.rb     |  4 --
 .../{landing.html.haml => _landing.html.haml} | 35 ++++++++++-------
 app/views/application/index.html.haml         | 39 ++++++++++---------
 config/routes.rb                              |  3 +-
 4 files changed, 43 insertions(+), 38 deletions(-)
 rename app/views/application/{landing.html.haml => _landing.html.haml} (89%)

diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index 5d22ebe..88aa90e 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -41,10 +41,6 @@ def index
     render layout: "custom"
   end
 
-  def landing
-    render layout: "wide"
-  end 
-
   def search
     # temp param replacement for autocomplete
     if params[:term]
diff --git a/app/views/application/landing.html.haml b/app/views/application/_landing.html.haml
similarity index 89%
rename from app/views/application/landing.html.haml
rename to app/views/application/_landing.html.haml
index 983c72d..c46c612 100644
--- a/app/views/application/landing.html.haml
+++ b/app/views/application/_landing.html.haml
@@ -2,7 +2,6 @@
   .howdoesitwork{
     background-color: "gray";
   }
-= render :partial => "layouts/deheader"
 - if !user_signed_in?
   .panel.panel-default.login-margin.panel-primary
     .panel-heading
@@ -70,20 +69,23 @@
   .h2{:style=>"text-align:center; font-size:4em;margin-bottom:10%;"}
     Get Started!
   .col-md-6
-    .thumbnail{:style=>"text-align:center; font-size:3em"}
-      %span.glyphicon.glyphicon-envelope
-      %br
-      Case Studies
+    %a{:href=>'/case_studies'}
+      .thumbnail{:style=>"text-align:center; font-size:3em"}
+        %span.glyphicon.glyphicon-envelope
+        %br
+        Case Studies
   .col-md-6
-    .thumbnail{:style=>"text-align:center; font-size:3em"}
-      %span.glyphicon.glyphicon-envelope
-      %br
-      Design Methods
+    %a{:href=>'/design_methods'}
+      .thumbnail{:style=>"text-align:center; font-size:3em"}
+        %span.glyphicon.glyphicon-envelope
+        %br
+        Design Methods
   .col-md-12
-    .thumbnail{:style=>"text-align:center; font-size:3em"}
-      %span.glyphicon.glyphicon-comment
-      %br
-      Discussions
+    %a{:href=>'/discussions'}
+      .thumbnail{:style=>"text-align:center; font-size:3em"}
+        %span.glyphicon.glyphicon-comment
+        %br
+        Discussions
 .thedxcommunity{:style=>"margin-top:60%;padding:0 10% 0 10%"}
   %hr/
   .h2{:style=>"text-align:center; font-size:2em;margin-bottom:10%;"}
@@ -94,7 +96,8 @@
         = image_tag(user.profile_picture, class: "img-responsive", :style => "padding: 5%")
       - else
         = image_tag("no-profile-available.jpg", class: "img-responsive" , :style => "padding: 5%", :size=>"150x150")
-
+      .h3
+        First Last
       .p
         "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
 
@@ -102,6 +105,8 @@
   .col-md-4
     .thumbnail{:style=>"text-align:center; font-size:1em"}
       = image_tag("no-profile-available.jpg", class: "img-responsive" , :style => "padding: 5%", :size=>"150x150")
+      .h3
+        First Last
       .p
         "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
 
@@ -109,6 +114,8 @@
   .col-md-4
     .thumbnail{:style=>"text-align:center; font-size:1em"}
       = image_tag("no-profile-available.jpg", class: "img-responsive" , :style => "padding: 5%", :size=>"150x150")
+      .h3
+        First Last
       .p
         "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
 
diff --git a/app/views/application/index.html.haml b/app/views/application/index.html.haml
index 621bd6a..8ebf01c 100644
--- a/app/views/application/index.html.haml
+++ b/app/views/application/index.html.haml
@@ -1,18 +1,21 @@
-/ Methods
-.row
-  .col-md-4
-    %h3= link_to "Methods", design_methods_path
-    %p Discover new ways to approach design problems.
-  .col-md-8
-    .row
-      - @design_methods.each do |method|
-        = render "/application/thumbnail_compact", locals: @thumb_obj = thumbnail(method, "3")
-/ Case Studies
-.row
-  .col-md-4
-    %h3= link_to "Case Studies", case_studies_path
-    %p Find examples of real world design problems.
-  .col-md-8
-    .row
-      - @case_studies.each do |cs|
-        = render "/application/thumbnail_compact", locals: @thumb_obj = thumbnail(cs, "3")
+- if user_signed_in?
+  / Methods
+  .row
+    .col-md-4
+      %h3= link_to "Methods", design_methods_path
+      %p Discover new ways to approach design problems.
+    .col-md-8
+      .row
+        - @design_methods.each do |method|
+          = render "/application/thumbnail_compact", locals: @thumb_obj = thumbnail(method, "3")
+  / Case Studies
+  .row
+    .col-md-4
+      %h3= link_to "Case Studies", case_studies_path
+      %p Find examples of real world design problems.
+    .col-md-8
+      .row
+        - @case_studies.each do |cs|
+          = render "/application/thumbnail_compact", locals: @thumb_obj = thumbnail(cs, "3")
+- else
+  = render partial: "landing"
diff --git a/config/routes.rb b/config/routes.rb
index ad44934..50b150a 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -9,8 +9,7 @@
   resources :characteristics 
   resources :tags
   resources :method_case_studies
-  # root "application#index"
-  root "application#landing"
+  root "application#index"
 
   resources :case_studies do
     collection do

From 38bcebc033dc0c82f6f7490936a5f57b2aa3c3f6 Mon Sep 17 00:00:00 2001
From: James Jiang <jmendre@berkeley.edu>
Date: Mon, 1 Aug 2016 11:03:39 -0700
Subject: [PATCH 5/5] minor changes

---
 app/views/application/_landing.html.haml |  16 ++-
 app/views/application/index.html.haml    |  42 ++++----
 app/views/application/landing.html.haml  | 126 +++++++++++++++++++++++
 3 files changed, 154 insertions(+), 30 deletions(-)
 create mode 100644 app/views/application/landing.html.haml

diff --git a/app/views/application/_landing.html.haml b/app/views/application/_landing.html.haml
index c46c612..9fdf8ba 100644
--- a/app/views/application/_landing.html.haml
+++ b/app/views/application/_landing.html.haml
@@ -1,7 +1,4 @@
-:css
-  .howdoesitwork{
-    background-color: "gray";
-  }
+%meta{:content => "width=device-width, initial-scale=1", :name => "viewport"}
 - if !user_signed_in?
   .panel.panel-default.login-margin.panel-primary
     .panel-heading
@@ -29,15 +26,16 @@
         %br/
         .row
           .col-md-12
-            .col-md-8
+            .col-xs-6.col-md-8
               = link_to "Sign in", new_session_path(resource_name)
-            .col-md-4
+            .col-xs-8.col-md-4
               = f.submit "Register", {:class=> "btn btn-default pull-right" }
 .howdoesitwork{:style=>"margin-top:15%;padding:0 10% 0 10%"}
   %hr/
   .h1{:style=>"text-align:center;margin-bottom:10%;"}
     How Does it Work?
-  .col-md-4
+  .col-xs6.col-md-4
+
     .thumbnail{:style=>"height:300px;"}
       .h3{:style=>"text-align:center"}
         1
@@ -46,7 +44,7 @@
       .p{:style=>"text-align:center"}
         Join the community to find designers who share similar interests as you
         and start building your professional network.
-  .col-md-4 
+  .col-xs12.col-md-4
     .thumbnail{:style=>"height:300px;"}
       .h3{:style=>"text-align:center"}
         2
@@ -55,7 +53,7 @@
       .p{:style=>"text-align:center"}
         Browse methods and case studies to improve your design skills. Learn what to do
         and what to not do to successfully complete your next design task.
-  .col-md-4
+  .col-xs12.col-md-4
     .thumbnail{:style=>"height:300px;"}
       .h3{:style=>"text-align:center"}
         3
diff --git a/app/views/application/index.html.haml b/app/views/application/index.html.haml
index 8ebf01c..f675651 100644
--- a/app/views/application/index.html.haml
+++ b/app/views/application/index.html.haml
@@ -1,21 +1,21 @@
-- if user_signed_in?
-  / Methods
-  .row
-    .col-md-4
-      %h3= link_to "Methods", design_methods_path
-      %p Discover new ways to approach design problems.
-    .col-md-8
-      .row
-        - @design_methods.each do |method|
-          = render "/application/thumbnail_compact", locals: @thumb_obj = thumbnail(method, "3")
-  / Case Studies
-  .row
-    .col-md-4
-      %h3= link_to "Case Studies", case_studies_path
-      %p Find examples of real world design problems.
-    .col-md-8
-      .row
-        - @case_studies.each do |cs|
-          = render "/application/thumbnail_compact", locals: @thumb_obj = thumbnail(cs, "3")
-- else
-  = render partial: "landing"
+/ - if user_signed_in?
+/   / Methods
+/   .row
+/     .col-md-4
+/       %h3= link_to "Methods", design_methods_path
+/       %p Discover new ways to approach design problems.
+/     .col-md-8
+/       .row
+/         - @design_methods.each do |method|
+/           = render "/application/thumbnail_compact", locals: @thumb_obj = thumbnail(method, "3")
+/   / Case Studies
+/   .row
+/     .col-md-4
+/       %h3= link_to "Case Studies", case_studies_path
+/       %p Find examples of real world design problems.
+/     .col-md-8
+/       .row
+/         - @case_studies.each do |cs|
+/           = render "/application/thumbnail_compact", locals: @thumb_obj = thumbnail(cs, "3")
+/ - else
+= render partial: "landing"
diff --git a/app/views/application/landing.html.haml b/app/views/application/landing.html.haml
new file mode 100644
index 0000000..2d2cc3a
--- /dev/null
+++ b/app/views/application/landing.html.haml
@@ -0,0 +1,126 @@
+
+:css
+  .howdoesitwork{
+    background-color: "gray";
+  }
+%meta{:content => "width=device-width, initial-scale=1", :name => "viewport"}
+- if !user_signed_in?
+  .panel.panel-default.login-margin.panel-primary
+    .panel-heading
+      %h3.panel-title Register
+    .panel-body
+      = form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f|
+        = devise_error_messages!
+        .input
+          = f.text_field :username, {:autofocus => true, :class => "form-control", :placeholder => "Username"}
+        %br/
+        .input
+          = f.text_field :first_name, {:autofocus => true, :class => "form-control", :placeholder => "First name"}
+        %br/
+        .input
+          = f.text_field :last_name, {:autofocus => true, :class => "form-control", :placeholder => "Last name"}
+        %br/
+        .input
+          = f.email_field :email, {:autofocus => true, :class => "form-control", :placeholder => "Email"}
+        %br/
+        .input
+          = f.password_field :password, { :class => "form-control", :placeholder => "Password"}
+        %br/
+        .input
+          = f.password_field :password_confirmation, { :class => "form-control", :placeholder => "Password Confirmation"}
+        %br/
+        .row
+          .col-md-12
+            .col-md-8
+              = link_to "Sign in", new_session_path(resource_name)
+            .col-md-4
+              = f.submit "Register", {:class=> "btn btn-default pull-right" }
+.howdoesitwork{:style=>"margin-top:15%;padding:0 10% 0 10%"}
+  %hr/
+  .h1{:style=>"text-align:center;margin-bottom:10%;"}
+    How Does it Work?
+  .col-xs6.col-md-4
+
+    .thumbnail{:style=>"height:300px;"}
+      .h3{:style=>"text-align:center"}
+        1
+        %br
+        JOIN
+      .p{:style=>"text-align:center"}
+        Join the community to find designers who share similar interests as you
+        and start building your professional network.
+  .col-xs12.col-md-4
+    .thumbnail{:style=>"height:300px;"}
+      .h3{:style=>"text-align:center"}
+        2
+        %br
+        LEARN
+      .p{:style=>"text-align:center"}
+        Browse methods and case studies to improve your design skills. Learn what to do
+        and what to not do to successfully complete your next design task.
+  .col-xs12.col-md-4
+    .thumbnail{:style=>"height:300px;"}
+      .h3{:style=>"text-align:center"}
+        3
+        %br
+        SHARE
+      .p{:style=>"text-align:center"}
+        Participate in discussions where you can post questions
+        and answers regarding various design topics.
+.getstarted{:style=>"margin-top:60%;padding:0 10% 0 10%"}
+  %hr/
+  .h2{:style=>"text-align:center; font-size:4em;margin-bottom:10%;"}
+    Get Started!
+  .col-md-6
+    %a{:href=>'/case_studies'}
+      .thumbnail{:style=>"text-align:center; font-size:3em"}
+        %span.glyphicon.glyphicon-envelope
+        %br
+        Case Studies
+  .col-md-6
+    %a{:href=>'/design_methods'}
+      .thumbnail{:style=>"text-align:center; font-size:3em"}
+        %span.glyphicon.glyphicon-envelope
+        %br
+        Design Methods
+  .col-md-12
+    %a{:href=>'/discussions'}
+      .thumbnail{:style=>"text-align:center; font-size:3em"}
+        %span.glyphicon.glyphicon-comment
+        %br
+        Discussions
+.thedxcommunity{:style=>"margin-top:60%;padding:0 10% 0 10%"}
+  %hr/
+  .h2{:style=>"text-align:center; font-size:2em;margin-bottom:10%;"}
+    The Design Exchange Community
+  .col-md-4
+    .thumbnail{:style=>"text-align:center; font-size:1em"}
+      - if User.find_by(id:1).profile_picture.present?
+        = image_tag(user.profile_picture, class: "img-responsive", :style => "padding: 5%")
+      - else
+        = image_tag("no-profile-available.jpg", class: "img-responsive" , :style => "padding: 5%", :size=>"150x150")
+      .h3
+        First Last
+      .p
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+
+
+  .col-md-4
+    .thumbnail{:style=>"text-align:center; font-size:1em"}
+      = image_tag("no-profile-available.jpg", class: "img-responsive" , :style => "padding: 5%", :size=>"150x150")
+      .h3
+        First Last
+      .p
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+
+
+  .col-md-4
+    .thumbnail{:style=>"text-align:center; font-size:1em"}
+      = image_tag("no-profile-available.jpg", class: "img-responsive" , :style => "padding: 5%", :size=>"150x150")
+      .h3
+        First Last
+      .p
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+
+
+