feresaria/site/index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#10151c" />
  <meta name="description" content="Ferese is a configurable Wayland desktop." />
  <meta property="og:title" content="Ferese — Wayland desktop" />
  <meta property="og:description" content="A configurable Wayland desktop." />
  <meta property="og:type" content="website" />
  <meta property="og:image" content="https://ferese-wm.github.io/ferese/assets/screenshots/ferese-main-hero.png" />
  <meta name="twitter:card" content="summary_large_image" />
  <title>Ferese — Wayland desktop</title>
  <link rel="icon" href="assets/branding/ferese-blue-flat.svg" type="image/svg+xml" />
  <link rel="icon" href="assets/favicon.ico" sizes="16x16 32x32 48x48" />
  <link rel="icon" href="assets/favicon-32.png" type="image/png" sizes="32x32" />
  <link rel="stylesheet" href="styles.css?v=figtree" />
</head>

<body>
  <a class="skip" href="#main">Skip to content</a>
  <header class="site-header">
    <div class="header-inner">
      <a class="brand" href="./" aria-label="Ferese home">
        <img class="brand-icon" src="assets/branding/ferese-blue-dark.svg" width="1024" height="1024" alt="" />
        <span class="brand-name">Ferese</span>
      </a>
      <nav aria-label="Main navigation">
        <a href="./" aria-current="page">Overview</a><a href="docs/screenshots.html">Screenshots</a><a
          href="docs/">Documentation</a><a href="https://github.com/ferese-wm/ferese">GitHub <svg class="link-arrow"
            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
            stroke-linejoin="round" aria-hidden="true" focusable="false">
            <path d="M7 17 17 7M7 7h10v10" />
          </svg></a>
      </nav>
    </div>
  </header>
  <main id="main" class="simple-home">
    <section class="product-intro page-width">
      <img class="intro-icon" src="assets/branding/ferese-blue-dark.svg" width="1024" height="1024" alt="" />
      <h1 class="product-tagline">
        A configurable Wayland desktop.
      </h1>
      <p class="product-description">
        Ferese combines a window manager and desktop shell
        with one configuration.
      </p>
      <div class="product-links">
        <a class="button" href="docs/installation.html">Install Ferese</a>
        <a class="button secondary" href="docs/">Documentation</a>
        <a class="source-link" href="https://github.com/ferese-wm/ferese">Source code <svg class="link-arrow"
            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
            stroke-linejoin="round" aria-hidden="true" focusable="false">
            <path d="M7 17 17 7M7 7h10v10" />
          </svg></a>
      </div>
    </section>
    <figure class="product-screenshot page-width">
      <a href="assets/screenshots/ferese-main-hero.png" aria-label="View the full-resolution Ferese desktop screenshot">
        <img src="assets/screenshots/ferese-main-hero.png" width="2880" height="1800"
          alt="Ferese Blue desktop with Settings, Control Center and the previous default wallpaper" fetchpriority="high" />
      </a>
      <figcaption>
        Ferese Blue with Settings, Control Center, and the previous default wallpaper.
      </figcaption>
    </figure>
    <section class="product-features page-width" aria-label="Features">
      <article>
        <h2>Window layouts</h2>
        <p>
          Scrolling columns, tree tiling, floating windows, and a workspace
          overview. Use keyboard shortcuts or gestures to move around.
        </p>
        <a href="docs/configuration.html#layout">Configure layouts →</a>
      </article>
      <article>
        <h2>Desktop tools</h2>
        <p>
          A menu bar, Control Center, Settings, notifications, and desktop widgets.
        </p>
        <a href="docs/why-ferese.html">Explore Ferese →</a>
      </article>
      <article>
        <h2>Appearance</h2>
        <p>
          Choose your theme, wallpaper, and colors through Settings or a KDL config, and see changes as you make them.
        </p>
        <a href="docs/configuration.html#appearance">Customize Ferese →</a>
      </article>
    </section>
    <section class="product-motion page-width" aria-labelledby="continuum-heading">
      <h2 id="continuum-heading">Continuum motion</h2>
      <p>Continuum carries your gesture’s momentum into workspace transitions and keeps motion continuous when you change direction. Adjust spring response and speed to your taste, or enable reduced motion.</p>
      <a href="docs/animation-model.html">Explore the animation model →</a>
    </section>
    <section class="product-getting-started page-width">
      <h2>Getting started</h2>
      <p>
        The <a href="docs/installation.html">installation guide</a> covers
        dependencies, login, updates, and recovery. You can also
        <a href="docs/installation.html#preview-and-logs">preview Ferese</a>
        inside an existing Wayland session before installing.
      </p>
      <p>
        Share a display with recording and conferencing apps through Ferese’s
        native screen-sharing portal. Choose what to share and stop at any time.
        See <a href="docs/screen-sharing.html">screen sharing and recording</a>
        for setup and limits.
      </p>
      <p>
        Find <a href="docs/shortcuts.html">shortcuts and mouse actions</a> in the handbook. Development happens
        <a href="https://github.com/ferese-wm/ferese">on GitHub</a>.
      </p>
    </section>
  </main>
  <footer class="site-footer page-width">
    <a class="brand" href="./" aria-label="Ferese home">
      <img class="brand-icon" src="assets/branding/ferese-blue-dark.svg" width="1024" height="1024" alt="" />
    </a>
    <p>A Wayland desktop with scrolling layouts.</p>
    <a href="docs/">Read the handbook <svg class="link-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor"
        stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
        <path d="M7 17 17 7M7 7h10v10" />
      </svg></a>
  </footer>
</body>

</html>