feat: add location map

package-lock.json

@@ -17,12 +17,15 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "geist": "^1.3.1",
+        "leaflet": "^1.9.4",
+        "leaflet-defaulticon-compatibility": "^0.1.2",
         "lucide-react": "^0.474.0",
         "make-plural": "^7.4.0",
         "negotiator": "^1.0.0",
         "next": "15.1.6",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-leaflet": "^5.0.0-rc.2",
         "tailwind-merge": "^2.6.0",
         "tailwindcss-animate": "^1.0.7"
       },
@@ -2127,25 +2130,25 @@
       }
     },
     "node_modules/@radix-ui/react-dialog": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.5.tgz",
-      "integrity": "sha512-LaO3e5h/NOEL4OfXjxD43k9Dx+vn+8n+PCFt6uhX/BADFflllyv3WJG6rgvvSVBxpTch938Qq/LGc2MMxipXPw==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.6.tgz",
+      "integrity": "sha512-/IVhJV5AceX620DUJ4uYVMymzsipdKBzo3edo+omeskCKGm9FRHM0ebIdbPnlQVJqyuHbuBltQUOG2mOTq2IYw==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.1",
         "@radix-ui/react-compose-refs": "1.1.1",
         "@radix-ui/react-context": "1.1.1",
-        "@radix-ui/react-dismissable-layer": "1.1.4",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
         "@radix-ui/react-focus-guards": "1.1.1",
-        "@radix-ui/react-focus-scope": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.2",
         "@radix-ui/react-id": "1.1.0",
-        "@radix-ui/react-portal": "1.1.3",
+        "@radix-ui/react-portal": "1.1.4",
         "@radix-ui/react-presence": "1.1.2",
-        "@radix-ui/react-primitive": "2.0.1",
-        "@radix-ui/react-slot": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.2",
         "@radix-ui/react-use-controllable-state": "1.1.0",
         "aria-hidden": "^1.2.4",
-        "react-remove-scroll": "^2.6.2"
+        "react-remove-scroll": "^2.6.3"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -2163,14 +2166,14 @@
       }
     },
     "node_modules/@radix-ui/react-dismissable-layer": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.4.tgz",
-      "integrity": "sha512-XDUI0IVYVSwjMXxM6P4Dfti7AH+Y4oS/TB+sglZ/EXc7cqLwGAmp1NlMrcUjj7ks6R5WTZuWKv44FBbLpwU3sA==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.5.tgz",
+      "integrity": "sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.1",
         "@radix-ui/react-compose-refs": "1.1.1",
-        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-primitive": "2.0.2",
         "@radix-ui/react-use-callback-ref": "1.1.0",
         "@radix-ui/react-use-escape-keydown": "1.1.0"
       },
@@ -2205,13 +2208,13 @@
       }
     },
     "node_modules/@radix-ui/react-focus-scope": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.1.tgz",
-      "integrity": "sha512-01omzJAYRxXdG2/he/+xy+c8a8gCydoQ1yOxnWNcRhrrBW5W+RQJ22EK1SaO8tb3WoUsuEw7mJjBozPzihDFjA==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.2.tgz",
+      "integrity": "sha512-zxwE80FCU7lcXUGWkdt6XpTTCKPitG1XKOwViTxHVKIJhZl9MvIl2dVHeZENCWD9+EdWv05wlaEkRXUykU27RA==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-compose-refs": "1.1.1",
-        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-primitive": "2.0.2",
         "@radix-ui/react-use-callback-ref": "1.1.0"
       },
       "peerDependencies": {
@@ -2248,12 +2251,12 @@
       }
     },
     "node_modules/@radix-ui/react-portal": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.3.tgz",
-      "integrity": "sha512-NciRqhXnGojhT93RPyDaMPfLH3ZSl4jjIFbZQ1b/vxvZEdHsBZ49wP9w8L3HzUQwep01LcWtkUvm0OVB5JAHTw==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.4.tgz",
+      "integrity": "sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-primitive": "2.0.2",
         "@radix-ui/react-use-layout-effect": "1.1.0"
       },
       "peerDependencies": {
@@ -2296,12 +2299,12 @@
       }
     },
     "node_modules/@radix-ui/react-primitive": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.1.tgz",
