{% extends 'base.html.twig' %}

{% block title %}{{ 'lang.features_meta_title'|trans }}{% endblock %}

{% block seo %}
    {% include 'general/components/seo_meta.html.twig' with {
        titleKey: 'lang.features_meta_title',
        descriptionKey: 'lang.features_meta_description',
        keywordsKey: 'lang.features_meta_keywords',
        route: 'app_features'
    } %}
{% endblock %}

{% block styles %}
    <style>
        #page-content {
            background: white !important;
            width: 100% !important;
            flex: 1 1 auto !important;
        }

        #navbar {
            background: transparent;
        }

        .navbar-container {
            padding: 50px 20px;
        }

    </style>
{% endblock %}

{% block navigation %}
{% endblock %}


        {% block body %}
            <div class="home-container-new">
                <div class="gradient-background container-fluid h-100 p-0 mb-100">
                    <div class="home-container-new-content">
                        {% include 'general/navigation.html.twig' with {} %}
                        <div class="row pt-5 pb-5">
                            <div class="col-12 display-flex-center p-0 mb-100">
                                <div>
                                    <div class="orange-subtitle">{{ 'lang.secureBrandCompliantEfficient' | trans }}</div>
                                    <div class="dark-blue-title">{{ 'lang.functions' | trans }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="container-fluid h-100 p-0">
                    <div class="home-container-new-content">
                        <div class="container">
                            <section class="data-transfer mb-100">
                                <div class="data-transfer__container">
                                    <div class="data-transfer__content">
                                        <span class="orange-subtitle">{{ 'lang.perfectForSMEs' | trans }}</span>
                                        <h2 class="data-transfer__title">
                                            {{ 'lang.fastEfficientGDPRCompliant' | trans }}
                                        </h2>
                                        <p class="data-transfer__description">
                                            {{ 'lang.sendLargeFilesControlledAndLogged' | trans }}
                                        </p>
                                        <div class="data-transfer__stats">
                                            <p class="data-transfer__stat-text">{{ 'lang.timeSavingsForYouAndYourTeam' | trans }}</p>
                                            <div class="data-transfer__progress-bar">
                                                <div class="data-transfer__progress-fill"></div>
                                            </div>
                                        </div>
                                        <a href="{{ path('app_login') }}"
                                           class="data-transfer__button"
                                           aria-label="{{ 'lang.sendData' | trans }}">
                                            {{ 'lang.sendData' | trans }}
                                            <svg class="data-transfer__button-arrow" xmlns="http://www.w3.org/2000/svg"
                                                 width="14" height="14" viewBox="0 0 24 24" fill="none"
                                                 stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                 stroke-linejoin="round">
                                                <path d="M5 12h14"></path>
                                                <path d="m12 5 7 7-7 7"></path>
                                            </svg>
                                        </a>
                                    </div>
                                    <div class="data-transfer__visual">
                                        <svg width="525" height="525" viewBox="0 0 525 525" fill="none"
                                             xmlns="http://www.w3.org/2000/svg">
                                            <circle cx="262.5" cy="262.5" r="261" stroke="#D589DD" stroke-width="3"/>
                                        </svg>

                                        <picture>
                                            <source type="image/webp"
                                                    srcset="{{ asset('/images/uploads-pr-184.webp') }} 184w,
                                                            {{ asset('/images/uploads-pr-220.webp') }} 220w,
                                                            {{ asset('/images/uploads-pr.webp') }} 334w"
                                                    sizes="(max-width: 600px) 160px, (max-width: 1200px) 220px, 300px">
                                            <img src="{{ asset('/images/uploads-pr.png') }}" alt="" class="data-transfer__shape data-transfer__shape--large" width="334" height="281" loading="lazy" decoding="async" aria-hidden="true">
                                        </picture>
                                        <picture>
                                            <source type="image/webp"
                                                    srcset="{{ asset('/images/contact-export-100.webp') }} 100w,
                                                            {{ asset('/images/contact-export.webp') }} 175w"
                                                    sizes="(max-width: 600px) 110px, 150px">
                                            <img src="{{ asset('/images/contact-export.png') }}" alt="" class="data-transfer__shape data-transfer__shape--extra-small" width="175" height="137" loading="lazy" decoding="async" aria-hidden="true">
                                        </picture>
                                        <picture>
                                            <source type="image/webp"
                                                    srcset="{{ asset('/images/settings-pr-100.webp') }} 100w,
                                                            {{ asset('/images/settings-pr.webp') }} 175w"
                                                    sizes="(max-width: 600px) 110px, 150px">
                                            <img src="{{ asset('/images/settings-pr.png') }}" alt="" class="data-transfer__shape data-transfer__shape--small" width="175" height="128" loading="lazy" decoding="async" aria-hidden="true">
                                        </picture>

                                        <div class="data-transfer__dot data-transfer__dot--top"></div>
                                        <div class="data-transfer__dot data-transfer__dot--right"></div>
                                        <div class="data-transfer__dot data-transfer__dot--bottom"></div>
                                    </div>
                                </div>
                            </section>
                            <div class="orange-subtitle text-center mt-5">{{ 'lang.perfectForCreativesPhotographersAndSMEs' | trans }}
                            </div>
                            <div class="dark-blue-title mb-5">{{ 'lang.fastSecureIndividual' | trans }}</div>
                            <div class="card-section d-flex">
                                <div class="card feature-card card-gray">
                                    <div class="card-title display-flex-start">
                                        <picture>
                                            <source srcset="{{ asset('/images/rocket.webp') }}" type="image/webp">
                                            <img src="{{ asset('/images/rocket.png') }}" alt="{{ 'lang.fastIntuitive' | trans }}" width="64" height="64" loading="lazy" decoding="async">
                                        </picture>
                                        <h3 class="title">{{ 'lang.fastIntuitive' | trans }}</h3>
                                    </div>
                                    <div class="feature-description">
                                        {{ 'lang.sendLargeFilesControlledAndLoggedToCustomers' | trans }}
                                    </div>
                                    <a href="{{ path('app_home') }}"
                                       class="read-more-link">{{ 'lang.readMore' | trans }} <span
                                                class="arrow-icon">→</span></a>
                                </div>
                                <div class="card feature-card card-orange">
                                    <div class="card-title display-flex-start">
                                        <picture>
                                            <source srcset="{{ asset('/images/secure.webp') }}" type="image/webp">
                                            <img src="{{ asset('/images/secure.png') }}" alt="{{ 'lang.madeInGermany' | trans }}" width="64" height="64" loading="lazy" decoding="async">
                                        </picture>
                                        <h3 class="title">{{ 'lang.madeInGermany' | trans }}</h3>
                                    </div>
                                    <p class="feature-description">
                                        {{ 'lang.trustGDPRCompliantTransfer' | trans }}
                                    </p>
                                    <a href="{{ path('app_home') }}"
                                       class="read-more-link">{{ 'lang.readMore' | trans }} <span
                                                class="arrow-icon">→</span></a>
                                </div>
                                <div class="card feature-card card-gray">
                                    <div class="card-title display-flex-start">
                                        <picture>
                                            <source srcset="{{ asset('/images/folder.webp') }}" type="image/webp">
                                            <img src="{{ asset('/images/folder.png') }}" alt="{{ 'lang.ownBranding' | trans }}" width="64" height="64" loading="lazy" decoding="async">
                                        </picture>
                                        <h3 class="title">{{ 'lang.ownBranding' | trans }}</h3>
                                    </div>
                                    <p class="feature-description">
                                        {{ 'lang.withBrandingOption' | trans }}
                                    </p>
                                    <a href="{{ path('app_home') }}"
                                       class="read-more-link">{{ 'lang.readMore' | trans }} <span
                                                class="arrow-icon">→</span></a>
                                </div>
                            </div>
                            <div class="card-section d-flex">
                                <div class="card feature-card card-pink card-lg">
                                    <div class="card-title display-flex-start">
                                        <picture>
                                            <source srcset="{{ asset('/images/rocket.webp') }}" type="image/webp">
                                            <img src="{{ asset('/images/rocket.png') }}" alt="{{ 'lang.perfectForCreativesPhotographers' | trans }}" width="64" height="64" loading="lazy" decoding="async">
                                        </picture>
                                        <h3 class="title">{{ 'lang.perfectForCreativesPhotographers' | trans }}</h3>
                                    </div>
                                    <div class="feature-description">
                                        {{ 'lang.freelancerGraphicWebDesignerText' | trans }}
                                    </div>
                                    <a href="{{ path('app_home') }}"
                                       class="read-more-link">{{ 'lang.readMore' | trans }} <span
                                                class="arrow-icon">→</span></a>
                                </div>
                                <div class="card feature-card card-gray card-lg">
                                    <div class="card-title display-flex-start">
                                        <picture>
                                            <source srcset="{{ asset('/images/rocket.webp') }}" type="image/webp">
                                            <img src="{{ asset('/images/rocket.png') }}" alt="{{ 'lang.solutionForSMEs' | trans }}" width="64" height="64" loading="lazy" decoding="async">
                                        </picture>
                                        <h3 class="title">{{ 'lang.solutionForSMEs' | trans }}</h3>
                                    </div>
                                    <div class="feature-description">
                                        {{ 'lang.midSizedCompanyTeamworkText' | trans }}
                                    </div>
                                    <a href="{{ path('app_home') }}"
                                       class="read-more-link">{{ 'lang.readMore' | trans }} <span
                                                class="arrow-icon">→</span></a>
                                </div>
                            </div>
                            <div class="cta-container mb-100">
                                <a href="{{ path('app_login') }}"
                                   class="cta-button button"
                                   aria-label="{{ 'lang.sendData' | trans }}">{{ 'lang.sendData' | trans }} <span
                                            class="arrow-icon" aria-hidden="true">→</span></a>
                            </div>

                            <div class="orange-subtitle text-center mt-5">{{ 'lang.perfectForCreativesPhotographersAndSMEs' | trans }}
                            </div>
                            <div class="dark-blue-title mb-5">{{ 'lang.allFunctionsAtAGlance' | trans }}</div>


                            <div class="row p-4 pt-5 pb-5 functions-container mb-100">
                                <div class="functions-section">
                                    <picture>
                                        <source srcset="{{ asset('/images/rocket.webp') }}" type="image/webp">
                                        <img src="{{ asset('/images/rocket.png') }}" alt="" width="60" height="60" loading="lazy" decoding="async" aria-hidden="true">
                                    </picture>
                                    <div class="functions-section-main">
                                        <div class="functions-section-main-title">{{ 'lang.loggedDataTransfer' | trans }}</div>
                                        <div class="functions-section-main-subtitle">{{ 'lang.upToXXGB' | trans }}</div>
                                    </div>
                                </div>
                                <div class="functions-section">
                                    <picture>
                                        <source srcset="{{ asset('/images/rocket.webp') }}" type="image/webp">
                                        <img src="{{ asset('/images/rocket.png') }}" alt="" width="60" height="60" loading="lazy" decoding="async" aria-hidden="true">
                                    </picture>
                                    <div class="functions-section-main">
                                        <div class="functions-section-main-title">{{ 'lang.guestAccount' | trans }}</div>
                                        <div class="functions-section-main-subtitle">{{ 'lang.inviteCustomersTeamMembers' | trans }}</div>
                                    </div>
                                </div>
                                <div class="functions-section">
                                    <picture>
                                        <source srcset="{{ asset('/images/secure.webp') }}" type="image/webp">
                                        <img src="{{ asset('/images/secure.png') }}" alt="" width="60" height="60" loading="lazy" decoding="async" aria-hidden="true">
                                    </picture>
                                    <div class="functions-section-main">
                                        <div class="functions-section-main-title">{{ 'lang.hostingInGermany' | trans }}</div>
                                        <div class="functions-section-main-subtitle">{{ 'lang.gdprCompliantDataTransfer' | trans }}</div>
                                    </div>
                                </div>
                                <div class="functions-section">
                                    <picture>
                                        <source srcset="{{ asset('/images/folder.webp') }}" type="image/webp">
                                        <img src="{{ asset('/images/folder.png') }}" alt="" width="60" height="60" loading="lazy" decoding="async" aria-hidden="true">
                                    </picture>
                                    <div class="functions-section-main">
                                        <div class="functions-section-main-title">{{ 'lang.ownBranding' | trans }}</div>
                                        <div class="functions-section-main-subtitle">{{ 'lang.forAProfessionalAppearance' | trans }}</div>
                                    </div>
                                </div>
                                <div class="functions-section">
                                    <picture>
                                        <source srcset="{{ asset('/images/secure.webp') }}" type="image/webp">
                                        <img src="{{ asset('/images/secure.png') }}" alt="" width="60" height="60" loading="lazy" decoding="async" aria-hidden="true">
                                    </picture>
                                    <div class="functions-section-main">
                                        <div class="functions-section-main-title">{{ 'lang.featureSftSignTitle' | trans }}</div>
                                        <div class="functions-section-main-subtitle">{{ 'lang.featureSftSignText' | trans }}</div>
                                    </div>
                                </div>
                                <div class="functions-section">
                                    <picture>
                                        <source srcset="{{ asset('/images/folder.webp') }}" type="image/webp">
                                        <img src="{{ asset('/images/folder.png') }}" alt="" width="60" height="60" loading="lazy" decoding="async" aria-hidden="true">
                                    </picture>
                                    <div class="functions-section-main">
                                        <div class="functions-section-main-title">{{ 'lang.featureSftCollectTitle' | trans }}</div>
                                        <div class="functions-section-main-subtitle">{{ 'lang.featureSftCollectText' | trans }}</div>
                                    </div>
                                </div>
                            </div>

                            {# Detail blocks for new modules #}
                            <div class="orange-subtitle text-center mt-5">{{ 'lang.sftSignPromoSubtitle' | trans }}</div>
                            <div class="dark-blue-title mb-5">{{ 'lang.sftSignPromoTitle' | trans }}</div>
                            <div class="card-section d-flex mb-100">
                                <div class="card feature-card card-gray">
                                    <div class="card-title display-flex-start">
                                        <picture>
                                            <source srcset="{{ asset('/images/secure.webp') }}" type="image/webp">
                                            <img src="{{ asset('/images/secure.png') }}" alt="{{ 'lang.sftSignPromoCard1Title'|trans }}" width="64" height="64" loading="lazy" decoding="async">
                                        </picture>
                                        <h3 class="title">{{ 'lang.sftSignPromoCard1Title' | trans }}</h3>
                                    </div>
                                    <div class="feature-description">{{ 'lang.sftSignPromoCard1Text' | trans }}</div>
                                    <a href="{{ path('app_sign_index') }}" class="read-more-link">{{ 'lang.readMore' | trans }} <span class="arrow-icon">→</span></a>
                                </div>
                                <div class="card feature-card card-orange">
                                    <div class="card-title display-flex-start">
                                        <picture>
                                            <source srcset="{{ asset('/images/rocket.webp') }}" type="image/webp">
                                            <img src="{{ asset('/images/rocket.png') }}" alt="{{ 'lang.sftSignPromoCard2Title'|trans }}" width="64" height="64" loading="lazy" decoding="async">
                                        </picture>
                                        <h3 class="title">{{ 'lang.sftSignPromoCard2Title' | trans }}</h3>
                                    </div>
                                    <p class="feature-description">{{ 'lang.sftSignPromoCard2Text' | trans }}</p>
                                    <a href="{{ path('app_sign_index') }}" class="read-more-link">{{ 'lang.readMore' | trans }} <span class="arrow-icon">→</span></a>
                                </div>
                                <div class="card feature-card card-gray">
                                    <div class="card-title display-flex-start">
                                        <picture>
                                            <source srcset="{{ asset('/images/folder.webp') }}" type="image/webp">
                                            <img src="{{ asset('/images/folder.png') }}" alt="{{ 'lang.sftSignPromoCard3Title'|trans }}" width="64" height="64" loading="lazy" decoding="async">
                                        </picture>
                                        <h3 class="title">{{ 'lang.sftSignPromoCard3Title' | trans }}</h3>
                                    </div>
                                    <p class="feature-description">{{ 'lang.sftSignPromoCard3Text' | trans }}</p>
                                    <a href="{{ path('app_sign_index') }}" class="read-more-link">{{ 'lang.readMore' | trans }} <span class="arrow-icon">→</span></a>
                                </div>
                            </div>

                            <div class="orange-subtitle text-center mt-5">{{ 'lang.sftCollectPromoSubtitle' | trans }}</div>
                            <div class="dark-blue-title mb-5">{{ 'lang.sftCollectPromoTitle' | trans }}</div>
                            <div class="card-section d-flex mb-100">
                                <div class="card feature-card card-gray">
                                    <div class="card-title display-flex-start">
                                        <picture>
                                            <source srcset="{{ asset('/images/folder.webp') }}" type="image/webp">
                                            <img src="{{ asset('/images/folder.png') }}" alt="{{ 'lang.sftCollectPromoCard1Title'|trans }}" width="64" height="64" loading="lazy" decoding="async">
                                        </picture>
                                        <h3 class="title">{{ 'lang.sftCollectPromoCard1Title' | trans }}</h3>
                                    </div>
                                    <div class="feature-description">{{ 'lang.sftCollectPromoCard1Text' | trans }}</div>
                                    <a href="{{ path('app_collect_index') }}" class="read-more-link">{{ 'lang.readMore' | trans }} <span class="arrow-icon">→</span></a>
                                </div>
                                <div class="card feature-card card-orange">
                                    <div class="card-title display-flex-start">
                                        <picture>
                                            <source srcset="{{ asset('/images/rocket.webp') }}" type="image/webp">
                                            <img src="{{ asset('/images/rocket.png') }}" alt="{{ 'lang.sftCollectPromoCard2Title'|trans }}" width="64" height="64" loading="lazy" decoding="async">
                                        </picture>
                                        <h3 class="title">{{ 'lang.sftCollectPromoCard2Title' | trans }}</h3>
                                    </div>
                                    <p class="feature-description">{{ 'lang.sftCollectPromoCard2Text' | trans }}</p>
                                    <a href="{{ path('app_collect_index') }}" class="read-more-link">{{ 'lang.readMore' | trans }} <span class="arrow-icon">→</span></a>
                                </div>
                                <div class="card feature-card card-gray">
                                    <div class="card-title display-flex-start">
                                        <picture>
                                            <source srcset="{{ asset('/images/secure.webp') }}" type="image/webp">
                                            <img src="{{ asset('/images/secure.png') }}" alt="{{ 'lang.sftCollectPromoCard3Title'|trans }}" width="64" height="64" loading="lazy" decoding="async">
                                        </picture>
                                        <h3 class="title">{{ 'lang.sftCollectPromoCard3Title' | trans }}</h3>
                                    </div>
                                    <p class="feature-description">{{ 'lang.sftCollectPromoCard3Text' | trans }}</p>
                                    <a href="{{ path('app_collect_index') }}" class="read-more-link">{{ 'lang.readMore' | trans }} <span class="arrow-icon">→</span></a>
                                </div>
                            </div>


                            <div class="orange-subtitle text-center mt-5">{{ 'lang.weHaveTheRightSolution' | trans }}
                            </div>
                            <div class="dark-blue-title mb-5">{{ 'lang.securityMeetsSpeed' | trans }}</div>

                            <div class="card-section d-flex">
                                <div class="card price-card card-gray">
                                    <div class="card-title">
                                        <div class="card-title-price display-flex-between">
                                            <div class="subscription-type">{{ 'lang.free' | trans }}</div>
                                            <div class="price">0€</div>
                                        </div>
                                        <div class="subscription-time mb-2 display-flex-end">{{ 'lang.monthlyShort' | trans }}</div>
                                    </div>
                                    <div class="feature-description">
                                        <div> {{ 'lang.sendUpTo3GB' | trans }}</div>
                                        <div class="mt-3 mb-3">{{ 'lang.noBrandingNoLogsNoContacts' | trans }}
                                        </div>
                                        <div>{{ 'lang.noAdditionalUsers' | trans }}</div>
                                    </div>
                                    <a href="{{ path('app_register') }}"
                                       class="read-more-link">{{ 'lang.registerNow' | trans }} <span
                                                class="arrow-icon">→</span></a>
                                </div>
                                <div class="card price-card card-orange">
                                    <div class="card-title">
                                        <div class="card-title-price display-flex-between">
                                            <div class="subscription-type">{{ 'lang.pro' | trans }}</div>
                                            <div class="price-with-vat">
                                                <div class="price">7.90€</div>
                                                {% include 'general/components/price_vat_note.html.twig' %}
                                            </div>
                                        </div>
                                        <div class="subscription-time mb-2 display-flex-end text-white">{{ 'lang.monthlyShort' | trans }}</div>
                                    </div>
                                    <div class="feature-description">
                                        <div>{{ 'lang.sendReceiveUpTo100GB' | trans }}</div>
                                        <div class="mt-3 mb-3">{{ 'lang.ownBrandingLogsContacts' | trans }}</div>
                                        <div>{{ 'lang.oneUserAccount' | trans }}</div>
                                    </div>
                                    <a href="{{ path('app_login') }}"
                                       class="read-more-link">
                                        {{ 'lang.loginNow' | trans }}
                                        <span class="arrow-icon">→</span>
                                    </a>
                                </div>
                                <div class="card price-card card-gray">
                                    <div class="card-title">
                                        <div class="card-title-price display-flex-between">
                                            <div class="subscription-type">{{ 'lang.business' | trans }}</div>
                                            <div class="price-with-vat">
                                                <div class="price">49.90€</div>
                                                {% include 'general/components/price_vat_note.html.twig' %}
                                            </div>
                                        </div>
                                        <div class="subscription-time mb-2 display-flex-end">{{ 'lang.monthlyShort' | trans }}</div>
                                    </div>
                                    <div class="feature-description">
                                        <div>{{ 'lang.sendReceiveUpTo100GB' | trans }}</div>
                                        <div class="mt-3 mb-3">{{ 'lang.ownBrandingLogsContacts' | trans }}</div>
                                        <div>{{ 'lang.upTo20UsersIncluded' | trans }}</div>
                                    </div>
                                    <a href="{{ path('app_login') }}"
                                       class="read-more-link">{{ 'lang.loginNow' | trans }}<span
                                                class="arrow-icon">→</span></a>
                                </div>
                            </div>

                            <div class="cta-container mb-100">
                                <a href="{{ path('app_price') }}"
                                   class="cta-button button text-uppercase">{{ 'lang.viewPackages' | trans }} <span
                                            class="arrow-icon">→</span></a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        {% endblock %}