From d7730c19ad4d081c553304e35d0f745745b2c8d9 Mon Sep 17 00:00:00 2001
From: Torsten <torsten@rubydesign.fi>
Date: Mon, 23 Oct 2023 19:48:38 +0300
Subject: [PATCH] add merged to gem and copied layouts

---
 Gemfile                             |   3 +
 Gemfile.lock                        |  29 ++++++-
 app/views/layouts/_footer.haml      | 112 ++++++++++++++++++++++++++++
 app/views/layouts/_header.haml      |  38 ++++++++++
 app/views/layouts/_member_menu.haml |  23 ++++++
 app/views/layouts/_messages.haml    |  28 +++++++
 app/views/layouts/_mobile_menu.haml |  42 +++++++++++
 app/views/layouts/application.haml  |  39 ++++++++++
 app/views/layouts/mailer.html.haml  |   8 ++
 app/views/layouts/mailer.text.haml  |   1 +
 10 files changed, 322 insertions(+), 1 deletion(-)
 create mode 100644 app/views/layouts/_footer.haml
 create mode 100644 app/views/layouts/_header.haml
 create mode 100644 app/views/layouts/_member_menu.haml
 create mode 100644 app/views/layouts/_messages.haml
 create mode 100644 app/views/layouts/_mobile_menu.haml
 create mode 100644 app/views/layouts/application.haml
 create mode 100644 app/views/layouts/mailer.html.haml
 create mode 100644 app/views/layouts/mailer.text.haml

diff --git a/Gemfile b/Gemfile
index 44163a9..d07bcc5 100644
--- a/Gemfile
+++ b/Gemfile
@@ -19,6 +19,9 @@ gem "sassc-rails"
 gem "haml-rails", "~> 2.0"
 gem 'html2haml'
 
+#gem "merged" , git: "https://github.com/FeenixMakers/merged"
+gem "merged" , path: "../merged"
+
 # Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
 # gem "image_processing", "~> 1.2"
 
diff --git a/Gemfile.lock b/Gemfile.lock
index e25bd79..5252fde 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,3 +1,15 @@
+PATH
+  remote: ../merged
+  specs:
+    merged (0.1.0)
+      active_hash
+      haml-rails
+      mini_magick
+      rails (>= 7.0.4)
+      redcarpet
+      ruby2js (~> 5.0, >= 5.0.1)
+      simple_form (= 5.1.0)
+
 GEM
   remote: https://rubygems.org/
   specs:
@@ -46,6 +58,8 @@ GEM
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.1, >= 1.2.0)
+    active_hash (3.2.1)
+      activesupport (>= 5.0.0)
     activejob (7.0.8)
       activesupport (= 7.0.8)
       globalid (>= 0.3.6)
@@ -68,6 +82,7 @@ GEM
       tzinfo (~> 2.0)
     addressable (2.8.5)
       public_suffix (>= 2.0.2, < 6.0)
+    ast (2.4.2)
     bindex (0.8.1)
     bootsnap (1.16.0)
       msgpack (~> 1.2)
@@ -126,6 +141,7 @@ GEM
     marcel (1.0.2)
     matrix (0.4.2)
     method_source (1.0.0)
+    mini_magick (4.12.0)
     mini_mime (1.1.5)
     minitest (5.20.0)
     msgpack (1.7.2)
@@ -141,6 +157,9 @@ GEM
     nio4r (2.5.9)
     nokogiri (1.15.4-x86_64-linux)
       racc (~> 1.4)
+    parser (3.2.2.4)
+      ast (~> 2.4.1)
+      racc
     passenger (6.0.15)
       rack
       rake (>= 0.8.1)
@@ -182,10 +201,14 @@ GEM
     rake (13.0.6)
     rdoc (6.5.0)
       psych (>= 4.0.0)
-    regexp_parser (2.8.2)
+    redcarpet (3.6.0)
+    regexp_parser (2.1.1)
     reline (0.3.9)
       io-console (~> 0.5)
     rexml (3.2.6)
