hyprland-website/views/home.ejs

<div class="top" id="top">
  <div class="text">
    <h2 id="welcome">Welcome to Hyprland!</h2>
    <p>
      A dynamic tiling
      <a
        href="https://wayland.freedesktop.org/"
        class="text-para-link"
        id="link-1"
        target="_blank"
        rel="noopener">Wayland</a>
        compositor based on
      <a
        href="https://way-cooler.org/book/wlroots_introduction.html"
        class="text-para-link"
        id="link-2"
        target="_blank"
        rel="noopener"
        >wlroots</a
      >
      that doesn't sacrifice on its looks.
    </p>
    <a
      id="install-hypr"
      href="https://wiki.hyprland.org/Getting-Started/Installation/"
    >
      <div>
        <p>Install Hyprland</p>
      </div>
    </a>
  </div>
  <div id="slide" class="top">
    <div id="slide-content">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="/imgs/img1.png" id="slide-img" />
          </div>
          <div class="swiper-slide">
            <img src="/imgs/img2.png" id="slide-img" />
          </div>
          <div class="swiper-slide">
            <img src="/imgs/img3.png" id="slide-img" />
          </div>
          <div class="swiper-slide">
            <img src="/imgs/img4.png" id="slide-img" />
          </div>
          <div class="swiper-slide">
            <img src="/imgs/img5.png" id="slide-img" />
          </div>
          <div class="swiper-slide">
            <img src="/imgs/img6.png" id="slide-img" />
          </div>
        </div>

        <div class="swiper-pagination" style="color: #cfe8f6"></div>

        <div class="swiper-button-prev" style="color: #cfe8f6"></div>
        <div class="swiper-button-next" style="color: #cfe8f6"></div>
      </div>
    </div>
  </div>
</div>
<div class="features">
  <h1 id="features-text">Features</h1>
  <div class="animation">
    <div id="ani-vid">
      <video
        class="animatedVideo"
        src="/videos/windows.mp4"
        autoplay
        muted
        loop
      ></video>
    </div>
    <div id="ani-text">
      <h1 style="padding-bottom: 15px">
        Smooth<br />
        Animations
      </h1>
      <p>
        Hyprland offers smooth and responsive animations, be it when
        switching between windows, changing a workspace or opening an app
        launcher, on top of being highly customizable!
      </p>
      <a href="https://wiki.hyprland.org/Configuring/Animations/">
        <div>MORE ABOUT ANIMATIONS</div>
      </a>
    </div>
  </div>
  <div class="tiling" id="tiling">
    <div id="til-text">
      <h1 style="padding-bottom: 15px">
        Dynamic<br />
        Tiling
      </h1>
      <p>
        Tiling in Hyprland is dynamic, meaning it handles the placement of
        windows automatically based on multiple factors. Hyprland supports a
        variety of layouts, each with their own options to fine-tune them to
        your likings.
      </p>
      <a href="https://wiki.hyprland.org/Configuring/Dwindle-Layout/">
        <div>MORE ABOUT TILING</div>
      </a>
    </div>

    <div id="til-vid">
      <video
        class="animatedVideo"
        src="/videos/tiling.mp4"
        autoplay
        muted
        loop
      ></video>
    </div>
  </div>
  <div class="configure">
    <div id="con-vid">
      <video
        class="animatedVideo"
        src="/videos/configure.mp4"
        autoplay
        muted
        loop
      ></video>
    </div>
    <div id="con-text">
      <h1 style="padding-bottom: 15px">
        Easy<br />
        Configuration
      </h1>
      <p>
        Editing the config file for Hyprland is as easy as editing a text
        document. Be sure to check the
        <a href="https://wiki.hyprland.org/" id="link-config">Wiki Page</a>
        for information about the config options, features and syntax. If
        you still feel lost, hit us up
        <a
          id="link-config-discord"
          href="/discord"
          target="_blank"
          rel="noopener"
          >@Discord</a
        >.
      </p>
      <a
        id="feat-text"
        href="https://wiki.hyprland.org/Configuring/Configuring-Hyprland/"
      >
        <div>GET STARTED</div>
      </a>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<%- include("./components/swiperjs") %>

<script defer src="/js/smooth-view.js"></script>
<script defer src="/js/github-logo.js"></script>
<script defer src="/js/play-vid-on-focus.js"></script>