/ Layout
= extend('/slm/layouts/home')

/ Partials
= partial('/slm/partials/head.mixin.slm')

/ Content blocks
= content('head')
  = mixin('head')

= content('content')
  / div class='py-3 wrap'
  /   - alert = {class: 'c-alert-status-primary', body: `<p>The ${this.package.nice} is currently a work-in-progress. Please reach out to products@nycopportunity.nyc.gov with any questions.</p>`}
  /   == this.include('/components/alert/alert');

  header class='py-8'
    div class='layout-content mx-auto py-8'
      div class='wrap py-6'
        div class='text-center tablet:text-start tablet:flex justify-center items-center mb-6'
          svg style='width: 327px; height: 111px;' role='img'
            title New York City
            use href='#logo-nyc'

          h1 class='jumbo m-0 tablet:pis-2 tablet:mis-3 tablet:border-l-4 font-nyc' style='font-weight: 600; line-height: 1em;'
            div Opportunity
            div class='text-brand' Standard

        p
          | <b>${this.package.description}</b> It is ideally suited for building catalogs of City services and online applications, providing simple and flexible CSS and JavaScript-based components and utilities for building user interfaces quickly and easily.

        p class='text-center py-2'
          a class='btn btn-large btn-primary inline-block' href='#browse-the-patterns' Browse the Patterns

        p class='text-center'
          a class='link-icon' href='${this.package.repository.url}/tree/v${this.package.version}' target='_blank'
            svg aria-hidden='true' class='icon icon-ui'
              use href='#lucide-github'

            span v${this.package.version}

  main#main-content role='main'
    section#browse-the-patterns class='page-max wrap tablet:grid grid-cols-5 gap-1 tablet:gap-2'
      - nav = {tabindex: false, class: {item: 'flex px-1 py-1', heading: 'block border-b border-scale-3 mt-4 mb-1 px-1 pb-2'}};
      = partial('/slm/partials/nav.slm');

    section class='py-6'
      div class='layout-content mx-auto py-6'
        div class='wrap'
          h2 class='text-center mt-0' Installation

          p
            | Installing via <a href="https://www.npmjs.com/">NPM</a> will store ${this.package.nice} source and distribution files in your project's <b>node_modules</b> directory under <b>${this.package.name}</b>.

          div class='tablet:grid tablet:grid-cols-3 gap-1 mb-2'
            div class='code-block col-span-2 m-0 mb-1'
              input value='npm install ${this.package.name}' class='font-code text-code p-3 bg-transparent border-none w-full' data-copy-target='installation'

            button class='btn btn-large px-0 w-full mb-1' data-js='copy' data-copy='installation'
              svg class='icon-ui-copy icon-3 mie-1' aria-hidden='true'
                use href='#lucide-copy'

              span Copy

          p Source; ES (JavaScript), Sass (stylesheet), and uncompressed SVGs will be in the <b>src/</b> directory. Distribution; concatenated JavaScript, CSS stylesheets, and optimized SVGs and SVG sprites will be in the <b>dist/</b> directory. Further integration details can be found in the installation guide.

          p class='text-center'
            a class='btn btn-large btn-primary inline-block' href='installation' Read the installation guide

    section class='py-6'
      div class='layout-content mx-auto py-6'
        div class='wrap'
          h2 class='text-center mt-0' About

          p The ${this.package.nice} was created by leveraging learnings from building and maintaining pattern libraries for the NYC Opportunity's portfolio of <a href="https://www.nyc.gov/site/opportunity/portfolio/products.page" target="_blank" rel="noopener nofollow">digital products</a>. It uses a custom built User Interface (UI) library combined with usability and usage guidance from the <a href="https://designsystem.digital.gov" target="_blank" rel="noopener nofollow">U.S. Web Design System</a> to create a tailored experience for people looking to access public services.

          p The ${this.package.nice} is built using the <a href="https://nycopportunity.github.io/patterns-framework/" target="_blank" rel="noopener nofollow">NYCO Patterns Framework</a>; a front-end framework for creating and maintaining design pattern libraries.

    section class='py-6'
      div class='layout-content mx-auto py-6'
        div class='wrap'
          h2 class='text-center mt-0' Figma

          p
            | The <a href="${this.package.cdn.figma}" target="_blank" rel="noopener nofollow">Opportunity Standard Figma file</a> contains reusable components for creating mockups and prototypes in Figma.

          iframe class='aspect-video border-4 border-scale-3 block w-full' allowfullscreen='true' src='${this.package.cdn.figmaEmbed}'


= content('scripts')