Website

{{ with $section := .data }}
    <section class="text-accordion">
        <div class="container">
            <article class='base slow-sticky'>
                {{ if $.firstSection }}
                    {{ partial "breadcrumbs" $.page }}
                {{ else }}
                    {{ partial "kicker" . }}
                {{ end }}
                {{ partial "h1-huge" $ }}
                <div class="prose">
                    {{ partial "description" . }}
                </div>
                {{ partial "btn" . }}
            </article>
            {{ partial "faq-questions" (merge . (dict "altijd_een" true)) }}
        </div>
    </section>
{{ end }}


{{ with $section := .data }}
    <section class="product-balls has-faded-title" data-triggers='.4:flipped'>
        <div class="container">
            {{ partial "kicker" . }}
            <div class="title-box calc-perc">
                {{ partial "h1" $ }}
            </div>
            {{ with .badges }}
                <ul class="top activate-children" aria-hidden="true">
                    {{ range $i, $badge := . }}
                        <li style='--i: {{ $i }}'>
                            <div class='badge {{ .background_color | anchorize | default "lime" }}'>
                                <div class="inner">{{ partial "svg" (.icon | default "badge-heart" | urlize) }}</div>
                            </div>
                        </li>
                    {{ end }}
                </ul>
            {{ end }}
            <div class="browser" data-cursor='You' data-cursor-color='Lime'>
                <span></span>
                {{ with .tag }}<p class="has-tags"><span>{{ . }}</span></p>{{ end }}
                <div class="inner">
                    <div class="balls" data-delay=".75" data-fall-on="flipped">
                        {{ range .balls }}
                            {{ $langste := 0 }}
                            {{ range split (.title | default "") " " }}{{ $langste = math.Max $langste (len .) }}{{ end }}
                            {{ $stijl := printf "--size: %vrem" .size }}
                            {{ if gt $langste 11 }}{{ $stijl = printf "%s; --fit: %.3f" $stijl (div 11.0 $langste) }}{{ end }}
                            {{ if .url }}
                                <a href="{{ partial "lang-url" .url }}" class='ball {{ .color | anchorize }}' style='{{ $stijl | safeCSS }}' data-x='{{ .positioning.x }}' data-y='{{ .positioning.y }}'>{{ partial "inline/product-ball.html" . }}</a>
                            {{ else }}
                                <div class='ball {{ if .icon }} has-icon {{ end }} {{ if eq .icon "Badge Star" }} has-star {{ end }} {{ .color | anchorize }}' style='{{ $stijl | safeCSS }}' data-x='{{ .positioning.x }}' data-y='{{ .positioning.y }}'{{ if .icon }} aria-hidden="true"{{ end }}>{{ partial "inline/product-ball.html" . }}</div>
                            {{ end }}
                        {{ end }}
                    </div>
                </div>
            </div>
        </div>
    </section>
{{ end }}

{{ define "_partials/inline/product-ball.html" }}
    {{ with .icon }}{{ partial "svg" (. | urlize) }}{{ else }}<span>{{ $.title }}</span>{{ end }}
{{ end }}


