/* global React, ReactDOM */ const { useState, useEffect, useRef, useMemo } = React; /* ============================================================ DATA — drawn from the original poster ============================================================ */ const WORKSHOPS = [ { id: "w1", date: "01 JUL", weekday: "Onsdag", time: "17:00 — 19:00", title: "Sy glidelås", host: "Katja Nielsen", price: "750,–", tag: "Kurs", link: "https://relove.hoopla.no/event/1409831992", img: "images/jul-glidelas.jpg" }, { id: "w2", date: "02 JUL", weekday: "Torsdag", time: "16:00 — 20:00", title: "Maker Night", host: "Drop-in i verkstedet", price: "350,–", note: "Gratis for medlemmer i Maker Club", tag: "Drop-in", img: "images/jul-makernight.jpg" }, { id: "w3", date: "03 JUL", weekday: "Fredag", time: "17:00 — 20:00", title: "Vennedating: Sip & Sew", host: "Sosial sykveld", price: "750,–", tag: "Event", link: "https://relove.hoopla.no/event/1411670425", img: "images/jul-sipsew.jpg" }, { id: "w4", date: "04 JUL", weekday: "Lørdag", time: "17:00 — 19:00", title: "Nålefilting", host: "Matilda Høøg", price: "950,–", tag: "Kurs", link: "https://relove.hoopla.no/event/343689238", img: "images/jul-nalefilting.jpg" }, { id: "w5", date: "06 JUL", weekday: "Mandag", time: "16:00 — 20:00", title: "Reparasjonstreff", host: "Katya Bukhantsova", price: "Gratis", note: "Drop-in", tag: "Gratis", img: "images/jul-reparasjon.jpg" }, { id: "w6", date: "07 JUL", weekday: "Tirsdag", time: "17:00 — 19:00", title: "Broderiteknikker", host: "Katya Bukhantsova", price: "750,–", tag: "Kurs", link: "https://relove.hoopla.no/event/2017806094", img: "images/jul-broderi.jpg" }, { id: "w7", date: "08 JUL", weekday: "Onsdag", time: "17:00 — 19:00", title: "Kunsthekling: ringer og buer", host: "Katya Bukhantsova", price: "750,–", tag: "Kurs", link: "https://relove.hoopla.no/event/215383303", img: "images/jul-kunsthekling.jpg" }, { id: "w8", date: "09 JUL", weekday: "Torsdag", time: "16:00 — 20:00", title: "Maker Night", host: "Drop-in i verkstedet", price: "350,–", note: "Gratis for medlemmer i Maker Club", tag: "Drop-in", img: "images/jul-makernight.jpg" }, { id: "w9", date: "10 JUL", weekday: "Fredag", time: "17:00 — 20:00", title: "Vennedating: Sip & Sew", host: "Sosial sykveld", price: "750,–", tag: "Event", link: "https://relove.hoopla.no/event/1192711777", img: "images/jul-sipsew2.jpg" }, { id: "w10", date: "11 JUL", weekday: "Lørdag", time: "17:00 — 19:00", title: "Trykk på tetrapack", host: "Tone Eikholt", price: "750,–", tag: "Kurs", link: "https://relove.hoopla.no/event/163460475", img: "images/jul-trykk.jpg" }, { id: "w11", date: "14 JUL", weekday: "Tirsdag", time: "17:00 — 19:00", title: "Trykk på tetrapack", host: "Tone Eikholt", price: "750,–", tag: "Kurs", link: "https://relove.hoopla.no/event/942084954", img: "images/jul-trykk.jpg" }, { id: "w12", date: "15 JUL", weekday: "Onsdag", time: "17:00 — 20:00", title: "Franske sømmer & tote-bag", host: "Katja Nielsen", price: "940,–", tag: "Kurs", link: "https://relove.hoopla.no/event/40268561", img: "images/jul-totebag.jpg" }, { id: "w13", date: "16 JUL", weekday: "Torsdag", time: "16:00 — 20:00", title: "Maker Night", host: "Drop-in i verkstedet", price: "350,–", note: "Gratis for medlemmer i Maker Club", tag: "Drop-in", img: "images/jul-makernight.jpg" }, { id: "w14", date: "17 JUL", weekday: "Fredag", time: "17:00 — 20:00", title: "Vennedating: Sip & Sew", host: "Sosial sykveld", price: "750,–", tag: "Event", link: "https://relove.hoopla.no/event/1958438173", img: "images/jul-sipsew.jpg" }, { id: "w15", date: "18 JUL", weekday: "Lørdag", time: "17:00 — 19:00", title: "Trykk på tetrapack", host: "Tone Eikholt", price: "750,–", tag: "Kurs", link: "https://relove.hoopla.no/event/1606698611", img: "images/jul-trykk.jpg" }, { id: "w16", date: "21 JUL", weekday: "Tirsdag", time: "17:00 — 19:00", title: "Tekstilillustrasjon og håndsøm", host: "Anna Lubchencko", price: "750,–", tag: "Kurs", link: "https://relove.hoopla.no/event/1545759040", img: "images/jul-tekstil.jpg" }, { id: "w17", date: "22 JUL", weekday: "Onsdag", time: "17:00 — 20:00", title: "Konstruer og sy sirkelskjørt", host: "Katya Bukhantsova", price: "950,–", tag: "Kurs", link: "https://relove.hoopla.no/event/1924548676", img: "images/jul-sirkelskjort.jpg" }, { id: "w18", date: "23 JUL", weekday: "Torsdag", time: "16:00 — 20:00", title: "Maker Night", host: "Drop-in i verkstedet", price: "350,–", note: "Gratis for medlemmer i Maker Club", tag: "Drop-in", img: "images/jul-makernight.jpg" }, { id: "w19", date: "24 JUL", weekday: "Fredag", time: "17:00 — 20:00", title: "Vennedating: Sip & Sew", host: "Sosial sykveld", price: "750,–", tag: "Event", link: "https://relove.hoopla.no/event/1691491900", img: "images/jul-sipsew2.jpg" }, { id: "w20", date: "25 JUL", weekday: "Lørdag", time: "17:00 — 19:00", title: "Nålefilting", host: "Matilda Høøg", price: "750,–", tag: "Kurs", link: "https://relove.hoopla.no/event/403982470", img: "images/jul-nalefilting.jpg" }, { id: "w21", date: "28 JUL", weekday: "Tirsdag", time: "17:00 — 19:00", title: "Lær deg håndsøm", host: "Katya Bukhantsova", price: "750,–", tag: "Kurs", link: "https://relove.hoopla.no/event/1627662032", img: "images/jul-handsom.jpg" }, { id: "w22", date: "29 JUL", weekday: "Onsdag", time: "17:00 — 19:00", title: "Trykk på tetrapack", host: "Tone Eikholt", price: "750,–", tag: "Kurs", link: "https://relove.hoopla.no/event/1238525817", img: "images/jul-trykk.jpg" }, { id: "w23", date: "30 JUL", weekday: "Torsdag", time: "16:00 — 20:00", title: "Maker Night", host: "Drop-in i verkstedet", price: "350,–", note: "Gratis for medlemmer i Maker Club", tag: "Drop-in", img: "images/jul-makernight.jpg" }, { id: "w24", date: "31 JUL", weekday: "Fredag", time: "17:00 — 20:00", title: "Vennedating: Sip & Sew", host: "Sosial sykveld", price: "750,–", tag: "Event", link: "https://relove.hoopla.no/event/1691491900", img: "images/jul-sipsew.jpg" }]; const SERVICES = [ { id: "s1", title: "Reparasjon", desc: "Knapper, hull, ødelagte glidelåser, sliter, slitne sømmer. Ta med i butikken — vi gir pris på flekken.", more: "Knapper, hull, ødelagte glidelåser, slitne sømmer. Ta med - vi gir deg en pris på.", price: "", img: "p5.jpg", color: "#0da959" }, { id: "s2", title: "Omsøm", desc: "Ta inn, slipp ut, korte ned. Klassisk skredderarbeid på dine egne plagg.", more: "Ta inn, legg opp eller ned. Vi tar tilpassing av bunader.", price: "", img: "p2.jpg", color: "#0da959" }, { id: "s3", title: "Broderi", desc: "Mono­grammer, logoer, motiv. Vi har en Melco 16-nålers maskin og digitaliserer ditt motiv.", more: "Alt av broderi på plagg. Vi digitaliserer ditt motiv og broderer på en Melco 16-nålers maskin. Stikk innom eller ta kontakt på e-post.", price: "", img: "p6.jpg", color: "#0da959" }, { id: "s4", title: "Redesign", desc: "Snakk med oss om plagget du elsker men ikke bruker. Vi tegner det om til noe du faktisk vil ha på.", more: "Snakk med oss om plagget du elsker men ikke bruker. Vi tegner det om til noe du faktisk vil ha på.", price: "", img: "p3.jpg", color: "#0da959" }, { id: "s5", title: "2.hand", desc: "Kuratert utvalg av brukte plagg, materialer og rester — alt klart til nytt liv.", more: "Kuratert utvalg av brukte plagg, materialer og rester — alt klart til nytt liv.", price: "", img: "2hand.jpg", color: "#0da959" }, { id: "s6", title: "Circular Maker", desc: "Stoff­rester, knapper, glidelåser, garn — gjenbruks­materialer du kan kjøpe på vekt.", more: "DIY-kits, materialepakker og hobbyartikler av gjenbruksmaterialer. Kom innom og se utvalget.", price: "", img: "p1", color: "#0da959" }]; const PICKER_OPTIONS = [ { q: "Glidelås røket", to: "s1", icon: "⌇" }, { q: "For stort i livet", to: "s2", icon: "↤↦" }, { q: "Hull i kneet", to: "s1", icon: "◌" }, { q: "Vil ha logo / navn på", to: "s3", icon: "✦" }, { q: "Kjedelig kjole jeg ikke bruker", to: "s4", icon: "↻" }, { q: "Trenger stoff til prosjekt", to: "s6", icon: "▤" }, { q: "Knapp falt av", to: "s1", icon: "●" }, { q: "Vil lære selv", to: null, icon: "✎", workshop: true }]; const STATS = [ { n: 1284, label: "plagg reparert" }, { n: 312, label: "kg stoff i materialbanken" }, { n: 47, label: "kurs holdt" }, { n: 6, label: "dager til åpning" }]; /* ============================================================ PRIMITIVES ============================================================ */ function Tag({ children, color = "var(--ink)", bg = "transparent", border = true }) { return ( {children}); } function Dot({ size = 8, color = "var(--green)" }) { return ; } /* ============================================================ ANIMATED HERO ORBS — re-creating the poster's two big circles but alive: they breathe, drift, react to mouse ============================================================ */ function HeroOrbs({ mouseX, mouseY }) { const t = useRef(0); const [, force] = useState(0); useEffect(() => { let raf; const tick = () => {t.current += 0.006;force((n) => n + 1);raf = requestAnimationFrame(tick);}; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); const phase = t.current; const sway = Math.sin(phase) * 18; const sway2 = Math.cos(phase * 0.8) * 12; const px = (mouseX - 0.5) * 30; const py = (mouseY - 0.5) * 20; return ( {/* dark orb (left) — softened so text stays readable */} {/* green orb (right) */} {/* small floating circles like in original */} ); } /* ============================================================ HERO ============================================================ */ function Hero({ tweaks }) { const [mouse, setMouse] = useState({ x: 0.5, y: 0.5 }); const [tagline, setTagline] = useState(0); const taglines = ["Reparasjon.", "Redesign.", "Håndarbeid.", "Kreativitet.", "Fellesskap."]; useEffect(() => { const id = setInterval(() => setTagline((t) => (t + 1) % taglines.length), 1800); return () => clearInterval(id); }, []); const onMove = (e) => { const r = e.currentTarget.getBoundingClientRect(); setMouse({ x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height }); }; // countdown to opening: 29 May 2026, 17:00 const [now, setNow] = useState(() => new Date()); useEffect(() => {const id = setInterval(() => setNow(new Date()), 1000);return () => clearInterval(id);}, []); const target = useMemo(() => new Date("2026-05-29T17:00:00+02:00"), []); const diff = Math.max(0, target - now); const days = Math.floor(diff / 86400000); const hours = Math.floor(diff % 86400000 / 3600000); const mins = Math.floor(diff % 3600000 / 60000); const secs = Math.floor(diff % 60000 / 1000); return (
CIRCULAR
MAKER
STUDIO

Bærekraftig omstilling i praksis på{" "} Sagene i Oslo. 2.hand, broderitjenester, kurs og samlinger.

Vi driver med {taglines.map((t, i) => {t} )}
); } function NavStrip() { return (
CIRCULAR MAKER STUDIO
); } /* ============================================================ MARQUEE — values ============================================================ */ function Marquee() { const items = [ "Reparasjon", "•", "Redesign", "•", "Håndarbeid", "•", "Kreativitet", "•", "Fellesskap", "•", "2.hand", "•", "Broderi", "•", "Materialbank", "•", "Reparasjonscafé"]; return (
{[...items, ...items, ...items].map((it, i) => {it} )}
); } /* ============================================================ STATS BAR (animated count up) ============================================================ */ function Counter({ to, duration = 1400 }) { const [v, setV] = useState(0); const ref = useRef(); const started = useRef(false); useEffect(() => { const obs = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting && !started.current) { started.current = true; const t0 = performance.now(); const step = (t) => { const p = Math.min(1, (t - t0) / duration); setV(Math.round(to * (1 - Math.pow(1 - p, 3)))); if (p < 1) requestAnimationFrame(step); }; requestAnimationFrame(step); } }); }, { threshold: 0.5 }); if (ref.current) obs.observe(ref.current); return () => obs.disconnect(); }, [to]); return {v.toLocaleString("nb-NO")}; } function StatsBar() { return (
{STATS.map((s) =>
{s.label}
)}
); } /* ============================================================ SCHEDULE — interactive workshop list ============================================================ */ function Schedule() { const [filter, setFilter] = useState("Alle"); const [hover, setHover] = useState(null); const tags = ["Alle", "Kurs", "Drop-in", "Gratis", "Event"]; const list = filter === "Alle" ? WORKSHOPS : WORKSHOPS.filter((w) => w.tag === filter); return (
Kurs & events

Hva skjer i juli

{tags.map((t) => )}
); } /* ============================================================ PICKER — "What did you bring in?" ============================================================ */ function Picker() { const [chosen, setChosen] = useState(null); const result = chosen ? PICKER_OPTIONS.find((o) => o.q === chosen) : null; const matched = result && result.to ? SERVICES.find((s) => s.id === result.to) : null; return (
Hjelp meg velge

Hva har du
med deg i dag?

Klikk det som ligner mest. Vi viser deg hvilken tjeneste som passer — eller om det finnes et kurs der du kan lære å fikse det selv.

{PICKER_OPTIONS.map((o) => )}
{matched && <>
Vi anbefaler →
{matched.title}
{matched.desc}
{matched.price} Bestill →
} {result && result.workshop && <>
Lær det selv →
Kom på kurs
Vi har kurs hver uke der du lærer å reparere og sy om plagg selv. Ingen forkunnskaper.
fra 0 kr (drop-in) Se kurs →
}
); } /* ============================================================ SERVICES GRID ============================================================ */ function Services() { const [open, setOpen] = useState(null); return (
Tjenester

Det vi gjør, hver dag

Stikk innom på Maridalsveien 154 — eller bestill på forhånd.

{SERVICES.map((s, i) =>
setOpen(open === s.id ? null : s.id)} style={{ "--i": i }}>

{s.title}

{s.price}

{s.more}

)}
); } /* ============================================================ MAKER KLUBBEN ============================================================ */ function Klubben() { const [tab, setTab] = useState("nights"); const benefits = [ { icon: "✦", t: "Gratis Maker Nights", d: "Alle torsdager kl. 16–20 — fri tilgang for medlemmer." }, { icon: "%", t: "20 % rabatt på kurs", d: "Rabattkoden sendes sammen med faktura for medlemskapet og gjelder alle mini-kurs og workshops." }, { icon: "◐", t: "Førvisninger", d: "Invitasjoner til medlemskvelder og spesielle arrangementer." }, { icon: "↻", t: "Bruk verkstedet jevnlig", d: "Utvikle ferdighetene over tid i et fast fellesskap." }, ]; return (
Maker Club

Skap, reparer
og jobb med egne
prosjekter.

Et åpent verksted og et kreativt fellesskap. Lån utstyr, få veiledning, og bli en del av miljøet — drop-in eller som medlem.

{tab === "nights" && (

Drop-in Maker Nights

En åpen kveld der du jobber med dine egne sy- og redesign­prosjekter i verkstedet vårt. Reparer favoritt­plagget, test nye ideer, eller bare ta en kreativ pause i hverdagen — vi gir deg plass, utstyr og et inspirerende miljø.

  • → Tilgang til symaskiner og syutstyr
  • → Sosialt og kreativt arbeids­fellesskap
  • → Mulighet for veiledning på egne prosjekter
)} {tab === "club" && (

Bli medlem i Maker Club

For deg som vil bruke verkstedet jevnlig og utvikle ferdighetene dine over tid. Medlemskap gir både fri tilgang og rabatter — pluss invitasjoner til arrangementer som ikke er åpne for alle.

{benefits.map(b => (
{b.icon}
{b.t}
{b.d}
))}
)}
); } /* ============================================================ PARTNERS / VISIT / FOOTER ============================================================ */ function Partners() { return (
I sirkel med

Drevet av RELOVE & Re//Lab

Circular Maker Studio er et samarbeid mellom Relove og Re//Lab — to organisasjoner som jobber med å forlenge livet til klærne dine.

Relove
Sosial entreprenør
Re//Lab
Tekstil-laboratorium
); } function Visit() { return (
Besøk oss

Maridalsveien 154

0461 Oslo 

Tirsdag
10:00 — 16:00
Onsdag
10:00 — 16:00
Torsdag
10:00 — 20:00
Lørdag
12:00 — 16:00
Andre dager
Stengt
kontakt@relove.info +47 984 42 960