index.html

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
  <!--<![endif]-->
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Halstack</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta property="og:image" content="./images/halstack-share.png" />
    <meta
      property="og:description"
      content="Build incredible apps for your hypermedia APIs"
    />
    <meta
      property="og:url"
      content="https://dxc-technology.github.io/halstack/"
    />
    <meta property="og:title" content="Halstack" />
    <link rel="stylesheet" href="./css/main.css" />
    <link
      rel="icon"
      href="./images/favicon.png"
      type="image/gif"
      sizes="16x16"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&family=Work+Sans:wght@500;600&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="mockup">
      <img
        src="./images/halstack_mockup.svg"
        alt="Mockup showing Halstack potencial"
      />
    </div>
    <header>
      <img src="./images/halstack_logo.svg" alt="Halstack product logo" />
      <div class="intro">
        <h1>
          Build incredible Apps<br />
          for your hypermedia APIs <br />
        </h1>
        <a href="#halstack-intro">
          <button>Start using Halstack</button>
        </a>
      </div>
      <img src="./images/dxc_logo_new.png" alt="DXC Technology logo" />
    </header>
    <main>
      <div class="design-system">
        <a id="halstack-intro"
          ><h2>
            Halstack Design System
            <img
              src="./images/dslogo.svg"
              alt="Logo for Halstack design system"
            /></h2
        ></a>

        <p>
          Halstack Design System is a set of visual principles, guidelines, and
          tools aimed at helping designers and developers to build visually
          consistent and compelling API-driven User Experiences that adhere to
          our unique branded visual identity. Available as an Open Source
          project, it allows UX teams to manage branding and design of
          applications at scale thanks to a collection of reusable UI components
          for the latest Web development technologies. With advanced theming and
          configurability features, Halstack Design System allows designers and
          developers to create their own themes and build up new applications
          more easily, and at the same time leverage our usability,
          accessibility, layout, and responsiveness principles transparently.
        </p>
        <form action="https://developer.dxc.com/halstack">
          <button>Explore the Design System</button>
        </form>
        <div class="tools-container">
          <div>
            <h3>
              <img
                src="./images/guidelines-icon.png"
                alt="Representation icon for guidelines"
              />
              Guidelines
            </h3>
            <p>
              The design guidelines have been curated by our design team in
              order to help teams in building compelling and consistent User
              Experiences.
            </p>
            <a href="https://developer.dxc.com/halstack/10/principles/color/"
              >See guidelines and principles</a
            >
          </div>
          <div>
            <h3>
              <img
                src="./images/Uxpin.png"
                alt="UXPin icon for designer's tools"
              />
              Tools for designers
            </h3>
            <p>
              We are using UXPin as Design and Prototype tool. With Halstack-UXPin merge, designers can create fast prototypes by dragging and dropping the Halstack-coded components and use their API to configure the look and the behavior of each element.
            </p>
            <a href="./videos/Halstack Prototyping Library - Getting Started.mp4"
              >Watch overview video</a
            >
          </div>
          <div>
            <h3>
              <img src="./images/tools-icon.png" alt="Developer tools icon" />
              Tools for developers
            </h3>
            <p>
              Our developer tools enforce our UX guidelines and provide
              technical components for the latest Web development frameworks.
            </p>
            <a href="https://developer.dxc.com/design/tools"
              >See more about dev tools</a
            >
          </div>
        </div>
      </div>
      <div class="client">
        <h2>
          Halstack Client
          <img
            src="./images/clientlogo.svg"
            alt="Logo for Halstack design system"
          />
        </h2>
        <p>
          Halstack Client for Javascript enables developers to easily work with
          hypermedia APIs. This library features a set of functionalities aimed
          at facilitating the consumption of hypermedia REST resources and
          getting access to their properties dynamically, based on the HAL and
          JSON Hyperschema specifications.
        </p>
        <form action="https://github.com/dxc-technology/halstack-client">
          <button type="submit">Consume Hypermedia APIs</button>
        </form>
        <img
          src="./images/clientimg.svg"
          alt="Representation of Halstack Client"
        />
      </div>
      <div class="browser">
        <h2>
          Halstack Browser
          <img
            src="./images/browserlogo.svg"
            alt="Logo for Halstack design system"
          />
          <span class="experimental-badge">Outdated</span>
        </h2>
        <p>
          Halstack Browser is a React component that can be included in any
          React Web App and provides a visual mechanism to crawl and discover
          API resources and operations dynamically for hypermedia APIs. In
          contrary to other path-based approaches such as OpenAPI (where static
          specs are used to describe a list of pre-defined path resources and
          available operations) Halstack Browser allows both API consumers and
          producers work with auto-discoverable REST APIs.
        </p>
        <form action="https://hal.us.insurance.dxc.com/">
          <button type="submit">See Halstack Browser in action</button>
        </form>
        <img
          src="./images/browserimg.svg"
          alt="Representation of Halstack Browser"
        />
      </div>
      <div class="mantainers">
        <h2>Meet the Core Maintainers</h2>
        <div class="profiles">
          <div>
            <img src="https://github.com/raquelarrojo.png" alt="" />
            <h4>Raquel Arrojo</h4>
            <span
              ><a href="https://github.com/raquelarrojo" target="_blank"
                >raquelarrojo</a
              ></span
            >
          </div>
          <div>
            <img src="https://github.com/rconcepcion3.png" alt="" />
            <h4>Rafael Concepción</h4>
            <span
              ><a href="https://github.com/rconcepcion3" target="_blank"
                >rconcepcion3</a
              ></span
            >
          </div>
          <div>
            <img src="https://github.com/GomezIvann.png" alt="" />
            <h4>Iván Gómez</h4>
            <span
              ><a href="https://github.com/GomezIvann" target="_blank"
                >GomezIvann</a
              ></span
            >
          </div>
          <div>
            <img src="https://github.com/ThiyaDezine.png" alt="" />
            <h4>Thiyagarajan</h4>
            <span
              ><a href="https://github.com/ThiyaDezine" target="_blank"
                >ThiyaDezine</a
              ></span
            >
          </div>
          <div>
            <img src="https://github.com/jialecl.png" alt="" />
            <h4>Jiale Cheng</h4>
            <span
              ><a href="https://github.com/jialecl" target="_blank"
                >Jialecl</a
              ></span
            >
          </div>
          <div>
            <img src="https://github.com/jsuarezgonz.png" alt="" />
            <h4>Jairo Suárez</h4>
            <span
              ><a href="https://github.com/jsuarezgonz" target="_blank"
                >jsuarezgonz</a
              ></span
            >
          </div>
          <div>
            <img src="https://github.com/lcordobapuerto.png" alt="" />
            <h4>Lara Córdoba</h4>
            <span
              ><a href="https://github.com/lcordobapuerto" target="_blank"
                >lcordobapuerto</a
              ></span
            >
          </div>
          <div>
            <img src="https://github.com/kukoc.png" alt="" />
            <h4>Aitor Echevarría</h4>
            <span
              ><a href="https://github.com/kukoc" target="_blank"
                >kukoc</a
              ></span
            >
          </div>
        </div>
      </div>
    </main>
    <footer>
      <div class="visual-elements">
        <img
          src="./images/logo-footer.svg"
          alt="Halstack logo variation for footer"
        />
        <a href="https://github.com/dxc-technology/halstack">
          <img
            src="./images/github-footer.svg"
            alt="Github icon to access the repository"
          />
        </a>
      </div>
      <div class="navigation">
        <div>
          <div>
            <h5>Halstack Suite on GitHub</h5>
            <a href="https://github.com/dxc-technology/halstack-client"
              >Halstack Client</a
            >
            <a href="https://github.com/dxc-technology/halstack-browser"
              >Halstack Browser</a
            >
            <a href="https://github.com/dxc-technology/halstack-react"
              >Halstack React CDK</a
            >
            <a href="https://github.com/dxc-technology/halstack-react-hal"
              >Halstack React HAL Components</a
            >
          </div>
          <div>
            <h5>Issues and comments</h5>
            <a href="https://github.com/dxc-technology/halstack/issues/new"
              >Give us feedback!</a
            >
          </div>
          <div>
            <h5>Guidelines and documentation</h5>
            <a href="https://developer.dxc.com/apis">DXC API Guidelines</a>
            <a href="https://developer.dxc.com/design">DXC UX Guidelines</a>
          </div>
        </div>
      </div>
      <div class="dxc-reference">
        <img
          src="./images/dxc_logo_new.png"
          alt="DXC Technology logo"
          width="160"
          height="30"
        />
        <p>&#169; Halstack 2023</p>
      </div>
    </footer>
  </body>
</html>