Nav bar

app/assets/stylesheets/application.bootstrap.scss

@@ -33,7 +33,7 @@ $spacers: (
 );
 
 $theme-colors: map-merge(
-  $theme-colors,("blue-2":#0F58B7,"skyblue" : #9BC7FF,"grey" : #B3B3B3)
+  $theme-colors,("blue-2":#0F58B7,"skyblue" : #9BC7FF,"grey" : #B3B3B3, "role-grey": #7D7D7D)
 );
 
 //$utilities-text-colors: map-merge($utilities-text-colors,("blue-2":#0F58B7);
@@ -61,7 +61,6 @@ $utilities: map-merge(
           )
         ),
 
-
       "width":
       map-merge(
         map-get($utilities, "width"),
@@ -173,7 +172,7 @@ $utilities: map-merge(
         skyblue: #f2f7ff,
         white: white,
         linear-sky-blue:linear-gradient(46.77deg, #0f99b7 -0.79%, #69ecdc 131.52%),
-        grey: #eeeeee,
+        grey: #F5F5F5,
         intensive-blue: #0f58b7,
         mix-blue: color-mix(in srgb, #0f58b7, #62d9ff),
         transparent: transparent,
@@ -188,26 +187,15 @@ $utilities: map-merge(
 }
 
 .header-logo{
-  width:100px;
+  width:104px;
   height: 33px;
 }
 
-.card-size{
-  width: 122px;
-  height: 122px;
-}
-
 .footer-logo{
   width:100px;
   height: 38px;
 }
 
-.text-in-image{
-  top: 80%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
 .header-decline {
   transform: rotate(10deg) translateY(-356px) translateX(-94px);
   width: 118vw;
@@ -219,6 +207,13 @@ $utilities: map-merge(
   list-style-type: none;
 }
 
+.border-bottom-style-solid {
+  border-bottom-style: solid;
+}
+.rotate-180 {
+  transform: rotate(180deg);
+}
+
 .border-top-solid{
   border-top: solid;
 }
@@ -301,6 +296,9 @@ $utilities: map-merge(
   width: 21px;
   height: 21px;
 }
+.fw-200{
+  font-weight: 200;
+}
 
 .outline-none{
   outline: none;
@@ -326,12 +324,26 @@ $utilities: map-merge(
   border-color: transparent;
 }
 
+.shadow-header {
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);;
+}
+
+.rounded-header {
+  border-radius: 0.375rem
+}
+
 @include media-breakpoint-up(sm) {
   .transform-sm {
     transform: rotate(10deg) translateY(-356px) translateX(-126px);
   }
 
+  .rounded-header {
+    border-radius:0px
+  }
 
+  .shadow-header {
+    box-shadow: none;
+  }
 }
 
 @include media-breakpoint-up(md) {

app/javascript/controllers/header_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="header"
+export default class extends Controller {
+  static targets = [ "arrow", "circle"]
+  static classes = [ "rotate", "hide"]
+
+  transform_add() {
+    this.arrowTarget.classList.add(this.rotateClass)
+  }
+
+  transform_remove() {
+    this.arrowTarget.classList.remove(this.rotateClass)
+  }
+
+  hide() {
+    this.circleTarget.classList.add(this.hideClass)
+  }
+}
+

app/javascript/controllers/index.js

@@ -4,5 +4,8 @@
 
 import { application } from "./application"
 
+import HeaderController from "./header_controller"
+application.register("header", HeaderController)
+
 import HelloController from "./hello_controller"
 application.register("hello", HelloController)

app/views/application/_header.html.erb

@@ -0,0 +1,145 @@
+<div class="shadow-header rounded-header position-relative z-1">
+  <%= render "application/flash" %>
+  <div class="d-flex justify-content-between align-items-center align-items-lg-end pt-10 pt-lg-0 px-md-10 px-xl-15 px-3 pb-3">
+    <%=image_tag("footer_logo.svg", class: "header-logo")%>
+    <div class="d-lg-flex flex-column ">
+      <div class="d-lg-flex d-none column-gap-8 pt-3 justify-content-center fs-4 fw-medium pb-3">
+        <div class = "<%= current_page?(controller: '/gifts') ? 'border-bottom-style-solid border-1 border-blue' : '' %>">
+          <%= link_to 'Regalos', gifts_path, class: 'bg-text-gradient-blue-20 text-fill-color-transparent'%>
+        </div>
+        <div class = "<%= current_page?(controller: '/catering') ? 'border-bottom-style-solid border-1 border-blue' : '' %>">
+          <%= link_to 'Catering', catering_index_path, class: 'bg-text-gradient-blue-20 text-fill-color-transparent' %>
+        </div>
+        <div class = "<%= current_page?(controller: '/merchandising') ? 'border-bottom-style-solid border-1 border-blue' : '' %>">
+          <%= link_to 'Merchandising', merchandising_index_path, class: 'bg-text-gradient-blue-20 text-fill-color-transparent' %>
+        </div>
+        <div class = "<%= current_page?(controller: '/events') ? 'border-bottom-style-solid border-1 border-blue' : '' %>">
+          <%= link_to 'Eventos', events_path, class: 'bg-text-gradient-blue-20 text-fill-color-transparent' %>
+        </div>
+      </div>
+      <form class = "d-none d-sm-flex bg-grey rounded-pill border-style-solid border-1 box-shadow justify-content-between">
+        <div class="form-group ps-2 w-100">
+          <input type="text" class="w-100 h-100 fw-light fs-2 border-0 bg-transparent outline-none fs-md-5 fs-lg-4" id="exampleInputEmail1" placeholder="Buscar">
+        </div>
+        <button type="submit" class="border-0 bg-grey p-1 rounded-pill">
+          <%=image_tag("Buscar.svg")%>
+        </button>
+      </form>
+    </div>
+    <button class="bg-white border-0 d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
+      <%=image_tag("black_Menu.svg")%></button>
+    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
+      <div class="offcanvas-header">
+        <h5 id="offcanvasRightLabel">Secciones</h5>
+        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      </div>
+      <div class="offcanvas-body">
+        <ul class="list-group list-unstyled">
+          <li class="pb-3">
+            <div class="d-flex justify-content-between align-items-end">
+              <div class="d-flex flex-column">
+                <p class = "bg-text-gradient-blue-20 text-fill-color-transparent mb-0
+            lh-1 fs-5">1300</p>
+                <p class ="mb-0 lh-2 fw-light fs-4">Puntos</p>
+              </div>
+              <%= link_to 'Ver más',root_path, class: 'fw-light text-blue-2 text-decoration-none' %>
+            </div>
+          </li>
+          <li class="list-group-item-action py-3 border-top-solid border-top-1 border-dark">
+            <%= link_to 'Regalos', gifts_path, class:'bg-text-gradient-blue-20 text-fill-color-transparent' %></li>
+          <li class="list-group-item-action py-3 border-top-solid border-top-1 border-dark">
+            <%= link_to 'Catering', catering_index_path, class:'bg-text-gradient-blue-20 text-fill-color-transparent' %></li>
+          <li class="list-group-item-action py-3 border-top-solid border-top-1 border-dark">
+            <%= link_to 'Merchandising', merchandising_index_path, class:'bg-text-gradient-blue-20 text-fill-color-transparent' %></li>
+          <li class="list-group-item-action py-3 border-top-solid border-top-1 border-dark">
+            <%= link_to 'Eventos', events_path, class:'bg-text-gradient-blue-20 text-fill-color-transparent' %></li>
+          <li class="list-group-item-action py-3 border-top-solid border-top-1 border-dark">
+            <%= link_to 'Cuenta', edit_user_registration_path, class:'fw-light text-black text-decoration-none' %></li>
+          <li class="py-3 border-top-solid border-top-1 border-dark"> <%= link_to 'Favoritos', root_path, class:'fw-light text-reset text-decoration-none' %></li>
+          <li class="py-3 border-top-solid border-top-1 border-dark"> <%= link_to 'Pedidos y consultas', root_path, class:'fw-light text-reset text-decoration-none' %></li>
+          <li class="py-3 border-top-solid border-top-1 border-dark"> <%= link_to 'Campañas y metricas', root_path, class:' fw-light text-reset text-decoration-none' %></li>
+          <li class="py-3 border-top-solid border-top-1 border-dark"> <%= link_to 'Ayuda', root_path, class:'fw-light text-grey text-decoration-none' %></li>
+          <li class="py-3 border-top-solid border-top-1 border-grey"> <%= link_to 'Cerrar sesion', destroy_user_session_path, data:{ turbo_method: "delete" }, class:'fw-light text-grey text-decoration-none' %></li>
+        </ul>
+      </div>
+    </div>
+    <div class="d-lg-flex d-none align-items-center" data-controller = "header" data-header-rotate-class="rotate-180" data-header-hide-class="d-none">
+      <div class="position-relative dropdown" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
+        <button class = "d-flex  bg-white border-0 p-0" data-action="click->header#hide">
+          <%=image_tag("campana.svg")%>
+        </button>
+        <div data-header-target="circle">
+          <%=image_tag("notificacion.svg", class: "position-absolute top-0 start-50")%>
+        </div>
+        <ul class="dropdown-menu dropdown-menu-end p-3" aria-labelledby="dropdownMenuButton2">
+          <li class='dropdown-item fw-light'>
+            <div class="d-flex aling-items-center column-gap-2 py-1">
+              <%=image_tag("icon.svg", width: "18px", heigth: "18px" )%>
+              <div class="d-felx flex-column lh-2 fw-200">
+                <p class="m-0">Soledad Martinez</p>
+                <p class="m-0">canjeó su código!</p>
+              </div>
+            </div>
+          </li>
+          <li class='dropdown-item fw-light'>
+            <div class="d-flex aling-items-center column-gap-2 py-1 border-top-solid border-top-1 border-grey">
+              <%=image_tag("icon.svg", width: "18px", heigth: "18px" )%>
+              <div class="d-felx flex-column lh-2 fw-200">
+                <p class="m-0">Rosina Cataldo</p>
+                <p class="m-0">canjeó su código!</p>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="dropdown ps-5" data-action="hidden.bs.dropdown->header#transform_remove shown.bs.dropdown->header#transform_add">
+        <button class = "d-flex  bg-white border-0"  type="buttom" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
+          <div class="d-flex column-gap-2 align-items-end">
+            <%=image_tag("Usuario.svg")%>
+            <div>
+              <p class="fw-medium fs-4 lh-20 mb-0">Victoria López</p>
+              <div class="d-flex column-gap-1">
+                <p class="text-role-grey fs-3 lh-20 mb-0">HR Manager</p>
+                <div data-header-target="arrow">
+                  <%=image_tag("Drop-down.svg")%>
+                </div>
+              </div>
+            </div>
+          </div>
+        </button>
+        <ul class="dropdown-menu px-3 " aria-labelledby="dropdownMenuButton1">
+          <li class="py-1">
+            <div class="d-flex justify-content-between align-items-end">
+              <div class="d-flex flex-column">
+                <p class = "bg-text-gradient-blue-20 text-fill-color-transparent mb-0
+            lh-1 fs-5">1300</p>
+                <p class ="mb-0 lh-2 fw-light fs-4">Puntos</p>
+              </div>
+              <%= link_to 'Ver más',root_path, class: 'fw-light text-blue-2 text-decoration-none' %>
+            </div>
+          </li>
+          <li class="py-1 border-top-solid border-top-1 border-dark">
+            <%= link_to 'Cuenta', edit_user_registration_path, class:'fw-light text-black text-decoration-none' %></li>
+          <li class="py-1 border-top-solid border-top-1 border-dark"> <%= link_to 'Favoritos', root_path, class:'fw-light text-reset text-decoration-none' %></li>
+          <li class="py-1 border-top-solid border-top-1 border-dark"> <%= link_to 'Pedidos y consultas', root_path, class:'fw-light text-reset text-decoration-none' %></li>
+          <li class="py-1 border-top-solid border-top-1 border-dark"> <%= link_to 'Campañas y metricas', root_path, class:' fw-light text-reset text-decoration-none' %></li>
+          <li class="py-1 border-top-solid border-top-1 border-dark"> <%= link_to 'Ayuda', root_path, class:'fw-light text-grey text-decoration-none' %></li>
+          <li class="py-1 border-top-solid border-top-1 border-grey"> <%= link_to 'Cerrar sesion', destroy_user_session_path, data:{ turbo_method: "delete" }, class:'fw-light text-grey text-decoration-none' %></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div class="d-flex flex-column d-sm-none px-3 pb-3">
+    <form class = "d-flex bg-grey rounded-pill border-style-solid border-1 box-shadow justify-content-between">
+      <button type="submit" class="border-0 bg-grey p-1 rounded-pill">
+        <%=image_tag("Buscar.svg")%>
+      </button>
+      <div class="form-group ps-2 w-100">
+        <input type="text" class="w-100 h-100 fw-light fs-3 border-0 bg-transparent outline-none" id="exampleInputEmail1" placeholder="Buscar">
+      </div>
+      <button type="submit" class="border-0 bg-grey p-1 rounded-pill">
+        <%=image_tag("Filtros.svg")%>
+      </button>
+    </form>
+  </div>
+</div>

app/views/home/index.html.erb

@@ -1,6 +1 @@
-<h1>Hello word!</h1>
-<%= link_to "sign up",
-new_user_registration_path%>
-<%= link_to "sign Out",
-destroy_user_session_path,
-data:{ turbo_method: "delete" } %>
+

app/views/layouts/application.html.erb

@@ -10,7 +10,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/>
   </head>
   <body>
-    <%= render "application/flash" %>
+    <%=render "application/header"%>
     <%= yield %>
   </body>
 </html>

config/routes.rb

@@ -9,6 +9,12 @@
   # root "posts#index"
 
   root 'home#index'
+
+  resources :gifts, path: 'regalos', only: [:index]
+  resources :catering, only: [:index]
+  resources :merchandising, only: [:index]
+  resources :events, path: 'eventos', only: [:index]
+
   devise_for :users,
              controllers: { registrations: 'users/registrations', sessions: 'users/sessions',
                             passwords: 'users/passwords' }