## Beskrivelse Logoen i dag er to statiske, skjeve lapper som bare er laget med CSS. Vi vil ha en enkel animert logo som passer til notatbok-designet og viser at appen handler om handlelister, slik at siden føles mer levende. ## Foreslått løsning - Ny komponent `Logo.tsx` i `components/logo/` med et SVG-ikon og teksten «Handlelappen» - Ikonet er en handlelapp (notatark med marglinje og tre linjer) oppå en mørkerød lapp bak, som i Figma - Når siden lastes, tegnes to haker på lappen etter hverandre - Når musa er over logoen, vipper lappen litt og hakene tegnes på nytt - Fargene hentes fra `theme.css`, så logoen følger lys og mørk modus - `prefers-reduced-motion` respekteres: uten animasjon vises hakene med en gang - Logoen lenker til forsiden ## Akseptansekriterier - [x] `Logo.tsx` finnes og kan brukes i headeren med `<Logo />` - [x] Hakene animeres når siden lastes, og på nytt ved hover - [x] Logoen ser riktig ut i både lys og mørk modus - [x] Ingen animasjon når brukeren har skrudd av animasjoner - [x] Logoen har `aria-label`, og ikonet er skjult for skjermlesere (`aria-hidden`) - [x] Klikk på logoen går til forsiden ## Design/mockup Bygger på Logo-komponenten i Figma (Components → Logo). Skjermbilde av forslaget legges ved. ## Avhengighet - Når React Router er på plass, byttes `<a href="/">` med `<Link to="/">`.