-      "integrity": "sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
+      "integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-slot": "1.1.1"
+        "@radix-ui/react-slot": "1.1.2"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -2319,9 +2322,9 @@
       }
     },
     "node_modules/@radix-ui/react-slot": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
-      "integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
+      "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-compose-refs": "1.1.1"
@@ -2402,6 +2405,17 @@
         }
       }
     },
+    "node_modules/@react-leaflet/core": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz",
+      "integrity": "sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ==",
+      "license": "Hippocratic-2.1",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.32.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.32.1.tgz",
@@ -6786,6 +6800,18 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/leaflet-defaulticon-compatibility": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/leaflet-defaulticon-compatibility/-/leaflet-defaulticon-compatibility-0.1.2.tgz",
+      "integrity": "sha512-IrKagWxkTwzxUkFIumy/Zmo3ksjuAu3zEadtOuJcKzuXaD76Gwvg2Z1mLyx7y52ykOzM8rAH5ChBs4DnfdGa6Q==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -8101,6 +8127,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-leaflet": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-5.0.0.tgz",
+      "integrity": "sha512-CWbTpr5vcHw5bt9i4zSlPEVQdTVcML390TjeDG0cK59z1ylexpqC6M1PJFjV8jD7CF+ACBFsLIDs6DRMoLEofw==",
+      "license": "Hippocratic-2.1",
+      "dependencies": {
+        "@react-leaflet/core": "^3.0.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz",

package.json

@@ -22,12 +22,15 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "geist": "^1.3.1",
+    "leaflet": "^1.9.4",
+    "leaflet-defaulticon-compatibility": "^0.1.2",
     "lucide-react": "^0.474.0",
     "make-plural": "^7.4.0",
     "negotiator": "^1.0.0",
     "next": "15.1.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-leaflet": "^5.0.0-rc.2",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7"
   },

src/components/event-map.lazy.tsx

@@ -0,0 +1,29 @@
+import "leaflet/dist/leaflet.css"
+
+import "leaflet-defaulticon-compatibility"
+import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css"
+
+import { Translations } from "@/i18n/translations"
+import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet"
+
+
+export default function Map({ t }: {
+  t: Translations
+}) {
+  return (
+    <div className='h-screen max-h-[400px] pt-8 relative mx-auto max-w-3xl'>
+      {/* @ts-expect-error dragging IS a valid prop. */}
+      <MapContainer dragging={false} center={[51.105173, 17.087157]} zoom={40} scrollWheelZoom={false} className="h-full w-full">
+        {/* @ts-expect-error attribution IS a valid prop. */}
+        <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={[51.105173, 17.087157]}>
+          <Popup>
+            {t.where.location}
+          </Popup>
+        </Marker>
+      </MapContainer>
+    </div>
+  )
+}

src/components/landing-page.tsx

@@ -1,26 +1,34 @@
 "use client"
 
+import dynamic from 'next/dynamic';
+
+
+
 import { Nav } from "@/components/nav";
 import { Translations } from "@/i18n/translations";
 import { cn } from "@/lib/utils";
 import { ReactElement, useEffect, useRef } from "react";
 import { useTheme } from "./providers";
