feat: added an installation page

src/pages/install.astro

@@ -0,0 +1,179 @@
+---
+import i18next, { t, changeLanguage } from "i18next"
+import Base from "../layouts/Base.astro"
+
+changeLanguage("en")
+
+const title = `Install | ${t("site.title")}`
+const description = t("site.description")
+---
+<!-- All changes (including styles) are limited to this page since it is temporary -->
+
+<Base title={title} description={description}>
+  <section class="section">
+    <div class="contentWrapperSm">
+      <img
+        alt="Web Monetization Icon"
+        class="wm-icon"
+        src="/img/wm-logo--animated.svg"
+        width="120"
+        height="86"
+      />
+      <h1 class="heading2">Web Monetization</h1>
+    </div>
+  </section>
+  <section>
+    <div class="contentWrapperLg">
+      <div class="cards twoColGrid">
+        <div class="card">
+          <div class="cardContent">
+            <h2 class="heading3">Support content with the web extension</h2>
+            <ul class="icons">
+              <li class="icon">
+                <a
+                  href="https://chromewebstore.google.com/detail/web-monetization/oiabcfomehhigdepbbclppomkhlknpii"
+                >
+                  <img
+                    alt="Chrome Web Store logo"
+                    src="/img/chrome-webstore.png"
+                  />
+                </a>
+              </li>
+              <li class="icon">
+                <a
+                  href="https://addons.mozilla.org/en-US/firefox/addon/web-monetization-extension"
+                >
+                  <img
+                    alt="Firefox Browser Add-ons"
+                    src="/img/Fx-Browser-icon.png"
+                  />
+                </a>
+              </li>
+              <li class="icon">
+                <a
+                  href="https://microsoftedge.microsoft.com/addons/detail/web-monetization/imjgemgmeoioefpmfefmffbboogighjl"
+                >
+                  <img alt="Edge Add-ons" src="/img/microsoft-edge.png" />
+                </a>
+              </li>
+            </ul>
+            <ul class="icons">
+              <li class="icon">
+                <a
+                  href="https://github.com/interledger/web-monetization-extension"
+                >
+                  <img alt="GitHub logo" src="/img/icon-github.svg" />
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="card">
+          <div class="cardContent">
+            <h2 class="heading3">Get support with a Web Monetization link</h2>
+            <h2 class="heading3">
+                <a href="/link-tag/">Generate your link</a>
+            </h2>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</Base>
+
+<style>
+    body {
+        background-image: url("/img/bg-tile.svg");
+        background-size: 25em;
+    }
+
+    section {
+        text-align: center;
+    }
+
+    .wm-icon {
+        width: 120px;
+        margin-block-end: var(--space-s);
+        margin-inline: auto;
+    }
+
+    .heading2 {
+        color: var(--wm-accent);
+    }
+
+    /* Card wrapper styles */
+    .cards {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--space-s);
+        margin-block-end: var(--space-s);
+        justify-content: center;
+    }
+
+    .card {
+        display: flex;
+        transition:
+        box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
+        position: relative;
+        overflow: initial;
+        box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.06),
+        0px 2px 10px hsla(0, 0%, 0%, 0.06);
+        border-radius: 6px;
+        padding: var(--space-s);
+        background-color: white;
+        flex: 0 1 100%;
+        max-width: 25em;
+        gap: var(--space-s);
+        font-size: var(--step-0);
+        margin-block-end: var(--space-s);
+        color: var(--color-black);
+    }
+
+    @media screen and (min-width: 900px) {
+        .card {
+        flex: 0 1 calc(50% - 1em);
+        }
+    }
+
+    .card::after {
+        content: "";
+        border-radius: 6px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        box-shadow: 0 3px 9px rgba(0, 0, 0, 0.25);
+        opacity: 0;
+        transition: opacity 0.3s ease-in-out;
+    }
+
+    .card:hover::after {
+        opacity: 1;
+    }
+
+    /* Icon section styles */
+    .icons {
+        list-style: none;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: var(--space-m);
+        padding: var(--space-xs) var(--space-s);
+    }
+
+    .icon {
+        flex: 0 0 3em;
+        max-width: 3em;
+    }
+
+    .icon a {
+        display: block;
+        transition: transform 0.2s ease-in-out;
+    }
+
+    .icon a:hover {
+        transform: scale(1.1);
+    }
+</style>