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 && ( {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"> <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> </span>
)} )}
</div> </div>
app/info/page.tsx
+125 -39
View File
@@ -1,6 +1,6 @@
// app/info/page.tsx // 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() { export default function JobInfo() {
return ( return (
@@ -10,54 +10,140 @@ export default function JobInfo() {
<Briefcase className="mr-3 text-seafoam" size={32} /> <Briefcase className="mr-3 text-seafoam" size={32} />
Jobbinfo & Regler Jobbinfo & Regler
</h1> </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> </div>
<section className="bg-eggshell border-2 border-slate-teal/20 p-6 rounded-2xl shadow-sm"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
<h2 className="text-lg font-black text-ebony uppercase tracking-widest mb-3 flex items-center"> {/* VAD GÖR VI? */}
<CheckCircle2 className="mr-2 text-moss" size={20} /> Förväntningar <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> </h2>
<p className="text-sm text-ebony/80 font-medium mb-4 leading-relaxed"> <p className="text-sm text-ebony/80 font-bold mb-6 leading-relaxed bg-white/60 p-4 rounded-xl border border-white">
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. Arbetsuppgifterna är varierande och vi löser ofta specialuppdrag som ett team. Exempel på vad du kommer göra:
</p> </p>
<div className="bg-moss/10 rounded-xl p-4 space-y-2 border border-moss/20"> <ul className="space-y-4 text-sm font-medium text-ebony/90">
<div className="flex justify-between items-center"> <li className="flex items-start bg-white/40 p-3 rounded-xl">
<span className="font-bold text-ebony text-sm">Period 1</span> <span className="text-seafoam mr-3 mt-0.5 font-black">✦</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> <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>
<div className="flex justify-between items-center border-t border-moss/20 pt-2"> </div>
<span className="font-bold text-ebony text-sm">Period 2</span> <div className="bg-gold/20 p-4 rounded-2xl flex items-start">
<span className="text-xs font-bold bg-eggshell text-moss px-2 py-1 rounded">7 juli kl 08:10</span> <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>
</div> </div>
</section> </section>
<section className="bg-eggshell border-2 border-slate-teal/20 p-6 rounded-2xl shadow-sm"> {/* SÄKERHET */}
<h2 className="text-lg font-black text-ebony uppercase tracking-widest mb-3 flex items-center"> <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">
<Navigation className="mr-2 text-moss" size={20} /> Daglig Utrustning <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> </h2>
<ul className="grid grid-cols-1 md:grid-cols-2 gap-3"> <p className="text-sm text-emergency/80 font-black mb-6 leading-relaxed bg-white/50 p-4 rounded-xl border border-emergency/20">
{['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) => ( Säkerhet går alltid först! Därför utförs ALLT arbete minst 2 och 2.
<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"> </p>
<div className="w-2 h-2 rounded-full bg-slate-teal mr-3 shrink-0"></div> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 text-sm text-ebony/90 font-medium">
{item} <div className="bg-white p-4 rounded-2xl shadow-sm flex items-start border border-emergency/10">
</li> <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>
</ul> </div>
</section> <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} />
<section className="bg-eggshell border-2 border-slate-teal/20 p-6 rounded-2xl shadow-sm"> <p><strong className="text-emergency">Klippor:</strong> Vi håller oss alltid minst 2 meter ifrån klippkanter.</p>
<h2 className="text-lg font-black text-ebony uppercase tracking-widest mb-3 flex items-center"> </div>
<Briefcase className="mr-2 text-moss" size={20} /> Exempel på uppgifter <div className="bg-white p-4 rounded-2xl shadow-sm flex items-start border border-emergency/10">
</h2> <AlertTriangle className="text-emergency shrink-0 mr-3 mt-0.5" size={20} />
<ul className="space-y-2 text-sm font-bold text-ebony/80"> <p><strong className="text-emergency">Tunga lyft:</strong> Tunga föremål lyfter vi alltid med minst två personer.</p>
{['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) => ( </div>
<li key={idx} className="flex items-center"> <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">
<span className="text-seafoam mr-2">✦</span> {task} <AlertTriangle className="text-emergency shrink-0 mr-3 mt-0.5" size={20} />
</li> <p><strong className="text-emergency">Ormbett:</strong> Blir du biten, ring Giftinformationscentralen (010-456 67 00 eller 112) och kontakta projektledaren direkt.</p>
))} </div>
</ul> <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> </section>
</div> </div>
); );
}; }