+import { Skeleton } from './ui/skeleton';
 
 function Section({
   id,
   title,
-  paragraphs
+  paragraphs,
+  after
 }: {
   id: string
   title: string;
   paragraphs: ReactElement;
+  after?: ReactElement;
 }) {
-  return (<section id={id} className="py-24 bg-background">
+  return (<section id={id} className="bg-background">
     <div className="container mx-auto px-4">
-      <h2 className="text-4xl font-bold mb-8 tracking-tighter max-w-3xl mx-auto">{title}</h2>
+      <h2 className="text-4xl font-bold tracking-tighter max-w-3xl mx-auto mb-2">{title}</h2>
       <div className="text-lg text-muted-foreground max-w-3xl mx-auto whitespace-pre-line">
         {paragraphs}
       </div>
+      {after}
     </div>
   </section>)
 }
@@ -125,6 +133,12 @@ function Video({ sourceBase, hidden }: {
   );
 }
 
+
+const LazyLeafletMap = dynamic(() => import('./event-map.lazy'), {
+  ssr: false,
+  loading: () => <Skeleton className="mt-8 h-[368px] w-full" />
+})
+
 export default function LandingPage(
   { t }: { t: Translations }
 ) {
@@ -134,7 +148,7 @@ export default function LandingPage(
   return (
     <div>
       <Nav t={t} />
-      <main className="flex flex-col min-h-screen">
+      <main className="flex flex-col min-h-screen grid-gap-10 gap-10 pb-12">
 
         <section id="hero" className="h-screen relative overflow-hidden dark:bg-black light:bg-white ">
           <div className="absolute inset-0 opacity-80">
@@ -151,8 +165,9 @@ export default function LandingPage(
         </section>
 
         <Section id="about" title={t.about.title} paragraphs={<p>{t.about.description}</p>} />
-        <Section id="where" title={t.where.title} paragraphs={<p>{t.where.location}</p>} />
-        <Section id="when" title={t.where.title} paragraphs={<>
+        <Section id="where" title={t.where.title} paragraphs={<p>{t.where.location}</p>} after={<LazyLeafletMap t={t} />} />
+
+        <Section id="when" title={t.when.title} paragraphs={<>
           <p className="text-primary text-3xl font-[JGS7]">{t.when.date}</p>
           <p className="mt-4">{t.when.extra}</p></>}
         />

src/components/mobile-nav.tsx

@@ -5,6 +5,7 @@ import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/co
 import type { Sections, translations } from "@/i18n/translations"
 import { cn } from "@/lib/utils"
 import { Menu } from "lucide-react"
+import { LanguageSelector } from "./ui/language-selector"
 
 export function MobileNav({
   t,
@@ -35,6 +36,7 @@ export function MobileNav({
               {t.nav[value]}
             </a>
           ))}
+          <LanguageSelector />
         </nav>
       </SheetContent>
     </Sheet>

src/components/nav.tsx

@@ -6,6 +6,7 @@ import { MoonIcon, SunIcon } from "lucide-react"
 import { useEffect, useState } from "react"
 import { MobileNav } from "./mobile-nav"
 import { useTheme } from "./providers"
+import { LanguageSelector } from "./ui/language-selector"
 
 const linksOrder: Array<keyof (typeof translations.pl)["nav"]> = [
   "hero",
@@ -63,15 +64,22 @@ export function Nav({
   }, []);
 
   return (
-    <nav className="fixed top-0 left-0 right-0 z-50 dark:backdrop-blur-xs light:backdrop-blur-sm bg-background/80 border-b">
+    <nav className="fixed top-0 left-0 right-0 backdrop-blur-xs bg-background/40 border-b z-[10000]">
       <div className="container mx-auto px-4">
         <div className="flex items-center justify-between h-16">
+          <div className="flex gap-4">
+            <LanguageSelector />
             <a href="#" className="text-xl font-bold tracking-tighter hover:text-primary transition-colors">
-            {t.siteTitle}
+
+
+
+              <h1>{t.siteTitle}</h1>
             </a>
+          </div>
           <div className="flex items-center">
             {/* Desktop Navigation */}
             <div className="hidden md:flex md:items-center md:gap-4 lg:gap-8">
+
               {linksOrder.map((value) => (
                 <a
                   key={value}
@@ -88,7 +96,6 @@ export function Nav({
               ))}
             </div>
 
-            {/* Theme Toggle */}
             <Button
               variant="ghost"
               size="icon"
@@ -98,6 +105,8 @@ export function Nav({
               {theme === "dark" ? <SunIcon className="h-5 w-5" /> : <MoonIcon className="h-5 w-5" />}
             </Button>
 
+
+
             {/* Mobile Navigation */}
             <div className="md:hidden ml-2">
               <MobileNav t={t} linksOrder={linksOrder} activeSection={activeSection} />

src/components/ui/language-selector.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+import { Lang } from "@/i18n/locales";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+
+
+export const LanguageSelector = () => {
+  const params = useParams<{ locale: Lang }>();
+
+  const lang = params?.locale || 'pl';
+  const hash = window?.location?.hash || '';
+  if (lang === 'pl') return (<>
+    <Link className="pt-1" href={`/en${hash}`}>🇬🇧</Link></>);
+  if (lang === 'en') return (<>
+    <Link className="pt-1" href={`/pl${hash}`}>🇵🇱</Link></>);
+};

src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

src/globals.css

@@ -162,3 +162,8 @@
 .jgs7 {
   font-family: "JGS7" !important;
 }
+
+/* Fix for leaflet's weird z-index */
+.z-max {
+  z-index: 10000;
+}

src/i18n/translations.ts

@@ -30,13 +30,13 @@ const pl = {
   },
   where: {
     title: "Gdzie",
-    location: "klub Łącznik, Tramwajowa 1-3, Wrocław, obok Hackerspace Wrocław",
+    location: "Klub Łącznik, Tramwajowa 1-3, Wrocław, obok Hackerspace Wrocław",
   },
   when: {
     title: "Kiedy",
     date: "28-31.08.2025",
     extra:
-      "chętnych do pomocy w przygotowaniach zapraszamy już na Day 0, 27 sierpnia",
+      "Chętnych do pomocy w przygotowaniach zapraszamy już na Day 0, 27 sierpnia",
   },
   tickets: {
     title: "Bilety",
@@ -45,12 +45,12 @@ const pl = {
   accommodation: {
     title: "Nocleg",
     description:
-      "w duchu prawdziwego campu przygotowujemy ogrodzone miejsce do rozbicia namiotu z toaletami i prysznicem. Ilość miejsc namiotowych ograniczona, obowiązuje kolejność rezerwacji. Jest także możliwość zakwaterowania we własnym zakresie w pobliskim hotelu lub akademikach.",
+      "W duchu prawdziwego campu przygotowujemy ogrodzone miejsce do rozbicia namiotu z toaletami i prysznicem. Ilość miejsc namiotowych ograniczona, obowiązuje kolejność rezerwacji. Jest także możliwość zakwaterowania we własnym zakresie w pobliskim hotelu lub akademikach.",
   },
   food: {
     title: "Wyżywienie",
     description:
-      "we własnym zakresie, w okolicy dostępne są knajpy z dowozem, wieczory planujemy umilić wspólnym grillowaniem.",
+      "We własnym zakresie, w okolicy dostępne są knajpy z dowozem, wieczory planujemy umilić wspólnym grillowaniem.",
   },
   contact: {
     title: "Kontakt",
@@ -98,7 +98,7 @@ const en = {
     title: "When",
     date: "28-31.08.2025",
     extra:
-      "those willing to help with preparations are welcome to join on Day 0, August 27",
+      "Those willing to help with preparations are welcome to join on Day 0, August 27",
   },
   tickets: {
     title: "Tickets",
@@ -107,12 +107,12 @@ const en = {
   accommodation: {
     title: "Accommodation",
     description:
-      "in the true camp spirit, we're preparing a fenced area for pitching tents with toilets and shower facilities. The number of tent spots is limited, first-come-first-served basis. There's also the possibility of arranging your own accommodation in a nearby hotel or student dormitories.",
+      "In the true camp spirit, we're preparing a fenced area for pitching tents with toilets and shower facilities. The number of tent spots is limited, first-come-first-served basis. There's also the possibility of arranging your own accommodation in a nearby hotel or student dormitories.",
   },
   food: {
     title: "Food",
     description:
-      "self-catering, there are restaurants with delivery in the area, and we plan to enhance the evenings with communal barbecues.",
+      "Self-catering, there are restaurants with delivery in the area, and we plan to enhance the evenings with communal barbecues.",
   },
   contact: {
     title: "Contact",