Brand index page

app/assets/stylesheets/application.css

@@ -25,3 +25,4 @@ footer {
 .nowrap {
   white-space: nowrap;
 }
+

app/assets/stylesheets/jumbotron-narrow.css.scss

@@ -0,0 +1,71 @@
+/* Everything but the jumbotron gets side spacing for mobile first views */
+.header,
+.marketing,
+.footer {
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+/* Custom page header */
+.header {
+  border-bottom: 1px solid #e5e5e5;
+}
+/* Make the masthead heading the same height as the navigation */
+.header h3 {
+  padding-bottom: 19px;
+  margin-top: 0;
+  margin-bottom: 0;
+  line-height: 40px;
+}
+
+/* Custom page footer */
+.footer {
+  padding-top: 19px;
+  color: #777;
+  border-top: 1px solid #e5e5e5;
+}
+
+/* Customize container */
+@media (min-width: 768px) {
+  .container-index {
+    max-width: 730px;
+    margin: 0 auto;
+  }
+}
+.container-narrow > hr {
+  margin: 30px 0;
+}
+
+/* Main marketing message and sign up button */
+.jumbotron {
+  text-align: center;
+  border-bottom: 1px solid #e5e5e5;
+  padding-top: 30px;
+}
+
+/* Supporting marketing content */
+.marketing, #resultscontainer {
+  margin: 40px 0;
+}
+.marketing p + h4 {
+  margin-top: 28px;
+}
+
+/* Responsive: Portrait tablets and up */
+@media screen and (min-width: 768px) {
+  /* Remove the padding we set earlier */
+  .header,
+  .marketing,
+  .footer {
+    padding-right: 0;
+    padding-left: 0;
+  }
+  /* Space out the masthead */
+  .header {
+    margin-bottom: 30px;
+  }
+  /* Remove the bottom border on the jumbotron for visual effect */
+  .jumbotron {
+    border-bottom: 0;
+  }
+}

app/views/welcome/index.html.erb

@@ -1,8 +1,21 @@
-
 <%= render partial: 'flash' %>
 
-<h1>Welcome!</h1>
+<div class="container-index">
+  <div class="jumbotron">
+    <h1>Welcome!</h1>
+    <p>Welcome to Gandalf, an online event management service brought to you by <a href="http://zeus.ugent.be/" target="_blank">Zeus WPI</a> and <a href="http://www.fkgent.be/" target="_blank">FaculteitenKonvent Gent</a>.</p>
+  </div>
+
+  <div class="row marketing">
+    <div class="col-lg-6">
+      <h4>Guests</h4>
+      <p>Click on <%= link_to "Events", events_path %> in the menu to register or buy tickets for an event.</p>
+    </div>
 
-<p>Welcome to Gandalf, an online event management service brought to you by <a href="http://zeus.ugent.be/" target="_blank">Zeus WPI</a> and <a href="http://www.fkgent.be/" target="_blank">FaculteitenKonvent Gent</a></p>
+    <div class="col-lg-6">
+      <h4>FK Praesidia</h4>
+      <p>FK Praesidia can <%= link_to "log in", new_user_session_path %> using their UGent credentials and create events.</p>
+    </div>
+  </div>
+</div>
 
-<p>Click on <%= link_to "Events", events_path %> in the menu to register or buy tickets for an event.</p>