/* ── Hero ───────────────────────────────────────────────────────────────── */

  /* Weighted to the top. A landing page opens on nothing but the claim, and

     equal padding above and below sets it mid-band, where it reads as one item

     in a list rather than as the first thing on the page. */

  .hero {

    padding-block: 128px 64px;

  }

  @media (min-width: 640px) {

    .hero {

      padding-block: 160px 96px;

    }

  }

  @media (min-width: 1024px) {

    .hero {

      padding-block-start: 192px;

    }

  }

  .hero__lede {

    display: flex;

    max-width: 48rem;

    flex-direction: column;

    align-items: center;

    gap: 24px;

  }

  .hero__title {

    max-width: 20ch;

    color: var(--text-primary);

    font-size: clamp(2.5rem, 1.4rem + 5vw, 5.5rem);

    font-weight: 600;

    letter-spacing: -0.035em;

    line-height: 1.05;

    font-size: clamp(2.25rem, 1.45rem + 2.6vw, 3.75rem);

    font-weight: 500;

    letter-spacing: -0.025em;

    line-height: 1.1;

    text-wrap: balance;

  }

  /* Its own line, always. The second tone is the object of the sentence, and a

     headline that breaks it mid-phrase on one viewport and not another reads

     as a wrap rather than as a decision. */

  .hero__title-muted {

    display: block;

    color: var(--text-muted);

  }

  .hero__description {

    max-width: 46rem;

    max-width: 36rem;

    color: var(--text-muted);

    font-size: clamp(1rem, 0.94rem + 0.3vw, 1.25rem);

    line-height: 1.55;

    font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);

    line-height: 1.625;

    text-wrap: balance;

  }

    gap: 12px;

  }

  /* The frame sets its own width from the command inside it, so it ends where

     the command does rather than spanning the measure. It still has to be able

     to shrink: on a narrow viewport the command scrolls inside the frame. */

  .hero__command {

    max-width: 100%;

  }

  /* Tight to the command it qualifies rather than on the lede's 24px rhythm:

     it is a footnote to the frame above it, not the next thing in the band. */

  .hero__command + .hero__note {

    margin-block-start: -12px;

  }

  .hero__note {

    color: var(--text-dim);

    font-size: 0.75rem;

  }

  .hero__links {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 4px;

  }

  /* Quieter than a secondary action and quieter than body text: these are for

     a reader the band did not answer, and at full contrast they compete with

     the command, which is the one thing the band is asking for. */

  .hero__link.btn {

    gap: 2px;

    border-radius: 999px;

    color: var(--text-muted);

    font-weight: 500;

  }

  .hero__link.btn:hover {

    color: var(--text-primary);

  }

  .hero__link .icon {

    color: inherit;

    opacity: 0.7;

  }

  /* ── Announcement pill ──────────────────────────────────────────────────── */

  .announce {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    border: 1px solid var(--line-soft);

    border-radius: 999px;

    padding: 5px 5px 5px 10px;

    background: color-mix(in oklab, var(--ink-surface) 60%, transparent);

    backdrop-filter: blur(6px);

    text-decoration: none;

    transition:

      border-color var(--motion-fast) var(--ease),

      background-color var(--motion-fast) var(--ease);

  }

  .announce:hover {

    border-color: var(--line-strong);

    background: var(--ink-surface);

  }

  /* The band's only accent. It is what makes the pill findable before it is

     read, which is the whole reason an announcement sits above a headline. */

  .announce__tag {

    display: inline-flex;

    align-items: center;

    border: 1px solid color-mix(in oklab, var(--accent-bright) 45%, transparent);

    border-radius: 999px;

    padding: 2px 7px;

    color: var(--accent-bright);

    font-size: 0.625rem;

    font-weight: 600;

    letter-spacing: 0.06em;

    line-height: 1;

    text-transform: uppercase;

  }

  .announce__text {

    font-size: 0.8125rem;

    letter-spacing: -0.01em;

    white-space: nowrap;

  }

  .announce__lead {

    color: var(--text-primary);

    font-weight: 600;

  }

  .announce__separator {

    color: var(--text-dim);

  }

  .announce__detail {

    color: var(--text-muted);

    transition: color var(--motion-fast) var(--ease);

  }

  .announce:hover .announce__detail {

    color: var(--text-body);

  }

  .announce__glyph {

    display: inline-flex;

    width: 24px;

    height: 24px;

    flex-shrink: 0;

    align-items: center;

    justify-content: center;

    border-radius: 999px;

    background: var(--wash-hover);

    color: var(--icon-tertiary);

    font-size: 0.625rem;

    transition:

      background-color var(--motion-fast) var(--ease),

      color var(--motion-fast) var(--ease);

  }

  .announce:hover .announce__glyph {

    background: var(--wash-selected);

    color: var(--icon-primary);

  }

  /* On a narrow viewport the detail is the half that goes: the tag and the

     claim are the announcement, and the rest is elaboration that would

     otherwise push the pill wider than the screen. */

  @media (max-width: 480px) {

    .announce__separator,

    .announce__detail {

      display: none;

    }

  }

  /* ── Install command ────────────────────────────────────────────────────── */

  .install-command {

    max-width: 100%;

    overflow: hidden;

    border: 1px solid var(--line);

    border-radius: var(--radius-xl);

    transition: border-color var(--motion-fast) var(--ease);

  }

  .install-command:hover {

    border-color: var(--line-strong);

  }

  .install-command__button {

    position: relative;

    display: flex;

    width: 100%;

    min-width: 0;

    align-items: center;

    padding: 12px 16px;

    cursor: pointer;

    font-family: var(--font-mono);

    font-size: 0.8125rem;

    text-align: left;

  }

  @media (min-width: 640px) {

    .install-command__button {

      font-size: 0.875rem;

    }

  }

  /* Scrolls rather than wraps, and fades out under the glyph, so a command too

     long for the viewport reads as continuing rather than as truncated. */

  .install-command__text {

    width: 100%;

    min-width: 0;

    overflow-x: auto;

    /* Wider than the fade, so a command that fits ends before the gradient

       starts. At 28px the tail of every command was dimmed as though it had

       been truncated, when nothing was being cut off at all. */

    padding-inline-end: 56px;

    color: var(--text-body);

    scrollbar-width: none;

    white-space: nowrap;

    mask-image: linear-gradient(to right, black calc(100% - 48px), transparent calc(100% - 32px));

  }

  .install-command__text::-webkit-scrollbar {

    display: none;

  }

  .install-command__prompt {

    margin-inline-end: 0.5ch;

    color: var(--text-dim);

  }

  .install-command__glyph {

    position: absolute;

    inset-inline-end: 16px;

    display: inline-flex;

    color: var(--icon-tertiary);

    transition: color var(--motion-fast) var(--ease);

  }

  .install-command__button:hover .install-command__glyph {

    color: var(--icon-primary);

  }

  .install-command__button[data-copied="true"] .install-command__glyph {

    color: var(--success);

  }

  .install-command__done,

  .install-command__button[data-copied="true"] .install-command__idle {

    display: none;

  }

  .install-command__button[data-copied="true"] .install-command__done {

    display: inline-flex;

  }

  .hero__figure {

    position: relative;

    width: 100%;

          source: "OpenAgentsWeb.UI.Landing.hero/1",

          summary: "Eyebrow, headline, prose, actions, and a lit figure."

        },

        %{

          slug: "landing-announce",

          title: "Announcement",

          icon: "notification-bell",

          source: "OpenAgentsWeb.UI.Landing.announce/1",

          summary: "Tag, claim, and detail in one pill above a headline."

        },

        %{

          slug: "landing-install-command",

          title: "Install command",

          icon: "terminal",

          source: "OpenAgentsWeb.UI.Landing.install_command/1",

          summary: "One shell command, framed, copied when pressed."

        },

        %{

          slug: "landing-glow",

          title: "Glow",

  The figure is a slot rather than an image attribute, so a page can put a live

  surface in the frame instead of a screenshot of one.

  `title_muted` is a second headline line in the muted tier. Two tones over two

  lines is what separates the claim from its object -- the setup is not the

  point, the name is -- and doing it with an attribute keeps the break out of

  the caller's markup, where a `<br>` would fight `text-wrap: balance`.

  Below the actions sit three quieter rows, in the order a reader needs them: a

  `command` to run, a `note` qualifying it, and `links` to what the band did

  not say. Each is a slot rather than an attribute because all three carry

  markup -- a copy control, an emphasis, a set of destinations.

  `rule` passes through, because whether a hero closes with a hairline depends

  on what follows it: a band that opens straight into a section of its own

  needs the division, and one whose next band is a figure does not.

  """

  attr :title, :string, required: true

  attr :title_muted, :string, default: nil, doc: "a second headline line, in the muted tier"

  attr :description, :string, default: nil

  attr :rule, :boolean, default: false, doc: "draw the closing hairline"

  attr :class, :any, default: nil

  slot :eyebrow

  slot :actions

  slot :command, doc: "one command to run, usually install_command/1"

  slot :note, doc: "a line qualifying the command"

  slot :links, doc: "quiet destinations, set beneath everything else"

  slot :figure

  def hero(assigns) do

    ~H"""

    <.section class={["hero", @class]} rule={false}>

    <.section class={["hero", @class]} rule={@rule}>

      <%!-- The lede's own light. This used to live inside the figure block, so

      commenting the figure out took the glow with it and left the headline

      sitting on flat ink. It belongs to the words. --%>

      <div class="hero__lede">

        <div :if={@eyebrow != []} class="hero__eyebrow appear">{render_slot(@eyebrow)}</div>

        <h1 class="hero__title appear">{@title}</h1>

        <h1 class="hero__title appear">

          {@title}<span :if={@title_muted} class="hero__title-muted">{@title_muted}</span>

        </h1>

        <p :if={@description} class="hero__description appear appear--delay-1">

          {@description}

        </p>

        <div :if={@actions != []} class="hero__actions appear appear--delay-2">

          {render_slot(@actions)}

        </div>

        <div :if={@command != []} class="hero__command appear appear--delay-2">

          {render_slot(@command)}

        </div>

        <p :if={@note != []} class="hero__note appear appear--delay-3">{render_slot(@note)}</p>

        <div :if={@links != []} class="hero__links appear appear--delay-3">

          {render_slot(@links)}

        </div>

      </div>

      <div :if={@figure != []} class="hero__figure">

    """

  end

  @doc """

  A pill announcing one thing, above a hero's headline.

  Three registers on one line -- a tag, the claim, a detail -- because an

  announcement set at a single weight is indistinguishable from a caption. The

  tag carries the only accent colour in the band, which is what makes the pill

  findable before it is read.

  It is a link. A pill that announces something and then does nothing when

  pressed spends a reader's attention and returns none of it, so `navigate`,

  `patch`, or `href` is required.

  """

  attr :tag, :any, default: "New", doc: "the leading badge; nil to omit"

  attr :lead, :string, required: true, doc: "what is being announced"

  attr :detail, :string, default: nil, doc: "the quieter half of the line"

  attr :glyph, :any, default: "play-sm", doc: "the trailing glyph; nil to omit"

  attr :class, :any, default: nil

  attr :rest, :global, include: ~w(navigate patch href target rel)

  def announce(assigns) do

    ~H"""

    <.link class={["announce", @class]} {@rest}>

      <span :if={@tag} class="announce__tag">{@tag}</span>

      <span class="announce__text">

        <span class="announce__lead">{@lead}</span><span

          :if={@detail}

          class="announce__separator"

          aria-hidden="true"

        >&nbsp;&bull;&nbsp;</span><span :if={@detail} class="announce__detail">{@detail}</span>

      </span>

      <span :if={@glyph} class="announce__glyph" aria-hidden="true">

        <UI.icon name={@glyph} />

      </span>

    </.link>

    """

  end

  @doc """

  One shell command, framed, and copied to the clipboard when pressed.

  The whole frame is the control rather than a button beside it: the command is

  not there to be read character by character, it is there to be taken, and a

  small target next to a long piece of text asks the reader to aim at the

  smaller of the two.

  A command too long for the viewport scrolls inside the frame and fades out

  under the glyph rather than wrapping, so the band keeps one line of monospace

  at every width. The confirmation lives on the element as `data-copied`,

  because it is presentational and per-visitor and the server has no stake in

  it.

  """

  attr :id, :string, required: true

  attr :command, :string, required: true

  attr :prompt, :string, default: "$", doc: "the shell prompt drawn before the command"

  attr :label, :string, default: "Copy the install command"

  attr :class, :any, default: nil

  def install_command(assigns) do

    ~H"""

    <div class={["install-command", @class]}>

      <button

        id={@id}

        type="button"

        class="install-command__button"

        data-copied="false"

        data-copy-text={@command}

        aria-label={@label}

        phx-hook=".CopyCommand"

      >

        <code class="install-command__text">

          <span class="install-command__prompt" aria-hidden="true">{@prompt}</span>{@command}

        </code>

        <span class="install-command__glyph" aria-hidden="true">

          <UI.icon name="copy" class="install-command__idle" />

          <UI.icon name="check" class="install-command__done" />

        </span>

      </button>

    </div>

    <script :type={Phoenix.LiveView.ColocatedHook} name=".CopyCommand">

      export default {

        mounted() {

          this.el.addEventListener("click", async () => {

            try {

              await navigator.clipboard.writeText(this.el.dataset.copyText)

            } catch (_error) {

              return

            }

            this.el.dataset.copied = "true"

            clearTimeout(this.resetTimer)

            this.resetTimer = setTimeout(() => {

              this.el.dataset.copied = "false"

            }, 1600)

          })

        },

        destroyed() {

          clearTimeout(this.resetTimer)

        }

      }

    </script>

    """

  end

  @doc """

  A grid of short capability statements.

          </:figure>

        </Landing.hero>

      </div>

      <p class="text-sm text-base-content/60">

        A second headline tone, a command to run, a note qualifying it, and quiet links

        under everything else. The muted line always breaks on its own, so the split

        between the claim and its object is a decision rather than a wrap.

      </p>

      <div class="demo-frame">

        <Landing.hero

          title="Introducing"

          title_muted="Coder."

          description="Your all-in-one coding agent."

        >

          <:eyebrow>

            <Landing.announce lead="Coder is here" detail="Install it in one command" href="#" />

          </:eyebrow>

          <:command>

            <Landing.install_command

              id="demo-hero-install-command"

              command="curl -fsSL https://openagents.com/install.sh | sh"

            />

          </:command>

          <:note>Every new account starts with $20 of credit.</:note>

          <:links>

            <UI.button href="#" variant={:ghost} size={:sm} class="hero__link">

              Read the docs <UI.icon name="chevron-right" />

            </UI.button>

            <UI.button href="#" variant={:ghost} size={:sm} class="hero__link">

              Changelog <UI.icon name="chevron-right" />

            </UI.button>

          </:links>

        </Landing.hero>

      </div>

    </div>

    """

  end

  defp component_demo(%{item: %{slug: "landing-announce"}} = assigns) do

    ~H"""

    <div class="space-y-3">

      <p class="text-sm text-base-content/60">

        Three registers on one line — a tag, the claim, a detail — because an

        announcement set at a single weight is indistinguishable from a caption. The tag

        carries the band's only accent, which is what makes the pill findable before it

        is read. Below 480px the detail drops rather than widening the pill past the

        screen.

      </p>

      <div class="demo-frame flex flex-wrap items-center justify-center gap-3">

        <Landing.announce lead="Coder is here" detail="Install it in one command" href="#" />

        <Landing.announce tag="Beta" lead="Computers" glyph={nil} href="#" />

      </div>

    </div>

    """

  end

  defp component_demo(%{item: %{slug: "landing-install-command"}} = assigns) do

    ~H"""

    <div class="space-y-3">

      <p class="text-sm text-base-content/60">

        The whole frame is the control, not a button beside it: the command is there to

        be taken rather than read, and a small target next to a long piece of text asks

        the reader to aim at the smaller of the two. A command wider than the frame

        scrolls and fades out under the glyph instead of wrapping.

      </p>

      <div class="demo-frame flex justify-center">

        <Landing.install_command

          id="demo-install-command"

          command="curl -fsSL https://openagents.com/install.sh | sh"

        />

      </div>

    </div>

    """

  end

  alias OpenAgentsWeb.UI.Landing

  @repo "openagents.com"

  # The one line the landing page asks a reader to run. It is the command

  # `priv/docs/install-cli.md` documents and the script

  # `priv/static/install.sh` serves, so the page cannot advertise an installer

  # this site does not hand out.

  @install_command "curl -fsSL https://openagents.com/install.sh | sh"

  @feed_limit 8

  @project_limit 6

  @post_limit 6

       |> assign(:changed_repositories, MapSet.new())

       |> assign_dashboard()}

    else

      {:ok, assign(socket, :device_user_code, device_user_code(params))}

      {:ok,

       socket

       |> assign(:device_user_code, device_user_code(params))

       |> assign(:install_command, @install_command)}

    end

  end

      <div class="landing-page">

        <Landing.layout_lines />

        <%!-- The band leads with the product a reader can have in one command,

        not with the platform behind it. The install line is the only action

        here on purpose: signing in is what the command bar is for, and a hero

        that offers two ways to start makes the reader choose before they know

        enough to choose well.

        It closes with a rule rather than running straight into the feature

        grid, so the claim and the way to act on it read as one band. --%>

        <Landing.hero

          title="The Agent Forge"

          description="Purpose-built for planning and shipping issues. Designed for the agent era."

          title="Introducing"

          title_muted="Coder."

          description="Your all-in-one coding agent."

          rule

        >

          <:actions>

            <.github_login id="home-cta-signin" size={:lg} />

            <%!-- Quieter than the action beside it. `variant` defaults to

            `:primary`, so two filled buttons sat side by side stating that

            both were the thing to do, which leaves a reader picking rather

            than proceeding. --%>

            <.button navigate={~p"/docs"} variant={:secondary} size={:lg}>

              Read the docs

          <:eyebrow>

            <Landing.announce

              lead="Coder is here"

              detail="Install it in one command"

              navigate={~p"/coder"}

            />

          </:eyebrow>

          <:command>

            <Landing.install_command id="home-install-command" command={@install_command} />

          </:command>

          <:note>Every new account starts with $20 of credit.</:note>

          <:links>

            <.button navigate={~p"/docs"} variant={:ghost} size={:sm} class="hero__link">

              Read the docs <.icon name="chevron-right" />

            </.button>

          </:actions>

            <.button navigate={~p"/changelog"} variant={:ghost} size={:sm} class="hero__link">

              Changelog <.icon name="chevron-right" />

            </.button>

            <.button

              navigate={~p"/OpenAgentsInc/openagents.com"}

              variant={:ghost}

              size={:sm}

              class="hero__link"

            >

              Open source <.icon name="chevron-right" />

            </.button>

          </:links>

          <%!-- Commented out rather than deleted: the frame is right, what goes

          in it is not. An empty browser chrome captioned with the domain shows

  use OpenAgentsWeb.ConnCase

  test "GET /", %{conn: conn} do

    conn = get(conn, ~p"/")

    assert html_response(conn, 200) =~ "The Agent Forge"

    html = conn |> get(~p"/") |> html_response(200)

    assert html =~ "Introducing"

    assert html =~ "Coder."

    assert html =~ "Your all-in-one coding agent."

  end

  test "the landing page sells the forge, not a CLI install", %{conn: conn} do

  test "the landing page leads with the install command", %{conn: conn} do

    html = conn |> get(~p"/") |> html_response(200)

    # The landing page carried an install command under the hero. It went

    # through two wrong answers before this one: `curl … | bash`, withdrawn

    # along with the binary release it installed, and then `npm i -g …`, which

    # was a substitution when the instruction had been to remove it. The

    # homepage is not where the CLI gets sold.

    refute html =~ ~s(id="home-install")

    refute html =~ "install.sh"

    # The homepage sells Coder, and the whole of the pitch a reader has to act

    # on is one line they can paste. It is the same command

    # `priv/docs/install-cli.md` documents and the same script this site

    # serves, so a reader who copies it from the hero and a reader who copies

    # it from the docs run the same installer.

    assert html =~ ~s(id="home-install-command")

    assert html =~ "curl -fsSL https://openagents.com/install.sh | sh"

    # `npm i -g @openagentsinc/cli` was a previous answer and is not one now:

    # there is no npm package, and a homepage that prints an install command

    # nothing publishes is worse than one that prints none.

    refute html =~ "npm i -g"

  end

end

    response = get(conn, ~p"/")

    html = html_response(response, 200)

    # OpenAgents deliberately ships its own landing page ("The Agent Forge"),

    # not Sarah's. These assertions match the current product identity.

    assert html =~ "The Agent Forge"

    # OpenAgents deliberately ships its own landing page, not Sarah's. The

    # band above the fold is the Coder pitch; these assertions match the

    # current product identity.

    assert html =~ "Introducing"

    assert html =~ "Your all-in-one coding agent."

    assert html =~ ~s(action="/auth/github?github_tools=enabled")

    assert html =~ "Log in with GitHub"

    # Someone who has signed in has already been sold. The same route shows the

    # state of the work instead: open issues, projects, and what shipped.

    refute html =~ "The Agent Forge"

    refute html =~ "Your all-in-one coding agent."

    assert html =~ "Open issues"

    assert html =~ "Latest from the changelog"

    assert html =~ ~s(class="dashboard")