Graham McIntire
654fcb541c
- Add footer component to app, authenticated, and admin layouts - Update marketing layout footer to use dynamic year - Use flexbox layout to push footer to bottom of viewport - Footer displays 'Copyright © <year> Towerops' - Year updates automatically using Date.utc_today().year
78 lines
2.6 KiB
Elixir
78 lines
2.6 KiB
Elixir
defmodule ToweropsWeb.MarketingLayouts do
|
|
@moduledoc """
|
|
Marketing layouts for public-facing pages.
|
|
"""
|
|
use ToweropsWeb, :html
|
|
|
|
@doc """
|
|
Renders the marketing layout.
|
|
|
|
Use this for public-facing marketing pages.
|
|
|
|
## Examples
|
|
|
|
<MarketingLayouts.marketing flash={@flash}>
|
|
<h1>Marketing Content</h1>
|
|
</MarketingLayouts.marketing>
|
|
|
|
"""
|
|
attr :flash, :map, required: true, doc: "the map of flash messages"
|
|
|
|
slot :inner_block, required: true
|
|
|
|
def marketing(assigns) do
|
|
~H"""
|
|
<div class="bg-white">
|
|
<header class="py-10">
|
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<nav class="relative z-50 flex justify-between">
|
|
<div class="flex items-center md:gap-x-12">
|
|
<.link navigate={~p"/"} aria-label="Home">
|
|
<img src="/images/towerops_logo.png" alt="Towerops" class="w-48 h-auto sm:w-64" />
|
|
</.link>
|
|
</div>
|
|
<div class="flex items-center gap-x-5 md:gap-x-8">
|
|
<div class="hidden md:block">
|
|
<.link
|
|
navigate={~p"/users/log-in"}
|
|
class="inline-block rounded-lg px-2 py-1 text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900"
|
|
>
|
|
Sign in
|
|
</.link>
|
|
</div>
|
|
<.link
|
|
navigate={~p"/users/register"}
|
|
class="group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600"
|
|
>
|
|
<span>
|
|
Get started <span class="hidden lg:inline">today</span>
|
|
</span>
|
|
</.link>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
{render_slot(@inner_block)}
|
|
</main>
|
|
|
|
<footer class="bg-slate-50">
|
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div class="py-16">
|
|
<img src="/images/towerops_logo.png" alt="Towerops" class="mx-auto w-48 h-auto sm:w-64" />
|
|
</div>
|
|
<div class="flex flex-col items-center border-t border-slate-400/10 py-10 sm:flex-row-reverse sm:justify-between">
|
|
<div class="flex gap-x-6"></div>
|
|
<p class="mt-6 text-sm text-slate-500 sm:mt-0">
|
|
Copyright © {Date.utc_today().year} Towerops
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<Layouts.flash_group flash={@flash} />
|
|
"""
|
|
end
|
|
end
|