Feature | about page

app/controllers/abouts_controller.rb

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

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-marine-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/application.html.erb

@@ -9,11 +9,15 @@
 
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
   </head>
 
   <body class="h-full bg-gray-8">
     <main class="relative flex flex-col w-full h-full mx-auto">
-      <% if !current_page?(new_session_path) %>
+      <% if !current_page?(new_session_path) && !current_page?(about_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 %>

config/routes.rb

@@ -14,4 +14,5 @@
   resource :password_reset, only: [:new, :create, :edit, :update] do
     get :post_submit
   end
+  resource :about, only: [:show]
 end

config/tailwind.config.js

@@ -10,7 +10,8 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        sans: ['Roboto', ...defaultTheme.fontFamily.sans]
+        sans: ['Roboto', ...defaultTheme.fontFamily.sans],
+        karla: ['Karla', ...defaultTheme.fontFamily.sans]
       },
       maxWidth: {
         'screen-sm': '425px'
@@ -24,7 +25,10 @@ module.exports = {
         red: '#CB0C1C',
         blue: '#0A4E6B',
         'green-dark': '#62C554',
-        'green-light': '#D8F1D4'
+        'green-light': '#D8F1D4',
+        'blue-marine': '#003A5D',
+        'blue-marine-light': '#EFF6FF',
+        'blue-teal': '#00AFAA'
       }
     }
   },