+    ruby2js (5.1.0)
+      parser
+      regexp_parser (~> 2.1.1)
     ruby_parser (3.20.3)
       sexp_processor (~> 4.16)
     rubyzip (2.3.2)
@@ -202,6 +225,9 @@ GEM
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
     sexp_processor (4.17.0)
+    simple_form (5.1.0)
+      actionpack (>= 5.2)
+      activemodel (>= 5.2)
     sprockets (4.2.1)
       concurrent-ruby (~> 1.0)
       rack (>= 2.2.4, < 4)
@@ -242,6 +268,7 @@ DEPENDENCIES
   haml-rails (~> 2.0)
   html2haml
   importmap-rails
+  merged!
   passenger (= 6.0.15)
   rails (~> 7.0.8)
   sassc-rails
diff --git a/app/views/layouts/_footer.haml b/app/views/layouts/_footer.haml
new file mode 100644
index 0000000..e1b843d
--- /dev/null
+++ b/app/views/layouts/_footer.haml
@@ -0,0 +1,112 @@
+%footer.bg-white{"aria-label" => "Site Footer"}
+  .px-4.py-16.mx-auto.sm:px-6.lg:px-8
+    .w-full.grid.grid-cols-2.gap-8.mt-8.lg:mt-0.lg:grid-cols-6.lg:gap-y-16.ld:grid-cols-3.lg:gap-y-8
+      .max-w-screen-xl.px-4.py-16.mx-auto.sm:px-6.lg:px-8
+        .lg:flex.lg:items-start.lg:gap-8
+          %a.inline-flex.items-center{"aria-label" => "Hub Feenix", :href => "/", :title => "Hub Feenix"}
+            = image_tag("feenix_lintu.webp" , class: "h-20")
+
+      %nav.mt-6
+        %p.mb-6.font-medium.text-xl.text-gray-900
+          Activities
+        %ul.space-y-4.text-sm
+          %li
+            %a.text-gray-700.transition.hover:opacity-75{:href => "/local_activities"}
+              Local Area
+          %li
+            %a.text-gray-700.transition.hover:opacity-75{:href => "/helsinki"}
+              Helsinki
+          %li
+            %a.text-gray-700.transition.hover:opacity-75{:href => "/turku"}
+              Turkku
+
+      %nav.mt-6
+        %p.mb-6.font-medium.text-xl.text-gray-900
+          Weather Info
+        %ul.space-y-4.text-sm
+          %li
+            %a.text-md.transition.hover:opacity-75{:href => "/four_seasons"}
+              Four Seasons
+          %li
+            %a.text-gray-700.transition.hover:opacity-75{:href => "/in_summer"}
+              In Summer
+          %li
+            %a.text-gray-700.transition.hover:opacity-75{:href => "/in_winter"}
+              In Winter
+
+      %nav.mt-6{"aria-label" => "Footer Navigation - Hub Feenix"}
+        %p.mb-6.font-medium.text-xl.text-gray-900
+          Volunteering
+        %ul.space-y-4.text-sm
+          %li
+            %a.text-gray-700.transition.hover:opacity-75{:href => "/volunteering"}
+              About Volunteering
+          %li
+            %a.text-gray-700.transition.hover:opacity-75{:href => "/arriving"}
+              Getting here
+          %li
+            %a.text-gray-700.transition.hover:opacity-75{:href => "/living_here"}
+              Living @ Feenix Info
+
+      %nav.mt-6{"aria-label" => "Footer Navigation - Hub Feenix"}
+        %p.mb-6.font-medium.text-xl.text-gray-900
+          People
+        %ul.space-y-4.text-sm
+          %li
+            %a.text-gray-700.transition.hover:opacity-75{:href => "/members"}
+              Volunteers
+            %li
+              %a.text-gray-700.transition.hover:opacity-75{:href => "/stories"}
+                Stories
+            %li
+              %a.text-gray-700.transition.hover:opacity-75{:href => "/pictures"}
+                Gallery
+
+      %nav.mt-6{"aria-label" => "Footer Navigation - Downloads"}
+        %p.mb-6.font-medium.text-xl.text-gray-900
+          Information
+        %ul.space-y-4.text-sm
+          %li
+            %a.text-gray-700.transition.hover:opacity-75{:href => "/about"}
+              About Hub Feenix
+          %li
+            %a.text-gray-700.transition.hover:opacity-75{:href => "https://www.hubfeenix.fi" , target: :blank }
+              Hub Feenix Website
+          %li
+            %a.text-gray-700.transition.hover:opacity-75{:href => "https://www.facebook.com/hubfeenix" , :target => "_blank"}
+              Facebook
+          %li
+            %a.text-gray-700.transition.hover:opacity-75{:href => "https://www.instagram.com/hub_feenix/" , :target => "_blank"}
+              Instagram
+
+      %ul.flex.justify-start.col-span-2.gap-6.lg:col-span-5.lg:justify-end
+        %li
+          %a.text-gray-700.transition.hover:opacity-75{:href => "https://www.facebook.com/hubfeenix", :rel => "noreferrer", :target => "_blank"}
+            %span.sr-only Facebook
+            %svg.w-6.h-6{"aria-hidden" => "true", :fill => "currentColor", :viewBox => "0 0 24 24"}
+              %path{"clip-rule" => "evenodd", :d => "M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z", "fill-rule" => "evenodd"}
+        %li
+          %a.text-gray-700.transition.hover:opacity-75{:href => "https://www.instagram.com/hub_feenix/", :rel => "noreferrer", :target => "_blank"}
+            %span.sr-only Instagram
+            %svg.w-6.h-6{"aria-hidden" => "true", :fill => "currentColor", :viewBox => "0 0 24 24"}
+              %path{"clip-rule" => "evenodd", :d => "M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z", "fill-rule" => "evenodd"}
+        %li
+          %a.text-gray-700.transition.hover:opacity-75{:href => "https://github.com/FeenixMakers", :rel => "noreferrer", :target => "_blank"}
+            %span.sr-only GitHub
+            %svg.w-6.h-6{"aria-hidden" => "true", :fill => "currentColor", :viewBox => "0 0 24 24"}
+              %path{"clip-rule" => "evenodd", :d => "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z", "fill-rule" => "evenodd"}
+    .pt-8.mt-8.border-t.border-gray-100
+      .grid.grid-cols-1.gap-8.lg:grid-cols-2
+        %p.text-xs.text-left.text-gray-500
+          2020-23. Osuuskunta Hub Feenix. All rights reserved.
+        %nav{"aria-label" => "Footer Navigation - Support"}
+          %ul.flex.flex-wrap.justify-start.gap-4.text-xs.lg:justify-end
+            %li
+              %a.text-gray-500.transition.hover:opacity-75{:href => "#"}
+                =#Terms  Conditions
+            %li
+              %a.text-gray-500.transition.hover:opacity-75{:href => "#"}
+                =#Privacy Policy
+            %li
+              %a.text-gray-500.transition.hover:opacity-75{:href => "#"}
+                =#Cookies
diff --git a/app/views/layouts/_header.haml b/app/views/layouts/_header.haml
new file mode 100644
index 0000000..87e2562
--- /dev/null
+++ b/app/views/layouts/_header.haml
@@ -0,0 +1,38 @@
+%header.px-4.py-5.mx-auto.sm:max-w-xl.md:max-w-full.lg:max-w-screen-xl.md:px-24.lg:px-8
+  .relative.flex.items-center.justify-between
+    %a.inline-flex.items-center{"aria-label" => "Hub Feenix", :href => "/", :title => "Hub Feenix"}
+      = image_tag("feenix_lintu.webp" , class: "h-20")
+      %span.ml-2.text-xl.font-bold.text-gray-800 Volunteers @ Hub Feenix
+    %ul.flex.items-center.hidden.space-x-8.lg:flex
+      - main_menu.each do |link , text|
+        %li
+          %a.font-medium.tracking-wide.text-gray-700.transition-colors.duration-400.hover:text-cyan-800{"aria-label" => "Our product", :href => link, :title => text}= text
+      %li
+        = link_to "https://www.facebook.com/hubfeenix" , :target => "_blank" do
+          = image_tag("fb.webp" , class: "h-10 rounded-md")
+      %li
+        - unless member_signed_in?
+          %a.inline-flex.items-center.justify-center.h-12.px-6.font-medium.tracking-wide.text-white.transition.duration-200.rounded-lg.shadow-md.bg-green-800.hover:bg-blue-800.focus:shadow-outline.focus:outline-none{"aria-label" => "Sign up", :href => main_app.member_session_path, :title => "Log in or Sign up"}
+            Login
+        - else
+          .inline-flex.items-stretch.rounded-md.border
+            .rounded-l-md.px-4.py-2.text-sm.text-gray-600.hover:bg-cyan-100.hover:text-gray-900
+              =link_to current_member.email ,  main_app.member_path(current_member)
+            .relative
+              %button.inline-flex.h-full.items-center.justify-center.rounded-r-md.border-l.border-gray-100.px-2.text-gray-600.hover:bg-cyan-400{:type => "button" , onclick: "dropdown();" }
+                %span.sr-only Menu
+                %svg.h-4.w-4{:fill => "currentColor", :viewbox => "0 0 20 20", :xmlns => "http://www.w3.org/2000/svg"}
+                  %path{"clip-rule" => "evenodd", :d => "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", "fill-rule" => "evenodd"}
+              =render "layouts/member_menu"
+
+    .lg:hidden.flex.items-center.justify-between
+      .mr-20
+        = link_to "https://www.facebook.com/hubfeenix" , :target => "_blank" do
+          = image_tag("fb.webp" , class: "h-10 rounded-md")
+      %button.p-2.-mr-1.transition.duration-200.rounded.focus:outline-none.focus:shadow-outline.hover:bg-deep-purple-50.focus:bg-deep-purple-50{"aria-label" => "Open Menu", :title => "Open Menu" , onclick: "menu_on();"}
+        %svg.w-5.text-gray-600{:viewbox => "0 0 24 24"}
+          %path{:d => "M23,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,13,23,13z", :fill => "currentColor"}
+          %path{:d => "M23,6H1C0.4,6,0,5.6,0,5s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,6,23,6z", :fill => "currentColor"}
+          %path{:d => "M23,20H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,20,23,20z", :fill => "currentColor"}
+
+= render "layouts/mobile_menu"
diff --git a/app/views/layouts/_member_menu.haml b/app/views/layouts/_member_menu.haml
new file mode 100644
index 0000000..933cff5
--- /dev/null
+++ b/app/views/layouts/_member_menu.haml
@@ -0,0 +1,23 @@
+#menu-dropdown.hidden.absolute.right-0.z-10.mt-4.w-36.origin-top-right.rounded-md.border.border-gray-100.bg-white.shadow-lg{:role => "menu"}
+  .p-2
+    - member_memu.each do |link , text|
+      %a.block.rounded-lg.px-4.py-2.text-sm.text-gray-500.hover:bg-gray-50.hover:text-gray-700{:href => link, :role => "menuitem"}
+        =text
+  = form_tag( main_app.destroy_member_session_path , {method: :delete  } ) do
+    %button.flex.w-full.items-center.gap-2.rounded-lg.px-4.py-2.text-sm.text-blue-700.hover:bg-red-50{:role => "menuitem", :type => "submit"}
+      %svg.h-4.w-4{:fill => "none", :stroke => "currentColor", "stroke-width" => "2", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
+        %path{:d => "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
+      Sign out
+
+:javascript
+  var drop_hidden = true;
+  function dropdown(){
+    var x = document.getElementById("menu-dropdown");
+    if( drop_hidden == true){
+      x.style.display = "block";
+      drop_hidden = false ;
+    } else {
+      x.style.display = "none";
+      drop_hidden = true ;
+    }
+  }
diff --git a/app/views/layouts/_messages.haml b/app/views/layouts/_messages.haml
new file mode 100644
index 0000000..e7b0290
--- /dev/null
+++ b/app/views/layouts/_messages.haml
@@ -0,0 +1,28 @@
+-if flash.alert
+  #flash
+    .m-20.rounded.border-l-4.border-red-500.bg-red-50.p-4{:role => "alert"}
+      %strong.block.font-medium.text-red-700 Oops
+      %p.mt-2.text-sm.text-red-700
+        =flash.alert
+
+-if flash.notice
+  #flash
+    .m-20.rounded-xl.border.border-gray-100.p-4.shadow-xl{:role => "alert"}
+      .flex.items-start.gap-4
+        %span.text-green-600
+          %svg.h-6.w-6{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
+            %path{:d => "M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
+        .flex-1
+          %strong.block.font-medium.text-gray-900 Ok
+          %p.mt-1.text-sm.text-gray-700
+            = flash.notice
+:javascript
+  function hideNotice() {
+    const notification = document.querySelector('#flash')
+    if (notification) {
+      setInterval(function() {
+        notification.classList.add('hidden');
+      }, 5000);
+    }
+  }
+  hideNotice();
diff --git a/app/views/layouts/_mobile_menu.haml b/app/views/layouts/_mobile_menu.haml
new file mode 100644
index 0000000..1fe32ce
--- /dev/null
+++ b/app/views/layouts/_mobile_menu.haml
@@ -0,0 +1,42 @@
+#mobile-menu.absolute.top-0.leaving-0.w-full.hidden.z-10
+  .p-5.bg-white.border.rounded.shadow-sm
+    .flex.items-center.justify-between.mb-4
+      %div
+        %a.inline-flex.items-center{"aria-label" => "Hub Feenix", :href => "/", :title => "Hub Feenix"}
+          = image_tag("feenix_lintu.webp" , class: "h-20")
+          %span.ml-2.text-xl.font-bold.tracking-wide.text-gray-800.uppercase Hub Feenix
+      %div
+        %button.p-2.-mt-2.-mr-2.transition.duration-200.rounded.hover:bg-gray-200.focus:bg-gray-200.focus:outline-none.focus:shadow-outline{"aria-label" => "Close Menu", :title => "Close Menu" , onclick: "menu_off();"}
+          %svg.w-5.text-gray-600{:viewbox => "0 0 24 24"}
+            %path{:d => "M19.7,4.3c-0.4-0.4-1-0.4-1.4,0L12,10.6L5.7,4.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l6.3,6.3l-6.3,6.3 c-0.4,0.4-0.4,1,0,1.4C4.5,19.9,4.7,20,5,20s0.5-0.1,0.7-0.3l6.3-6.3l6.3,6.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3 c0.4-0.4,0.4-1,0-1.4L13.4,12l6.3-6.3C20.1,5.3,20.1,4.7,19.7,4.3z", :fill => "currentColor"}
+    %nav
+      %ul.space-y-6.px-20.w-lg.text-center
+        - main_menu.each do |link , text|
+          %li
+            %a.w-full.h-full.block.tracking-wide.text-xl.p-2.rounded-lg.hover:bg-cyan-200{ :href => link , :title => text}
+              = text
+        %li
+          %hr
+        - mobile_menu.each do |link , text|
+          %li
+            %a.w-full.h-full.block.tracking-wide.text-xl.p-2.rounded-lg.hover:bg-cyan-200{ :href => link , :title => text}
+              = text
+        -if(current_member)
+          = form_tag( main_app.destroy_member_session_path , {method: :delete  ,class: "text-center"}) do
+            %button.w-full.items-center.gap-2.rounded-lg.px-4.py-2.text-sm.text-blue-700.hover:bg-red-50{:role => "menuitem", :type => "submit"}
+              %svg.h-4.w-4{:fill => "none", :stroke => "currentColor", "stroke-width" => "2", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
+                %path{:d => "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
+              Sign out
+        -else
+          %a.inline-flex.items-center.justify-center.h-12.px-6.font-medium.tracking-wide.text-white.transition.duration-200.rounded-lg.shadow-md.bg-green-800.hover:bg-blue-800.focus:shadow-outline.focus:outline-none{"aria-label" => "Sign up", :href => main_app.member_session_path, :title => "Log in or Sign up"}
+            Login
+:javascript
+  var drop_hidden = true;
+  function menu_on() {
+    var x = document.getElementById("mobile-menu");
+    x.style.display = "block";
+    }
+  function menu_off() {
+    var x = document.getElementById("mobile-menu");
+    x.style.display = "none";
+    }
diff --git a/app/views/layouts/application.haml b/app/views/layouts/application.haml
new file mode 100644
index 0000000..3e9aab8
--- /dev/null
+++ b/app/views/layouts/application.haml
@@ -0,0 +1,39 @@
+!!!
+%html
+  %head
+    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
+    %title Hubfeenix Volunteers
+    %meta{:content => "width=device-width,initial-scale=1", :name => "viewport"}/
+    // https://www.favicon-generator.org/
+    %link{:href => "/apple-icon-57x57.png", :rel => "apple-touch-icon", :sizes => "57x57"}/
+    %link{:href => "/apple-icon-60x60.png", :rel => "apple-touch-icon", :sizes => "60x60"}/
+    %link{:href => "/apple-icon-72x72.png", :rel => "apple-touch-icon", :sizes => "72x72"}/
+    %link{:href => "/apple-icon-76x76.png", :rel => "apple-touch-icon", :sizes => "76x76"}/
+    %link{:href => "/apple-icon-114x114.png", :rel => "apple-touch-icon", :sizes => "114x114"}/
+    %link{:href => "/apple-icon-120x120.png", :rel => "apple-touch-icon", :sizes => "120x120"}/
+    %link{:href => "/apple-icon-144x144.png", :rel => "apple-touch-icon", :sizes => "144x144"}/
+    %link{:href => "/apple-icon-152x152.png", :rel => "apple-touch-icon", :sizes => "152x152"}/
+    %link{:href => "/apple-icon-180x180.png", :rel => "apple-touch-icon", :sizes => "180x180"}/
+    %link{:href => "/android-icon-192x192.png", :rel => "icon", :sizes => "192x192", :type => "image/png"}/
+    %link{:href => "/favicon-32x32.png", :rel => "icon", :sizes => "32x32", :type => "image/png"}/
+    %link{:href => "/favicon-96x96.png", :rel => "icon", :sizes => "96x96", :type => "image/png"}/
+    %link{:href => "/favicon-16x16.png", :rel => "icon", :sizes => "16x16", :type => "image/png"}/
+    %link{:href => "/manifest.json", :rel => "manifest"}/
+    %meta{:content => "#ffffff", :name => "msapplication-TileColor"}/
+    %meta{:content => "/ms-icon-144x144.png", :name => "msapplication-TileImage"}/
+    %meta{:content => "#ffffff", :name => "theme-color"}/
+
+    = csrf_meta_tags
+    = csp_meta_tag
+    = stylesheet_link_tag "tailwind"
+    = stylesheet_link_tag "application"
+    
+    = javascript_importmap_tags
+    - if false
+      %script{:src => "https://cdn.tailwindcss.com"}
+
+  %body.xl:mx-auto{class: "max-w-[1920px]"}
+    = render "layouts/header"
+    = render "layouts/messages"
+    = yield
+    = render "layouts/footer"
diff --git a/app/views/layouts/mailer.html.haml b/app/views/layouts/mailer.html.haml
new file mode 100644
index 0000000..cbf6b8e
--- /dev/null
+++ b/app/views/layouts/mailer.html.haml
@@ -0,0 +1,8 @@
+!!!
+%html
+  %head
+    %meta{:content => "text/html; charset=utf-8", "http-equiv" => "Content-Type"}/
+    :css
+      /* Email styles need to be inline */
+  %body
+    = yield
diff --git a/app/views/layouts/mailer.text.haml b/app/views/layouts/mailer.text.haml
new file mode 100644
index 0000000..0a90f09
--- /dev/null
+++ b/app/views/layouts/mailer.text.haml
@@ -0,0 +1 @@
+= yield