Placeholder for the landing page (#54)

Currently, the designs for the landing page aren't yet ready. Let's
prepare a placeholder for the Acre website. Page data such as title and
favicon should also be set. To do this, let us use the [manifest
file](https://www.gatsbyjs.com/docs/how-to/performance/add-a-manifest-file/).

website/gatsby-browser.js

@@ -0,0 +1 @@
+import "./src/styles/global-styles.css"

website/gatsby-config.ts

@@ -2,12 +2,26 @@ import type { GatsbyConfig } from "gatsby"
 
 const config: GatsbyConfig = {
   siteMetadata: {
-    // TODO: Update the needed data when the final domain name will be ready.
-    siteUrl: "https://www.yourdomain.tld",
+    siteUrl: "https://acre.fi/",
     title: "Acre",
   },
   graphqlTypegen: true,
-  plugins: ["gatsby-plugin-pnpm"],
+  plugins: [
+    "gatsby-plugin-pnpm",
+    {
+      resolve: "gatsby-plugin-manifest",
+      options: {
+        name: "Acre",
+        short_name: "Acre",
+        start_url: "/",
+        background_color: "#F3E5C1",
+        theme_color: "#F3E5C1",
+        display: "standalone",
+        icon: "src/images/favicon.png",
+        crossOrigin: "use-credentials",
+      },
+    },
+  ],
 }
 
 export default config

website/package.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "gatsby": "^5.12.11",
+    "gatsby-plugin-manifest": "^5.12.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

website/src/pages/index.tsx

@@ -3,7 +3,9 @@ import * as React from "react"
 function IndexPage() {
   return (
     <main>
-      <h1>Landing page</h1>
+      <div className="placeholder">
+        <div className="placeholder_svg" />
+      </div>
     </main>
   )
 }

website/src/styles/global-styles.css

@@ -0,0 +1,33 @@
+body {
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.placeholder {
+    width: 100vw;
+    height: 100vh;
+    padding: 10px;
+    box-sizing: border-box;
+    background-color: #F3E5C1;
+}
+
+.placeholder_svg {
+    width: 100%;
+    height: 100%;
+    background: url('../images/placeholder.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+}
+
+@media (max-width: 854px) {
+    .placeholder_svg {
+        background: url('../images/placeholder-mobile.svg');
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+    }
+}