Feature | about page

app/assets/stylesheets/application.css

@@ -1 +1,2 @@
 /* Application styles */
+@import url('https://fonts.googleapis.com/css?family=Karla');

app/controllers/abouts_controller.rb

@@ -0,0 +1,4 @@
+class AboutsController < ApplicationController
+  def show
+  end
+end

app/helpers/navigation_helper.rb

@@ -9,6 +9,10 @@ def nav_text_class_for(path)
     "text-gray-5"
   end
 
+  def show_header?
+    !current_page?(new_session_path) && !current_page?(about_path)
+  end
+
   # Todo: A better approach would be to support authenticated root and unauthenticated root in routes.rb
   def homepage_link
     user_signed_in? ? root_path : new_session_path

app/views/abouts/show.html.erb

@@ -0,0 +1,88 @@
+<div class="font-karla flex flex-col items-center w-full">
+  <div class="bg-blue-marine flex flex-col items-center px-5 pt-6 pb-10 w-full">
+    <div class="max-w-screen-sm text-center font-normal">
+      <p class="text-base mb-6 text-white">Brought to you by</p>
+      <%= inline_svg_tag "telos_labs_logo.svg", class: "mb-10 w-full" %>
+      <p class="text-white text-lg mb-6">We designed and developed this open-source app for the Rails community, you can contribute to the repo <a href="https://github.com/TelosLabs/rails-world" target="_blank" class="text-blue-teal">here</a>.</p>
+      <p class="text-white text-lg mb-10">Telos creates disruptive, purpose-driven software for visionary clients to enhance productivity and enrich lives.</p>
+      <div class="flex flex-row w-full items-center gap-5">
+        <a href="https://hi.teloslabs.co/" target="_blank" class="grow bg-blue-teal rounded-[10px] p-4 flex flex-row items-center justify-center">
+          <%= inline_svg_tag "icon_web.svg", class: "w-6 h-6" %>
+        </a>
+        <a href="https://www.linkedin.com/company/telos-labs" target="_blank" class="grow bg-blue-teal rounded-[10px] p-4 flex flex-row items-center justify-center">
+          <%= inline_svg_tag "icon_linkedin.svg", class: "w-6 h-6" %>
+        </a>
+      </div>
+    </div>
+  </div>
+  <div class="bg-blue-light py-10 px-5 flex flex-col items-center w-full">
+    <div class="max-w-screen-sm text-center font-normal w-full">
+      <h2 class="text-blue-teal text-[25px] mb-10">
+        Credits
+      </h2>
+      <div class="flex flex-row items-start w-full mb-6">
+        <%= image_tag "profile_jordan.png", class: "rounded-full w-12 h-12 mr-5" %>
+        <div class="flex flex-col items-start text-blue-marine">
+          <p class="font-bold">Jordan G. Trevino</p>
+          <p>Company Lead</p>
+        </div>
+      </div>
+      <div class="flex flex-row items-start w-full mb-6">
+        <%= image_tag "profile_sergio.jpg", class: "rounded-full w-12 h-12 mr-5" %>
+        <div class="flex flex-col items-start text-blue-marine">
+          <p class="font-bold">Sergio Alvarez</p>
+          <p>Engineering Lead</p>
+        </div>
+      </div>
+      <div class="flex flex-row items-start w-full mb-6">
+        <%= image_tag "profile_jose_fernando.jpg", class: "rounded-full w-12 h-12 mr-5" %>
+        <div class="flex flex-col items-start text-blue-marine">
+          <p class="font-bold">José Fernando Dávila</p>
+          <p>Software Engineer</p>
+        </div>
+      </div>
+      <div class="flex flex-row items-start w-full mb-6">
+        <%= image_tag "profile_andres.png", class: "rounded-full w-12 h-12 mr-5" %>
+        <div class="flex flex-col items-start text-blue-marine">
+          <p class="font-bold">Andrés Alvídrez</p>
+          <p>Software Engineer</p>
+        </div>
+      </div>
+      <div class="flex flex-row items-start w-full mb-6">
+        <%= image_tag "profile_carlos.jpg", class: "rounded-full w-12 h-12 mr-5" %>
+        <div class="flex flex-col items-start text-blue-marine">
+          <p class="font-bold">Carlos Quijano</p>
+          <p>Product Designer</p>
+        </div>
+      </div>
+      <div class="flex flex-row items-start w-full mb-6">
+        <%= image_tag "profile_luigi.png", class: "rounded-full w-12 h-12 mr-5" %>
+        <div class="flex flex-col items-start text-blue-marine">
+          <p class="font-bold">Luigi Rojas</p>
+          <p>Software Engineer</p>
+        </div>
+      </div>
+      <div class="flex flex-row items-start w-full mb-6">
+        <%= image_tag "profile_edgar.jpg", class: "rounded-full w-12 h-12 mr-5" %>
+        <div class="flex flex-col items-start text-blue-marine">
+          <p class="font-bold">Edgar Bustillos</p>
+          <p>Software Engineer</p>
+        </div>
+      </div>
+      <div class="flex flex-row items-start w-full mb-6">
+        <%= image_tag "profile_alan.jpg", class: "rounded-full w-12 h-12 mr-5" %>
+        <div class="flex flex-col items-start text-blue-marine">
+          <p class="font-bold">Alan Soto</p>
+          <p>Software Engineer</p>
+        </div>
+      </div>
+      <div class="flex flex-row items-start w-full mb-6">
+        <%= image_tag "profile_alicia.png", class: "rounded-full w-12 h-12 mr-5" %>
+        <div class="flex flex-col items-start text-blue-marine">
+          <p class="font-bold">Alicia Rojas</p>
+          <p>Software Engineer</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

