replace blog section with office section

src/components/sections/blog.js

@@ -1,72 +0,0 @@
-import * as React from "react"
-import * as styles from "./blog.module.css"
-
-import { Link, graphql, useStaticQuery } from "gatsby"
-import { GatsbyImage } from "gatsby-plugin-image"
-
-const Blog = () => {
-  const data = useStaticQuery(graphql`
-    query {
-      allSanityPost(limit: 3, sort: { fields: _createdAt, order: DESC }) {
-        edges {
-          node {
-            _id
-            _createdAt(formatString: "D. MMMM Y", locale: "nb_NO")
-            slug {
-              current
-            }
-            title
-            excerpt
-            author {
-              name
-              image {
-                asset {
-                  gatsbyImageData(width: 50, height: 50)
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  `)
-
-  return (
-    <section>
-      <h2>Bloggen</h2>
-      <div className={styles.container}>
-        {data.allSanityPost.edges.map(({ node: post }) => (
-          <div key={post._id} className={styles.card}>
-            <p className={styles.published}>
-              <time>{post._createdAt}</time>
-            </p>
-            <h3 className={styles.header}>
-              <Link
-                to={"blog/" + post.slug.current}
-                className={styles.link + " no-styling-link"}
-              >
-                {post.title}
-              </Link>
-            </h3>
-            <p>{post.excerpt}</p>
-            <div className={styles.author}>
-              <div className="circular-container">
-                <GatsbyImage
-                  image={post.author.image.asset.gatsbyImageData}
-                  className={`circular ${styles.authorImage}`}
-                  alt={"Forfatteren av innlegget, " + post.author.name}
-                />
-              </div>
-              <p>{post.author.name}</p>
-            </div>
-          </div>
-        ))}
-        <Link to="/blog" className={styles.allBlogPosts}>
-          Se alle blogginnlegg
-        </Link>
-      </div>
-    </section>
-  )
-}
-
-export default Blog

src/components/sections/blog.module.css

@@ -1,41 +0,0 @@
-.container {
-  display: grid;
-  gap: 5rem;
-  justify-content: center;
-}
-
-.card {
-  display: grid;
-  gap: 1rem;
-  justify-content: stretch;
-  max-width: 80ch;
-}
-
-.published {
-  font-weight: 100;
-}
-.header {
-  font-size: 2.25rem;
-}
-.author {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  align-items: center;
-  gap: 0.5em;
-  font-weight: 100;
-}
-.authorImage {
-  border: 2px solid white;
-}
-
-.link {
-  text-decoration: underline;
-  text-decoration-color: var(--link-color);
-}
-.link:hover {
-  text-decoration-color: var(--link-color-hover);
-}
-
-.allBlogPosts {
-  place-self: center;
-}

src/components/sections/office.js

@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as styles from "./office.module.css"
+
+const Office = () => (
+  <section>
+    <h2>Kontoret</h2>
+    <div className={styles.container}>
+      <p>
+        Vi har et foreningskontor på Chateau Neuf der man kan bruke utstyret
+        vårt og henge med andre medlemmer!
+      </p>
+
+      <iframe
+        className={styles.frame}
+        src="https://www.google.com/maps/embed?pb=!4v1695744274768!6m8!1m7!1sCAoSLEFGMVFpcFBiSUJEWVhFcTFwMDBxWDZPamlhNXc2RjFvVEo2RWlYdmNNSnFM!2m2!1d59.9324458!2d10.7129466!3f300!4f0!5f0.7820865974627469"
+        allowfullscreen="true"
+        loading="lazy"
+        referrerpolicy="no-referrer-when-downgrade"
+      ></iframe>
+    </div>
+  </section>
+)
+
+export default Office

src/components/sections/office.module.css

@@ -0,0 +1,11 @@
+.container {
+  display: grid;
+  gap: 2rem;
+  justify-content: center;
+  place-items: center;
+}
+
+.frame {
+	width: 100%;
+	aspect-ratio: 1 / 1;
+}

src/pages/index.js

@@ -7,7 +7,7 @@ import Seo from "../components/seo"
 import Header from "../components/sections/header"
 import About from "../components/sections/about"
 import Events from "../components/sections/events"
-import Blog from "../components/sections/blog"
+import Office from "../components/sections/office"
 import BoardMembers from "../components/sections/boardMembers"
 import Contact from "../components/sections/contact"
 import Footer from "../components/sections/footer"
@@ -18,7 +18,7 @@ const IndexPage = () => (
     <Header />
     <About />
     <Events />
-    <Blog />
+    <Office />
     <BoardMembers />
     <Contact />
     <Footer />