Packages
moon
2.90.4
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon_web/pages/manifest_page.ex
defmodule MoonWeb.Pages.ManifestPage do
@moduledoc false
use MoonWeb, :live_view
alias MoonWeb.Components.LargeLogo
alias MoonWeb.Components.Page
alias MoonWeb.Components.ManifestCard
alias MoonWeb.Components.Facing.SameDifferentSignature
data(breadcrumbs, :any,
default: [
%{
to: "/manifest",
name: "Manifest"
}
]
)
def render(assigns) do
~F"""
<Page theme_name={@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<div class="relative text-bulma">
<div class="absolute z-10 ltr:left-0 rtl:right-0 top-0">
<LargeLogo class="h-6 w-[6.5rem]" />
</div>
<div class="relative z-10 max-w-md">
<SameDifferentSignature />
</div>
</div>
<div class="relative z-10 grow flex flex-col xl:flex-row gap-12">
<h2 class="xl:self-end text-moon-72 font-medium text-bulma">Why?</h2>
<div class="grid 2xl:grid-cols-3 xl:grid-cols-2 gap-6 relative">
<div class="flex flex-col justify-start gap-6">
<ManifestCard
title="Consistent among different brands"
content_items={[
~c"Same interaction and UI among different modules and sections (e.g. Cashier, Sidebar, Reg, Inputs etc)",
~c"Theming"
]}
is_highlighted
/>
<ManifestCard
title="Validating ideas/hypotheses for stakeholders"
content_items={[
~c"You can build your own UI app (Rapid Proto) faster and not from scratch",
~c"Benefit for hackathons",
~c"Quality"
]}
/>
</div>
<div class="flex flex-col justify-start gap-6">
<ManifestCard
title="Reducing development costs"
content_items={[
"Devs from different teams don't need to implement the elements provided by Moon DS",
~c"There will be less time spent on discussions/alignment between devs and design",
"Designers don't need to create new elements for every project/task",
~c"Well-documented components library",
~c"Avoiding mistakes and bugs"
]}
/>
<ManifestCard
title="Performance"
content_items={[
~c"Best practices across different brands",
~c"Lightweight (Less code = more performance)"
]}
/>
</div>
<div class="flex flex-col justify-start">
<ManifestCard
title="Faster UI development"
content_items={[
~c"One place for all UI components (Source of truth)",
~c"Consistent icons",
~c"Non-frontend developers could build nice UI using Moon DS"
]}
/>
</div>
</div>
</div>
<img
class="hidden xl:block fixed -top-56 -end-56 w-[650px] 2xl:-top-72 2xl:-end-72 2xl:w-[892px]"
src="/moon/assets/images/facing/moon.webp"
alt="Moon"
/>
</Page>
"""
end
end