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

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

{% block seo %}
    {% include 'general/components/seo_meta.html.twig' with {
        titleKey: 'lang.home_meta_title',
        descriptionKey: 'lang.home_meta_description',
        keywordsKey: 'lang.home_meta_keywords',
        route: 'app_home',
        image: 'images/home-page.webp'
    } %}
    <link rel="preload" as="image" href="/images/home-page.webp" type="image/webp" fetchpriority="high">
{% 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 min-vh-100 mb-100">
            <div class="home-container-new-content">
                {% include 'general/navigation.html.twig' %}
                <div class="row p-4 pt-5 pb-5 file-transfer-banner">
                    <div class="col-12 col-md-7 display-flex-center mb-4">
                        <div>
                            <p class="orange-subtitle">{{ 'lang.filesProtectTeamworkStrengthen' | trans }}</p>
                            <h1 class="file-transfer-banner-title">{{ 'lang.dataTransferMadeInGermany' | trans }}</h1>
                            <a class="button button-orange"
                               style="display: flex; justify-content: center; align-items: center; width: fit-content;"
                               href="{{ path('app_login') }}">
                                {{ 'lang.sendData' | trans }}
                                <svg style="margin-left: 12px;" width="15" height="13" viewBox="0 0 15 13" fill="none"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <path d="M13.6875 7.21875L8.6875 12.2188C8.5 12.4062 8.25 12.5 8 12.5C7.71875 12.5 7.46875 12.4062 7.28125 12.2188C6.875 11.8438 6.875 11.1875 7.28125 10.8125L10.5625 7.5H1C0.4375 7.5 0 7.0625 0 6.5C0 5.96875 0.4375 5.5 1 5.5H10.5625L7.28125 2.21875C6.875 1.84375 6.875 1.1875 7.28125 0.8125C7.65625 0.40625 8.3125 0.40625 8.6875 0.8125L13.6875 5.8125C14.0938 6.1875 14.0938 6.84375 13.6875 7.21875Z"
                                          fill="white"/>
                                </svg>

                            </a>
                        </div>
                    </div>

                    <div class="col-12 col-md-5 p-3 p-lg-0 position-relative">
                        <picture>
                            <source srcset="/images/home-page.webp" type="image/webp">
                            <img
                                class="file-transfer-banner__image"
                                src="/images/home-page.png"
                                alt="{{ 'lang.altHomeBanner'|trans }}"
                                width="564"
                                height="592"
                                fetchpriority="high"
                                decoding="async"
                            >
                        </picture>
                        <div class="display-flex-start gap-3 clients-amount">
                            <picture>
                                <source srcset="{{ asset('images/Referenzen-Cumas365.webp') }}" type="image/webp">
                                <img
                                    class="clients-amount__avatars"
                                    src="{{ asset('images/Referenzen-Cumas365.png') }}"
                                    alt="{{ 'lang.happyUsers'|trans }}"
                                    width="120"
                                    height="54"
                                    loading="eager"
                                    decoding="async"
                                >
                            </picture>
                            <div>
                                <div class="fw-600 fs-30">200+</div>
                                <div>{{ 'lang.happyUsers' | trans }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid h-100 p-0">
            <div class="home-container-new-content">
                <div class="container">
                    <p class="orange-subtitle text-center mt-5">{{ 'lang.secureBrandCompliantEfficient' | trans }}</p>
                    <h2 class="dark-blue-title mb-2 mb-md-5">{{ 'lang.dataTransferWithoutCompromise' | trans }}</h2>

                    <div class="card-section d-flex">
                        <div class="card feature-card card-gray">
                            <div class="card-title display-flex-start">
                                <picture>
                                    <source srcset="/images/rocket.webp" type="image/webp">
                                    <img src="/images/rocket.png" alt="{{ 'lang.altFastIntuitive'|trans }}" width="64" height="64" loading="lazy" decoding="async">
                                </picture>
                                <h3 class="title">{{ 'lang.fastIntuitive' | trans }}</h3>
                            </div>
                            <div class="feature-description">
                                {{ 'lang.sendLargeFilesControlledAndLogged' | trans }}
                            </div>
                            <a href="{{ path('app_home') }}"
                               class="read-more-link"
                               aria-label="{{ 'lang.readMore' | trans }}: {{ 'lang.fastIntuitive' | trans }}">{{ 'lang.readMore' | trans }} <span
                                        class="arrow-icon" aria-hidden="true">→</span></a>
                        </div>
                        <div class="card feature-card card-orange">
                            <div class="card-title display-flex-start">
                                <picture>
                                    <source srcset="/images/secure.webp" type="image/webp">
                                    <img src="/images/secure.png" alt="{{ 'lang.altMadeInGermany'|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_features') }}"
                               class="read-more-link"
                               aria-label="{{ 'lang.readMore' | trans }}: {{ 'lang.madeInGermany' | trans }}">{{ 'lang.readMore' | trans }} <span
                                        class="arrow-icon" aria-hidden="true">→</span></a>
                        </div>
                        <div class="card feature-card card-gray">
                            <div class="card-title display-flex-start">
                                <picture>
                                    <source srcset="/images/folder.webp" type="image/webp">
                                    <img src="/images/folder.png" alt="{{ 'lang.altOwnBranding'|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_features') }}"
                               class="read-more-link"
                               aria-label="{{ 'lang.readMore' | trans }}: {{ 'lang.ownBranding' | trans }}">{{ 'lang.readMore' | trans }} <span
                                        class="arrow-icon" aria-hidden="true">→</span></a>
                        </div>
                    </div>

                    <div class="cta-container d-none d-md-flex">
                        <a href="{{ path('app_upload_new') }}"
                           class="cta-button button text-uppercase">{{ 'lang.sendData' | trans }} <span
                                    class="arrow-icon">→</span></a>
                    </div>

                    <p class="orange-subtitle text-center mt-5 d-none d-md-block">{{ 'lang.perfectForCreativesPhotographersAndSMEs' | trans }}
                    </p>
                    <p class="orange-subtitle text-center mt-5 d-flex d-md-none justify-content-center">{{ 'lang.secureBrandCompliantEfficientMobile' | trans }}</p>

                    <h2 class="dark-blue-title mb-0 mb-md-5">{{ 'lang.fastSecureIndividual' | trans }}</h2>


                    <div class="row p-4 pt-5 pb-5">
                        <div class="col-12 col-lg-6 d-flex align-items-center" style="flex-direction: column;">
                            <div class="d-flex gap-3">
                                <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: 768px) 184px, (max-width: 1200px) 220px, 334px">
                                    <img class="middle-pic" src="{{ asset('/images/uploads-pr.png') }}" alt="{{ 'lang.altUploadPreview'|trans }}" width="334" height="281" loading="lazy" decoding="async">
                                </picture>
                                <div style="display: flex; flex-direction: column; justify-content: space-between;">
                                    <picture>
                                        <source type="image/webp"
                                                srcset="{{ asset('/images/contact-export-100.webp') }} 100w,
                                                        {{ asset('/images/contact-export.webp') }} 175w"
                                                sizes="(max-width: 768px) 100px, 175px">
                                        <img class="small-pic" src="{{ asset('/images/contact-export.png') }}" alt="{{ 'lang.altContactExportPreview'|trans }}" width="175" height="137" loading="lazy" decoding="async">
                                    </picture>
                                    <picture>
                                        <source type="image/webp"
                                                srcset="{{ asset('/images/settings-pr-100.webp') }} 100w,
                                                        {{ asset('/images/settings-pr.webp') }} 175w"
                                                sizes="(max-width: 768px) 100px, 175px">
                                        <img class="small-pic" src="{{ asset('/images/settings-pr.png') }}" alt="{{ 'lang.altSettingsPreview'|trans }}" width="175" height="128" loading="lazy" decoding="async">
                                    </picture>
                                </div>
                            </div>
                            <picture>
                                <source type="image/webp"
                                        srcset="{{ asset('/images/user-pr-300.webp') }} 300w,
                                                {{ asset('/images/user-pr-376.webp') }} 376w,
                                                {{ asset('/images/user-pr.webp') }} 524w"
                                        sizes="(max-width: 768px) 300px, (max-width: 1200px) 376px, 524px">
                                <img class="mt-2 big-pic" src="{{ asset('/images/user-pr.png') }}" alt="{{ 'lang.altUserManagementPreview'|trans }}" width="524" height="338" loading="lazy" decoding="async">
                            </picture>

                        </div>
                        <div class="col-12 col-lg-6 display-flex-center">
                            <div class="value-proposition">
                                <div class="section">
                                    <h3 class="section-title">
                                        {{ 'lang.solutionForCreativeMinds' | trans }}
                                    </h3>
                                    <div class="section-description">
                                        {{ 'lang.freelancerGraphicWebDesignerText' | trans }}
                                    </div>
                                </div>
                                <div class="section">
                                    <h3 class="section-title">
                                        {{ 'lang.loggedTransferForMasterpieces' | trans }}
                                    </h3>
                                    <div class="section-description">
                                        {{ 'lang.videoPhotographerChallengeText' | trans }}
                                    </div>
                                </div>
                                <div class="section">
                                    <h3 class="section-title">
                                        {{ 'lang.efficientTeamworkForSMEs' | trans }}
                                    </h3>
                                    <div class="section-description">
                                        {{ 'lang.midSizedCompanyTeamworkText' | trans }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="cta-container d-none d-md-flex">
                        <a href="{{ path('app_features') }}"
                           class="cta-button button text-uppercase">{{ 'lang.toFeatures' | trans }} <span
                                    class="arrow-icon">→</span></a>
                    </div>

                    <p class="orange-subtitle text-center mt-5">{{ 'lang.sftSignPromoSubtitle' | trans }}</p>
                    <h2 class="dark-blue-title mb-2 mb-md-5">{{ 'lang.sftSignPromoTitle' | trans }}</h2>

                    <div class="card-section d-flex">
                        <div class="card feature-card card-gray">
                            <div class="card-title display-flex-start">
                                <picture>
                                    <source srcset="/images/secure.webp" type="image/webp">
                                    <img src="/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"
                               aria-label="{{ 'lang.readMore' | trans }}: {{ 'lang.sftSignPromoCard1Title' | trans }}">{{ 'lang.readMore' | trans }} <span
                                        class="arrow-icon" aria-hidden="true">→</span></a>
                        </div>
                        <div class="card feature-card card-orange">
                            <div class="card-title display-flex-start">
                                <picture>
                                    <source srcset="/images/rocket.webp" type="image/webp">
                                    <img src="/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"
                               aria-label="{{ 'lang.readMore' | trans }}: {{ 'lang.sftSignPromoCard2Title' | trans }}">{{ 'lang.readMore' | trans }} <span
                                        class="arrow-icon" aria-hidden="true">→</span></a>
                        </div>
                        <div class="card feature-card card-gray">
                            <div class="card-title display-flex-start">
                                <picture>
                                    <source srcset="/images/folder.webp" type="image/webp">
                                    <img src="/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"
                               aria-label="{{ 'lang.readMore' | trans }}: {{ 'lang.sftSignPromoCard3Title' | trans }}">{{ 'lang.readMore' | trans }} <span
                                        class="arrow-icon" aria-hidden="true">→</span></a>
                        </div>
                    </div>

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

                    <p class="orange-subtitle text-center mt-5">{{ 'lang.sftCollectPromoSubtitle' | trans }}</p>
                    <h2 class="dark-blue-title mb-2 mb-md-5">{{ 'lang.sftCollectPromoTitle' | trans }}</h2>

                    <div class="card-section d-flex">
                        <div class="card feature-card card-gray">
                            <div class="card-title display-flex-start">
                                <picture>
                                    <source srcset="/images/folder.webp" type="image/webp">
                                    <img src="/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"
                               aria-label="{{ 'lang.readMore' | trans }}: {{ 'lang.sftCollectPromoCard1Title' | trans }}">{{ 'lang.readMore' | trans }} <span
                                        class="arrow-icon" aria-hidden="true">→</span></a>
                        </div>
                        <div class="card feature-card card-orange">
                            <div class="card-title display-flex-start">
                                <picture>
                                    <source srcset="/images/rocket.webp" type="image/webp">
                                    <img src="/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"
                               aria-label="{{ 'lang.readMore' | trans }}: {{ 'lang.sftCollectPromoCard2Title' | trans }}">{{ 'lang.readMore' | trans }} <span
                                        class="arrow-icon" aria-hidden="true">→</span></a>
                        </div>
                        <div class="card feature-card card-gray">
                            <div class="card-title display-flex-start">
                                <picture>
                                    <source srcset="/images/secure.webp" type="image/webp">
                                    <img src="/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"
                               aria-label="{{ 'lang.readMore' | trans }}: {{ 'lang.sftCollectPromoCard3Title' | trans }}">{{ 'lang.readMore' | trans }} <span
                                        class="arrow-icon" aria-hidden="true">→</span></a>
                        </div>
                    </div>

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

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

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

                </div>
            </div>
        </div>
        {% include 'general/components/slider.html.twig' %}

        <div class="home-container-new-content mb-100 mt-100">
            <p class="orange-subtitle text-center">{{ 'lang.wetransferAltSubtitle' | trans }}</p>
            <h2 class="dark-blue-title mb-2 mb-md-4">{{ 'lang.wetransferAltTitle' | trans }}</h2>
            <p class="text-center mx-auto mb-4" style="max-width: 820px; color: #333; line-height: 1.6;">
                {{ 'lang.wetransferAltIntro' | trans }}
            </p>
            <div class="card-section d-flex">
                <div class="card feature-card card-gray">
                    <div class="card-title display-flex-start">
                        <picture>
                            <source srcset="/images/secure.webp" type="image/webp">
                            <img src="/images/secure.png" alt="{{ 'lang.wetransferAltCard1Title'|trans }}" width="64" height="64" loading="lazy" decoding="async">
                        </picture>
                        <h3 class="title">{{ 'lang.wetransferAltCard1Title' | trans }}</h3>
                    </div>
                    <div class="feature-description">{{ 'lang.wetransferAltCard1Text' | trans }}</div>
                </div>
                <div class="card feature-card card-orange">
                    <div class="card-title display-flex-start">
                        <picture>
                            <source srcset="/images/folder.webp" type="image/webp">
                            <img src="/images/folder.png" alt="{{ 'lang.wetransferAltCard2Title'|trans }}" width="64" height="64" loading="lazy" decoding="async">
                        </picture>
                        <h3 class="title">{{ 'lang.wetransferAltCard2Title' | trans }}</h3>
                    </div>
                    <p class="feature-description">{{ 'lang.wetransferAltCard2Text' | trans }}</p>
                </div>
                <div class="card feature-card card-gray">
                    <div class="card-title display-flex-start">
                        <picture>
                            <source srcset="/images/rocket.webp" type="image/webp">
                            <img src="/images/rocket.png" alt="{{ 'lang.wetransferAltCard3Title'|trans }}" width="64" height="64" loading="lazy" decoding="async">
                        </picture>
                        <h3 class="title">{{ 'lang.wetransferAltCard3Title' | trans }}</h3>
                    </div>
                    <p class="feature-description">{{ 'lang.wetransferAltCard3Text' | trans }}</p>
                </div>
            </div>
            <div class="cta-container">
                <a href="{{ path('app_register') }}"
                   class="cta-button button text-uppercase">{{ 'lang.wetransferAltCta' | trans }} <span
                            class="arrow-icon">→</span></a>
            </div>
        </div>

        <div class="home-container-new-content mb-100 mt-100">
            <p class="orange-subtitle text-center">{{ 'lang.faq' | trans }}</p>
            <h2 class="dark-blue-title mb-2 mb-md-5">{{ 'lang.frequentlyAskedQuestions' | trans }}</h2>
            {% include 'general/components/accordion.html.twig' %}
        </div>
    </div>
{% endblock %}