From ac116840efc4e817423cd9ff4fd5e21588e8436d Mon Sep 17 00:00:00 2001
From: Kristian <k.numme05@gmail.com>
Date: Thu, 15 Oct 2026 20:53:53 +0200
Subject: [PATCH] added map component to about page

---
 apps/frontend/package.json           |  2 ++
 apps/frontend/src/components/Map.tsx | 19 +++++++++++++++++++
 apps/frontend/src/routes/__root.tsx  |  1 +
 apps/frontend/src/routes/about.tsx   | 12 +++---------
 4 files changed, 25 insertions(+), 9 deletions(-)
 create mode 100644 apps/frontend/src/components/Map.tsx

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 5f6c0af..e97a6ce 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -24,12 +24,14 @@
     "nitro": "3.0.260610-beta",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
+    "react-leaflet": "5.0.0-rc.2",
     "tailwindcss": "^4.3.3"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.20",
     "@tanstack/devtools-vite": "latest",
     "@tanstack/router-cli": "^1.167.39",
+    "@types/leaflet": "^1.9.22",
     "@types/node": "^22.20.4",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
diff --git a/apps/frontend/src/components/Map.tsx b/apps/frontend/src/components/Map.tsx
new file mode 100644
index 0000000..45ecdfb
--- /dev/null
+++ b/apps/frontend/src/components/Map.tsx
@@ -0,0 +1,19 @@
+import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
+
+export default function Map() {
+  return (
+    <section id="map">
+        <MapContainer center={[63.4305, 10.3951]} zoom={15} scrollWheelZoom={false} className="h-100 w-full rounded-2xl">
+            <TileLayer
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            />
+            <Marker position={[63.4305, 10.3951]}>
+                <Popup>
+                    <span>Guinness!!!</span>
+                </Popup>
+            </Marker>
+        </MapContainer>
+    </section>
+    )
+}
\ No newline at end of file
diff --git a/apps/frontend/src/routes/__root.tsx b/apps/frontend/src/routes/__root.tsx
index bdaa4ec..709e4ad 100644
--- a/apps/frontend/src/routes/__root.tsx
+++ b/apps/frontend/src/routes/__root.tsx
@@ -49,6 +49,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
     <html lang="en" suppressHydrationWarning>
       <head>
         <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />
+        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossOrigin=""/>
         <HeadContent />
       </head>
       <body className="font-sans antialiased [overflow-wrap:anywhere] selection:bg-[rgba(79,184,178,0.24)]">
diff --git a/apps/frontend/src/routes/about.tsx b/apps/frontend/src/routes/about.tsx
index e5bc399..c51fc52 100644
--- a/apps/frontend/src/routes/about.tsx
+++ b/apps/frontend/src/routes/about.tsx
@@ -1,3 +1,4 @@
+import Map from '../components/Map'
 import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/about')({
@@ -8,15 +9,8 @@ function About() {
   return (
     <main className="page-wrap px-4 py-12">
       <section className="island-shell rounded-2xl p-6 sm:p-8">
-        <p className="island-kicker mb-2">About</p>
-        <h1 className="display-title mb-3 text-4xl font-bold text-[var(--sea-ink)] sm:text-5xl">
-          A small starter with room to grow.
-        </h1>
-        <p className="m-0 max-w-3xl text-base leading-8 text-[var(--sea-ink-soft)]">
-          TanStack Start gives you type-safe routing, server functions, and
-          modern SSR defaults. Use this as a clean foundation, then layer in
-          your own routes, styling, and add-ons.
-        </p>
+        <Map />
+
       </section>
     </main>
   )