Updated info and rule tab
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
+127
-41
@@ -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>
|
<h2 className="text-xl font-black text-ebony uppercase tracking-widest mb-6 flex items-center">
|
||||||
<p className="text-sm text-ebony/80 font-medium mb-4 leading-relaxed">
|
<ListChecks className="mr-3 text-slate-teal" size={24} /> Snabbguiden: Uppdrag
|
||||||
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.
|
</h2>
|
||||||
</p>
|
<p className="text-sm text-ebony/80 font-bold mb-6 leading-relaxed bg-white/60 p-4 rounded-xl border border-white">
|
||||||
<div className="bg-moss/10 rounded-xl p-4 space-y-2 border border-moss/20">
|
Arbetsuppgifterna är varierande och vi löser ofta specialuppdrag som ett team. Exempel på vad du kommer göra:
|
||||||
<div className="flex justify-between items-center">
|
</p>
|
||||||
<span className="font-bold text-ebony text-sm">Period 1</span>
|
<ul className="space-y-4 text-sm font-medium text-ebony/90">
|
||||||
<span className="text-xs font-bold bg-eggshell text-moss px-2 py-1 rounded">23 juni kl 08:10 (Buss Mölle)</span>
|
<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>
|
||||||
|
<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>
|
</div>
|
||||||
<div className="flex justify-between items-center border-t border-moss/20 pt-2">
|
</section>
|
||||||
<span className="font-bold text-ebony text-sm">Period 2</span>
|
</div>
|
||||||
<span className="text-xs font-bold bg-eggshell text-moss px-2 py-1 rounded">7 juli kl 08:10</span>
|
|
||||||
|
{/* 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>
|
||||||
);
|
);
|
||||||
};
|
}
|
||||||
Reference in New Issue
Block a user