templates/news/list.html.twig line 1

  1. {% extends 'base.html.twig' %}
  2. {% import 'macros/post.html.twig' as article %}
  4. {% block title %}News & Events{% endblock %}
  7. {% block body %}
  9.   <section class="relative overflow-hidden bg-neutral-100 mx-auto">
  10.     <div class="py-20 md:py-28 lg:px-8">
  11.       <div class="mx-auto md:px-8 px-6">
  12.         <div class="relative grid mx-auto lg:gap-8 xl:gap-x-6 lg:grid-cols-12">
  13.           <div class="lg:mt-0 lg:col-span-6 relative">
  14.             <div class="relative mx-auto md:mr-0">
  15.               <span class="absolute top-2 right-2 z-10 bg-brand text-white shadow-lg text-sm text-center px-5 py-1 rounded-full">Featured</span>
  16.               <img
  17.                 class="w-full h-full object-cover object-center rounded-2xl relative"
  18.                 src="{{ asset('/uploads/news/news_6_1.jpeg') }}"
  19.                 alt="{{ pagination.items[0].title }}"
  20.               />
  21.             </div>
  22.           </div>
  23.           <div class="lg:order-first self-center lg:col-span-6 lg:px-6 lg:py-0 py-16">
  24.             <span class="inline-block text-sm font-medium text-gray-500">
  25.               {{ pagination.items[0].updated | date('F d, Y')|upper }}
  26.             </span>
  27.             <h1 class="text-brand capitalize mt-1 mb-4 text-2xl font-semibold tracking-normal !leading-tight md:text-3xl xl:text-5xl">
  28.               {{ pagination.items[0].title }}
  29.             </h1>
  30.             <p class="mb-6 font-normal leading-relaxed text-gray-500 lg:mb-8 text-base">
  31.               {{ pagination.items[0].description }}
  32.             </p>
  33.             <a
  34.               href="/news/{{ pagination.items[0].urlTitle }}"
  35.               class="
  36.                 rounded-full
  37.                 shadow-lg
  38.                 bg-white
  39.                 px-6
  40.                 py-2
  41.                 inline-flex
  42.                 items-center
  43.                 justify-center
  44.                 md:text-base
  45.                 text-sm
  46.                 group
  47.                 font-semibold
  48.                 transition-all
  49.                 duration-500
  50.                 relative
  51.                 overflow-hidden
  52.                 after:content=['']
  53.                 after:w-0
  54.                 after:h-full
  55.                 after:absolute
  56.                 after:block
  57.                 after:inset-0
  58.                 hover:after:w-full
  59.                 after:transition-all
  60.                 after:duration-500
  61.                 after:bg-brand
  62.                 after:text-white
  63.               "
  64.             >
  65.               <span class="z-10 group-hover:text-white text-brand transition-all duration-700">
  66.                 Read More
  67.               </span>
  68.             </a>
  69.           </div>
  70.         </div>
  71.       </div>
  72.     </div>
  73.   </section>
  75.   <section class="bg-white px-6 py-24 mx-auto bg-[#fafaf3]">
  76.     <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-10 py-8 lg:px-6">
  77.       {% for page in pagination.items|slice(1) %}
  78.         {{
  79.             article.post(
  80.               page.title,
  81.               page.description,
  82.               page.updated,
  83.               asset('/images/news-' ~ (loop.index + 1) ~ '.jpeg'),
  84.               page.urlTitle
  85.             )
  86.           }}
  87.       {% endfor %}
  88.     </div>
  89.   </section>
  90.     <div class="w-full flex items-center justify-center">
  91.       {{ knp_pagination_render(pagination) }}
  92.     </div>
  93. {% endblock %}