feat: added map component

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",

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>
+    )
+}

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)]">

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>
   )