diff --git a/website/public/images/kitt-hero-illustration.png b/website/public/images/kitt-hero-illustration.png new file mode 100644 index 0000000..7dbc430 Binary files /dev/null and b/website/public/images/kitt-hero-illustration.png differ diff --git a/website/src/pages/om-kitt.astro b/website/src/pages/om-kitt.astro index fb2f23a..23cf502 100644 --- a/website/src/pages/om-kitt.astro +++ b/website/src/pages/om-kitt.astro @@ -1,36 +1,808 @@ --- import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro'; + +const coreTeam = [ + { + name: 'Roberto Carrera', + role: 'Team leder og Fagansvarlig for KI', + avatar: 'https://avatars.githubusercontent.com/u/7873274?v=4', + github: 'rcarrera', + email: 'roberto.andres.carrera@digdir.no', + }, + { + name: 'Adi Dahl', + role: 'Teknisk leder for KI', + avatar: 'https://avatars.githubusercontent.com/u/15326741?v=4', + github: 'adidahl', + email: 'adi.dahl@digdir.no', + }, + { + name: 'Dirk Lammering', + role: 'KI-innovasjonsleder', + avatar: 'https://avatars.githubusercontent.com/u/92978788?v=4', + github: 'dirklammering', + email: 'dirk.stuart.lammering@digdir.no', + }, +]; + +const virtualTeam = [ + { + name: 'Ole Bay Hansen', + role: 'Produktutvikling', + location: 'Fast · Oslo', + }, + { + name: 'Sebastian Duran', + role: 'Plattformengineering', + location: 'Fast · Oslo', + }, + { + name: 'Eira Marie S. B. Scherjon', + role: 'UX / Design', + location: 'Fast · Oslo', + avatar: 'https://avatars.githubusercontent.com/u/227562831?v=4', + }, +]; + +const steps = [ + { + title: 'Behovskartlegging', + desc: 'Vi starter med en innledende samtale for å forstå teamets spesifikke behov og utfordringer knyttet til KI – innenfor BODs kontekst og Digdirs retningslinjer.', + active: true, + }, + { + title: 'Analyse og vurdering', + desc: 'Våre eksperter analyserer mulige løsninger med fokus på teknisk gjennomførbarhet, etikk og regelverk (f.eks. GDPR og KI-forordningen).', + active: false, + }, + { + title: 'Rådgivning og støtte', + desc: 'Vi gir konkrete anbefalinger og tilbyr veiledning i implementeringsfasen for å sikre trygg og verdiøkende bruk.', + active: false, + }, + { + title: 'Kunnskapsdeling', + desc: 'Erfaringer fra prosjektet deles som beste praksis internt i BOD, slik at hele avdelingen lærer og vokser sammen.', + active: false, + }, +]; --- -
-

Om KITT

-

Denne siden er en midlertidig plassholder for informasjon om KI HUB.

-
- +
+ + +
+
+
+ +
+ KI Tilretteleggingsteam +

Om KITT-teamet

+

+ KITT er et tilretteleggingsteam under avdelingen Brukeropplevelse og Datadeling (BOD) + i Digdir. Vi støtter team i BOD med å ta i bruk kunstig intelligens på en trygg, + enkel og verdiskapende måte – gjennom hele produktets livsløp. +

+
+ + + + +
+
+
+ + +
+
+
+
+

Medlemmer i teamet

+

Kjernemedlemmene i KITT under BOD

+
+ + + Slack-kanal for teamet + +
+ + +
+ {coreTeam.map(member => ( +
+
+ {`Profilbilde + +
+

{member.name}

+

{member.role}

+
+
+ + + GitHub + + + + E-post + +
+
+ ))} +
+
+
+ + +
+
+
+
+

Virtuelt team

+

Bidragsytere fra ulike fagmiljøer i BOD

+
+ +
+ + +
+ {virtualTeam.map(member => ( +
+ {member.avatar ? ( + {`Profilbilde + ) : ( + + )} +
+

{member.name}

+

{member.role}

+ {member.location} +
+
+ ))} +
+
+
+ + +
+
+
+

