Updated the docs

src/pages/Documents.tsx

@@ -1,18 +1,24 @@
 // src/pages/Documents.tsx
 
 import React from 'react';
-import { Map, Droplets, ShieldAlert, Download, ExternalLink, Folder } from 'lucide-react';
+import { Map, WavesLadder, BookCopy, Download, ExternalLink, Folder, MapPinned, MapPlus } from 'lucide-react';
 
 export const Documents: React.FC = () => {
     const docs = [
-        { title: 'Turistkarta Kullaberg', icon: <Map size={24} />, file: '/Turistkarta - Kullaberg.pdf' },
+        { title: 'Turistkarta', icon: <Map size={24} />, file: '/files/Turistkarta - Kullaberg.pdf', size: '2.51 MB' },
-        { title: 'Badplatser att besöka', icon: <Droplets size={24} />, file: '/Badplatser att besöka.pdf' },
+        { title: 'Orienteringskarta', icon: <MapPlus size={24} />, file: '/files/Orienteringskarta - Kullaberg.pdf', size: '7.23 MB' },
-        { title: 'Checklista Nödsituationer', icon: <ShieldAlert size={24} />, file: '/2025 Checklista vid nödsituationer Kullabergs naturreservat.docx' }
+        { title: 'Badplatser att besöka', icon: <WavesLadder size={24} />, file: '/files/Badplatser på Kullaberg.pdf', size: '7.07 MB' },
+        { title: 'Vandringsrutter', icon: <MapPinned size={24} />, file: '/files/Vandringsrutter.pdf', size: '4.42 MB' },
+        { title: 'Underlag för guidediplomering', icon: <BookCopy size={24} />, file: '/files/Underlag för guidediplomering.pptx', size: '3.83 MB' },
+        { title: 'Destinationskunskap Kullahalvön', icon: <BookCopy size={24} />, file: '/files/Destinationskunskap 2026.pptx', size: '24.2 MB' }
     ];
 
     const links = [
         { title: 'Kullabergs Naturreservat', url: 'https://www.kullabergsnatur.se/' },
-        { title: 'Väderprognos Mölle', url: 'https://www.smhi.se' }
+        { title: 'Vandra på Kullahalvön', url: 'https://www.kullahalvon.com/upptacka--uppleva/friluftsliv--natur/vandra-pa-kullahalvon.html' },
+        { title: 'Naturkartan', url: 'https://www.naturkartan.se/en/explore' },
+        { title: 'Skåneleden', url: 'https://www.skaneleden.se/en' },
+        { title: 'Väderprognos Mölle', url: 'https://www.smhi.se/vader/prognoser-och-varningar/vaderprognos/q/H%C3%B6gan%C3%A4s/M%C3%B6lle/2691501' }
     ];
 
     return (
@@ -33,10 +39,17 @@ export const Documents: React.FC = () => {
                             className="group flex items-center justify-between bg-white/60 backdrop-blur-sm p-5 rounded-2xl border border-white hover:-translate-y-1 hover:shadow-xl hover:shadow-moss/10 transition-all duration-300"
                         >
                             <div className="flex items-center text-slate-teal">
-                                <div className="bg-linear-to-br from-seafoam to-slate-teal p-3 rounded-xl mr-4 text-eggshell shadow-inner">{doc.icon}</div>
+                                <div className="bg-linear-to-br from-seafoam to-slate-teal p-3 rounded-xl mr-4 text-eggshell shadow-inner shrink-0">
-                                <span className="font-bold text-sm">{doc.title}</span>
+                                    {doc.icon}
+                                </div>
+                                <div className="flex flex-col">
+                                    <span className="font-bold text-sm leading-tight">{doc.title}</span>
+                                    <span className="text-[10px] font-bold text-moss bg-moss/10 px-2 py-0.5 rounded-md w-fit mt-1.5 uppercase tracking-wider border border-moss/10">
+                                        {doc.size}
+                                    </span>
+                                </div>
                             </div>
-                            <Download size={20} className="text-moss group-hover:text-slate-teal transition-colors" />
+                            <Download size={20} className="text-moss group-hover:text-slate-teal transition-colors shrink-0 ml-2" />
                         </a>
                     ))}
                 </div>
@@ -49,8 +62,8 @@ export const Documents: React.FC = () => {
                         <a key={idx} href={link.url} target="_blank" rel="noopener noreferrer"
                             className="group flex items-center justify-between bg-white/60 backdrop-blur-sm p-5 rounded-2xl border border-white hover:-translate-y-1 hover:shadow-xl hover:shadow-moss/10 transition-all duration-300"
                         >
-                            <span className="font-bold text-slate-teal text-sm">{link.title}</span>
+                            <span className="font-bold text-slate-teal text-sm leading-tight pr-4">{link.title}</span>
-                            <div className="bg-eggshell rounded-full p-2 group-hover:bg-seafoam group-hover:text-eggshell transition-colors">
+                            <div className="bg-eggshell rounded-full p-2 group-hover:bg-seafoam group-hover:text-eggshell transition-colors shrink-0">
                                 <ExternalLink size={16} className="text-slate-teal group-hover:text-eggshell" />
                             </div>
                         </a>