Website

{{ with $section := .data }}
    <section class='text has-faded-title {{ .text_horizontal_position | anchorize | default "center" }}{{ if and .images (index .images 0).image }} has-images {{ end }}' data-type="{{ ._type }}"> 
        <div class="container">
            <article class='{{ .text_alignment | anchorize | default "center" }} calc-perc' data-done='.5'>
                {{ partial "kicker" . }}
                <div class="title-box calc-perc">
                    {{ partial "h1" $ }}
                    {{ range .text_stickers }}
                        {{ partial "text-sticker" (dict "text" .title "color" .background_color "class" (lower .position) "offset" .offset) }}
                    {{ end }}
                </div>

                {{ with .description }}
                    <div class="prose activate-children {{ if ge (len .) 180 }} long {{ end }}">
                        {{ partial "description" $section }}
                    </div>
                {{ end }}
                {{ partial "buttons" . }}

            </article>
        </div> 
        {{ if and .images (index .images 0).image }} 
            {{- $n := len .images -}}
            <ul class="images activate-children" style='--ranks: {{ int (math.Ceil (div (float $n) 2)) }}'>
                {{ range $i, $j := .images }}
                    {{- $k := add $i 1 -}}
                    {{- $across := mod (mul $k 5) 7 -}}
                    {{- /* Het vierde beeld kwam met 6 tegen de kop aan te liggen; met 1 staat
                           het tegen de rand. Handmatige keuze van Guus, geen regel. */ -}}
                    {{- if eq $k 4 }}{{ $across = 1 }}{{ end -}}
                    <li style='--lane: {{ mod $i 2 }}; --rank: {{ int (math.Floor (div (float $i) 2)) }}; --shift-across: {{ $across }}; --shift-along: {{ sub (mod (mul $k 2) 7) 3 }}; --shift-size: {{ mod (mul $k 7) 4 }}'>
                        {{ partial "image" (dict
                            "path" .image
                            "size" "400x500"
                            "eager" $.firstSection
                            "alt" .alt_text
                        ) }}
                    </li>
                {{ end }}
            </ul>
        {{ end }}
    </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 }}

{{ with $section := .data }}
    {{ with where (partial "vacancies-articles" $.page) "Permalink" "!=" $.page.Permalink }}
        <section class="other-vacancies">
            <div class="container">
                <div class="top">
                    {{ partial "h1" $ }}
                    {{ partial "btn" $section }}
                </div>
                <ul class="vacancy-list">
                    {{ range . }}{{ partial "vacancy-card" . }}{{ end }}
                </ul>
            </div>
        </section>
    {{ end }}
{{ end }}


{{ with $section := .data }}
    <section class="results-figures browser-split {{ if .title }} has-faded-title {{ end }}">
        <div class="container">
            {{ partial "kicker" . }}
            {{ if .title }}
                <div class="title-box calc-perc">
                    {{ partial "h1-huge" $ }}
                </div>
            {{ end }}
            {{ partial "inline/results-badges.html" .badges }}
            <div class="browser">
                <span></span>
                {{ with .tag }}<p class="has-tags"><span>{{ . }}</span></p>{{ end }}
                {{ with .case }}
                    <div class="texts">
                        <article class="visible">
                            {{ partial "sub-h6" (dict "title" .title) }}
                            <div class="prose">{{ partial "description" . }}</div>
                            {{ partial "btn" . }}
                        </article>
                    </div>
                {{ end }}
                <div class="inner">
                    {{ range .figures }}
                        {{ if templates.Exists (print "_partials/bento/" (._type | urlize) ".html") }}
                            {{ partial (print "bento/" (._type | urlize)) . }}
                        {{ end }}
                    {{ end }}
                </div>
            </div>
        </div>
    </section>
{{ end }}


