separate out marketing layouts
This commit is contained in:
parent
b3d2b95200
commit
23a0ba68b9
4 changed files with 81 additions and 74 deletions
|
|
@ -90,6 +90,7 @@ defmodule ToweropsWeb do
|
|||
# Common modules used in templates
|
||||
alias Phoenix.LiveView.JS
|
||||
alias ToweropsWeb.Layouts
|
||||
alias ToweropsWeb.MarketingLayouts
|
||||
|
||||
# Routes generation with the ~p sigil
|
||||
unquote(verified_routes())
|
||||
|
|
|
|||
|
|
@ -303,78 +303,6 @@ defmodule ToweropsWeb.Layouts do
|
|||
"""
|
||||
end
|
||||
|
||||
@doc """
|
||||
Renders the marketing layout.
|
||||
|
||||
Use this for public-facing marketing pages.
|
||||
|
||||
## Examples
|
||||
|
||||
<Layouts.marketing flash={@flash}>
|
||||
<h1>Marketing Content</h1>
|
||||
</Layouts.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 © 2025 Towerops. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<.flash_group flash={@flash} />
|
||||
"""
|
||||
end
|
||||
|
||||
@doc """
|
||||
Renders the admin layout.
|
||||
|
||||
|
|
|
|||
78
lib/towerops_web/components/marketing_layouts.ex
Normal file
78
lib/towerops_web/components/marketing_layouts.ex
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
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 © 2025 Towerops. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<Layouts.flash_group flash={@flash} />
|
||||
"""
|
||||
end
|
||||
end
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<Layouts.marketing flash={@flash}>
|
||||
<MarketingLayouts.marketing flash={@flash}>
|
||||
<!-- Hero Section -->
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-20 pb-16 text-center lg:pt-32">
|
||||
<h1 class="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-slate-900 sm:text-7xl">
|
||||
|
|
@ -210,4 +210,4 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layouts.marketing>
|
||||
</MarketingLayouts.marketing>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue