<div class="sds-snetFrame -noMenu">
<nav role="navigation">
<ul class="list-unstyled">
<li>
<a href="#frameMain" class="sds-skipNavigation sds-box -boxInsetMd sds-scaleInteraction text-underline">
Skip to content
</a>
</li>
</ul>
</nav>
<header role="banner" class="sds-navTopbar sds-snetFrame__header">
<div class="sds-navTopbar__container">
<nav role="navigation" class="sds-navTopbar__inner navbar navbar-expand">
<div class="sds-navTopbar__alignToMainContent">
<a class="sds-navTopbar__logo navbar-brand" href="#">
<span class="sr-only">Accueil S-Net</span>
<img src="../../media/logos/logo-bcee.svg" class="img-fluid" alt="Logo Spuerkeess">
</a>
</div>
<div class="sds-navTopbar__meta sds-textHelper">
<span>S-Net Privé</span>
<span class="sds-navTopbar__metaTime">Mercredi, 23. Octobre・10:54</span>
</div>
<div class="sds-navTopbar__collapse navbar-collapse" id="sds-navTopbar__collapse">
<ul class="sds-navTopbar__content navbar-nav">
<li class="sds-navTopbar__item">
<button type="button" class="sds-btn -iconBtn -btnSecondary sds-navTopbar__btn">
<span aria-hidden="true" class="sds-icon sds-icon-logout"></span>
<span class="sr-only">Se déconnecter</span>
</button>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="sds-snetFrame__inner">
<div class="sds-snetFrame__fader" aria-hidden="true"></div>
<main role="main" class="sds-snetFrame__main" id="frameMain">
<!-- panel header content start -->
<!-- panel header content end -->
<div class="sds-snetFrame__mainContent">
<!-- main content start -->
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-xl-10 col-xxl-8 sds-stackXxl">
<h1 class="text-center sds-fontBase">Bonjour <span>Jil,</span> <br>que souhaitez-vous faire aujourd’hui ?</h1>
<div class="row align-items-stretch-immediate">
<div class="col-12 col-md-6 col-xl-4">
<div class="sds-cardLogin sds-box -boxInsetlg">
<div class="sds-cardLogin__header">
<div class="sds-media -mediaMd">
<img src="https://sds.apart.lu/media/illustrations/svg240x240/spot/sdsillu-openaccountb.svg" alt="">
</div>
<div class="flex-grow-1 d-flex flex-column flex-md-row flex-md-wrap justify-content-between align-items-start align-items-md-center sds-staticGapSm">
<div class="sds-cardLogin__headerContent flex-grow-1 d-flex flex-column sds-staticGapXxs">
<h3 class="sds-cardLogin__headerTitle sds-fontBase sds-colorInherit sds-textSemiBold">S-Net Privé</h3>
<p class="sds-cardLogin__headerText sds-textHelper">Mes comptes personnels</p>
</div>
</div>
</div>
<div class="sds-cardLogin__body sds-staticGapLg">
<ul class="sds-listItemGroup list-unstyled">
<li class="sds-listItemGroup__item">
<a href="#!" class="sds-listItem sds-hoverContentSecondary -avatarChevron">
<div class="sds-avatar centeredBgi">
<img class="img-fluid" src="../../media/snet/avatars/jil-schmit-hub.jpg" alt="">
</div>
<div class="sds-listItem__text sds-staticStackXs">
<h4 class="sds-listItem__textMain sds-fontBase sds-textSemiBold">Jil Schmit</h4>
<p class="sds-listItem__textMeta sds-textHelper">1234566</p>
</div>
<div class="sds-listItem__rightContent">
<span class="sds-iconCircle sds-hoverContentSecondary__icon" aria-hidden="true">
<span class="sds-icon sds-icon-chevronright"></span>
</span>
</div>
</a>
</li>
<li class="sds-listItemGroup__item">
<a href="#!" class="sds-listItem sds-hoverContentSecondary -avatarChevron">
<div class="sds-avatar centeredBgi -avatarBase" aria-hidden="true">
<div class="sds-avatar__text">LI</div>
</div>
<div class="sds-listItem__text sds-staticStackXs">
<h4 class="sds-listItem__textMain sds-fontBase sds-textSemiBold">Lorem Ipsum</h4>
<p class="sds-listItem__textMeta sds-textHelper">12345682</p>
</div>
<div class="sds-listItem__rightContent">
<span class="sds-iconCircle sds-hoverContentSecondary__icon" aria-hidden="true">
<span class="sds-icon sds-icon-chevronright"></span>
</span>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-xl-4">
<div class="sds-cardLogin sds-box -boxInsetlg -cardLoginBfm">
<div class="sds-cardLogin__header">
<div class="sds-media -mediaMd">
<img src="https://sds.apart.lu/media/illustrations/svg240x240/spot/sdsillu-openaccountb.svg" alt="">
</div>
<div class="flex-grow-1 d-flex flex-column flex-md-row flex-md-wrap justify-content-between align-items-start align-items-md-center sds-staticGapSm">
<div class="sds-cardLogin__headerContent flex-grow-1 d-flex flex-column sds-staticGapXxs">
<h3 class="sds-cardLogin__headerTitle sds-fontBase sds-colorInherit sds-textSemiBold">S-Net Business</h3>
<p class="sds-cardLogin__headerText sds-textHelper">Mes comptes professionnels</p>
</div>
<span class="sds-badge badge -badgeHighlight text-uppercase flex-shrink-0 sds-cardLogin__headerBadge">
Nouveau
</span>
</div>
</div>
<div class="sds-cardLogin__body sds-staticGapLg">
<div class="sds-alertBanner alert -alertBannerHighlight">
<span class="sds-iconBlock -iconBlockInverse" aria-hidden="true">
<span class="sds-iconBlock__icon sds-icon sds-icon-lightbulb"></span>
</span>
<div class="sds-alertBanner__text sds-staticStackXs">
<p class="sds-textHelper">Saviez-vous que vous pouvez gérer les virements de <strong>{nom de l’entreprise}</strong> directement depuis S-Net Business, sans passer par votre compte personnel ?</p>
</div>
</div>
<ul class="sds-staticStackMd list-unstyled">
<li class="d-flex align-items-start sds-staticGapSm">
<span class="sds-icon sds-icon-check-l sds-headingColor flex-shrink-0" aria-hidden="true"></span>
<p>Gérez les accès, créez des droits personnalisés pour vous et vos collaborateurs.</p>
</li>
<li class="d-flex align-items-start sds-staticGapSm">
<span class="sds-icon sds-icon-check-l sds-headingColor flex-shrink-0" aria-hidden="true"></span>
<p>Facilitez la gestion administrative, générez des documents et relevés spécifiques pour votre société.</p>
</li>
<li class="d-flex align-items-start sds-staticGapSm">
<span class="sds-icon sds-icon-check-l sds-headingColor flex-shrink-0" aria-hidden="true"></span>
<p>Multi-entités, toutes vos sociétés en un seul espace, sans vous déconnecter.</p>
</li>
</ul>
</div>
<div class="sds-cardLogin__footer sds-staticGapSm">
<button type="button" class="sds-btn -btnPrimary" data-toggle="modal" data-target="#hubActivationModal">
<span class="sds-btn__text">
Activer S-Net Business
</span>
<span class="sds-icon sds-icon-arrownext"></span>
</button>
<button type="button" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-btn__text">
En savoir plus à propos de S-Net Business
</span>
</button>
</div>
</div>
</div>
<div class="col-12 col-xl-4">
<div class="row align-content-start align-items-stretch-immediate">
<div class="col-12 col-sm-6 col-xl-12">
<div class="sds-cardLogin sds-box -boxInsetlg -cardLoginBfm">
<div class="sds-cardLogin__header">
<div class="sds-media -mediaMd">
<img src="https://sds.apart.lu/media/illustrations/svg240x240/spot/sdsillu-openaccountb.svg" alt="">
</div>
<div class="flex-grow-1 d-flex flex-column flex-md-row flex-md-wrap justify-content-between align-items-start align-items-md-center sds-staticGapSm">
<div class="sds-cardLogin__headerContent flex-grow-1 d-flex flex-column sds-staticGapXxs">
<h3 class="sds-cardLogin__headerTitle sds-fontBase sds-colorInherit sds-textSemiBold">Easy Link</h3>
<p class="sds-cardLogin__headerText sds-textHelper">Mes entités</p>
</div>
</div>
</div>
<div class="sds-cardLogin__body sds-staticGapLg">
<a href="#!" class="sds-listItem sds-hoverContentSecondary -avatarChevron">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-date"></span>
</span>
<div class="sds-listItem__text sds-staticStackXs">
<h4 class="sds-listItem__textMain sds-fontBase sds-textSemiBold">{Action}</h4>
</div>
<div class="sds-listItem__rightContent">
<span class="sds-iconCircle sds-hoverContentSecondary__icon" aria-hidden="true">
<span class="sds-icon sds-icon-chevronright"></span>
</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-modal modal fade -bodySecondary06" id="hubActivationModal" aria-labelledby="hubActivationModalTitle" aria-modal="true" role="dialog" tabindex="-1">
<div class="sds-modal__dialog modal-dialog modal-md modal-dialog-centered modal-dialog-scrollable">
<div class="sds-modal__content modal-content">
<div class="sds-modal__header modal-header">
<h2 class="sds-modal__title modal-title" id="hubActivationModalTitle">Sociétés à activer sur S-Net Business</h2>
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-modal__close" data-dismiss="modal" aria-label="Fermer">
<span aria-hidden="true" class="sds-icon sds-icon-close"></span>
<span class="sr-only">Action text</span>
</button>
</div>
<div class="sds-modal__body modal-body">
<div class="sds-box -boxInsetMd sds-staticStackMd">
<div class="sds-alertBanner alert -alertBannerInfo">
<span class="sds-iconBlock -iconBlockInverse" aria-hidden="true">
<span class="sds-iconBlock__icon sds-icon sds-icon-instrument"></span>
</span>
<div class="sds-alertBanner__text sds-staticStackXs">
<p class="sds-textHelper">Votre convention regroupe plusieurs sociétés. Chaque société doit être activée séparément dans S-Net Business. Choisissez une société pour poursuivre.</p>
</div>
</div>
<ul class="sds-listItemGroup list-unstyled mb-0">
<li class="sds-listItemGroup__item">
<div class="sds-listItem sds-hoverContentSecondary sds-hoverContentSecondary">
<div class="sds-avatar centeredBgi -avatarBase" aria-hidden="true">
<div class="sds-avatar__text">GE</div>
</div>
<div class="sds-listItem__text">
<div class="sds-listItem__textMain sds-textSemiBold sds-headingColor text-wrap">Grande Epicerie</div>
</div>
<div class="sds-listItem__rightContent">
<button type="button" class="sds-btn -btnPrimary">
<span class="sds-btn__text">
Activer
</span>
<span class="sds-icon sds-icon-arrownext"></span>
</button>
</div>
</div>
</li>
<li class="sds-listItemGroup__item">
<div class="sds-listItem sds-hoverContentSecondary sds-hoverContentSecondary">
<div class="sds-avatar centeredBgi -avatarBase" aria-hidden="true">
<div class="sds-avatar__text">LI</div>
</div>
<div class="sds-listItem__text">
<div class="sds-listItem__textMain sds-textSemiBold sds-headingColor text-wrap">Lorem Ipsum SA</div>
</div>
<div class="sds-listItem__rightContent">
<button type="button" class="sds-btn -btnPrimary">
<span class="sds-btn__text">
Activer
</span>
<span class="sds-icon sds-icon-arrownext"></span>
</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- main content end -->
</div>
</main>
</div>
</div>
<!-- content such as modals, tooltips, popovers etc should be included here -->
{% extends "@snet-page-frame--no-menu" %}
{% block panelMainContent %}
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-xl-10 col-xxl-8 {{ namespace }}stackXxl">
<h1 class="text-center {{ namespace }}fontBase">Bonjour <span>{{ firstName }},</span> <br>que souhaitez-vous faire aujourd’hui ?</h1>
<div class="row align-items-stretch-immediate">
<div class="col-12 col-md-6{% if serviceCards %} col-xl-4{% endif %}">
{% render "@card-login", privateCard, true %}
</div>
<div class="col-12 col-md-6{% if serviceCards %} col-xl-4{% endif %}">
{% render "@card-login", businessCard, true %}
</div>
{% if serviceCards %}
<div class="col-12 col-xl-4">
<div class="row align-content-start align-items-stretch-immediate">
{% for serviceCard in serviceCards %}
<div class="col-12 col-sm-6 col-xl-12">
{% render "@card-login", serviceCard, true %}
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
{% if activationModalVariant %}
{% render "@snet-modal-hub-activation--" + activationModalVariant %}
{% else %}
{% render "@snet-modal-hub-activation" %}
{% endif %}
{% endblock %}