Website

{{ with $section := .data }}
    <section class="bento {{ if .title }} has-faded-title {{ end }}">
        <div class="container">
            {{ partial "kicker" . }}
            {{ if .title }}
                <div class="title-box calc-perc">
                    {{ partial "h1" $ }}
                </div>
            {{ end }}
            {{ with .description }}<div class="prose">{{ partial "description" $section }}</div>{{ end }}
            
            {{ $types := (dict 
                "1" (slice "top_left_bento" "top_right_bento" "bottom_left_bento" "bottom_middle_bento" "bottom_right_bento" )
                "2" (slice "top_left_bento" "top_middle_bento" "top_right_bento" "bottom_left_bento" "bottom_middle_bento" "bottom_right_bento")                
                "3" (slice "left_bentos" "right_bento")
                "4" (slice "top_left_bento" "right_bento" "bottom_left_bento" "bottom_middle_bento")
            )}}
            {{ with $box := .bento_box }}
                <ul class="box box-{{ ._type }} {{ with .bento_style }}{{ . | urlize }}{{ end }}">
                    {{ range $key := index $types (string ._type) }}
                        {{ $item := index $box . }}
                        {{ if in $key "bentos" }}
                            <div class="col">
                                {{ range $item }}
                                    {{ partial "bento-item" . }}
                                {{ end }}
                            </div>
                        {{ else }}
                            {{ partial "bento-item" $item }}
                        {{ end }}
                    {{ end }}
                </ul>
            {{ end }}
        </div> 
    </section>
{{ end }}

{{ with $section := .data }}
    <section class='clients' data-type="{{ ._type }}">
        <div class="balls">
            {{ range .balls }}
                {{ $logo := "" }}{{ $alt := "" }}{{ $badge := "" }}
                {{ with .badge }}{{ if ne . "None" }}{{ $badge = . | urlize }}{{ end }}{{ end }}
                {{ if not $badge }}{{ with .logo }}{{ $logo = .image }}{{ $alt = .alt_text }}{{ end }}{{ end }}
                {{ $klassen := print "ball " (.color | anchorize) }}{{ if $logo }}{{ $klassen = print $klassen " has-logo" }}{{ end }}{{ if $badge }}{{ $klassen = print $klassen " has-badge" }}{{ end }}
                {{ $stijl := printf "--size: %vrem" .size }}
                {{ if and .url (not $badge) }}
                    {{ $naam := .label }}
                    {{ if and (not $naam) (not (and $logo $alt)) }}{{ with site.GetPage .url }}{{ $naam = .Title }}{{ end }}{{ end }}
                    <a href="{{ partial "lang-url" .url }}" class='{{ $klassen }}' style='{{ $stijl | safeCSS }}' data-x='{{ .positioning.x }}' data-y='{{ .positioning.y }}'{{ with $naam }} aria-label="{{ . }}"{{ end }}>{{ partial "inline/client-ball.html" (dict "logo" $logo "alt" $alt) }}</a>
                {{ else }}
                    <div class='{{ $klassen }}' style='{{ $stijl | safeCSS }}' data-x='{{ .positioning.x }}' data-y='{{ .positioning.y }}' aria-hidden="true">{{ partial "inline/client-ball.html" (dict "logo" $logo "alt" $alt "badge" $badge) }}</div>
                {{ end }}
            {{ end }}
        </div>
        <div class="container">
            <article class='base'>
                {{ partial "kicker" . }}
                {{ partial "h1-huge" $ }}
                <div class="prose activate-children">
                    {{ partial "description" . }}
                </div>
            </article>
        </div>
    </section>
{{ end }}

{{ define "_partials/inline/client-ball.html" }}
    {{ with .badge }}<span class="badge-icon">{{ partial "svg" . }}</span>{{ end }}
    {{ with .logo }}<span class="logo">{{ partial "image" (dict "path" . "size" "600x600" "fit" true "sizes" "30vw" "alt" $.alt "non_drag" true) }}</span>{{ end }}
{{ end }}


{{ with $section := .data }}
    <section class="reel custom-reel">
        <div class="container">
            <div class="left" aria-hidden='true'>
                <div class="wheel" aria-hidden='true'>
                    {{ partial "svg" "wheel" }}
                    {{ range seq 8 }}
                        <div style='--i: {{ . }}' class="slot"><span class='h1'>{{ . }}</span></div>
                    {{ end }}
                </div>
            </div>


            <div class="mid">
            {{ with .title }} <p class="kicker">{{ . }}</p> {{ end }}
                <ul>

                    {{ range .items }}
                        <li>
                            <h2>{{ .title }}</h2>
                            {{ partial "description" . }}
                            {{ partial "buttons" . }}
                            {{ with .tags }}
                                <div class="has-tags alt">
                                    {{ range . }}
                                        <span class="tag">{{ . }}</span>
                                    {{ end }}
                                </div>
                            {{ end }}
                        </li>
                    {{ end }}
                </ul>
            </div>


            <div class="right">
                <figure>
                    {{ range $i, $j := .items }}
                        {{ partial "image" (dict
                            "path" .image
                            "size" "1000x1000"
                            "eager" (and (lt $i 3) $.firstSection)
                            "alt" .title
                        ) }}
                    {{ end }}
                </figure>
            </div>
        </div> 
    </section>
{{ end }}

