templates/about/1-psychosocial-factors.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  5. <main class="mb-2 mhcc-wrapper">
  6. <article class="mhcc-sec-page-outer">
  7. <!--// Main title block STARTS-->
  8.  <header class="light-green-bg sec-page-main-header sec-page-main-header--steps">
  9.         <!--// Main title block STARTS-->
  10.         <div class="main-title-icon-wrapper">
  11.             <h1
  12.                 class="text-left sec-page-main-title--steps sec-page-lead-text--light-blue sec-page-main-title--big main-title-icon-wrapper__title">
  13.                 1. {{ "understand"|trans|raw }}
  14.             </h1>
  15.             <figure class="main-title-icon-wrapper__icon">
  16.                 <img src="../assets/img/six_steps_icon1.svg" class="main-title-icon" alt="">
  17.             </figure>
  18.         </div>
  19.         <!--// Main title block ENDS-->
  20.     </header>
  21.     
  22.     {#<header class="mt-0 text-center light-green-bg sec-page-main-header main-title-icon-wrapper">#}
  23.     {#        <h1 class="text-left sec-page-main-title sec-page-lead-text--light-blue sec-page-main-title--big main-title-icon-wrapper__title">1. {{ "understand"|trans|raw }}</h1>#}
  24.     {#        <figure class="main-title-icon-wrapper__icon">#}
  25.     {#                <img src="../assets/img/six_steps_icon1.svg" class="main-title-icon" alt="">#}
  26.     {#        </figure>#}
  27.     {#</header>#}
  28. <!--// Main title block ENDS-->
  29. <!--// Steps navbar STARTS-->
  30. <nav aria-label="List of steps" class="mb-4 steps-nav-list-wrapper">
  31.       <div class="list-inline list-unstyled steps-nav-block">   
  32.         <div class="steps-nav-block__item"><span class="active btn btn-raised btn-success steps-nav-block__link">{{ "step"|trans|raw }} 1</span></div>
  33.         <div class="steps-nav-block__item"><a href="{{ path('about_plan') }}" class="btn btn-raised btn-primary steps-nav-block__link">{{ "step"|trans|raw }} 2</a></div>
  34.         <div class="steps-nav-block__item"><a href="{{ path('about_signup') }}" class="btn btn-raised btn-primary steps-nav-block__link">{{ "step"|trans|raw }} 3</a></div>
  35.         <div class="steps-nav-block__item"><a href="{{ path('about_review') }}" class="btn btn-raised btn-primary steps-nav-block__link">{{ "step"|trans|raw }} 4</a></div>
  36.         <div class="steps-nav-block__item"><a href="{{ path('about_results') }}" class="btn btn-raised btn-primary steps-nav-block__link">{{ "step"|trans|raw }} 5</a></div>
  37.         <div class="steps-nav-block__item"><a href="{{ path('about_evaluate') }}" class="btn btn-raised btn-primary steps-nav-block__link">{{ "step"|trans|raw }} 6</a></div>
  38.        </div> 
  39. </nav>
  40. <!--// Steps navbar ENDS-->
  41. <!-- Intro content starts //-->
  42. <div class="steps-intro-wrapper">
  43.       <section class="mb-4">
  44.           <header>
  45.                 <h2 class="sec-page-subtitle blackish-text">
  46.                           <strong>{{ "factors"|trans|raw }}</strong>
  47.                 </h2>
  48.           </header>
  49.           <p class="mhcc-about-intro-desc">{{ "elements"|trans|raw }}</p> 
  50.     </section>
  51.     <section class="mb-4">
  52.           <header>
  53.                 <h2 class="sec-page-subtitle blackish-text">
  54.                          <strong>{{ "what-factors"|trans|raw }}</strong>
  55.                 </h2>
  56.           </header>
  57.           <p class="mhcc-about-intro-desc">{{ "factors-assessed"|trans|raw }}</p> 
  58.           <p class="mhcc-about-intro-desc">{{ "lower-scores"|trans|raw }}</p>
  59.     </section>
  60. </div>
  61. <!-- Intro content ends //-->
  62. <!--Tabs outer wrapper starts//-->
  63.         <div class="center-block mb-4 steps-intro-wrapper">
  64.         <!--Tabs inner wrapper starts//-->
  65.         <div class="tabs-wrapper tabs-wrapper--width">
  66.         <!--Tabs links start //-->
  67.             <ul class="nav nav-tabs nav-tabs-primary step-1-tabs" role="tablist">
  68.                     <li role="presentation" class="active"><a class="withoutripple" href="#pf1" aria-controls="pf1" role="tab" data-toggle="tab">{{ "pf1-report"|trans|raw }}</a></li>
  69.                     <li role="presentation"><a class="withoutripple" href="#pf2" aria-controls="pf2" role="tab" data-toggle="tab">{{ "pf2-report"|trans|raw }}</a></li>
  70.                     <li role="presentation"><a class="withoutripple" href="#pf3" aria-controls="pf3" role="tab" data-toggle="tab">{{ "pf3-report"|trans|raw }}</a></li>
  71.                     <li role="presentation"><a class="withoutripple" href="#pf4" aria-controls="pf4" role="tab" data-toggle="tab">{{ "pf4-report"|trans|raw }}</a></li>
  72.                     <li role="presentation"><a class="withoutripple" href="#pf5" aria-controls="pf5" role="tab" data-toggle="tab">{{ "pf5-report"|trans|raw }}</a></li>
  73.                     <li role="presentation"><a class="withoutripple" href="#pf6" aria-controls="pf6" role="tab" data-toggle="tab">{{ "pf6-report"|trans|raw }}</a></li>
  74.                     <li role="presentation"><a class="withoutripple" href="#pf7" aria-controls="pf7" role="tab" data-toggle="tab">{{ "pf7-report"|trans|raw }}</a></li>
  75.                     <li role="presentation"><a class="withoutripple" href="#pf8" aria-controls="pf8" role="tab" data-toggle="tab">{{ "pf8-report"|trans|raw }}</a></li>
  76.                     <li role="presentation"><a class="withoutripple" href="#pf9" aria-controls="pf9" role="tab" data-toggle="tab">{{ "pf9-report"|trans|raw }}</a></li>
  77.                     <li role="presentation"><a class="withoutripple" href="#pf10" aria-controls="pf10" role="tab" data-toggle="tab">{{ "pf10-report"|trans|raw }}</a></li>
  78.                     <li role="presentation"><a class="withoutripple" href="#pf11" aria-controls="pf11" role="tab" data-toggle="tab">{{ "pf11-report"|trans|raw }}</a></li>
  79.                     <li role="presentation"><a class="withoutripple" href="#pf12" aria-controls="pf12" role="tab" data-toggle="tab">{{ "pf12-report"|trans|raw }}</a></li>
  80.                     <li role="presentation"><a class="withoutripple" href="#pf13" aria-controls="pf13" role="tab" data-toggle="tab">{{ "pf13-report"|trans|raw }}</a></li>
  81.                     <li role="presentation"><a class="withoutripple" href="#pf14" aria-controls="pf14" role="tab" data-toggle="tab">{{ "pf14-report"|trans|raw }}</a></li>
  82.                     <li role="presentation"><a class="withoutripple" href="#pf15" aria-controls="pf15" role="tab" data-toggle="tab">{{ "pf15-report"|trans|raw }}</a></li>
  83.                   </ul>
  84.          <!--Tabs links end //-->            
  85.          <!--Tabs inner block starts //-->
  86.          <div class="card-block">
  87.                 <!--15 individual tabs block starts //-->
  88.                 <div class="tab-content step-1-tab-content">
  89.                   <!--Individual tab block //-->
  90.                   <div role="tabpanel" class="tab-pane fade active in pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf1">
  91.                     <p class="blackish-text">{{ "psychological-support"|trans|raw }}</p>
  92.                  </div>
  93.                  <!--Individual tab block //-->
  94.                  <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf2">
  95.                   <p class="blackish-text">{{ "organizational-culture"|trans|raw }}</p>
  96.                   </div>
  97.                   <!--Individual tab block //--> 
  98.                   <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf3">
  99.                   <p class="blackish-text">{{ "clear-leadership-expectations"|trans|raw }}</p>
  100.                   </div>
  101.                   <!--Individual tab block //-->
  102.                   <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf4">
  103.                     <p class="blackish-text">{{ "civility-respect-howtouse"|trans|raw }}</p>
  104.                     </div>
  105.                   <!--Individual tab block //-->
  106.                   <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf5">
  107.                     <p class="blackish-text">{{ "psychological-job-fit"|trans|raw }}</p>
  108.                     </div>
  109.                   <!--Individual tab block //-->
  110.                   <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf6">
  111.                     <p class="blackish-text">{{ "growth-development"|trans|raw }}</p>
  112.                     </div>
  113.                   <!--Individual tab block //-->
  114.                   <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf7">
  115.                     <p class="blackish-text">{{ "recognition-reward"|trans|raw }}</p>
  116.                     </div>
  117.                   <!--Individual tab block //-->
  118.                   <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf8">
  119.                     <p class="blackish-text">{{ "involvement-influence"|trans|raw }}</p>
  120.                     </div>
  121.                   <!--Individual tab block //-->
  122.                   <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf9">
  123.                     <p class="blackish-text">{{ "workload-management"|trans|raw }}</p>
  124.                     </div>
  125.                   <!--Individual tab block //-->
  126.                   <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf10">
  127.                     <p class="blackish-text">{{ "engagement-howtouse"|trans|raw }}</p>
  128.                     </div>
  129.                   <!--Individual tab block //-->
  130.                   <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf11">
  131.                     <p class="blackish-text">{{ "balance-howtouse"|trans|raw }}</p>
  132.                     </div>
  133.                   <!--Individual tab block //-->
  134.                   <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf12">
  135.                     <p class="blackish-text">{{ "psychological-protection"|trans|raw }}</p>
  136.                     </div>
  137.                   <!--Individual tab block //-->
  138.                   <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf13">
  139.                     <p class="blackish-text">{{ "protection-physical-safety"|trans|raw }}</p>
  140.                     </div>
  141.                   <!--Individual tab block //-->
  142.                   <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf14">
  143.                     <p class="blackish-text">{{ "protection-moral-distress"|trans|raw }}</p>
  144.                     </div>
  145.                   <!--Individual tab block //--> 
  146.                   <div role="tabpanel" class="tab-pane fade pt-2 pr-2 pb-2 pl-2 light-blue-bg" id="pf15">
  147.                     <p class="blackish-text">{{ "support-psychological-self-care"|trans|raw }}</p>
  148.                     </div>
  149.               
  150.                 </div>
  151.                 <!--15 individual tabs block ends //--> 
  152.               </div>
  153.               <!--Tabs inner block starts//-->
  154.               </div>
  155.          <!--Tabs inner wrapper ends //-->
  156.         </div>
  157.          <!--Tabs outer block ends//-->  
  158. </article>
  159. </main> 
  160. {% endblock %}