{{ with $section := .data }}
    <section class="collector has-glow" data-cursor='You'>
        <div class="container">
            <article>
                {{ partial "h1-huge" $ }}   
                <div class="prose">{{ partial "description" . }}</div>
                <span class='dex activate' aria-hidden='true'>{{ partial "image" (dict "path" "/img/dex-blurred.png" "size" "525x500" "fit" true "sizes" "(min-width: 768px) 70rem, 216vw" "lazy" false "non_drag" true) }}</span>
            </article>

            {{ $work := (index hugo.Data (site.Language.Label | lower)).lets_work }}
            <form class="collector-form" action="#" method="POST">
                <div class="bar zone">
                    <span class="drop" aria-hidden="true"></span>
                    <div class="picked no-scrollbar"><span class="room"></span></div>
                    <button class="btn" type="submit">{{ with $work.button_icon }}<div>{{ partial "svg" (. | urlize) }}</div>{{ end }}<span class="text">{{ $work.button_text }}</span></button>
                </div>

                <ul class="tags">
                    {{ range .selected_products }}{{ with $page := partial "getPage" . }}
                        {{ if .Params.concept }}{{ continue }}{{ end }}
                        {{ $naam := .Params.details.short_title | default .Title }}
                        <li class="zone home">
                            {{ range $ghost := slice true false }}
                                <div class="chip lime{{ if $ghost }} ghost{{ end }}" {{ if $ghost }} aria-hidden="true"{{ else }} data-product="{{ $page.File.ContentBaseName }}"{{ end }}>
                                    {{ if not $ghost }}<input type="checkbox" name="products" value="{{ $naam }}" hidden>{{ end }}
                                    <a href="{{ $page.RelPermalink }}"{{ if $ghost }} tabindex="-1"{{ else }} aria-label="{{ $naam }}"{{ end }}>
                                        {{ with $page.Params.details.image }}{{ partial "image" (dict "path" . "size" "120x120" "alt" $naam "non_drag" true "eager" $.firstSection) }}{{ end }}
                                        <span>{{ $naam }}</span>
                                    </a>
                                    {{ if not $ghost }}<button class="remove" type="button" aria-label="{{ T "Verwijder" (dict "naam" $naam) }}"></button>{{ end }}
                                </div>
                            {{ end }}
                        </li>
                    {{ end }}{{ end }}
                </ul>
            </form>
        </div> 
        {{ partial "cursors" (slice
            (dict "selected_team" "Max" "data_color" "Blue" "direction" "Left" "role" "Typewriter" "positioning" (dict "x" 68 "y" 26))
            (dict "selected_team" "Joep" "data_color" "Blue" "direction" "Right" "positioning" (dict "x" 10 "y" 58) "range" 2)
            (dict "selected_team" "Guus" "data_color" "Blue" "direction" "Left" "positioning" (dict "x" 86 "y" 82) "range" 2)
        ) }}
    </section>
{{ end }}


{{ with $section := .data }}
    <section class="reviews browser-split has-faded-title" data-triggers='.4:flipped'>
        <div class="container">
            <div class="title-box calc-perc">
                {{ partial "h1" $ }}
            </div>
            {{ $langData := index hugo.Data (site.Language.Label | lower)}}
            {{ $reviews := slice }}
            {{ range .selected_reviews }}{{ with index (where $langData.reviews "title" .) 0 }}
                {{ $reviews = $reviews | append . }}
            {{ end }}{{ end }}

            <ul class='top activate-children'>
                {{ range $i, $j :=  $reviews }}
                    <li {{ if .client_bubble_needs_glow }} class='needs-glow' {{ end }} style='--i: {{ $i }}'>
                        {{ partial "image" (dict
                            "path" .client_bubble_logo_image
                            "size" "750x750"
                            "eager" $.firstSection
                            "alt" .title
                        ) }}
                    </li>
                {{ end }}
            </ul>
            

            <div class="browser">
                <span></span>

                <p class='has-tags'>
                    <span>{{ .tag }}</span>
                    <span class='rating' style='--last: {{ mul (mod (mul .rating 10) 10) 10 }}%'>
                        {{ .rating }}
                        {{ range seq (math.Ceil .rating) }}
                            {{ partial "svg" "star" }}
                        {{ end }}
                    </span>
                </p>

                <div class="texts">
                    {{ range $i, $j := $reviews }}
                        <article {{ if eq $i 0 }} class='visible' {{ end }}>
                            {{ partial "sub-h6" (dict "title" .title "firstSection" $.firstSection) }}
                            <blockquote class="prose">{{ partial "description" . }}</blockquote>
                            
                            <p class='author'><strong>{{ .author_name }}</strong></p>
                            <p class='function'>{{ .author_function }}</p>
                        </article>
                    {{ end }}
                </div>

                <ul class="orbs inner" aria-hidden='true' data-cursor='You'>
                    {{ range $i, $j := $reviews }}
                        <li class='slot  {{ if .client_bubble_needs_glow }}needs-glow {{ end }}'  data-cursor='{{ .cursor_text }}' data-cursor-color='Lime' style='--i: {{ $i }}'>
                            {{ partial "image" (dict
                                "path" .client_bubble_logo_image
                                "size" "750x750"
                                "eager" $.firstSection
                                "alt" .title
                            ) }}
                        </li>
                    {{ end }}
                </ul>
            </div>
        </div> 
    </section>
{{ end }}