{{ with $section := .data }}
    <section class="showcase single big-title-fader" data-type="{{ ._type }}">
        <div class="container">
            <div class="title-box calc-perc" data-triggers='.65:show;.95:hide' data-done='.6'>
                {{ partial "h1" $ }}
            </div>
            <div class="fan-box">
                <div class="logo-collab reveal">
                    {{ partial "svg" "omelette" }}
                    {{ partial "svg" "x" }}
                    {{ with .logo_image }}<span class="live">{{ partial "render-svg" . }}</span>{{ end }}
                </div>
                <div class="stories">
                    <ul>
                        {{ range .stories }}
                            <li>{{ partial "story" (dict "medias" .medias) }}</li>
                        {{ end }}
                    </ul>
                    {{ partial "widget-layer" (slice (dict "widget_layer" .widget_layer)) }}
                </div>
                {{ with .description }}
                    <div class="descriptions"><div class="live">{{ partial "description" $section }}</div></div>
                {{ end }}
            </div>
            {{ partial "btn" . }}
        </div>
    </section>
{{ end }}


{{ 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 }}
    {{ $filter := $.page }}
    {{ if and (ne $.page.Kind "term") .category }}{{ with site.GetPage (printf "/case_categories/%s" .category) }}{{ $filter = . }}{{ end }}{{ end }}
    {{ $paginator := $.page.Store.Get "paginator" }}
    {{ $cases := slice }}
    {{ if $paginator }}{{ $cases = $paginator.Pages }}{{ else }}{{ $cases = partial "cases-articles" $filter }}{{ end }}
    {{ $uitgelicht := false }}
    {{ if and (eq $.page.Kind "section") (eq $.page.Section "cases") (or (not $paginator) (eq $paginator.PageNumber 1)) }}{{ $uitgelicht = partial "case-featured" $.page }}{{ end }}
    <section class="overview">
        <div class="container">
            <div class="top">
                {{ partial "h1-huge" $ }}
                <div class="prose">{{ partial "description" . }}</div>
                {{ partial "category-filter" (dict "page" $filter "taxonomy" "case_categories") }}
            </div>
            <ul class="cards">
                {{ with $uitgelicht }}{{ partial "case-card-featured" . }}{{ end }}
                {{ range $cases }}{{ partial "case-card" . }}{{ end }}
            </ul>
            {{ if $paginator }}{{ partial "pagination" (dict "page" $.page "format" "terse") }}{{ end }}
        </div>
    </section>
{{ end }}


{{ with $section := .data }}
    {{ $p := $.page }}
    {{ $koppen := slice }}
    {{ range $p.Fragments.Headings }}{{ range .Headings }}{{ if eq .Level 2 }}{{ $koppen = $koppen | append . }}{{ end }}{{ end }}{{ end }}
    <section class="blog-content detail-content">
        <div class="container">
            <article class="prose">
                {{ with $p.Params.details.description }}<div class="intro">{{ . | markdownify }}</div>{{ end }}
                {{ $p.Content }}
                {{ with $p.Params.details.key_takeaways }}
                    <div class="takeaways">
                        <h2 class="h5">{{ T "De belangrijkste punten" }}</h2>
                        <ul>{{ range . }}<li>{{ . | markdownify }}</li>{{ end }}</ul>
                    </div>
                {{ end }}
            </article>
            <aside class='slow-sticky'>
                {{ with $koppen }}
                    <nav class="browser toc" aria-label="{{ T "In dit artikel" }}">
                        <span></span>
                        <p class="has-tags"><span>{{ T "In dit artikel" }}</span></p>
                        <ol>{{ range . }}<li><a href="#{{ .ID }}">{{ .Title | plainify }}</a></li>{{ end }}</ol>
                    </nav>
                {{ end }}
            </aside>
        </div>
    </section>
{{ end }}


{{ with $section := .data }}
    <section class="reel">
        <div class="container">
            <div class="left" aria-hidden='true'>
                <div class="wheel" aria-hidden='true'>
                    {{ partial "svg" "wheel" }}
                    {{ range seq 8 }}
                        <div style='--i: {{ . }}' class="slot"><span class='h1'>{{ . }}</span></div>
                    {{ end }}
                </div>
            </div>


            <div class="mid">
            {{ with .title }} <p class="kicker">{{ . }}</p> {{ end }}
                <ul>
                    {{ $products := slice }}
                    {{ range .selected_products }}{{ with partial "getPage" . }}
                        {{ if not .Params.concept }}{{ $products = $products | append . }}{{ end }}
                    {{ end }}{{ end }}

                    {{ range $products }}
                        <li>
                            <h2>{{ .Title }}</h2>
                            {{ partial "description" .Params.details }}
                            {{ partial "btn" (dict
                                "button_text" (printf "%s %s" (T "Explore") .Title)
                                "button_url" .RelPermalink
                                "button_style" "Lime"
                                "button_icon" "Arrow Right Circle"
                            ) }}
                        </li>
                    {{ end }}
                </ul>
            </div>


            <div class="right">
                <figure>
                    {{ range $products }}
                        {{ partial "image" (dict
                            "path" .Params.details.image
                            "size" "1000x1000"
                            "eager" $.firstSection
                            "alt" .Title
                        ) }}
                    {{ end }}
                </figure>
            </div>
        </div> 
    </section>
{{ end }}