Slik jobber vi

+

+ Vår prosess for å støtte team i BOD med KI-initiativer, fra idé til implementering og avvikling. +

+
+ +
+ + + {steps.map((item, i) => ( +
+ +
+ +

{item.title}

+

{item.desc}

+
+
+ ))} +
+
+
+ + +
+
+
+
+

Ta kontakt med KITT

+

+ Har teamet ditt spørsmål om KI, eller ønsker dere støtte til et initiativ? + Vi er tilgjengelig på e-post og Slack. +

+
+
+ + + Åpne Slack-kanal + +
+
+
+
+ +
+ + + .kitt-member-role { + font-size: var(--ds-body-sm-font-size); + font-weight: var(--ds-font-weight-semibold); + color: var(--ds-color-accent-text-subtle); + text-transform: uppercase; + letter-spacing: 0.04em; + margin: 0 0 var(--ds-size-3); + } + + .kitt-member-divider { + width: var(--ds-size-8); + height: 2px; + background: color-mix(in srgb, var(--ds-color-accent-base-default) 30%, transparent); + border-radius: var(--ds-border-radius-full); + margin-bottom: var(--ds-size-3); + } + + .kitt-member-links { + display: flex; + flex-direction: column; + gap: var(--ds-size-2); + align-items: center; + margin-top: auto; + padding-top: var(--ds-size-3); + } + + .kitt-member-link { + display: inline-flex; + align-items: center; + gap: var(--ds-size-1); + font-size: var(--ds-body-sm-font-size); + color: var(--ds-color-neutral-text-subtle); + text-decoration: none; + transition: color var(--transition); + } + + .kitt-member-link:hover { + color: var(--ds-color-accent-text-subtle); + } + + /* ── Virtual team ─────────────────────────────────────────── */ + .kitt-virtual-head { + display: flex; + align-items: center; + gap: var(--ds-size-4); + margin-bottom: var(--ds-size-6); + } + + .kitt-rule { + flex: 1; + height: 1px; + background: linear-gradient( + to right, + color-mix(in srgb, var(--ds-color-accent-base-default) 30%, transparent), + transparent + ); + } + + .kitt-virtual-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--ds-size-4); + align-items: stretch; + } + + .kitt-virtual-card { + display: flex; + align-items: center; + gap: var(--ds-size-4); + padding: var(--ds-size-4); + border-radius: var(--ds-border-radius-lg); + background: var(--ds-color-neutral-surface-default); + height: 100%; + margin-top: 0; + } + + .kitt-virtual-avatar { + width: 56px; + height: 56px; + border-radius: 50%; + object-fit: cover; + border: 2px solid var(--ds-color-neutral-border-subtle); + flex-shrink: 0; + } + + .kitt-virtual-info { min-width: 0; } + + .kitt-virtual-name { + font-size: var(--ds-body-sm-font-size); + font-weight: var(--ds-font-weight-semibold); + color: var(--ds-color-neutral-text-default); + margin: 0 0 2px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .kitt-virtual-role { + font-size: var(--ds-body-sm-font-size); + font-weight: var(--ds-font-weight-medium); + color: var(--ds-color-accent-text-subtle); + margin: 0 0 2px; + } + + .kitt-virtual-meta { + font-size: var(--ds-body-sm-font-size); + color: var(--ds-color-neutral-text-subtle); + } + + /* ── Timeline ──────────────────────────────────────────────── */ + .kitt-timeline-header { + max-width: 640px; + margin: 0 auto var(--ds-size-12); + } + + .kitt-timeline { + position: relative; + max-width: 640px; + margin: 0 auto; + display: flex; + flex-direction: column; + } + + .kitt-timeline-track { + position: absolute; + left: 4px; + top: clamp(1.25rem, 2.5vw, 1.75rem); + bottom: 0; + width: 2px; + background: linear-gradient( + to bottom, + var(--ds-color-accent-border-default) 0%, + var(--ds-color-neutral-border-subtle) 70%, + transparent 100% + ); + } + + .kitt-step { + display: flex; + align-items: flex-start; + gap: var(--ds-size-7); + padding-bottom: var(--ds-size-12); + } + + .kitt-step:last-child { + padding-bottom: 0; + } + + .kitt-step-dot { + width: 10px; + height: 10px; + border-radius: 50%; + background: var(--ds-color-neutral-border-default); + flex-shrink: 0; + margin-top: calc(clamp(1.25rem, 2.5vw, 1.75rem) - 5px); + position: relative; + z-index: 1; + } + + .kitt-step--active .kitt-step-dot { + width: 12px; + height: 12px; + background: var(--ds-color-accent-base-default); + margin-top: calc(clamp(1.25rem, 2.5vw, 1.75rem) - 6px); + box-shadow: 0 0 0 3px var(--ds-color-accent-background-default), + 0 0 0 5px var(--ds-color-accent-border-subtle); + } + + .kitt-step-body { + display: flex; + flex-direction: column; + min-width: 0; + } + + .kitt-step-num { + display: block; + font-size: clamp(2.5rem, 5vw, 3.5rem); + font-weight: var(--ds-font-weight-semibold); + line-height: 1; + letter-spacing: -0.02em; + color: color-mix(in srgb, var(--ds-color-accent-base-default) 20%, var(--ds-color-neutral-border-subtle)); + margin-bottom: var(--ds-size-3); + } + + .kitt-step--active .kitt-step-num { + color: var(--ds-color-accent-base-default); + } + + .kitt-step-title { + font-size: var(--ds-heading-sm-font-size); + font-weight: var(--ds-font-weight-bold); + color: var(--ds-color-neutral-text-default); + margin: 0 0 var(--ds-size-2); + } + + .kitt-step-desc { + font-size: var(--ds-body-md-font-size); + line-height: var(--ds-body-long-md-line-height); + color: var(--ds-color-neutral-text-subtle); + margin: 0; + max-width: 520px; + } + + /* ── Improvement #7: Bottom CTA band ─────────────────────── */ + .kitt-contact-band { + margin-top: var(--ds-size-22); + padding: var(--ds-size-14) 0; + background: var(--ds-color-accent-background-default); + border-top: var(--ds-border-width-default) solid var(--ds-color-accent-border-subtle); + border-bottom: var(--ds-border-width-default) solid var(--ds-color-accent-border-subtle); + } + + .kitt-contact-inner { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--ds-size-8); + flex-wrap: wrap; + } + + .kitt-contact-text { + flex: 1; + min-width: 260px; + } + + .kitt-contact-title { + font-size: var(--ds-heading-lg-font-size); + font-weight: var(--ds-font-weight-bold); + line-height: 1.12; + color: var(--ds-color-accent-text-default); + margin: 0 0 var(--ds-size-2); + } + + .kitt-contact-desc { + font-size: var(--ds-body-md-font-size); + line-height: var(--ds-body-long-md-line-height); + color: var(--ds-color-accent-text-subtle); + margin: 0; + max-width: 480px; + } + + .kitt-contact-actions { + display: flex; + align-items: center; + gap: var(--ds-size-3); + flex-wrap: wrap; + } + + /* ── Responsive ───────────────────────────────────────────── */ + @media (max-width: 900px) { + .kitt-hero-visual { display: none; } + .kitt-hero-title { font-size: var(--ds-heading-xl-font-size); } + + .kitt-members-grid, + .kitt-virtual-grid { + grid-template-columns: 1fr; + max-width: 420px; + margin-inline: auto; + } + + .kitt-section-head { + flex-direction: column; + align-items: flex-start; + } + + + .kitt-contact-inner { + flex-direction: column; + align-items: flex-start; + } + } + + @media (max-width: 600px) { + .kitt-hero-title { + font-size: var(--ds-heading-lg-font-size); + } + + .kitt-hero-desc { + font-size: var(--ds-body-md-font-size); + line-height: var(--ds-body-long-md-line-height); + } + + .kitt-hero { + padding: var(--ds-size-8) 0; + } + + .kitt-contact-actions { + flex-direction: column; + align-items: stretch; + width: 100%; + } + + .kitt-slack-btn { + justify-content: center; + } + } + +