ipool samlar schemaläggning, bemanning och kommunikation i en plattform — för organisationer som bemannar pass med egen, lånad och inhyrd personal.
; import { ArrowRight, Check, X, Layers, Zap, MessageSquare, Smartphone, Monitor, Sparkles, Users, Wallet, ScanLine, Boxes, BarChart3, KeyRound, MonitorSmartphone, Bell, RefreshCw, Download, Calendar, MessageCircle, Folder, ArrowLeftRight, Store, } from
; import { ArcTopRight, WaveLine, CircleBlob, CurveDown } from
; const ease: [number, number, number, number] = [0.25, 0.1, 0, 1]; function SystemNode({ icon: Icon, label, sub }: { icon: typeof Users; label: string; sub: string }) { return ( <motion.div initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, ease }} whileHover={{ y: -3 }} className=
strokeWidth={1.8} /> </div> <p className=
text-[11.5px] text-foreground/70 mt-1 leading-snug
}, ]; const differentiators = [ { icon: Layers, eyebrow:
ipool är ensam om att hantera egen, lånad och inhyrd personal i samma flöde. Bemanna ett pass från egen anställd, en kollega i grannenheten, eller från ett bemanningsföretag — utan att byta vy.
Smart matchning väljer rätt personer utifrån kompetens, anställningsgrad, arbetstidsregler och tillgänglighet. Det som tog en chef en eftermiddag tar nu fem minuter.
}, }, { icon: MessageSquare, eyebrow:
Skicka meddelanden, dela dokument, kräv läskvittens. Inga oklarheter om vem som läst rutinen, vem som missat säkerhetsinstruktionen, vem som behöver påminnas igen.
}, }, ]; const comparison: { before: string; after: string }[] = [ { before:
Kommunicera med personalen och följa upp läskvittenser
, ]; const coreModules = [ { icon: Users, name:
Bemanna snabbt med smart matchning och regelkontroller. Se medarbetares tillgänglighet, skicka förfrågningar och täck upp sjukfrånvaro på sekunder — enstaka pass eller bulk.
Dags-, vecko- och månadsscheman. Arbetstider, passförändringar, frånvaro och ledighet.
Mobil stämpling med geopositionering och NFC. Tid som hamnar rätt i lönesystemet utan handpåläggning.
Meddelanden, dokument och läskvittenser så rätt information når rätt person. Gruppkonversationer som håller hela teamet uppdaterat.
Policyer, rutiner, instruktioner, avtal och personalinformation samlat på ett ställe, lättillgängligt för hela organisationen.
, }, ]; const addOnModules = [ { icon: BarChart3, name:
Medarbetarundersökningar och pulsmätningar direkt i appen — följ upp engagemang och arbetsmiljö.
Kunder lägger beställningar, kommunicerar och följer bemanningen i realtid — i ett gemensamt flöde utan dubbelarbete.
, }, ]; export default function Produkt() { return ( <Layout> <SEO title=
ipool samlar schemaläggning, bemanning och kommunikation i en plattform — för organisationer som bemannar pass med egen, lånad och inhyrd personal.
bottom-0 -left-32 w-[460px] h-[460px] text-coral/[0.06]
> <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7, ease }} className=
inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-forest text-background mb-6 shadow-[0_4px_14px_-4px_hsl(var(--forest)/0.5)]
text-[11px] font-semibold uppercase tracking-[0.18em]
>egen, lånad eller inhyrd personal</span> </h1> <p className=
> Plattformen för organisationer som delar personal mellan enheter, butiker eller bolag. Egen, lånad och inhyrd personal i ett flöde, från en app. </p> <div className=
> Boka demo (20 min) <ArrowRight className=
>Starta pilot på en enhet</Link> </Button> </div> </motion.div> {/* Stats band */} <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.7, ease, delay: 0.15 }} className=
> {stats.map((s, i) => ( <div key={i} className=
>{s.label}</p> </div> ))} </motion.div> </div> </section> {/* WHAT iPOOL IS */} <section className=
text-[11px] font-semibold uppercase tracking-[0.22em] text-forest mb-4
font-serif text-4xl md:text-5xl leading-[1.05] tracking-[-0.025em] mb-8
-top-32 -right-32 w-[420px] h-[420px] text-forest/[0.05]
font-serif text-4xl md:text-5xl leading-[1.05] tracking-[-0.025em]
> {differentiators.map((d, i) => { const Icon = d.icon; return ( <motion.div key={d.eyebrow} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: i * 0.08, ease }} whileHover={{ y: -4 }} className=
> <span className=
h-12 w-12 rounded-full bg-foreground/[0.04] flex items-center justify-center mb-5
>{d.desc}</p> <Link to={d.link.to} className=
> Läs mer om {d.link.label} <ArrowRight className=
-top-40 -left-40 w-[520px] h-[520px] text-forest/[0.05]
-bottom-40 -right-40 w-[520px] h-[520px] text-coral/[0.06]
> <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.6, ease }} className=
text-[11px] font-semibold uppercase tracking-[0.28em] text-forest mb-5
>byter till ipool</span> </h2> <div className=
> {/* Vertical divider with arrow medallion */} <div className=
hidden md:flex absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-12 w-12 rounded-full bg-white border border-foreground/10 shadow-[0_8px_24px_-10px_rgba(0,0,0,0.15)] items-center justify-center z-10
strokeWidth={2} /> </div> {/* Innan */} <div className=
h-7 w-7 rounded-full bg-foreground/[0.06] flex items-center justify-center
strokeWidth={2.25} /> </span> <p className=
>Innan</p> </div> <ul className=
> {comparison.map((c, i) => ( <motion.li key={i} initial={{ opacity: 0, x: -10 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ duration: 0.45, delay: i * 0.05, ease }} className=
> {c.before} </motion.li> ))} </ul> </div> {/* Med ipool */} <div className=
strokeWidth={2.5} /> </span> <p className=
>Med ipool</p> </div> <ul className=
> {comparison.map((c, i) => ( <motion.li key={i} initial={{ opacity: 0, x: 10 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ duration: 0.45, delay: i * 0.05 + 0.1, ease }} className=
> {c.after} </motion.li> ))} </ul> </div> </motion.div> </div> </section> {/* MANAGER + EMPLOYEE */} <section className=
-bottom-32 -left-32 w-[460px] h-[460px] text-coral/[0.05]
> {[ { icon: Monitor, eyebrow:
as const }, { icon: Smartphone, eyebrow:
as const }, ].map((card, i) => { const Icon = card.icon; return ( <motion.div key={card.eyebrow} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: i * 0.1, ease }} className=
> <span className={`absolute top-0 left-8 right-8 h-[3px] rounded-b-full ${card.accent ===
} /> <div className="flex items-center gap-3 mb-5"> <div className="h-12 w-12 rounded-full bg-foreground/[0.04] flex items-center justify-center"> <Icon className={
}`} strokeWidth={1.8} /> </div> <p className=
>{card.eyebrow}</p> </div> <h3 className=
>{card.title}</h3> <ul className=
> {card.items.map((it, j) => ( <li key={j} className=
> <Check className={`h-4 w-4 mt-0.5 shrink-0 ${card.accent ===
}`} strokeWidth={2.5} /> <span>{it}</span> </li> ))} </ul> </motion.div> ); })} </div> </div> </section> {/* MODULES — three sub-groups: core, software add-ons, hardware add-on */} <section className=
>igång på dagar</span> </h2> <p className=
> Ni behöver inte bygga en plattform. ipool kommer med branschspecifik funktionalitet och flöden som känns självklara från första inloggningen — för chefen, medarbetaren och IT. Aktivera moduler när behoven växer; kärnplattformen täcker de operativa flödena från start. </p> </div> <div className=
> {/* GROUP 1 — Kärnplattform */} <div> <div className=
font-serif text-2xl md:text-[1.75rem] leading-none tracking-[-0.02em]
text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground
> {coreModules.map((m, i) => { const Icon = m.icon; return ( <motion.div key={m.name} initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, margin:
}} transition={{ duration: 0.45, delay: i * 0.05, ease }} whileHover={{ y: -3 }} > <Link to={m.href} className=
> <div className=
strokeWidth={1.8} /> </div> <div className=
>{m.desc}</p> <span className=
> Läs mer <ArrowRight className=
}} transition={{ duration: 0.55, ease }} whileHover={{ y: -3 }} className=
> <Link to=
group relative block rounded-3xl overflow-hidden bg-forest text-background p-8 md:p-10 lg:p-12 shadow-[0_20px_60px_-30px_rgba(0,0,0,0.30)] hover:shadow-[0_24px_70px_-28px_rgba(0,0,0,0.40)] transition-all
absolute inset-0 w-full h-full text-background/[0.07]
strokeWidth={2.5} /> Det som gör skillnad </span> <div className=
strokeWidth={1.8} /> </div> <div> <h4 className=
> Bemanningshub </h4> <p className=
> Samla egen och inhyrd personal från ett eller flera bemanningsföretag i ipool. Full överblick över tillgänglighet och kompetenser — bemanna snabbt oavsett leverantör. </p> <span className=
> Läs mer om Bemanningshub <ArrowRight className=
> {addOnModules.map((m, i) => { const Icon = m.icon; return ( <motion.div key={m.name} initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, margin:
inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-forest-soft text-forest text-[11px] font-semibold uppercase tracking-[0.16em]
strokeWidth={2} /> HÅRDVARA </span> </div> {/* Wide split card for ipool Board */} <motion.div initial={{ opacity: 0, y: 24 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, margin:
}} transition={{ duration: 0.6, ease }} className=
> {/* Left — content on sand */} <div className=
-top-10 -right-10 w-[180px] h-[180px] text-coral/[0.08]
h-12 w-12 rounded-2xl bg-forest text-background flex items-center justify-center shadow-[0_8px_24px_-8px_hsl(var(--forest)/0.5)]
strokeWidth={1.8} /> </div> <span className=
> Skärm på plats </span> </div> <h4 className=
>Board</span> </h4> <p className=
> En digital, interaktiv anslagstavla som uppdateras i realtid när schemat ändras. Sätt upp den på en touchskärm i butiken eller personalrummet — slut på inaktuella pappersscheman. </p> <ul className=
> {[
, ].map((b) => ( <li key={b} className=
mt-1.5 h-1.5 w-1.5 rounded-full bg-forest shrink-0
inline-flex items-center gap-1.5 text-sm font-semibold text-forest hover:gap-2.5 transition-all
rounded-2xl bg-foreground p-2 shadow-[0_30px_60px_-20px_rgba(0,0,0,0.55)]
text-[9px] font-semibold uppercase tracking-[0.18em] text-forest
> {[ { d:
}, ].map((r) => ( <div key={r.d} className=
>{r.d}</span> <span className=
>{r.t}</span> <span className={r.n ===
}>{r.n}</span> </div> ))} </div> <div className=
> Touchskärm i personalrummet </p> </div> </div> </motion.div> </div> </div> {/* Hardware-aware secondary CTA */} <div className=
> Vill ni se Board i en skärm hos er? Ladda ner produktbladet eller boka en demo. </p> <div className=
>era system runtomkring</span> </h2> <p className=
> ipool ersätter inte era befintliga system — vi kopplar ihop dem. Schema, bemanning och kommunikation flödar fritt mellan HR, lön, kassa, lager och beslutsstöd. </p> </div> <div className=
> {/* Connector lines */} <svg aria-hidden=
> {/* Row 1 */} <SystemNode icon={Users} label=
relative bg-forest text-background rounded-[1.75rem] px-7 py-6 shadow-[0_20px_60px_-20px_hsl(var(--forest)/0.55)] text-center
text-[10px] font-semibold uppercase tracking-[0.22em] text-background/70 mb-2
> Färdiga kopplingar mot de vanligaste systemen. Öppet API för resten. </p> </div> </section> {/* INTEGRATIONS */} <section className=
rounded-3xl bg-white border border-foreground/8 p-10 md:p-12 shadow-[0_4px_24px_-10px_rgba(0,0,0,0.10)]
> <div> <div className=
strokeWidth={2.5} /> <span className=
>Integrationer</span> </div> <h2 className=
> Integrerar med systemen ni redan har </h2> <p className=
> ipool kan användas fristående eller komplettera ert befintliga WFM- eller lönesystem. Färdiga integrationer mot Tiltid, Tidomat, Microsoft Business Central, Fortnox och Rotageek. Öppet API för det vi inte redan stödjer. </p> </div> <div className=
].map((n) => ( <div key={n} className=
> {n} </div> ))} </div> </div> </div> </div> </section> {/* FINAL CTA */} <section className=
font-serif text-4xl md:text-5xl leading-[1.05] tracking-[-0.025em] text-background
> Två sätt att komma igång. Välj det som passar er. </p> <div className=
>Boka demo — 20 min</Link> </Button> <Button asChild size=