templates/page/office/show/components/budapest/budapest_about_us.html.twig line 1

Open in your IDE?
  1. {% import 'common/macros/elements.html.twig' as elements %}
  2. {% import 'common/macros/svg.html.twig' as svg %}
  4. <div class="budapest budapest-info" data-tab="info">
  5.   <section class="about">
  6.     <div class="wrap">
  7.       <div class="badge">
  8.         {{ svg.icf_logo_white }}
  9.       </div>
  11.       <div class="inner">
  12.         <div class="head title">
  13.           <h4>{{ 'budapest.about_us'|trans }}</h4>
  14.           <h2>{{ 'budapest.life_at_icf.title'|trans }}</h2>
  15.           <p><strong>{{ 'budapest.life_at_icf.subtitle'|trans }}</strong></p>
  16.         </div>
  18.         <div class="list">
  19.           <div class="item">
  20.             <span class="icon">{{ svg.happiness }}</span>
  21.             <h3>{{ 'budapest.life_at_icf.item_1_title'|trans }}</h3>
  22.             <p> {{ 'budapest.life_at_icf.item_1_text'|trans }}
  23.             </p>
  24.           </div>
  26.           <div class="item">
  27.             <span class="icon">{{ svg.review }}</span>
  28.             <h3>{{ 'budapest.life_at_icf.item_2_title'|trans }}</h3>
  29.             <p>{{ 'budapest.life_at_icf.item_2_text'|trans }}</p>
  30.           </div>
  32.           <div class="item">
  33.             <span class="icon">{{ svg.vision }}</span>
  34.             <h3>{{ 'budapest.life_at_icf.item_3_title'|trans }}</h3>
  35.             <p>{{ 'budapest.life_at_icf.item_3_text'|trans }}</p>
  36.           </div>
  37.         </div>
  38.       </div>
  39.     </div>
  40.   </section>
  42.   <section class="leaders">
  43.     <div class="title">
  44.       <h4>{{ 'budapest.about_us'|trans }}</h4>
  45.       <h2>{{ 'budapest.leaders.title'|trans }}</h2>
  46.     </div>
  48.     <div class="list">
  49.       <div class="item">
  50.         <img src="/img/ICF_csapat_Adam.png" alt="Adam"/>
  51.         <div class="details">
  52.           <h4>{{ 'budapest.leaders.leader_name_1'|trans }}</h4>
  53.           <p>{{ 'budapest.leaders.leader_text_1'|trans }}</p>
  54.         </div>
  55.       </div>
  57.       <div class="item">
  58.         <img src="/img/ICF_csapat_Levente.png" alt="Levente"/>
  59.         <div class="details">
  60.           <h4>{{ 'budapest.leaders.leader_name_2'|trans }}</h4>
  61.           <p>{{ 'budapest.leaders.leader_text_2'|trans }}</p>
  62.         </div>
  63.       </div>
  65.       <div class="item">
  66.         <img src="/img/ICF_csapat_Laszlo.png" alt="Laszlo"/>
  67.         <div class="details">
  68.           <h4>{{ 'budapest.leaders.leader_name_3'|trans }}</h4>
  69.           <p>{{ 'budapest.leaders.leader_text_3'|trans }}</p>
  70.         </div>
  71.       </div>
  72.     </div>
  73.   </section>
  75.   <section class="office">
  76.     <div class="wrap">
  77.       <div class="title">
  78.         <h4>{{ 'budapest.about_us'|trans }}</h4>
  79.         <h2>{{ 'budapest.office.title'|trans }}</h2>
  80.       </div>
  82.       <div class="list">
  83.         {% for i in 1..5 %}
  84.           <div class="item">
  85.             <img src="{{ '/img/iroda-' ~ i ~ '.png' }}" alt="office img"/>
  86.           </div>
  87.         {% endfor %}
  88.       </div>
  89.     </div>
  90.   </section>
  92.   <section class="work-with-us">
  93.     <div class="title">
  94.       <h4>{{ 'budapest.about_us'|trans }}</h4>
  95.       <h2>{{ 'budapest.why_work_with_us.title'|trans }}</h2>
  96.     </div>
  98.     <div class="row">
  99.       <div class="content">
  100.         <h5>{{ 'budapest.why_work_with_us.category_1.title'|trans }}</h5>
  102.         <ul>
  103.           <li>{{ 'budapest.why_work_with_us.category_1.line_1'|trans }}</li>
  104.           <li>{{ 'budapest.why_work_with_us.category_1.line_2'|trans }}
  105.               <ul>
  106.                   <li>{{ 'budapest.why_work_with_us.category_1.line_3'|trans }}</li>
  107.                   <li>{{ 'budapest.why_work_with_us.category_1.line_4'|trans }}</li>
  108.                   <li>{{ 'budapest.why_work_with_us.category_1.line_5'|trans }}</li>
  109.                   <li>{{ 'budapest.why_work_with_us.category_1.line_6'|trans }}</li>
  110.               </ul>
  111.           </li>
  112.           <li>{{ 'budapest.why_work_with_us.category_1.line_7'|trans }}
  113.               <ul>
  114.                   <li>{{ 'budapest.why_work_with_us.category_1.line_8'|trans }}</li>
  115.                   <li>{{ 'budapest.why_work_with_us.category_1.line_9'|trans }}</li>
  116.                   <li>{{ 'budapest.why_work_with_us.category_1.line_10'|trans }}</li>
  117.               </ul>
  118.           </li>
  119.           <li>{{ 'budapest.why_work_with_us.category_1.line_11'|trans }}
  120.               <ul>
  121.                   <li>{{ 'budapest.why_work_with_us.category_1.line_12'|trans }}</li>
  122.                   <li>{{ 'budapest.why_work_with_us.category_1.line_13'|trans }}</li>
  123.               </ul>
  124.           </li>
  125.         </ul>
  126.       </div>
  128.       <div class="image">
  129.         {{ elements.lottie('salaryLottie', 'salary.json') }}
  130.       </div>
  131.     </div>
  133.     <div class="row inverse">
  134.       <div class="content">
  135.         <h5>{{ 'budapest.why_work_with_us.category_2.title'|trans }}</h5>
  136.         <ul>
  137.           <li>{{ 'budapest.why_work_with_us.category_2.line_1'|trans }}</li>
  138.           <li>{{ 'budapest.why_work_with_us.category_2.line_2'|trans }}</li>
  139.           <li>{{ 'budapest.why_work_with_us.category_2.line_3'|trans }}</li>
  140.           <li>{{ 'budapest.why_work_with_us.category_2.line_4'|trans }}</li>
  141.           <li>{{ 'budapest.why_work_with_us.category_2.line_5'|trans }}</li>
  142.           <li>{{ 'budapest.why_work_with_us.category_2.line_6'|trans }}</li>
  143.         </ul>
  144.       </div>
  146.       <div class="image">
  147.         {{ elements.lottie('officeLottie', 'office.json') }}
  148.       </div>
  149.     </div>
  151.     <div class="row">
  152.       <div class="content">
  153.         <h5>{{ 'budapest.why_work_with_us.category_3.title'|trans }}</h5>
  155.         <ul>
  156.           <li>{{ 'budapest.why_work_with_us.category_3.line_1'|trans }}</li>
  157.           <li>{{ 'budapest.why_work_with_us.category_3.line_2'|trans }}</li>
  158.           <li>{{ 'budapest.why_work_with_us.category_3.line_3'|trans }}</li>
  159.           <li>{{ 'budapest.why_work_with_us.category_3.line_4'|trans }}</li>
  160.           <li>{{ 'budapest.why_work_with_us.category_3.line_5'|trans }}</li>
  161.           <li>{{ 'budapest.why_work_with_us.category_3.line_6'|trans }}</li>
  162.           <li>{{ 'budapest.why_work_with_us.category_3.line_7'|trans }}</li>
  163.           <li>{{ 'budapest.why_work_with_us.category_3.line_8'|trans }}</li>
  164.           <li>{{ 'budapest.why_work_with_us.category_3.line_9'|trans }}</li>
  165.         </ul>
  166.       </div>
  168.       <div class="image">
  169.         {{ elements.lottie('learnLottie', 'learn.json') }}
  170.       </div>
  171.     </div>
  173.     <div class="row inverse">
  174.       <div class="content">
  175.         <h5>{{ 'budapest.why_work_with_us.category_4.title'|trans }}</h5>
  177.         <ul>
  178.           <li>{{ 'budapest.why_work_with_us.category_4.line_1'|trans }}</li>
  179.           <li>{{ 'budapest.why_work_with_us.category_4.line_2'|trans }}</li>
  180.           <li>{{ 'budapest.why_work_with_us.category_4.line_3'|trans }}</li>
  181.             <li>{{ 'budapest.why_work_with_us.category_4.line_4'|trans }}</li>
  182.         </ul>
  183.       </div>
  185.       <div class="image">
  186.         {{ elements.lottie('eventLottie', 'event.json') }}
  187.       </div>
  188.     </div>
  189.   </section>
  191.   <section class="certifications">
  192.     <div class="title">
  193.       <h4>{{ 'budapest.about_us'|trans }}</h4>
  194.       <h2>{{ 'budapest.employer_recognitions.title'|trans }}</h2>
  195.     </div>
  197.     <div class="image-row">
  198.       <div class="image">
  199.         <img src="{{'/img/SZMD_2023_badge_HU.png'}}">
  200.       </div>
  201.       <div class="image">
  202.         <img src="{{ '/img/SZMD badge 2022.svg' }}">
  203.       </div>
  204.       <div class="png-image">
  205.         <img src="{{ '/img/Dentalis_Kultura_Nagykovete_Platina_Fokozat.png' }}">
  206.       </div>
  207.       <div class="image">
  208.         <img src="{{ '/img/ExcellentSME.svg' }}">
  209.       </div>
  210.     </div>
  211.   </section>
  212. </div>
  214. <script>
  215.   const scrollFollowingLotties = ["salaryLottie", "officeLottie", "learnLottie", "eventLottie"];
  217.   for (const id of scrollFollowingLotties) {
  218.     LottieInteractivity.create({
  219.       mode: 'scroll',
  220.       player: '#' + id,
  221.       actions: [
  222.         {
  223.           visibility: [0.12, 0.62],
  224.           type: 'seek',
  225.           frames: [0, 45],
  226.         },
  227.       ],
  228.     });
  229.   }
  230. </script>