From 9b395ef75c00f9c73cf9d7a150b9690a0907656b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?William=20S=C3=B6derberg?= <william@soderberg.tech>
Date: Tue, 17 Mar 2026 01:25:01 +0100
Subject: [PATCH] Updated info and rule tab

---
 app/documents/page.tsx |   2 +-
 app/info/page.tsx      | 168 +++++++++++++++++++++++++++++++----------
 2 files changed, 128 insertions(+), 42 deletions(-)

diff --git a/app/documents/page.tsx b/app/documents/page.tsx
index b48ee07..1c83d8e 100644
--- a/app/documents/page.tsx
+++ b/app/documents/page.tsx
@@ -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>
diff --git a/app/info/page.tsx b/app/info/page.tsx
index 69e0cc0..f13347f 100644
--- a/app/info/page.tsx
+++ b/app/info/page.tsx
@@ -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
-                </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>
-                <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>
+            <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-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>
+                    <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>
+                        <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 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>
+                </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>
     );
-};
\ No newline at end of file
+}
\ No newline at end of file