Packages
moon
2.90.0
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/main_page.ex
defmodule MoonWeb.Pages.MainPage do
@moduledoc false
use MoonWeb, :live_view
alias MoonWeb.Components.Page
alias MoonWeb.Components.Facing.ForDesigners
alias MoonWeb.Components.Facing.ForDevelopers
alias MoonWeb.Components.Facing.Updates
alias MoonWeb.Components.Facing.Future
alias MoonWeb.Components.Facing.Contributors
alias MoonWeb.Components.Facing.MoonEarth
alias Moon.Design.Tag
alias Moon.Design.Button
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@direction}>
<div class="relative z-5 flex flex-col gap-12">
<Tag size="2xs" class="self-start tracking-[1px]">
Open Source
</Tag>
<div class="flex flex-col gap-16">
<div class="relative z-30 flex flex-col items-start gap-6">
<h1 class="text-moon-64 font-semibold">Moon design system.</h1>
<p class="text-moon-24 max-w-screen-sm">
Moon is Yolo Group product design system that helps us maintain the
integrity of their user experience and optimize design and development
resources.
</p>
<p class="flex items-center gap-2 text-moon-16 max-w-screen-sm font-semibold">
<span>Try out Moon DS for
</span>
<Button as="a" size="sm" href="https://moon.io/" target="_blank" rel="noreferrer">React</Button>
</p>
</div>
<div class="flex flex-col lg:flex-row gap-4 3xl:fixed 3xl:top-12 ltr:3xl:right-12 rtl:3xl:left-12 z-30">
<ForDevelopers />
<ForDesigners />
</div>
<Updates />
<Future />
<Contributors />
</div>
</div>
<MoonEarth />
</Page>
"""
end
end