templates/includes/blocks/visionSection.html.twig line 1

Open in your IDE?
  1. <section class="vision-section pt-16 lg:pt-40 pb-11 lg:pb-14 bg-light text-blue"
  2.   section-shade="light">
  3.   <div class="container">
  4.     <div class="flex flex-col lg:flex-row gap-8 justify-between">
  5.       <h2 class="h2 lg:w-5/12 xl:w-4/12"
  6.         split-direction="top"
  7.         split-trigger="scroll">{{content.visionSectionTitle}}</h2>
  8.       <div class="md:text-2xl lg:w-6/12 xl:w-7/12"
  9.         fade
  10.         fade-trigger="scroll">
  11.         {{content.visionSectionDescription | raw}}
  12.       </div>
  13.     </div>
  14.   </div>
  16.   <div class="mt-8 md:mt-16 xl:mt-24">
  17.     {% set visions = [
  18.     {
  19.     'title': 'Impact Transformation. Exit places better than you found them.',
  20.     'text': 'We have the opportunity and the abilities to create massive impact through responsible and conscious
  21.     investing. We therefore cannot allow ourselves not to do it. We never invest solely driven by short term monetary
  22.     gains. We go beyond that.',
  23.     'img': './assets/oaks-lane/agency/vision-1.webp'
  24.     },
  25.     {
  26.     'title': 'It is easy to be a good partner in good times. Be a good partner in bad times.',
  27.     'text': 'The things worth doing are rarely easy, and the people pursuing them should be supported, even when the
  28.     road gets rough. That is why, when we enter a partnership, we are all in. We are passionate about backing
  29.     out-of-the-box thinkers with the ambition to push the boundaries of the expected in order to offer impact beyond the
  30.     imagined.',
  31.     'img': './assets/oaks-lane/agency/vision-2.webp'
  32.     },
  33.     {
  34.     'title': 'The future in Real Estate is always now. It is always a legacy.',
  35.     'text': 'The actions we take in real estate shape our surroundings and have lasting real-world impact. We believe
  36.     that is both a huge responsibility and an amazing opportunity. That is why we carefully assess every step we take.
  37.     It is our legacy.',
  38.     'img': './assets/oaks-lane/agency/vision-3.webp'
  39.     },
  40.     ] %}
  42.     <div class="container-mob-zero">
  43.       <div class="flex gap-2 snap-x overflow-x-auto overflow-y-hidden hide-scrollbar">
  44.         <div class="shrink-0 w-4 sm:w-8 lg:hidden"></div>
  46.         {% for vision in content.visions %}
  48.         <div class="vision-item snap-center grid grid-rows-[auto_1fr] shrink-0 lg:shrink w-10/12 sm:w-8/12 lg:w-1/3"
  49.           fade
  50.           fade-trigger="none">
  52.           <div
  53.             class="flex items-end w-full h-[60vh] min-h-[280px] max-h-[310px] md:max-h-[495px] img-clip text-white overflow-hidden">
  54.             <div class="vision-item__img absolute scale-110 opacity-0 inset-0 select-none">
  55.               {# image size 720x840 #}
  56.               {% if vision.visionImage|length > 0 %}
  57.               {% set image = vision.visionImage.url %}
  58.               <img src="{{ image }}"
  59.                 width="100"
  60.                 height="560"
  61.                 alt="{{vision.visionTitle}}"
  62.                 loading="lazy">
  63.               {% endif %}
  65.               {% if vision.visionImage|length > 0 %}
  66.               {% set image = vision.visionImage.url %}
  67.               <img src="{{ image }}"
  68.                 width="100"
  69.                 height="560"
  70.                 alt="{{vision.visionTitle}}"
  71.                 loading="lazy">
  72.               {% endif %}
  73.             </div>
  75.             <h3 class="vision-item__title relative z-10 text-xl md:text-[2rem] title px-6 lg:p-8 xl:px-10 pb-8"
  76.               fade
  77.               fade-trigger="none">{{vision.visionTitle}}</h3>
  78.           </div>
  80.           <div class="relative flex flex-col p-6 xl:p-10 bg-white text-blue">
  81.             <div class="vision-item__text text-sm"
  82.               fade
  83.               fade-trigger="none">
  84.               {{vision.visionText|raw}}
  85.             </div>
  86.           </div>
  87.         </div>
  89.         {% endfor %}
  91.         <div class="shrink-0 w-4 sm:w-8 lg:hidden"></div>
  92.       </div>
  93.     </div>
  95.   </div>
  96. </section>