templates/team/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}
  4. Join with us.
  5. {% endblock %}
  7. {% block body %}
  8.   <section class="relative bg-[#eeeef6] mx-auto py-16">
  9.     <div class="relative z-10">
  10.     <div class="mx-auto w-full py-8 px-6 text-center max-w-4xl">
  11.       <h1 class="mb-4 text-2xl md:text-4xl font-black text-brand">
  12.         Join with us
  13.       </h1>
  14.       <p class="mb-10 font-normal leading-relaxed text-neutral-600 lg:mb-12 text-2xl">
  15.         Support and connect with Overseas Nepalese Liaison Department (ONLD)
  16.       </p>
  17.     </div>
  18.     </div>
  19.   </section>
  21.     <section class="relative bg-white mx-auto lg:py-24 py-12">
  22.         {# <div class="grid grid-cols-1 gap-x-8 gap-y-10 mt-8 xl:mt-16 md:grid-cols-3 xl:grid-cols-4 py-8 px-6">
  23.             {% for i in 0..11 %}
  24.                 <div class="flex flex-col items-center p-4 border sm:p-6 rounded-xl group">
  25.                     <div class="w-full rounded-xl h-auto overflow-hidden">
  26.             <img class="object-cover w-full aspect-square saturate-0 group-hover:saturate-100 group-hover:scale-125 transition-all duration-700" src="{{ asset('/images/' ~ (i + 1) ~ '_large.jpg') }}" alt="member">
  27.           </div>
  28.                     <h1 class="mt-4 text-2xl font-semibold text-gray-700 capitalize">Lorem Ipsum</h1>
  29.                     <p class="mt-2 text-gray-500 capitalize">Dolor Isat</p>
  30.                     <div class="flex mt-3 -mx-2">
  31.             <a href="https://facebook.com" target="_blank" class="mx-2 text-gray-600 transition-colors duration-300 hover:text-brand">
  32.               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="w-5 h-5 fill-current">
  33.                 <path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/>
  34.               </svg>
  35.             </a>
  36.             <a href="https://instagram.com" target="_blank" class="mx-2 text-gray-600 transition-colors duration-300 hover:text-brand">
  37.               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="w-5 h-5 fill-current">
  38.                 <path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/>
  39.               </svg>
  40.             </a>
  41.             <a href="https://twitter.com" target="_blank" class="mx-2 text-gray-600 transition-colors duration-300 hover:text-brand">
  42.               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current">
  43.                 <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/>
  44.               </svg>
  45.             </a>
  46.             <a href="https://linkedin.com" target="_blank" class="mx-2 text-gray-600 transition-colors duration-300 hover:text-brand">
  47.               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="w-5 h-5 fill-current">
  48.                 <path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/>
  49.               </svg>
  50.             </a>
  51.                     </div>
  52.                 </div>
  53.             {% endfor %}
  54.         </div> #}
  56.     <div class="w-full px-6">
  57.       <nav
  58.         class="
  59.           flex
  60.           gap-6
  61.           md:mx-auto
  62.           md:max-w-screen-2xl
  63.           {% if departments|length > 2 %}
  64.           md:justify-center
  65.           justify-start
  66.           {% else %}
  67.           justify-center
  68.           {% endif %}
  69.           items-center
  70.           overflow-auto
  71.         "
  72.         aria-label="Tabs"
  73.       >
  74.         {% for department in departments %}
  75.           <button
  76.             data-department-code="{{ department.departmentCode }}"
  77.             class="tab-btn shrink-0 rounded-lg p-2 text-xl font-medium"
  78.           >
  79.             {{ department.name }}
  80.           </button>
  81.         {% endfor %}
  82.       </nav>
  83.       <div class="grid grid-cols-1 gap-x-8 gap-y-10 mt-8 xl:mt-16 md:grid-cols-4 xl:grid-cols-5 py-8 md:px-6">
  84.         {% for member in teamMembers %}
  85.           <div class="hidden {{ member.department.departmentCode }} tab items-center border rounded-xl group relative overflow-hidden">
  86.             <div class="w-full h-auto overflow-hidden">
  87.               {% if member.user.getUserImagesByuserImageTypeCode('LG') is not null %}
  88.                 {% set avatar = '/uploads/media/' ~ member.user.getUserImagesByuserImageTypeCode('LG').getImageMetaData().getName() %}
  89.               {% else %}
  90.                 {% set avatar = 'https://avatar.uimaterial.com/?setId=bWHeCqgK6m3HuS6KPXYH&name=' ~ member.user.firstName ~ '&size=512' %}
  91.               {% endif %}
  92.               <img
  93.                 class="object-cover w-full aspect-square saturate-0 group-hover:saturate-100 group-hover:scale-125 transition-all duration-700"
  94.                 src="{{ avatar }}"
  95.                 alt="{{ member.user.firstName ~ ' ' ~ member.user.lastName }}"
  96.               >
  97.             </div>
  98.             <div class="p-4 text-center">
  99.             <h3 class="mt-4 text-2xl xl:text-2xl md:text-xl font-semibold text-gray-700 capitalize">
  100.               {{ member.user.firstName ~ ' ' ~ member.user.lastName }}
  101.             </h3>
  102.             <p class="mt-2 text-gray-500 capitalize">
  103.               {{ member.designation.name }}
  104.             </p>
  105.             <div class="flex mt-3 -mx-2">
  106.               {% if member.user.userDetail and member.user.userDetail.facebook %}
  107.                 <a href="https://facebook.com/{{ member.user.userDetail.facebook }}" target="_blank" class="mx-2 text-gray-600 transition-colors duration-300 hover:text-brand">
  108.                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="w-5 h-5 fill-current">
  109.                     <path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/>
  110.                   </svg>
  111.                 </a>
  112.               {% endif %}
  114.               {% if member.user.userDetail and member.user.userDetail.instagram %}
  115.                 <a href="https://instagram.com/{{ member.user.userDetail.instagram }}" target="_blank" class="mx-2 text-gray-600 transition-colors duration-300 hover:text-brand">
  116.                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="w-5 h-5 fill-current">
  117.                     <path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/>
  118.                   </svg>
  119.                 </a>
  120.               {% endif %}
  122.               {% if member.user.userDetail and member.user.userDetail.twitter %}
  123.                 <a href="https://twitter.com/{{ member.user.userDetail.twitter }}" target="_blank" class="mx-2 text-gray-600 transition-colors duration-300 hover:text-brand">
  124.                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-5 h-5 fill-current">
  125.                     <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/>
  126.                   </svg>
  127.                 </a>
  128.               {% endif %}
  130.               {% if member.user.userDetail and member.user.userDetail.linkedin %}
  131.                 <a href="https://linkedin.com/{{ member.user.userDetail.linkedin }}" target="_blank" class="mx-2 text-gray-600 transition-colors duration-300 hover:text-brand">
  132.                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="w-5 h-5 fill-current">
  133.                     <path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/>
  134.                   </svg>
  135.                 </a>
  136.               {% endif %}
  137.             </div>
  138.             </div>
  139.           </div>
  140.         {% endfor %}
  141.       </div>
  142.     </div>
  144.     </section>
  145.    <script>
  146.     $(document).ready(function() {
  147.       $('.tab-btn').first().removeClass('text-gray-500 hover:bg-gray-50 hover:text-gray-700').addClass('bg-sky-100 text-sky-600')
  148.       let tabToDisplay = $('.tab-btn').first().data('department-code')
  149.       $('.tab').addClass('hidden')
  150.       $(`.${tabToDisplay}`).removeClass('hidden')
  151.       
  152.       $('.tab-btn').click(function() {
  153.         $('.tab-btn').removeClass('bg-sky-100 text-sky-600').addClass('text-gray-500 hover:bg-gray-50 hover:text-gray-700')
  154.         $(this).removeClass('text-gray-500 hover:bg-gray-50 hover:text-gray-700').addClass('bg-sky-100 text-sky-600')
  156.         let tabToDisplay = $(this).data('department-code')
  157.         $('.tab').addClass('hidden')
  158.         $(`.${tabToDisplay}`).removeClass('hidden')
  159.       })
  160.     })
  161.    </script>
  162. {% endblock %}