templates/default/homepage.html.twig line 1

Open in your IDE?
  1. {% extends '/base.html.twig' %}
  2. {% set newLayout = true %}
  4. {% block stylesheets %}
  5. <style>
  6. .bordered-homepage-textbox {
  7. }
  9. p.testimonial {
  10. font-weight: bolder;
  11. }
  13. .page-background-overlay-box {
  14. max-width: 6000px;
  15. !important;
  16. padding-top: 0px;
  17. !important;
  18. }
  20. p.testimonial strong {
  21. font-weight: bold;
  22. }
  24. .cta-jobofferer {
  25. background-color: #CEEBFA;
  26. }
  28. .pop-out-element:hover {
  29. transform: scale(1.05) perspective(1px)
  30. }
  32. .pop-out-element-small:hover {
  33. transform: scale(1.02) perspective(1px)
  34. }
  36. .big-hover-button:hover {
  37. transform: scale(1.3) perspective(1px)
  38. }
  40. .big-hover-button-right:hover {
  41. transform: scale(1.3) perspective(1px)
  42. }
  44. .moving-arrow-icon {
  45. animation: animatedArrow 2s linear infinite;
  46. }
  48. .moving-arrow-icon-mobile {
  49. animation: animatedArrowMobile 2s linear infinite;
  50. }
  52. @keyframes animatedArrow {
  53. 0% {
  54. padding-top: 0px;
  55. }
  56. 50% {
  57. padding-top: 12px;
  58. }
  59. 100% {
  60. padding-top: 0px;
  61. }
  62. }
  64. @keyframes animatedArrowMobile {
  65. 0% {
  66. padding-top: 0px;
  67. }
  68. 50% {
  69. padding-top: 6px;
  70. }
  71. 100% {
  72. padding-top: 0px;
  73. }
  74. }
  76. .joboo-logo-on-top {
  77. animation: animateLogo 2s linear;
  78. }
  80. @keyframes animateLogo {
  81. 0% {
  82. opacity: 0;
  83. }
  84. 80% {
  85. opacity: 0.4;
  86. }
  87. 100% {
  88. opacity: 1;
  89. }
  90. }
  92. @media only screen and (max-width: 360px) {
  93. #register-claim-1 {
  94. display: none;
  95. }
  96. }
  98. .reveal {
  99. position: relative;
  100. transform: translateY(150px);
  101. opacity: 0;
  102. transition: 1s all ease;
  103. }
  105. .reveal.active {
  106. transform: translateY(0);
  107. opacity: 1;
  108. }
  109. </style>
  110. {{ include('/default/scrolling_numbers/widget_css.html.twig') }}
  111. {% endblock %}
  113. {% block additional_body_classes %}homepage{% endblock %}
  115. {% block main_content %}
  116. <div class="row text-center m-0">
  117. <div class="col mx-0 px-0">
  118. <div class="w-100" style="background-image: url({{ asset('assets/images/default/homepage/homepage_search_bg.jpg') }});
  119. background-position: 50% 20%;
  120. background-repeat: no-repeat;
  121. background-size: cover;
  122. background-attachment: scroll;
  123. padding-top: 0;
  124. padding-bottom: 0;">
  125. <div class="tw-mb-8">
  126. <img src="{{ asset('assets/images/default/homepage/homepage_search_logo.svg') }}" class="tw-w-52 tw-pt-10" />
  127. </div>
  128. <div class="tw-mx-auto md:tw-w-1/3">
  129. {{ include('/recurrent_jobs_search/_includes/form.html.twig') }}
  130. </div>
  131. </div>
  132. <div class="bg-white position-relative pt-2 pt-md-5 pb-5 mx-0 w-100">
  134. {{ include('/default/scrolling_numbers/widget.html.twig') }}
  136. {# larger than md #}
  137. <div class="d-none d-md-block mb-5 mt-md-2" style="padding-left: 10vw; padding-right: 10vw">
  138. <div class="row mt-3 mt-md-5">
  139. <div class="col ml-0 p-0 cta-jobseeker pop-out-element text-center bg-light" id="cta-jobseeker"
  140. style="border-radius: 0.125rem;">
  141. <a href="{{ path('recurrent_jobs_search.form') }}">
  142. <span class="p-2" style="font-weight: bold; font-size: 24px; color: black;">
  143. <u>{{ 'homepage.for_jobseekers'|trans }}</u>
  144. </span>
  145. <img style="margin: 0 auto; z-index: 2; max-height: 288px; object-fit: cover; object-position: top center;"
  146. {% if landingPageDefinition is defined and landingPageDefinition is not null %}
  147. src="{{ asset('assets/images/default/homepage/landingpages/' ~ landingPageDefinition ~ '/jobsuchende.jpg')|cdnifyUri }}"
  148. {% else %}
  149. src="{{ asset('assets/images/default/homepage/december2021/desktop/Felder-oben-links.jpg')|cdnifyUri }}"
  150. {% endif %}
  151. alt="{{ 'seo.image_alt_texts.homepage_recurrent_jobs_search'|trans([], 'seo') }}"
  152. width="100%"
  153. >
  154. <div class="m-0 px-2 text-center d-sm-none d-lg-block"
  155. style="font-weight: bold; font-size: 18px; color: black; ">
  156. <span style="text-decoration: underline;">{{ 'homepage.find_your_dreamjob'|trans }}
  157. <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></span>
  158. </div>
  159. <div class="m-0 bg-white px-2 text-center d-sm-inline d-lg-none w-100"
  160. style="font-weight: bold; font-size: 20px; color: black; text-decoration: underline">
  161. Sofort dein Wunsch-Job!
  162. <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
  163. </div>
  164. </a>
  165. </div>
  166. <div class="">&nbsp;&nbsp;&nbsp;</div>
  167. <div class="col ml-0 p-0 cta-offerer pop-out-element text-center bg-primary"
  168. style="border: 3px solid #CEEBFA; border-radius: 0.125rem;">
  169. <a href="{{ path('wanted_jobs_search.form') }}">
  170. <span class="p-2" style="font-weight: bold; font-size: 24px; color: black;">
  171. <u>{{ 'homepage.for_jobofferers'|trans }}</u>
  172. </span>
  173. <img style="margin: 0 auto; z-index: 2; max-height: 288px; object-fit: cover; object-position: top center;"
  174. {% if landingPageDefinition is defined and landingPageDefinition is not null %}
  175. src="{{ asset('assets/images/default/homepage/landingpages/' ~ landingPageDefinition ~ '/arbeitgeber.jpg')|cdnifyUri }}"
  176. {% else %}
  177. src="{{ asset('assets/images/default/homepage/december2021/desktop/Felder-oben-rechts.jpg')|cdnifyUri }}"
  178. {% endif %}
  179. alt="{{ 'seo.image_alt_texts.homepage_recurrent_jobs_search'|trans([], 'seo') }}"
  180. width="100%">
  181. <span class="m-0 bg-primary px-2 text-center d-sm-none d-lg-inline"
  182. style="font-weight: bold; font-size: 18px; color: black; text-decoration: underline">
  183. {{ 'homepage.find_your_personnel'|trans }}
  184. <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
  185. </span>
  186. <span class="m-0 bg-primary px-2 text-center d-sm-inline d-lg-none"
  187. style="font-weight: bold; font-size: 20px; color: black; text-decoration: underline">
  188. Sofort dein Top-Personal!
  189. <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
  190. </span>
  191. </a>
  192. </div>
  193. </div>
  194. </div>
  196. {# md and smaller #}
  197. <div class="container d-block d-md-none mb-4 pl-0 pr-0">
  198. <div class="row mb-4 mt-4">
  199. <div class="col ml-0 p-0 text-center bg-light">
  200. <a href="{{ path('recurrent_jobs_search.form') }}">
  201. <u class="px-3 py-1 mb-1 font-weight-bold" style="color: black;">Für Jobsuchende</u>
  202. <img style="margin: 0 auto; z-index: 2; max-height: 138px; object-fit: cover; object-position: top center;"
  203. {% if landingPageDefinition is defined and landingPageDefinition is not null %}
  204. src="{{ asset('assets/images/default/homepage/landingpages/' ~ landingPageDefinition ~ '/jobsuchende.jpg')|cdnifyUri }}"
  205. {% else %}
  206. src="{{ asset('assets/images/default/homepage/december2021/desktop/Felder-oben-links.jpg')|cdnifyUri }}"
  207. {% endif %}
  208. alt="{{ 'seo.image_alt_texts.homepage_recurrent_jobs_search'|trans([], 'seo') }}"
  209. width="100%">
  210. <div class="w-100 text-center"><span class="px-2 font-weight-bold"
  211. style="color: black; text-decoration: underline">Finde jetzt deinen Wunsch-Job!<i
  212. class="fa fa-chevron-circle-right pl-2" aria-hidden="true"
  213. style="color: black;"></i></span></div>
  214. </a>
  215. </div>
  216. </div>
  217. <div class="row mt-0">
  218. <div class="col mr-0 p-0 text-center bg-primary">
  219. <a href="{{ path('wanted_jobs_search.form') }}">
  220. <u class="px-3 py-1 mb-1 font-weight-bold" style="color: black;">Für Arbeitgeber</u>
  221. <img
  222. style="margin: 0 auto; z-index: 2; max-height: 138px; object-fit: cover; object-position: top center;"
  223. {% if landingPageDefinition is defined and landingPageDefinition is not null %}
  224. src="{{ asset('assets/images/default/homepage/landingpages/' ~ landingPageDefinition ~ '/arbeitgeber.jpg')|cdnifyUri }}"
  225. {% else %}
  226. src="{{ asset('assets/images/default/homepage/december2021/desktop/Felder-oben-rechts.jpg')|cdnifyUri }}"
  227. {% endif %}
  228. alt="{{ 'seo.image_alt_texts.homepage_jobseeker_profiles_search'|trans([], 'seo') }}"
  229. width="100%">
  230. <div class="w-100 text-center"><span class="px-2 font-weight-bold"
  231. style="color: black; text-decoration: underline">Finde jetzt dein Top-Personal!<i
  232. class="fa fa-chevron-circle-right pl-2" aria-hidden="true"
  233. style="color: black;"></i></span></div>
  234. </a>
  235. </div>
  236. </div>
  237. </div>
  239. {% if hasHgkExtra is defined and hasHgkExtra %}
  240. <div class="container mb-4 pl-0 pr-0">
  241. <div class="row">
  242. <div class="col-md p-0">
  243. <div class="bg-white pt-4 pb-4 pl-0 pr-0 text-center">
  244. <div class="pl-4 pr-4">
  245. <strong>
  246. {{ 'homepage.headLine_hgk_extra'|trans|raw }}
  247. </strong>
  248. </div>
  249. </div>
  251. </div>
  252. </div>
  253. </div>
  254. {% endif %}
  256. {# Desktop version: show on large screens and up #}
  257. <div class="mt-lg-5 mb-4 px-5 d-none d-lg-block bg-light reveal">
  258. <div class="row">
  259. <div class="col-md p-0">
  260. <div class="pt-4 pb-4 pl-0 pr-0 text-center" style="display: grid;">
  261. <div class="row" style="grid-row: 1; grid-column: 1;">
  262. <div class="col-3"></div>
  263. <div class="col-6 pl-4 pr-4">
  264. {% if app.user is defined and app.user is not null %}
  265. <h5 class="mb-4 px-2">
  266. {{ 'homepage.intro_headline_logged_in'|trans({'%utagstart%': '<u>', '%utagend%': '</u>'})|raw }}
  267. </h5>
  268. <strong>
  269. {{ 'homepage.intro_logged_in'|trans|raw }}
  270. </strong>
  271. {% else %}
  272. <h5 class="mb-4 pl-5 pr-5">
  273. {{ 'homepage.intro_headline'|trans }}
  274. </h5>
  275. <strong>
  276. {{ 'homepage.intro'|trans|raw }}
  277. </strong>
  278. {% endif %}
  279. </div>
  280. <div class="col-3"></div>
  281. </div>
  282. <div class="row align-items-stretch" style="grid-row: 1; grid-column: 1;">
  283. <div class="col-2 px-3 d-flex align-items-stretch">
  284. <img class="homepage-seal-img"
  285. src="{{ asset('assets/images/seal_market_leader.png?294610346')|cdnifyUri }}"
  286. alt="{{ 'seo.image_alt_texts.homepage_recurrent_jobs_search'|trans([], 'seo') }}">
  287. </div>
  288. <div class="col-8"></div>
  289. <div class="col-2 px-3 d-flex align-items-stretch justify-content-end">
  290. <div class="d-flex align-items-stretch homepage-seals-right-group">
  291. <a href="https://pro.joboo.de/euro-top-portal" target="_blank">
  292. <img class="homepage-seal-img"
  293. src="{{ asset('assets/images/default/homepage/euro-siegel-2026.png')|cdnifyUri }}"
  294. alt="Euro Top Jobportal Generalisten">
  295. </a>
  296. <span style="width: 10px;"></span>
  297. <img class="homepage-seal-img"
  298. src="{{ asset('assets/images/default/homepage/focus-siegel-2023.png')|cdnifyUri }}"
  299. alt="{{ 'seo.image_alt_texts.homepage_recurrent_jobs_search'|trans([], 'seo') }}">
  300. </div>
  301. </div>
  302. </div>
  303. </div>
  304. </div>
  305. </div>
  306. </div>
  308. {# Mobile/tablet version: show below large screens #}
  309. <div class="container mb-4 pl-0 pr-0 d-lg-none reveal">
  310. <div class="row">
  311. <div class="col-12 pl-4 pr-4">
  312. {% if app.user is defined and app.user is not null %}
  313. <h5 class="mb-3 px-2">
  314. {{ 'homepage.intro_headline_logged_in'|trans({'%utagstart%': '<u>', '%utagend%': '</u>'})|raw }}
  315. </h5>
  316. <strong>
  317. {{ 'homepage.intro_logged_in'|trans|raw }}
  318. </strong>
  319. {% else %}
  320. <h5 class="mb-4 pl-5 pr-5">
  321. {{ 'homepage.intro_headline'|trans }}
  322. </h5>
  323. <strong>
  324. {{ 'homepage.intro'|trans|raw }}
  325. </strong>
  326. {% endif %}
  327. </div>
  328. <div class="col-12 d-flex justify-content-center align-items-start mt-3 mb-4">
  329. <a href="https://pro.joboo.de/euro-top-portal" target="_blank">
  330. <img class="homepage-seal-img mr-2"
  331. src="{{ asset('assets/images/default/homepage/euro-siegel-2026.png')|cdnifyUri }}"
  332. alt="Euro Top Jobportal Generalisten">
  333. </a>
  334. <img class="homepage-seal-img"
  335. src="{{ asset('assets/images/default/homepage/focus-siegel-2023.png')|cdnifyUri }}"
  336. alt="{{ 'seo.image_alt_texts.homepage_recurrent_jobs_search'|trans([], 'seo') }}">
  337. </div>
  338. <div class="col-12 d-flex justify-content-center align-items-start mb-2">
  339. <img class="homepage-seal-img"
  340. src="{{ asset('assets/images/seal_market_leader.png?294610346')|cdnifyUri }}"
  341. alt="{{ 'seo.image_alt_texts.homepage_recurrent_jobs_search'|trans([], 'seo') }}">
  342. </div>
  343. </div>
  344. </div>
  346. <div class="container mb-4 pl-0 pr-0 d-block d-md-none">
  347. <div class="row">
  348. <div class="col-md px-3">
  349. <a href="{{ path('content', {'content': 'garantien'}) }}">
  350. <img
  351. src="{{ asset('assets/images/default/homepage/siegel-mobil.png')|cdnifyUri }}"
  352. alt="{{ 'homepage.headline_seals'|trans }}"
  353. width="100%"
  354. >
  355. </a>
  356. </div>
  357. </div>
  358. </div>
  360. <div class="container mt-5 mb-5 pl-0 pr-0 d-none d-md-flex justify-content-around align-items-center">
  361. <img src="{{ asset('assets/images/norton-secured-seal.png') }}" style="height: 65px; width: auto; object-fit: contain; padding: 0 5px;" alt="Norton-Secured-Siegel">
  362. <img src="{{ asset('assets/images/premium-seal-180.png') }}" style="height: 65px; width: auto; object-fit: contain; padding: 0 5px;" alt="Premium-Siegel">
  363. <img src="{{ asset('assets/images/bekannt-aus-dem-tv-seal.png') }}" style="height: 65px; width: auto; object-fit: contain; padding: 0 5px;" alt="Bekannt-aus-dem-TV-Siegel">
  364. <img src="{{ asset('assets/images/google-reviews-seal.png') }}" style="height: 65px; width: auto; object-fit: contain; padding: 0 5px;" alt="Google-Reviews-Siegel">
  365. <img src="{{ asset('assets/images/trustpilot-seal.png') }}" style="height: 65px; width: auto; object-fit: contain; padding: 0 5px;" alt="Trustpilot-Siegel">
  366. <img src="{{ asset('assets/images/trustedshops-sehr-gut-seal.png') }}" style="height: 65px; width: auto; object-fit: contain; padding: 0 5px;" alt="Trustedshops-Siegel">
  367. <img src="{{ asset('assets/images/guarantee-seal-180.png') }}" style="height: 65px; width: auto; object-fit: contain; padding: 0 5px;" alt="Garantie-Siegel">
  368. </div>
  370. <div style="max-width: 100%;">{{ include('/_includes/callToActionRegisterAsJobseekerOrJobofferer.html.twig', {
  371. isHomePage: true
  372. }) }}</div>
  374. <div class="container mb-4 pl-0 pr-0 reveal">
  375. <div class="row">
  376. <div class="col-md p-0">
  377. <div class="bg-white pt-4 pb-0 text-left pl-4 pop-out-element" style="height: 100%">
  378. <h5 class="mb-4 pl-2 pl-md-5">
  379. <u>{{ 'homepage.headline_jobseeker_benefits'|trans }}</u>
  380. </h5>
  382. <div class="align-items-start">
  383. <table class="text-left pl-2 pl-md-5 pr-5">
  384. {% for i in range(1, 6) %}
  385. <tr>
  386. <td valign="top" class="pl-2 pl-md-5">
  387. <i class="fa fa-check pr-2 checkmark-in-contentpage-list"
  388. aria-hidden="true"></i>
  389. </td>
  390. <td valign="top" class="pr-5 pb-2">
  391. <strong>
  392. {{ ('default.content.homepage.benefits.jobseeker.' ~ i)|trans({'%startstrong%':'<strong>', '%endstrong%':'</strong>', '%utagstart%':'<u>', '%utagend%': '</u>'})|raw }}
  393. </strong>
  394. </td>
  395. </tr>
  396. {% endfor %}
  397. </table>
  398. </div>
  399. </div>
  400. </div>
  401. <div class="">&nbsp;&nbsp;&nbsp;</div>
  402. <div class="col-md p-0">
  403. <div class="bg-white pt-4 pb-0 text-left pl-4 pop-out-element" style="height: 100%">
  404. <h5 class="mb-4 pl-2 pl-md-5">
  405. <u>{{ 'homepage.headline_jobofferer_benefits'|trans }}</u>
  406. </h5>
  408. <div class="align-items-start">
  409. <table class="text-left pl-2 pl-md-5 pr-5 mb-3">
  410. {% for i in range(1, 6) %}
  411. <tr>
  412. <td valign="top" class="pl-2 pl-md-5">
  413. <i class="fa fa-check pr-2 checkmark-in-contentpage-list"
  414. aria-hidden="true"></i>
  415. </td>
  416. <td valign="top" class="pr-5 pb-2">
  417. <strong>
  418. {{ ('default.content.homepage.benefits.jobofferer.' ~ i)|trans }}
  419. </strong>
  420. </td>
  421. </tr>
  422. {% endfor %}
  423. </table>
  424. </div>
  425. </div>
  426. </div>
  427. </div>
  428. </div>
  430. <div class="mb-4 pl-0 pr-0 d-none d-sm-block m-0" style="width: 100vw">
  431. <div class="row m-0 p-0">
  432. <a class="col p-0 pop-out-element" style="display: grid; cursor: pointer;"
  433. href="{{ path('video') }}">
  434. <div style="grid-row: 1; grid-column: 1;">
  435. <img
  436. src="{{ asset('assets/images/default/homepage/so-gehts-plain.jpg')|cdnifyUri }}"
  437. alt="{{ 'global.navigation.how_it_works'|trans }}"
  438. style="width: 100%"
  439. >
  440. </div>
  441. <div class="text-white d-flex flex-column justify-content-center align-items-start"
  442. style="grid-row: 1; grid-column: 1;">
  443. <div class="font-weight-bold h1 pt-5" style="width: 70vw;">
  444. <span style="text-shadow: -2px 2px #000000; ">SO GEHT'S</span> <i
  445. class="fa fa-lg fa-youtube-play pl-2"
  446. style="color: #FF0100; text-shadow: -2px 2px #FFFFFF;"></i>
  447. </div>
  448. </div>
  450. </a>
  451. </div>
  452. </div>
  453. <a class="mb-4 pl-0 pr-0 d-sm-none" style="display: grid" href="{{ path('video') }}">
  454. <div style="grid-row: 1; grid-column: 1;">
  455. <img
  456. src="{{ asset('assets/images/default/homepage/so-gehts-mobil.png')|cdnifyUri }}"
  457. alt="{{ 'global.navigation.how_it_works'|trans }}"
  458. width="100%"
  459. >
  460. </div>
  461. <div class="text-white pt-5" style="grid-row: 1; grid-column: 1;">
  462. <div class="font-weight-bold h1 pt-5 d-flex flex-column justify-content-center align-items-center"
  463. style="width: 50vw;">
  464. <span class="pt-3" style="text-shadow: -2px 2px #000000;">SO GEHT'S</span>
  465. <i class="fa fa-lg fa-youtube-play pl-2"
  466. style="color: #FF0100; text-shadow: -2px 2px #FFFFFF;"></i>
  467. </div>
  468. </div>
  469. </a>
  472. <div class="container mb-4 pb-5 pl-0 pr-0 reveal">
  473. <div class="row">
  474. <div class="col p-0 pop-out-element d-flex flex-column">
  475. <span class="font-weight-light pt-4" style="font-size: 3vmax">Eine Auswahl unserer über 50.000 Firmenkunden</span>
  476. <a href="{{ path('content', {'content': 'so-gehts-anleitung'}) }}" class="pt-2">
  477. <img
  478. class="d-none d-sm-block"
  479. src="{{ asset('assets/images/default/homepage/referenzkunden.jpg')|cdnifyUri }}"
  480. alt="{{ 'homepage.headline_seals'|trans }}"
  481. width="100%"
  482. >
  483. </a>
  484. <a href="{{ path('content', {'content': 'so-gehts-anleitung'}) }}" class="pt-2">
  485. <img
  486. class="d-sm-none"
  487. src="{{ asset('assets/images/default/homepage/referenzkunden-mobil.png')|cdnifyUri }}"
  488. alt="{{ 'homepage.headline_seals'|trans }}"
  489. width="100%"
  490. >
  491. </a>
  492. </div>
  493. </div>
  494. </div>
  497. <div class="container mb-4 pl-0 pr-0">
  498. <div class="row">
  499. <div class="col-md p-0">
  500. <div class="bg-white p-0 text-center font-weight-normal reveal" style="height: 100%">
  501. <div style="display: grid;" class="px-2">
  502. <img src="{{ asset('assets/images/default/homepage/testimonial-1-no-quote.png')|cdnifyUri }}"
  503. width="100%"
  504. style="grid-row: 1; grid-column: 1; max-width: 250px; margin: auto;">
  505. <img src="{{ asset('assets/images/default/homepage/testimonial-1-quote.png')|cdnifyUri }}"
  506. width="100%"
  507. style="grid-row: 1; grid-column: 1; max-width: 250px; margin: auto;"
  508. id="testimonial-1-quote" class="testimonial-1-quote">
  509. </div>
  510. <div class="testimonial-1-quote px-4"><span>„Ich habe sofort meinen Traumjob bei euch gefunden. </span><strong>Danke!“</strong>
  511. </div>
  512. <div class="font-small testimonial-1-quote px-4" id="scroll-quote-element-1"><strong>Julia
  513. Schmidt, </strong><span>Studentin</span></div>
  514. </div>
  515. </div>
  516. <div class="">&nbsp;&nbsp;&nbsp;</div>
  517. <div class="col-md p-0">
  518. <div class="bg-white p-0 text-center font-weight-normal reveal" style="height: 100%">
  519. <div style="display: grid;" class="px-2">
  520. <img src="{{ asset('assets/images/default/homepage/testimonial-2-no-quote.png')|cdnifyUri }}"
  521. width="100%"
  522. style="grid-row: 1; grid-column: 1; max-width: 250px; margin: auto;">
  523. <img src="{{ asset('assets/images/default/homepage/testimonial-2-quote.png')|cdnifyUri }}"
  524. width="100%"
  525. style="grid-row: 1; grid-column: 1; max-width: 250px; margin: auto;"
  526. id="testimonial-2-quote" class="testimonial-2-quote">
  527. </div>
  528. <div class="testimonial-2-quote px-4"><strong>„JOBOO!® </strong><span>bietet mir die Chance, gute Mitarbeiter zu finden.“</span>
  529. </div>
  530. <div class="font-small testimonial-2-quote px-4" id="scroll-quote-element-1"><strong>Bastian
  531. Falkenroth, </strong><span>Sterne-Koch</span></div>
  532. </div>
  533. </div>
  534. </div>
  535. </div>
  537. {{ include('/_includes/callToActionRegisterAsJobseekerOrJobofferer.html.twig', {
  538. isHomePage: true
  539. }) }}
  540. {% import '/default/_includes/placeholder_replace.html.twig' as placeholder %}
  542. {% if occupationalField is defined and occupationalField is not null %}
  543. <div class="container mb-3 pl-0 pr-0">
  544. <div class="row">
  545. <div class="col-md p-0">
  546. <h4 class="p-1 primary-color dark-text text-left">
  547. {{ ('occupational_fields_lexicon.' ~ occupationalField ~ '.title')|trans([], 'lexicon') }}
  548. </h4>
  549. </div>
  550. </div>
  551. </div>
  553. <div class="container mb-4 pl-0 pr-0">
  554. <div class="row">
  555. <div class="col-md p-0">
  556. <div class="bg-white p-1 text-left">
  557. <div class="card-body content-body">
  558. {{ placeholder.replace('occupational_fields_lexicon', 'lexicon', 'teaser', occupationalField, app.user) }}
  559. </div>
  560. </div>
  561. </div>
  562. </div>
  563. </div>
  564. {% endif %}
  565. </div>
  566. </div>
  567. </div>
  568. {% endblock %}
  569. {% block javascripts %}
  570. {{ include('/recurrent_jobs_search/_includes/form_javascript.html.twig') }}
  571. {{ include('/default/scrolling_numbers/widget_javascript.html.twig') }}
  573. {% if criteo_service.pageShouldContainCriteoCode(app.request, app.user) %}
  574. <!-- Criteo Homepage Tag -->
  575. <script>
  576. {{ inlineJsWrapperBegin() }}
  577. if (typeof window.CCM === 'object') {
  578. const hasConsentForEmbedding = CCM.acceptedEmbeddings.some(embedding => {
  579. return embedding.name === 'Criteo';
  580. });
  582. if (hasConsentForEmbedding) {
  583. window.criteo_q = window.criteo_q || [];
  584. var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
  585. window.criteo_q.push(
  586. {event: "setAccount", account: 88703},
  587. {event: "setSiteType", type: deviceType},
  588. {event: "viewHome"}
  589. );
  590. }
  591. }
  592. {{ inlineJsWrapperEnd() }}
  593. </script>
  594. <!-- END Criteo Homepage Tag -->
  595. {% endif %}
  596. <script>
  597. {{ inlineJsWrapperBegin() }}
  599. function reveal() {
  600. var reveals = document.querySelectorAll(".reveal");
  602. for (var i = 0; i < reveals.length; i++) {
  603. var windowHeight = window.innerHeight;
  604. var elementTop = reveals[i].getBoundingClientRect().top;
  605. var elementVisible = 50;
  607. if (elementTop < windowHeight - elementVisible) {
  608. reveals[i].classList.add("active");
  609. }
  610. }
  611. }
  613. window.addEventListener("scroll", reveal);
  614. {{ inlineJsWrapperEnd() }}
  616. </script>
  617. {% endblock %}