---
layout: feature
---
{%- assign fileData = site.data[page.folderName][page.lang][page.fileName] -%}
{%- assign photoEffectsData = site.data.photoeffects -%}
<div class="container mt-4">
    <div class="col-md-11 mx-auto">
        <div class="row">
            <div class="col-md-3">
                <div class="categories-section">
                </div>
                <div class="categories-list">
                    <div class="accordion" id="accordionExample">
                        {%- for item in site.data.photo-categories -%}
                        <div class="card card-hover">
                            <div class="card-header" id="heading-{{forloop.index}}">
                                <button class="btn btn-block text-left p-0" type="button" data-toggle="collapse"
                                    data-target="#collapse-{{forloop.index}}" aria-expanded="true"
                                    aria-controls="collapse-{{forloop.index}}">
                                    {{item.category}} <i class="fas fa-angle-down"></i>
                                </button>
                            </div>

                            <div id="collapse-{{forloop.index}}" class="collapse"
                                aria-labelledby="heading-{{forloop.index}}" data-parent="#accordionExample">
                                <div class="card-body">
                                    {%- for i in item.features -%}
                                    <a href="{{i.link}}">{{i.name}} </a>
                                    {%- endfor -%}
                                </div>
                            </div>
                        </div>
                        {%- endfor -%}
                    </div>
                </div>

            </div>
            <div class="col-md-9">
                <div class="row" id="upper-panel">
                    <div class="col-12 ">
                        <div>
                            <div>
                                <div>
                                    {%- assign frameh1 = fileData.H1 | replace: "$variable", page.value -%}
                                    <h1 class="frame-h1">{%- for word in frameh1-%}
                                        {%- if forloop.first == true -%}
                                        {{word | capitalize }}
                                        {%- else -%}
                                        {{word}}
                                        {%- endif -%}
                                        {%- endfor -%}</h1>
                                </div>
                                {%- assign frameh2 = fileData.H2 | replace: "$variable", page.value -%}
                                <h2 class="frame-h2">
                                    {%- for word in frameh2 -%}
                                    {%- if forloop.first == true -%}
                                    {{word | capitalize }}
                                    {%- else -%}
                                    {{word}}
                                    {%- endif -%}
                                    {%- endfor -%}
                                </h2>
                            </div>
                        </div>
                    </div>
                    {%- for item in photoEffectsData -%}
                    <div class="col-md-3 px-0">
                        <a class="photo-card" href="{{item.url}}">
                            <div>
                                <img src="{{item.image}}" alt="">
                                <div class="photo-effect-feature-name">
                                    {{item.featureName}}
                                </div>
                            </div>
                        </a>

                    </div>
                    {%- endfor -%}
                </div>
            </div>
        </div>
    </div>

</div>