First commit

2026-03-16 23:54:36 +01:00
commit be129af1d9
53 changed files with 49704 additions and 0 deletions
@@ -0,0 +1,74 @@
+// app/documents/page.tsx
+
+import { BookCopy, Download, ExternalLink, Folder, Map, MapPinned, MapPlus, WavesLadder } from 'lucide-react';
+
+export default function Documents() {
+    const docs = [
+        { title: 'Turistkarta', icon: <Map size={24} />, file: '/files/Turistkarta - Kullaberg.pdf', size: '2.51 MB' },
+        { title: 'Orienteringskarta', icon: <MapPlus size={24} />, file: '/files/Orienteringskarta - Kullaberg.pdf', size: '7.23 MB' },
+        { 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: '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 (
+        <div className="space-y-8 animate-fade-in w-full">
+            <div>
+                <h1 className="text-3xl font-black text-slate-teal tracking-tight flex items-center">
+                    <Folder className="mr-3 text-seafoam" size={32} />
+                    Info & Dokument
+                </h1>
+                <p className="text-moss font-medium mt-2 ml-11">Allt du behöver för att guida besökarna.</p>
+            </div>
+
+            <section>
+                <h2 className="text-sm font-black text-ebony/50 uppercase tracking-widest mb-4">Nedladdningar</h2>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {docs.map((doc, idx) => (
+                        <a key={idx} href={doc.file} 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"
+                        >
+                            <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 shrink-0">
+                                    {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 shrink-0 ml-2" />
+                        </a>
+                    ))}
+                </div>
+            </section>
+
+            <section>
+                <h2 className="text-sm font-black text-ebony/50 uppercase tracking-widest mb-4">Användbara Länkar</h2>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {links.map((link, idx) => (
+                        <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 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 shrink-0">
+                                <ExternalLink size={16} className="text-slate-teal group-hover:text-eggshell" />
+                            </div>
+                        </a>
+                    ))}
+                </div>
+            </section>
+        </div>
+    );
+};