diff --git a/web/src/app/[...url]/page.tsx b/web/src/app/[...url]/page.tsx
index 543dc48..743d6fa 100644
--- a/web/src/app/[...url]/page.tsx
+++ b/web/src/app/[...url]/page.tsx
@@ -4,6 +4,7 @@ import { getClient } from "@/app/client";
import { Blocks } from "@/components/blocks/Blocks";
import { notFound } from "next/navigation";
import { PageHeader } from "@/components/general/PageHeader";
+import { AddressSection } from "@/components/blocks/AddressSection";
export const dynamicParams = false;
@@ -72,14 +73,12 @@ export default async function Page({ params }: { params: { url: string[] } }) {
if (!page) {
return notFound();
}
-
+
return (
-
+
+ {page.title === "Praktisk info" && }
);
}
diff --git a/web/src/components/blocks/AddressSection.tsx b/web/src/components/blocks/AddressSection.tsx
new file mode 100644
index 0000000..73f24ff
--- /dev/null
+++ b/web/src/components/blocks/AddressSection.tsx
@@ -0,0 +1,31 @@
+import styles from "./addressSection.module.scss";
+
+export const AddressSection = () => {
+ return (
+
+ );
+};
diff --git a/web/src/components/blocks/addressSection.module.scss b/web/src/components/blocks/addressSection.module.scss
new file mode 100644
index 0000000..503a168
--- /dev/null
+++ b/web/src/components/blocks/addressSection.module.scss
@@ -0,0 +1,59 @@
+.addressSection {
+ display: grid;
+ grid-template-columns: repeat(12, 1fr);
+ column-gap: var(--spacing-gap-column);
+ row-gap: var(--spacing-gap-row);
+ align-items: flex-start;
+ container-type: inline-size;
+ margin-bottom: var(--spacing-gap-row);
+}
+
+.text {
+ grid-column: 2 / span 4;
+
+ h2 {
+ margin: 0 0 var(--spacing-s);
+ max-width: var(--size-width-p);
+ }
+
+ a {
+ text-decoration-thickness: .1rem;
+ text-decoration-color: var(--color-goldenOrange);
+ font-weight: 500;
+ transition: text-decoration-color var(--transition-easing);
+
+ &:hover {
+ text-decoration-color: currentColor;
+ }
+ }
+}
+
+.map {
+ grid-column: 6 / span 6;
+
+ iframe {
+ border: none;
+ width: 100%;
+ height: auto;
+ min-height: 16rem;
+ }
+}
+
+@media (max-width: 1200px) {
+
+ .text {
+ grid-column: 1 / span 5;
+ }
+
+ .map {
+ grid-column: 6 / span 7;
+ }
+}
+
+@container (max-width: 800px) {
+
+ .text,
+ .map {
+ grid-column: 1 / -1;
+ }
+}
\ No newline at end of file