Foundations

<div class="grid gap-5">
  <%= lc_heading "Weekend in Kyoto", level: 2, size: :title %>
  <%= lc_heading "Shared expenses", level: 3, size: :heading %>
  <%= lc_heading "Dinner with friends", level: 4, size: :subheading %>
  <%= lc_text do %>Use <code>lc_stack</code> to keep related content together.<% end %>
  <%= lc_text "Add a receipt or a short note for your group.", size: :small, tone: :muted %>
  <%= lc_text "Updated a few minutes ago", size: :caption, tone: :muted %>
</div>

<div lang="ja" class="grid max-w-sm gap-4">
  <%= lc_heading "京都で過ごす週末、みんなの旅の記録", level: 3, size: :title %>
  <%= lc_text "宿泊費や食事代をまとめて記録。誰がいくら支払ったか、グループのみんなで確認できます。" %>
  <%= lc_text "レシートやメモを追加して、旅の思い出も一緒に残しましょう。", size: :small, tone: :muted %>
  <%= lc_text "最終更新：数分前", size: :caption, tone: :muted %>
</div>

<div class="grid gap-related">
  <%= lc_text "Product", size: :eyebrow, tone: :muted %>
  <%= lc_heading "Split costs with anyone", level: 3, size: :heading %>
</div>
<div lang="ja" class="grid gap-related">
  <%= lc_text "プロダクト", size: :eyebrow, tone: :muted %>
  <%= lc_heading "誰とでも費用を割り勘", level: 3, size: :heading %>
</div>

<%= lc_stack gap: :section, class: "w-full max-w-xl" do %>
  <%= lc_section title: "Recent expenses", actions: capture { lc_button("Add expense", icon: "plus", size: :sm) } do %>
    <%= lc_card do %>
      <%= lc_inline class: "flex-nowrap justify-between" do %>
        <%= lc_text "Dinner with friends" %>
        <%= lc_text "¥8,400", class: "shrink-0 tabular-nums" %>
      <% end %>
    <% end %>
    <%= lc_card do %>
      <%= lc_text "Train tickets" %>
    <% end %>
  <% end %>
  <%= lc_stack as: :section, gap: :heading do %>
    <%= lc_section_header do %>
      <%= lc_stack gap: :tight do %>
        <%= lc_heading "Members" %>
        <%= lc_text "Everyone who can see this workspace.", size: :small, tone: :muted %>
      <% end %>
    <% end %>
    <%= lc_card do %>
      <%= lc_inline do %>
        <%= lc_avatar "AK", class: "bg-primary" %>
        <%= lc_stack gap: :tight do %>
          <%= lc_text "Alex Kim" %>
          <%= lc_text "Joined today", size: :small, tone: :muted %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

<%= lc_container do %>
  <%= lc_stack gap: :section do %>
    <%= lc_heading "Plan your next trip", level: 2, size: :title %>
    <div class="grid min-w-0 gap-8 md:grid-cols-2">
      <%= lc_section title: "Travel details", level: 3 do %>
        <%= lc_card do %>
          <%= lc_stack do %>
            <%= lc_text "Kyoto weekend", size: :body %>
            <%= lc_text "Keep shared costs and travel notes together.", size: :small, tone: :muted %>
            <%= lc_inline do %>
              <%= lc_button "Invite friends", size: :sm %>
              <%= lc_button "View itinerary", variant: :ghost, size: :sm %>
            <% end %>
          <% end %>
        <% end %>
      <% end %>
      <%= lc_section title: "Shared costs", level: 3 do %>
        <%= lc_card do %>
          <%= lc_text "No expenses yet", size: :body %>
        <% end %>
      <% end %>
    </div>
  <% end %>
<% end %>

<%= lc_prose do %>
  <h2>Make room for the trip</h2>
  <p>A shared plan is easier to follow when each idea has room to breathe. Keep the essentials close and give a new topic a little more space.</p>
  <p>Start with <strong>one clear decision</strong>, name the plan <code>kyoto-weekend</code>, then <a href="#reading-next">choose what comes next</a>.</p>
  <ul>
    <li>Choose a place to stay.</li>
    <li>Set aside time for a slow morning.</li>
    <li>Leave an afternoon open.</li>
  </ul>
  <blockquote><p>The best part of a plan is the space it leaves for a surprise.</p></blockquote>
  <h3 id="reading-next">Ready to begin?</h3>
  <p>Buttons and other app controls can opt out of reading styles.</p>
  <div class="not-prose mt-5">
    <%= lc_button "Create a plan" %>
  </div>
<% end %>

<%= lc_prose lang: "ja" do %>
  <h2>旅の計画に、少しの余白を。</h2>
  <p>みんなで予定を考えるときは、大切なことから順番に決めていきましょう。読みやすい行間と段落の間隔が、長い文章をたどる手助けになります。</p>
  <h3>最初に決めておきたいこと</h3>
  <ul>
    <li>集合する場所と時間</li>
    <li>みんなで分ける費用</li>
    <li>自由に過ごす時間</li>
  </ul>
  <p>予定が変わったら、<a href="#reading-japanese-note">グループにひとこと</a>。少しの共有で、旅がもっと気軽になります。</p>
  <blockquote id="reading-japanese-note"><p>何もしない時間も、旅の楽しみのひとつです。</p></blockquote>
<% end %>

<%= lc_button "Hover or press", icon: "plus" %>
<%= lc_button "Secondary", variant: :secondary %>
<%= lc_icon_button "Add item", icon: "plus" %>

<%= lc_copy_button "Copy link", value: "https://ui.lostcoords.com", copied_label: "Link copied", reset_after: 2500 %>
<%= lc_copy_button "Copy link", value: "https://ui.lostcoords.com", icon_only: true, variant: :ghost %>