{{ with $section := .data }}
    {{ $data := index hugo.Data (site.Language.Label | lower) }}
    {{ $avatar := "" }}
    {{ with $section.chat.selected_team }}
        {{ with index (where $data.team "title" .) 0 }}{{ $avatar = .thumbnail_image }}{{ end }}
    {{ end }}
    <section class="dex">
        <div class="container">
            <div class="browser">
                <span></span>
                <div class="has-tags">{{ partial "h6" $ }}</div>
                <div class="inner">
                    {{ with .chat }}
                        {{ $berichten := slice }}
                        {{ $rondes := slice }}
                        {{ range .conversation }}
                            {{ $vraag := dict "side" "Right" "avatar" $avatar "text" .question }}
                            {{ if and (eq .element "Image") .new_image }}{{ $vraag = merge $vraag (dict "card" (dict "image" .new_image)) }}{{ end }}
                            {{ $berichten = $berichten | append $vraag (dict "side" "Left" "avatar_icon" "dex" "text" .answer) }}
                            {{ $rondes = $rondes | append (dict "section" (.section | urlize) "element" (.element | urlize) "find" (.find | default "") "text" (.new_text | default "")) }}
                        {{ end }}
                        <div class="gesprek" data-rondes='{{ $rondes | jsonify }}'>
                            <div class="top">
                                <span class="logo" aria-hidden="true"></span>
                                {{ with .title }}<p class="h1">{{ . }}</p>{{ end }}
                            </div>
                            {{ partial "bento/chat" (dict "messages" $berichten) }}
                        </div>
                    {{ end }}

                    {{ with .site }}
                        {{ $bron := "" }}{{ with .page }}{{ $bron = partial "getPage" . }}{{ end }}
                        {{ if not $bron }}
                            {{ with .page }}{{ warnf "What is Dex op %s: pagina '%s' bestaat niet, de preview toont deze pagina zelf." $.page.RelPermalink . }}{{ end }}
                            {{ $bron = $.page }}
                        {{ end }}
                        {{ $secties := slice }}
                        {{ $typen := slice }}
                        {{ with $bron }}{{ range .Params.sections }}{{ if and (not (in (slice "Contact" "What is Dex") ._type)) (templates.Exists (print "_partials/sections/" (._type | urlize) ".html")) }}{{ $secties = $secties | append . }}{{ $typen = $typen | append (._type | urlize) }}{{ end }}{{ end }}{{ end }}
                        <div class="site" inert data-nosnippet>
                            {{ with .cursor_label }}{{ partial "cursors" (slice (dict "selected_team" . "data_color" "Black" "direction" "Left" "role" "Pointer" "positioning" (dict "x" 55 "y" 45))) }}{{ end }}
                            <div class="kop">
                                {{ with $data.lets_work }}{{ partial "btn" (merge . (dict "button_url" "#lets-work")) }}{{ end }}
                                <span class="btn lime nep-burger"><div>{{ partial "svg" "menu" }}</div><span class="text">{{ T "Menu" }}</span></span>
                                <ul class="menu">
                                    {{ range $data.header.menu }}<li>{{ .title }}{{ if .dropdown }}{{ partial "svg" "chevron-down" }}{{ end }}</li>{{ end }}
                                </ul>
                                <span class="logo">{{ partial "svg" "logo" }}</span>
                            </div>
                            <div class="rol">
                                <div class="page" data-types='{{ $typen | jsonify }}'>
                                    {{ range $i, $sectie := $secties }}
                                        {{ replaceRE `<(/?)h1([\s>])` "<${1}h2${2}" (partial (print "sections/" (._type | urlize)) (dict "page" $bron "data" . "firstSection" (eq $i 0))) | safeHTML }}
                                    {{ end }}
                                </div>
                            </div>
                            <div hidden>
                                {{ range $i, $ronde := $section.chat.conversation }}
                                    {{ if and (eq .element "Image") .new_image }}
                                        <span class="nieuw" data-ronde="{{ $i }}">{{ partial "image" (dict "path" .new_image "size" "900x900" "alt" "") }}</span>
                                    {{ end }}
                                {{ end }}
                            </div>
                        </div>
                    {{ end }}
                </div>
            </div>
        </div>
    </section>
{{ end }}


{{ with $section := .data }}
    <section class="vacancy-content detail-content">
        <div class="container">
            <div class="prose">{{ $.page.Content }}</div>
            {{ with .form }}<aside class="browser slow-sticky" id="solliciteren">{{ partial "form" (merge . (dict "page" $.page)) }}</aside>{{ end }}
        </div>
    </section>
{{ end }}


{{ with $section := .data }}
    <section class="comparison">
        <div class="container">
            {{ partial "kicker" . }}
            {{ partial "h1-huge" $ }}
            <ul class='compare-blocks activate-children'>
                {{ range .blocks }}
                    {{ partial "compare-block" (dict "block" . "firstSection" $.firstSection) }}
                {{ end }}
                {{ range $i, $j :=  slice .left_badge .right_badge }}{{ if .icon }}
                    <li aria-hidden='true' class="badge b-{{  add $i 1}} {{ .background_color | urlize }}">
                        <div class="inner">{{ partial "svg" (.icon | urlize) }}</div>
                    </li>
                {{ end }}{{ end }}
            </ul>
        </div> 
    </section>
{{ end }}

{{ with $section := .data }}
    <section class="platforms browser-split has-faded-title" data-triggers='.4:flipped'>
        <div class="container">
            <div class="browser">
                <span></span>

                <p class='has-tags'>
                    <span>{{ .tag }}</span>
                </p>


                <div class="inner">
                    {{ partial "h2" $ }}
                    {{ partial "description" . }}
                    <ul class="list activate-children">
                        {{ range .platforms }}
                            <li class='chip btn {{ if .white_text }} white-on-hover {{ end }} {{ if eq .own_color "#000000" }} needs-border {{ end }} ' style='--own-color: {{ .own_color }}'>
                                {{ if .logo_image }}{{ partial "image" (dict "path" .logo_image "size" "120x120" "alt" (print .title " logo") "non_drag" true "eager" $.firstSection) }}{{ end }}
                                <span>{{ .title }}</span>
                            </li>
                        {{ end }}
                    </ul>
                </div>

                <div class="texts">
                    {{ with .left }}
                        <article class='visible'>
                            {{ partial "sub-h6" (dict "title" .pretitle "firstSection" $.firstSection) }}
                            <div class="prose">{{ partial "description" . }}</div>
                            {{ partial "btn" . }}
                        </article>
                    {{ end }}
                </div>

            </div>
        </div> 
    </section>
{{ end }}