app/views/layouts/_bottom_navbar.html.erb

@@ -15,8 +15,8 @@
     <%= inline_svg_tag "bell.svg", class: nav_icon_class_for([root_path]) %>
     Notifications
   </a>
-  <a href="<%= root_path %>" class="<%= nav_text_class_for [root_path] %> flex flex-col items-center justify-center">
-    <%= inline_svg_tag "info.svg", class: nav_icon_class_for([root_path]) %>
+  <a href="<%= about_path %>" class="<%= nav_text_class_for [about_path] %> flex flex-col items-center justify-center">
+    <%= inline_svg_tag "info.svg", class: nav_icon_class_for([about_path]) %>
     About
   </a>
 </div>

app/views/layouts/_flash_message.html.erb

@@ -1,5 +1,5 @@
 <div class="flex flex-col items-center justify-center fixed bottom-[64px] w-full z-20">
-    <div data-controller="closable" class="bg-black/70 shadow-simple backdrop-blur-[25px] rounded-lg px-5 py-4 absolute transition-all bottom-0 max-w-screen-sm text-white z-20 sticky">
-        <%= message %>
-    </div>
+  <div data-controller="closable" class="bg-black/70 shadow-simple backdrop-blur-[25px] rounded-lg px-5 py-4 absolute transition-all bottom-0 max-w-screen-sm text-white z-20 sticky">
+    <%= message %>
+  </div>
 </div>

app/views/layouts/_header.html.erb

@@ -0,0 +1,7 @@
+<div class="flex justify-center w-full py-6 mx-auto border-b border-b-white bg-purple-dark">
+  <div class="flex max-w-screen-sm px-5">
+    <%= link_to homepage_link do %>
+      <%= inline_svg_tag("main_logo.svg", class: "w-full") %>
+    <% end %>
+  </div>
+</div>

app/views/layouts/application.html.erb

@@ -13,24 +13,17 @@
 
   <body class="flex flex-col h-full bg-gray-8">
     <main class="relative flex flex-col flex-1 w-full mx-auto overflow-auto">
-      <% if !current_page?(new_session_path) %>
-        <div class="flex justify-center w-full py-6 mx-auto border-b border-b-white bg-purple-dark">
-          <div class="flex max-w-screen-sm px-5">
-            <%= link_to homepage_link do %>
-              <%= inline_svg_tag("main_logo.svg", class: "w-full") %>
-            <% end %>
-          </div>
-        </div>
+      <% if show_header? %>
+        <%= render partial: "layouts/header" %>
       <% end %>
+
       <% flash.each do |type, message| %>
         <% if message.present? && message.is_a?(String) %>
           <%= render partial: "layouts/flash_message", locals: { message: message } %>
         <% end %>
       <% end %>
+
       <%= yield %>
-      <% if user_signed_in? %>
-        <%= button_to "Log out", session_path, method: :delete %>
-      <% end %>
     </main>
     <%= render partial: "layouts/bottom_navbar" if user_signed_in? %>
   </body>