naturvardarna/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Updated info and rule tab

Browse Source
This commit is contained in:
WilliamSoderberg
2026-03-17 01:25:01 +01:00 Verified
parent 8d6646dfa1
commit 9b395ef75c
2 changed files with 128 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/documents/page.tsx
+1 -1
View File
@@ -146,7 +146,7 @@ export default function Documents() {
{isCached && (
<span className="flex items-center gap-1 text-[10px] font-bold text-moss bg-moss/10 px-2 py-0.5 rounded-md uppercase tracking-wider">
<Archive size={12} /> Nerladdad
<Archive size={12} /> Nedladdad
</span>
)}
</div>
app/info/page.tsx
+125 -39
View File
@@ -1,6 +1,6 @@
// app/info/page.tsx
import { Briefcase, CheckCircle2, Navigation } from 'lucide-react';
import { AlertTriangle, Briefcase, CloudRain, HeartHandshake, ListChecks, Navigation, ShieldAlert, Sun } from 'lucide-react';
export default function JobInfo() {
return (
@@ -10,54 +10,140 @@ export default function JobInfo() {
<Briefcase className="mr-3 text-seafoam" size={32} />
Jobbinfo & Regler
</h1>
<p className="text-moss font-medium mt-2 ml-11">Läs igenom detta noggrant inför dina arbetspass.</p>
<p className="text-moss font-medium mt-2 ml-11">Din överlevnadsguide till världens bästa sommarjobb på Kullaberg!</p>
</div>
<section className="bg-eggshell border-2 border-slate-teal/20 p-6 rounded-2xl shadow-sm">
<h2 className="text-lg font-black text-ebony uppercase tracking-widest mb-3 flex items-center">
<CheckCircle2 className="mr-2 text-moss" size={20} /> Förväntningar
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* VAD GÖR VI? */}
<section className="group bg-white/40 backdrop-blur-md border border-white p-6 md:p-8 rounded-3xl shadow-sm hover:shadow-md transition-all duration-300">
<h2 className="text-xl font-black text-ebony uppercase tracking-widest mb-6 flex items-center">
<ListChecks className="mr-3 text-slate-teal" size={24} /> Snabbguiden: Uppdrag
</h2>
<p className="text-sm text-ebony/80 font-medium mb-4 leading-relaxed">
Vi förväntar oss att du tar ansvar, visar respekt för både natur och varandra, samt gör ditt bästa med dina arbetsuppgifter.
<p className="text-sm text-ebony/80 font-bold mb-6 leading-relaxed bg-white/60 p-4 rounded-xl border border-white">
Arbetsuppgifterna är varierande och vi löser ofta specialuppdrag som ett team. Exempel på vad du kommer göra:
</p>
<div className="bg-moss/10 rounded-xl p-4 space-y-2 border border-moss/20">
<div className="flex justify-between items-center">
<span className="font-bold text-ebony text-sm">Period 1</span>
<span className="text-xs font-bold bg-eggshell text-moss px-2 py-1 rounded">23 juni kl 08:10 (Buss Mölle)</span>
<ul className="space-y-4 text-sm font-medium text-ebony/90">
<li className="flex items-start bg-white/40 p-3 rounded-xl">
<span className="text-seafoam mr-3 mt-0.5 font-black">✦</span>
<span><strong className="text-slate-teal">Parkeringsvärd:</strong> Hjälpa folk att parkera rätt.</span>
</li>
<li className="flex items-start bg-white/40 p-3 rounded-xl">
<span className="text-seafoam mr-3 mt-0.5 font-black">✦</span>
<span><strong className="text-slate-teal">Naturvärd:</strong> Berätta för besökare om Kullaberg och vad man kan göra.</span>
</li>
<li className="flex items-start bg-white/40 p-3 rounded-xl">
<span className="text-seafoam mr-3 mt-0.5 font-black">✦</span>
<span><strong className="text-slate-teal">Naturvård:</strong> Plocka skräp och bekämpa invasiva växter.</span>
</li>
<li className="flex items-start bg-white/40 p-3 rounded-xl">
<span className="text-seafoam mr-3 mt-0.5 font-black">✦</span>
<span><strong className="text-slate-teal">Underhåll & Städ:</strong> Städa faciliteter, olja skyltar/möbler, laga staket och röja stigar.</span>
</li>
</ul>
</section>
{/* PACKLISTA */}
<section className="group bg-white/40 backdrop-blur-md border border-white p-6 md:p-8 rounded-3xl shadow-sm hover:shadow-md transition-all duration-300">
<h2 className="text-xl font-black text-ebony uppercase tracking-widest mb-6 flex items-center">
<Navigation className="mr-3 text-slate-teal" size={24} /> Daglig packlista
</h2>
<p className="text-sm text-ebony/80 font-bold mb-6 leading-relaxed bg-white/60 p-4 rounded-xl border border-white">
Vi är ute i princip hela arbetspasset. Kommunen löser t-shirt och keps, resten står du för!
</p>
<ul className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-6">
<li className="flex items-center text-xs font-bold text-ebony/80 bg-white p-3 rounded-xl border border-slate-teal/5 shadow-sm">
<span className="w-2.5 h-2.5 rounded-full bg-seafoam mr-3 shrink-0"></span> Sköna promenadskor
</li>
<li className="flex items-center text-xs font-bold text-ebony/80 bg-white p-3 rounded-xl border border-slate-teal/5 shadow-sm">
<span className="w-2.5 h-2.5 rounded-full bg-seafoam mr-3 shrink-0"></span> Oömma kläder efter väder
</li>
<li className="flex items-center text-xs font-bold text-ebony/80 bg-white p-3 rounded-xl border border-slate-teal/5 shadow-sm">
<span className="w-2.5 h-2.5 rounded-full bg-seafoam mr-3 shrink-0"></span> Bekväm ryggsäck
</li>
<li className="flex items-center text-xs font-bold text-ebony/80 bg-white p-3 rounded-xl border border-slate-teal/5 shadow-sm">
<span className="w-2.5 h-2.5 rounded-full bg-seafoam mr-3 shrink-0"></span> Minst 1L vatten
</li>
<li className="flex items-center text-xs font-bold text-ebony/80 bg-white p-3 rounded-xl border border-slate-teal/5 shadow-sm sm:col-span-2">
<span className="w-2.5 h-2.5 rounded-full bg-goldenrod mr-3 shrink-0"></span> Matsäck (Endast helger)
</li>
</ul>
{/* Fixed Weather Blocks */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4 pt-6 border-t-2 border-slate-teal/10">
<div className="bg-slate-teal/10 p-4 rounded-2xl flex items-start">
<CloudRain className="text-slate-teal mr-3 shrink-0" size={24} />
<div>
<h4 className="font-black text-slate-teal text-sm uppercase tracking-wider mb-1">Vid regn</h4>
<p className="text-xs text-ebony/80 font-bold">Regnkläder och torrt ombyte.</p>
</div>
<div className="flex justify-between items-center border-t border-moss/20 pt-2">
<span className="font-bold text-ebony text-sm">Period 2</span>
<span className="text-xs font-bold bg-eggshell text-moss px-2 py-1 rounded">7 juli kl 08:10</span>
</div>
<div className="bg-gold/20 p-4 rounded-2xl flex items-start">
<Sun className="text-goldenrod mr-3 shrink-0" size={24} />
<div>
<h4 className="font-black text-goldenrod text-sm uppercase tracking-wider mb-1">Vid sol</h4>
<p className="text-xs text-ebony/80 font-bold">Extra vatten, solkräm & "Sunstopper" (tunn långärmad tröja).</p>
</div>
</div>
</div>
</section>
</div>
{/* VETT OCH ETIKETT */}
<section className="group bg-white/40 backdrop-blur-md border border-white p-6 md:p-8 rounded-3xl shadow-sm hover:shadow-md transition-all duration-300">
<h2 className="text-xl font-black text-ebony uppercase tracking-widest mb-6 flex items-center">
<HeartHandshake className="mr-3 text-slate-teal" size={24} /> Policy: Vett & Etikett
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm font-medium text-ebony/80 leading-relaxed">
<div className="flex items-start bg-white/60 p-4 rounded-2xl">
<div className="bg-goldenrod text-white font-black w-6 h-6 rounded-full flex items-center justify-center shrink-0 mr-3 mt-0.5 shadow-sm text-xs">1</div>
<span><strong className="text-ebony">Var ett proffs:</strong> Uppträd professionellt, var schysst mot alla och tänk på att vi har absolut nolltolerans mot diskriminering.</span>
</div>
<div className="flex items-start bg-white/60 p-4 rounded-2xl">
<div className="bg-goldenrod text-white font-black w-6 h-6 rounded-full flex items-center justify-center shrink-0 mr-3 mt-0.5 shadow-sm text-xs">2</div>
<span><strong className="text-ebony">Ingen dötid:</strong> Stillastående väntan accepteras inte. Har du inget att göra? Fråga ledaren! Du ska inte stå still när andra jobbar.</span>
</div>
<div className="flex items-start bg-white/60 p-4 rounded-2xl">
<div className="bg-goldenrod text-white font-black w-6 h-6 rounded-full flex items-center justify-center shrink-0 mr-3 mt-0.5 shadow-sm text-xs">3</div>
<span><strong className="text-ebony">Se folk i ögonen:</strong> Inga hörlurar under arbetstid, mobilen är bara ett arbetsverktyg, och <em className="text-slate-teal font-bold">ta av solglasögonen</em> när du pratar med besökare.</span>
</div>
<div className="flex items-start bg-white/60 p-4 rounded-2xl">
<div className="bg-goldenrod text-white font-black w-6 h-6 rounded-full flex items-center justify-center shrink-0 mr-3 mt-0.5 shadow-sm text-xs">4</div>
<span><strong className="text-ebony">Djur & Natur:</strong> Respektera djur och natur. Vi rör inte djuren och vi tar hand om våra verktyg.</span>
</div>
</div>
</section>
<section className="bg-eggshell border-2 border-slate-teal/20 p-6 rounded-2xl shadow-sm">
<h2 className="text-lg font-black text-ebony uppercase tracking-widest mb-3 flex items-center">
<Navigation className="mr-2 text-moss" size={20} /> Daglig Utrustning
{/* SÄKERHET */}
<section className="group bg-emergency/10 border-2 border-emergency/30 p-6 md:p-8 rounded-3xl shadow-sm hover:shadow-md transition-all duration-300">
<h2 className="text-xl font-black text-emergency uppercase tracking-widest mb-6 flex items-center">
<ShieldAlert className="mr-3 text-emergency" size={24} /> Risker & Säkerhet
</h2>
<ul className="grid grid-cols-1 md:grid-cols-2 gap-3">
{['Bra promenadskor (mycket gång!)', 'Oömma/väderanpassade kläder', 'En bekväm ryggsäck', 'Egen lunch (ingen kyl/mikro)', 'Minst 1 liter vatten', 'Myggmedel & Solkräm'].map((item, idx) => (
<li key={idx} className="flex items-center text-sm font-bold text-ebony/80 bg-seafoam/10 p-3 rounded-lg border border-seafoam/20">
<div className="w-2 h-2 rounded-full bg-slate-teal mr-3 shrink-0"></div>
{item}
</li>
))}
</ul>
</section>
<section className="bg-eggshell border-2 border-slate-teal/20 p-6 rounded-2xl shadow-sm">
<h2 className="text-lg font-black text-ebony uppercase tracking-widest mb-3 flex items-center">
<Briefcase className="mr-2 text-moss" size={20} /> Exempel på uppgifter
</h2>
<ul className="space-y-2 text-sm font-bold text-ebony/80">
{['Parkeringsguide', 'Naturvägledare för besökare', 'Plocka skräp & ta bort invasiva växter', 'Städa anläggningar', 'Allmänt underhåll (olja skyltar, fixa staket)'].map((task, idx) => (
<li key={idx} className="flex items-center">
<span className="text-seafoam mr-2">✦</span> {task}
</li>
))}
</ul>
<p className="text-sm text-emergency/80 font-black mb-6 leading-relaxed bg-white/50 p-4 rounded-xl border border-emergency/20">
Säkerhet går alltid först! Därför utförs ALLT arbete minst 2 och 2.
</p>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 text-sm text-ebony/90 font-medium">
<div className="bg-white p-4 rounded-2xl shadow-sm flex items-start border border-emergency/10">
<AlertTriangle className="text-emergency shrink-0 mr-3 mt-0.5" size={20} />
<p><strong className="text-emergency">Trafik:</strong> Vid parkeringar bär vi alltid gul reflexväst.</p>
</div>
<div className="bg-white p-4 rounded-2xl shadow-sm flex items-start border border-emergency/10">
<AlertTriangle className="text-emergency shrink-0 mr-3 mt-0.5" size={20} />
<p><strong className="text-emergency">Klippor:</strong> Vi håller oss alltid minst 2 meter ifrån klippkanter.</p>
</div>
<div className="bg-white p-4 rounded-2xl shadow-sm flex items-start border border-emergency/10">
<AlertTriangle className="text-emergency shrink-0 mr-3 mt-0.5" size={20} />
<p><strong className="text-emergency">Tunga lyft:</strong> Tunga föremål lyfter vi alltid med minst två personer.</p>
</div>
<div className="bg-white p-4 rounded-2xl shadow-sm flex items-start border border-emergency/10 sm:col-span-2 lg:col-span-1">
<AlertTriangle className="text-emergency shrink-0 mr-3 mt-0.5" size={20} />
<p><strong className="text-emergency">Ormbett:</strong> Blir du biten, ring Giftinformationscentralen (010-456 67 00 eller 112) och kontakta projektledaren direkt.</p>
</div>
<div className="bg-white p-4 rounded-2xl shadow-sm flex items-start border border-emergency/10 sm:col-span-2">
<AlertTriangle className="text-emergency shrink-0 mr-3 mt-0.5" size={20} />
<p><strong className="text-emergency">Djurhagar:</strong> Håll 50 meters avstånd, klappa dem inte. Ropa <em className="font-black text-ebony">"HEJ KOSSORNA/LAMMEN"</em> eller <em className="font-black text-ebony">"MOOOOOOO!"</em> tills de uppmärksammat dig.</p>
</div>
</div>
</section>
</div>
);
};
}