templates/home/index.html.twig line 1

  1. {% import 'macros/animated-shape.html.twig' as animatedShape %}
  2. {% extends 'base.html.twig' %}
  3. {% import 'macros/post.html.twig' as article %}
  4. {% block title %}
  5.   Welcome to ONLD UK : ONLD UK serves as RSP Nepal's official overseas department based in the United Kingdom.
  6. {% endblock %}
  9. {% block body %}
  10.   <!--
  11.   Heads up! 👋
  13.   This component comes with some `rtl` classes. Please remove them if they are not needed in your project.
  14. -->
  16.     <section class="bg-neutral-100">
  17.       <div class="relative grid mx-auto lg:gap-8 xl:gap-12 lg:grid-cols-2 min-h-[60vh]">
  18.         <div class="lg:mt-0 lg:col-span-1 relative h-full w-full lg:w-1/2 lg:absolute lg:top-0 lg:right-0">
  19.           <img src="{{ asset('/images/banner_image.jpg') }}" alt="ONLD UK" class="w-full h-full object-cover object-center" />
  20.           <div class="absolute bottom-4 right-4">
  21.             <span class="text-sm font-semibold text-white drop-shadow">Affiliated with Rashtriya Swatantra Party - Nepal</span>
  22.           </div>
  23.         </div>
  24.         <div class="lg:order-first mx-auto lg:max-w-screen-md place-self-center lg:col-span-1 lg:pr-24 px-6 py-28">
  25.           <span class="text-brand text-sm font-semibold">"प्रवास नेपाली सम्पर्क बिभाग (युके)"</span>
  26.           <h1 class="text-neutral-800 mb-4 text-4xl font-bold tracking-normal leading-11 md:text-5xl xl:text-6xl">
  27.             Welcome to <span class="text-brand">Overseas Nepalese Liaison Department (ONLD)</span>
  28.           </h1>
  29.           <p class="mb-10 font-normal leading-relaxed text-neutral-600 lg:mb-12 text-2xl">
  30.           Overseas Nepalese Liaison Department(ONLD) UK was formed in May 2023 as a conjoined organization of Nepalese residing in the UK who have hope, faith and trust towards the objectives of the National Independent Party (Rastriya Swatantra Party-RSP) of Nepal.
  31.           </p>
  34.         {% if app.user is null %}
  35.           <a href="/register"
  36.                 class="
  37.                   rounded-full
  38.                   shadow-lg
  39.                   bg-white
  40.                   px-8
  41.                   py-5
  42.                   inline-flex
  43.                   items-center
  44.                   justify-center
  45.                   md:text-base
  46.                   text-sm
  47.                   group
  48.                   font-semibold
  49.                   transition-all
  50.                   duration-500
  51.                   relative
  52.                   overflow-hidden
  53.                   after:content=['']
  54.                   after:w-0
  55.                   after:h-full
  56.                   after:absolute
  57.                   after:block
  58.                   after:inset-0
  59.                   hover:after:w-full
  60.                   after:transition-all
  61.                   after:duration-500
  62.                   after:bg-brand
  63.                   after:text-white
  64.                 "
  65.               >
  66.                   <span class="z-10 group-hover:text-white text-brand transition-all duration-700">Become a member</span>
  67.                 </a>
  68.         {% else %}
  69.         <a href="/party-pillar"
  70.                 class="
  71.                   rounded-full
  72.                   shadow-lg
  73.                   bg-white
  74.                   px-8
  75.                   py-5
  76.                   inline-flex
  77.                   items-center
  78.                   justify-center
  79.                   md:text-base
  80.                   text-sm
  81.                   group
  82.                   font-semibold
  83.                   transition-all
  84.                   duration-500
  85.                   relative
  86.                   overflow-hidden
  87.                   after:content=['']
  88.                   after:w-0
  89.                   after:h-full
  90.                   after:absolute
  91.                   after:block
  92.                   after:inset-0
  93.                   hover:after:w-full
  94.                   after:transition-all
  95.                   after:duration-500
  96.                   after:bg-brand
  97.                   after:text-white
  98.                 "
  99.               >
  100.                   <span class="z-10 group-hover:text-white text-brand transition-all duration-700">Donate as a Party Pillar</span>
  101.                 </a>
  102.           
  103.         {% endif %}
  117.           
  118.                 
  119.                 <button
  120.                 onclick="window.location.pathname = '/donate'"
  121.                 class="
  122.                   rounded-full
  123.                   shadow-lg
  124.                   bg-brand
  125.                   text-white
  126.                   px-8
  127.                   py-5
  128.                   mx-2
  129.                   inline-flex
  130.                   items-center
  131.                   justify-center
  132.                   text-sm
  133.                   group
  134.                   font-semibold
  135.                   transition-all
  136.                   duration-500
  137.                   relative
  138.                   md:text-base
  139.                   overflow-hidden
  140.                   after:content=['']
  141.                   after:w-0
  142.                   after:h-full
  143.                   after:absolute
  144.                   after:block
  145.                   after:inset-0
  146.                   hover:after:w-full
  147.                   after:transition-all
  148.                   after:duration-500
  149.                   after:
  150.                 "
  151.               >
  152.                   <span class="z-10 transition-all duration-700">Donate now</span>
  153.                 </button>
  154.         </div>
  155.       </div>
  158.     <div class="w-full bg-white">
  159.       <div class="container lg:px-8 px-6 lg:py-40 py-28 mx-auto">
  160.           <div class="max-w-2xl text-center mb-12 mx-auto">
  161.               <h2 class="text-neutral-800 mb-4 text-3xl font-bold tracking-normal md:text-4xl xl:text-5xl">
  162.                 Need any <span class="text-brand">Help?</span>
  163.               </h2>
  164.               <p class="mb-10 font-normal leading-relaxed text-neutral-600 lg:mb-12 text-2xl">
  165.               ONLD UK serves as the official overseas department of RSP Nepal, based in the United Kingdom. It operates a comprehensive helpdesk to support students, employers, and members of the Nepali community.
  166.               </p>
  167.               <a href="/help-desk"
  168.                 class="
  169.               lg:inline
  170.               bg-brand
  171.               hover:bg-transparent
  172.               border
  173.               border-brand
  174.               transition-all
  175.               duration-300
  176.               py-5
  177.               px-8
  178.               rounded-full
  179.               text-base
  180.               font-semibold
  181.               leading-6
  182.               text-white
  183.               hover:text-brand
  184.               lg:w-auto
  185.               w-full
  186.               text-center
  187.               lg:mr-5 cursor-pointer"> Connect Help Desk </a>
  188.           </div>
  189.       </div>
  190.     </div>
  191.   </section>
  193.   
  194.   <section class="w-full bg-neutral-100">
  195.     <div class="container lg:px-8 px-6 py-28 mx-auto">
  196.       <div class="max-w-4xl text-center mb-12 mx-auto">
  197.         <h3 class="font-semibold uppercase text-base text-slate-400 leading-snug">Activities</h3>
  198.         <h2 class="text-neutral-800 mb-4 text-3xl font-bold tracking-normal md:text-4xl xl:text-5xl">
  199.           Top 5 Activities for <span class="text-brand"> Nepal Swatantra Party (UK Wing)</span>.
  200.         </h2>
  201.       </div>
  203.       <div class="max-w-4xl mx-auto lg:px-6 py-16">
  204.         <ul class="w-full justify-center gap-10 items-center text-sm font-medium text-center text-gray-500">
  205.           <li role="button" class="first transition-all duration-300 inline-flex items-start gap-4 rounded-xl p-6">
  206.             <div class="md:text-5xl text-3xl font-extrabold">
  207.               <span class="bg-clip-text text-transparent bg-gradient-to-r from-violet-500 to-brand">
  208.                 01
  209.               </span>
  210.             </div>
  211.             <div class="flex flex-col text-left space-y-6">
  212.               <h3 class="text-neutral-800 font-bold text-3xl lg:leading-tight leading-10">
  213.                 Community Support & Integration Services
  214.               </h3>
  215.               <p class="mb-10 font-normal leading-relaxed text-neutral-600 lg:mb-12 text-2xl">
  216.                 <strong>What :</strong> Offer legal advice, employment guidance, mental health support, and immigration assistance to Nepali migrants, students, and workers in the UK.
  217.                 <br>
  218.                 <strong>Impact :</strong> Builds trust, directly helps the community, and positions your party as a caring, people-first organization.
  219.                 <br>
  220.                 <strong>Bonus:</strong> Partner with local councils or legal aid clinics for resources.
  221.               </p>
  222.             </div>
  223.           </li>
  224.           <li role="button" class="second transition-all duration-300 inline-flex items-start gap-4 rounded-xl p-6">
  225.             <div class="md:text-5xl text-3xl font-extrabold">
  226.               <span class="bg-clip-text text-transparent bg-gradient-to-r from-violet-500 to-brand">
  227.                 02
  228.               </span>
  229.             </div>
  230.             <div class="flex flex-col text-left space-y-6">
  231.               <h3 class="text-neutral-800 font-bold text-3xl lg:leading-tight leading-10">
  232.                 Professional & Student Network Building
  233.               </h3>
  234.               <p class="mb-10 font-normal leading-relaxed text-neutral-600 lg:mb-12 text-2xl">
  235.                 <strong>What:</strong> Create a platform for Nepali professionals, youth, and students to connect, share opportunities, and support each other (career mentoring, scholarships, seminars). <br>
  236.                 <strong>Impact:</strong> Uplifts the diaspora and nurtures future leaders with strong ties to Nepal and your party.
  237.               </p>
  238.             </div>
  239.           </li>
  240.           <li role="button" class="third transition-all duration-300 inline-flex items-start gap-4 rounded-xl p-6">
  241.             <div class="md:text-5xl text-3xl font-extrabold">
  242.               <span class="bg-clip-text text-transparent bg-gradient-to-r from-violet-500 to-brand">
  243.                 03
  244.               </span>
  245.             </div>
  246.             <div class="flex flex-col text-left space-y-6">
  247.               <h3 class="text-neutral-800 font-bold text-3xl lg:leading-tight leading-10">
  248.                 Diaspora for Development – Skill Exchange Program
  249.               </h3>
  250.               <p class="mb-10 font-normal leading-relaxed text-neutral-600 lg:mb-12 text-2xl">
  251.                 <strong>What:</strong> Mobilize skilled Nepalis in the UK (doctors, engineers, IT professionals) to contribute to Nepal through remote training, guest lectures, or project mentorship. <br>
  252.                 <strong>Impact: </strong>Directly contributes to Nepal’s development with real expertise, especially in education, tech, and healthcare.
  253.               </p>
  254.             </div>
  255.           </li>
  257.           <li role="button" class="fourth transition-all duration-300 inline-flex items-start gap-4 rounded-xl p-6">
  258.             <div class="md:text-5xl text-3xl font-extrabold">
  259.               <span class="bg-clip-text text-transparent bg-gradient-to-r from-violet-500 to-brand">
  260.                 04
  261.               </span>
  262.             </div>
  263.             <div class="flex flex-col text-left space-y-6">
  264.               <h3 class="text-neutral-800 font-bold text-3xl lg:leading-tight leading-10">
  265.                 Crisis & Relief Coordination for Nepal
  266.               </h3>
  267.               <p class="mb-10 font-normal leading-relaxed text-neutral-600 lg:mb-12 text-2xl">
  268.                 <strong>What:</strong> Rapid fundraising and supply drives during natural disasters or emergencies in Nepal, ensuring transparent delivery and accountability.
  269.                 <strong>Impact: </strong>Strengthens emotional and practical ties with Nepal; builds your party's image as capable and responsive. <br>
  270.                 <strong>Example: </strong>Medical supplies, school rebuilding, or post-earthquake housing. 
  272.               </p>
  273.             </div>
  274.           </li>
  276.           <li role="button" class="fifth transition-all duration-300 inline-flex items-start gap-4 rounded-xl p-6">
  277.             <div class="md:text-5xl text-3xl font-extrabold">
  278.               <span class="bg-clip-text text-transparent bg-gradient-to-r from-violet-500 to-brand">
  279.                 05
  280.               </span>
  281.             </div>
  282.             <div class="flex flex-col text-left space-y-6">
  283.               <h3 class="text-neutral-800 font-bold text-3xl lg:leading-tight leading-10">
  284.                 Policy Dialogue & Civic Awareness Events
  285.               </h3>
  286.               <p class="mb-10 font-normal leading-relaxed text-neutral-600 lg:mb-12 text-2xl">
  287.                 <strong>What:</strong> Host forums in the UK to discuss Nepal’s progress, good governance, anti-corruption, and diaspora voting rights. <br>
  288.                 <strong>Impact:</strong> Engages politically conscious diaspora, promotes Swatantra Party’s vision, and generates real policy feedback to share with party leaders in Nepal.
  289.               </p>
  290.             </div>
  291.           </li>
  292.         </ul>
  293.       </div>
  294.     </div>
  295.   </section>
  299.   <section class="bg-white px-6 py-24 mx-auto bg-[#fafaf3]">
  300.     <div class="container lg:px-8 px-6 mx-auto">
  301.         <div class="max-w-2xl text-center mb-12 mx-auto">
  302.           <h3 class="font-semibold uppercase text-base text-slate-400 leading-snug">Insignts</h3>
  303.           <h2 class="font-semibold lg:text-4xl text-2xl text-slate-600 lg:leading-tight leading-10">
  304.             News <span class="text-brand"> & </span> Events.
  305.           </h2>
  306.         </div>
  307.     </div>
  309.     <div class="lg:px-20 md:px-10 px-6">
  310.     <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-10">
  311.                 <div class="group">
  312.                   <a href="/news/रास्वपा-सांसद-गौतमद्वारा-बेलायतमा-बन्दै-गरेको-नेपाली-भिलेज-अवलोकन">
  313.                     <div class="flex flex-col md:gap-8 gap-5">
  314.                       <div class="rounded-2xl overflow-hidden lg:h-[260px] md:h-80 h-48">
  315.                         <img src="/images/news-2.jpeg" alt="रास्वपा सांसद गौतमद्वारा बेलायतमा बन्दै गरेको नेपाली भिलेज अवलोकन" class="w-full h-full object-cover object-center">
  316.                       </div>
  317.                       <div class="inline-flex md:items-center md:justify-between md:flex-row flex-col md:gap-0 gap-4">
  318.                         <span class="inline-block text-base font-medium text-gray-800">
  319.                           September 05, 2023
  320.                         </span>
  321.                         <button class="max-w-fit rounded-full bg-transparent border border-brand px-6 py-1.5 inline-flex items-center justify-center md:text-base text-sm font-semibold transition-all duration-500 relative overflow-hidden after:content=[''] after:w-0 after:h-full after:absolute after:block after:inset-0 group-hover:after:w-full after:transition-all after:duration-500 after:bg-brand after:text-white">
  322.                           <span class="z-10 group-hover:text-white text-brand transition-all duration-700">Read More</span>
  323.                         </button>
  324.                       </div>
  325.                       <hr class="h-px bg-neutral-400">
  326.                       <h4 class="capitalize text-gray-800 md:text-2xl text-lg font-semibold">
  327.                         रास्वपा सांसद गौतमद्वारा बेलायतमा बन्दै गरेको नेपाली भिलेज अवलोकन
  328.                       </h4>
  329.                     </div>
  330.                   </a>
  331.                 </div>
  333.                 <div class="group">
  334.                   <a href="/news/मानविय-सहयोग-गर्दै-रास्वपा-युके-बिभागले-मनायो-स्थापना-दिवस">
  335.                     <div class="flex flex-col md:gap-8 gap-5">
  336.                       <div class="rounded-2xl overflow-hidden lg:h-[260px] md:h-80 h-48">
  337.                         <img src="/images/news-3.jpeg" alt="मानविय सहयोग गर्दै रास्वपा युके बिभागले मनायो स्थापना दिवस" class="w-full h-full object-cover object-center">
  338.                       </div>
  339.                       <div class="inline-flex md:items-center md:justify-between md:flex-row flex-col md:gap-0 gap-4">
  340.                         <span class="inline-block text-base font-medium text-gray-800">
  341.                           September 05, 2023
  342.                         </span>
  343.                         <button class="max-w-fit rounded-full bg-transparent border border-brand px-6 py-1.5 inline-flex items-center justify-center md:text-base text-sm font-semibold transition-all duration-500 relative overflow-hidden after:content=[''] after:w-0 after:h-full after:absolute after:block after:inset-0 group-hover:after:w-full after:transition-all after:duration-500 after:bg-brand after:text-white">
  344.                           <span class="z-10 group-hover:text-white text-brand transition-all duration-700">Read More</span>
  345.                         </button>
  346.                       </div>
  347.                       <hr class="h-px bg-neutral-400">
  348.                       <h4 class="capitalize text-gray-800 md:text-2xl text-lg font-semibold">
  349.                         मानविय सहयोग गर्दै रास्वपा युके बिभागले मनायो स्थापना दिवस
  350.                       </h4>
  351.                     </div>
  352.                   </a>
  353.                 </div>
  355.                 <div class="group">
  356.                   <a href="/news/बेलायतमा-गढ-बनाउदै-रास्वपा-Muluk-Darpan">
  357.                     <div class="flex flex-col md:gap-8 gap-5">
  358.                       <div class="rounded-2xl overflow-hidden lg:h-[260px] md:h-80 h-48">
  359.                         <img src="/images/news-4.jpeg" alt="बेलायतमा गढ बनाउदै रास्वपा - Muluk Darpan" class="w-full h-full object-cover object-center">
  360.                       </div>
  361.                       <div class="inline-flex md:items-center md:justify-between md:flex-row flex-col md:gap-0 gap-4">
  362.                         <span class="inline-block text-base font-medium text-gray-800">
  363.                           September 05, 2023
  364.                         </span>
  365.                         <button class="max-w-fit rounded-full bg-transparent border border-brand px-6 py-1.5 inline-flex items-center justify-center md:text-base text-sm font-semibold transition-all duration-500 relative overflow-hidden after:content=[''] after:w-0 after:h-full after:absolute after:block after:inset-0 group-hover:after:w-full after:transition-all after:duration-500 after:bg-brand after:text-white">
  366.                           <span class="z-10 group-hover:text-white text-brand transition-all duration-700">Read More</span>
  367.                         </button>
  368.                       </div>
  369.                       <hr class="h-px bg-neutral-400">
  370.                       <h4 class="capitalize text-gray-800 md:text-2xl text-lg font-semibold">
  371.                         बेलायतमा गढ बनाउदै रास्वपा - Muluk Darpan
  372.                       </h4>
  373.                     </div>
  374.                   </a>
  375.                 </div>
  376.           </div>
  377.           </div>
  378.   </section>
  382. {#
  383.   <section class="w-full bg-white">
  384.     <div class="container lg:px-8 px-6 lg:py-40 py-28 mx-auto">
  385.       <div class="max-w-2xl text-center mb-12 mx-auto">
  386.         <h3 class="font-semibold uppercase text-base text-slate-400 leading-snug">Top 5 Activities</h3>
  387.         <h2 class="font-semibold lg:text-4xl text-2xl text-slate-600 lg:leading-tight leading-10">
  388.           Top 5 Activities for <span class="text-brand"> Nepal Swatantra Party (UK Wing)</span>.
  389.         </h2>
  390.       </div>
  391.       <div class="max-w-7xl mx-auto lg:px-6 flex py-16">
  392.         <ul class="flex w-full justify-center lg:flex-row flex-col gap-10 items-center mx-auto text-sm font-medium text-center text-gray-500">
  393.           <li role="button" class="first transition-all duration-300 inline-flex items-start gap-4 rounded-xl bg-white shadow-xl p-6">
  394.             <div class="md:text-5xl text-3xl font-extrabold">
  395.               <span class="bg-clip-text text-transparent bg-gradient-to-r from-violet-500 to-brand">
  396.                 01
  397.               </span>
  398.             </div>
  399.             <div class="flex flex-col text-left space-y-6">
  400.               <h3 class="text-neutral-800 font-bold text-3xl lg:leading-tight leading-10">
  401.                 Lorem ipsum
  402.               </h3>
  403.               <p>
  404.                 Duis mollis commodo luctus cursus commodo tortor.
  405.               </p>
  406.             </div>
  407.           </li>
  408.           <li role="button" class="second transition-all duration-300 inline-flex items-start gap-4 rounded-xl p-6">
  409.             <div class="md:text-5xl text-3xl font-extrabold">
  410.               <span class="bg-clip-text text-transparent bg-gradient-to-r from-violet-500 to-brand">
  411.                 02
  412.               </span>
  413.             </div>
  414.             <div class="flex flex-col text-left space-y-6">
  415.               <h3 class="text-neutral-800 font-bold text-3xl lg:leading-tight leading-10">
  416.                 Lorem ipsum
  417.               </h3>
  418.               <p>
  419.                 Duis mollis commodo luctus cursus commodo tortor.
  420.               </p>
  421.             </div>
  422.           </li>
  423.           <li role="button" class="third transition-all duration-300 inline-flex items-start gap-4 rounded-xl p-6">
  424.             <div class="md:text-5xl text-3xl font-extrabold">
  425.               <span class="bg-clip-text text-transparent bg-gradient-to-r from-violet-500 to-brand">
  426.                 03
  427.               </span>
  428.             </div>
  429.             <div class="flex flex-col text-left space-y-6">
  430.               <h3 class="text-neutral-800 font-bold text-3xl lg:leading-tight leading-10">
  431.                 Lorem ipsum
  432.               </h3>
  433.               <p>
  434.                 Duis mollis commodo luctus cursus commodo tortor.
  435.               </p>
  436.             </div>
  437.           </li>
  439.           <li role="button" class="third transition-all duration-300 inline-flex items-start gap-4 rounded-xl p-6">
  440.             <div class="md:text-5xl text-3xl font-extrabold">
  441.               <span class="bg-clip-text text-transparent bg-gradient-to-r from-violet-500 to-brand">
  442.                 03
  443.               </span>
  444.             </div>
  445.             <div class="flex flex-col text-left space-y-6">
  446.               <h3 class="text-neutral-800 font-bold text-3xl lg:leading-tight leading-10">
  447.                 Lorem ipsum
  448.               </h3>
  449.               <p>
  450.                 Duis mollis commodo luctus cursus commodo tortor.
  451.               </p>
  452.             </div>
  453.           </li>
  455.           <li role="button" class="third transition-all duration-300 inline-flex items-start gap-4 rounded-xl p-6">
  456.             <div class="md:text-5xl text-3xl font-extrabold">
  457.               <span class="bg-clip-text text-transparent bg-gradient-to-r from-violet-500 to-brand">
  458.                 03
  459.               </span>
  460.             </div>
  461.             <div class="flex flex-col text-left space-y-6">
  462.               <h3 class="text-neutral-800 font-bold text-3xl lg:leading-tight leading-10">
  463.                 Lorem ipsum
  464.               </h3>
  465.               <p>
  466.                 Duis mollis commodo luctus cursus commodo tortor.
  467.               </p>
  468.             </div>
  469.           </li>
  470.         </ul>
  471.       </div>
  472.       <div class="first-content w-full relative mx-auto grid lg:grid-cols-2 gap-10 lg:px-6">
  473.         <div class="lg:mt-0 lg:col-span-1">
  474.           <div class="relative mx-auto md:mr-0">
  475.             <img class="w-full h-full object-cover object-center rounded-2xl relative" src="{{ asset('/images/composition-8.svg') }}" alt="...">
  476.           </div>
  477.         </div>
  478.         <div class="lg:mt-0 lg:col-span-1 self-start flex flex-col justify-between h-full">
  479.           <h4 class="text-neutral-800 capitalize mt-1 mb-4 text-xl font-semibold tracking-normal md:text-3xl">
  480.             Lorem Ipsum
  481.           </h4>
  482.           <p class="font-normal leading-relaxed text-neutral-600 lg:mb-8 text-base">
  483.             Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  484.           </p>
  485.           <ul class="mb-12 list-disc list-inside">
  486.             <li class="font-normal leading-relaxed text-neutral-600 text-base">
  487.               Aenean eu leo quam. Pellentesque ornare.
  488.             </li>
  489.             <li class="font-normal leading-relaxed text-neutral-600 text-base">
  490.               Nullam quis risus eget urna mollis ornare.
  491.             </li>
  492.             <li class="font-normal leading-relaxed text-neutral-600 text-base">
  493.               Donec id elit non mi porta gravida at eget.
  494.             </li>
  495.           </ul>
  496.         </div>
  497.       </div>
  498.       <div class="second-content hidden w-full relative mx-auto grid lg:grid-cols-2 gap-10 lg:px-6">
  499.         <div class="lg:mt-0 lg:col-span-1">
  500.           <div class="relative mx-auto md:mr-0">
  501.             <img class="w-full h-full object-cover object-center rounded-2xl relative" src="{{ asset('/images/composition-7.svg') }}" alt="...">
  502.           </div>
  503.         </div>
  504.         <div class="lg:order-first lg:mt-0 lg:col-span-1 self-start flex flex-col justify-between h-full">
  505.           <h4 class="text-neutral-800 capitalize mt-1 mb-4 text-xl font-semibold tracking-normal md:text-3xl">
  506.             Lorem Ipsum
  507.           </h4>
  508.           <p class="font-normal leading-relaxed text-neutral-600 lg:mb-8 text-base">
  509.             Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  510.           </p>
  511.           <ul class="mb-12 list-disc list-inside">
  512.             <li class="font-normal leading-relaxed text-neutral-600 text-base">
  513.               Aenean eu leo quam. Pellentesque ornare.
  514.             </li>
  515.             <li class="font-normal leading-relaxed text-neutral-600 text-base">
  516.               Nullam quis risus eget urna mollis ornare.
  517.             </li>
  518.             <li class="font-normal leading-relaxed text-neutral-600 text-base">
  519.               Donec id elit non mi porta gravida at eget.
  520.             </li>
  521.           </ul>
  522.         </div>
  523.       </div>
  524.       <div class="third-content hidden w-full relative mx-auto grid lg:grid-cols-2 gap-10 lg:px-6">
  525.         <div class="lg:mt-0 lg:col-span-1">
  526.           <div class="relative mx-auto md:mr-0">
  527.             <img class="w-full h-full object-cover object-center rounded-2xl relative" src="{{ asset('/images/composition-9.svg') }}" alt="...">
  528.           </div>
  529.         </div>
  530.         <div class="lg:mt-0 lg:col-span-1 self-start flex flex-col justify-between h-full">
  531.           <h4 class="text-neutral-800 capitalize mt-1 mb-4 text-xl font-semibold tracking-normal md:text-3xl">
  532.             Lorem Ipsum
  533.           </h4>
  534.           <p class="font-normal leading-relaxed text-neutral-600 lg:mb-8 text-base">
  535.             Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  536.           </p>
  537.           <ul class="mb-12 list-disc list-inside">
  538.             <li class="font-normal leading-relaxed text-neutral-600 text-base">
  539.               Aenean eu leo quam. Pellentesque ornare.
  540.             </li>
  541.             <li class="font-normal leading-relaxed text-neutral-600 text-base">
  542.               Nullam quis risus eget urna mollis ornare.
  543.             </li>
  544.             <li class="font-normal leading-relaxed text-neutral-600 text-base">
  545.               Donec id elit non mi porta gravida at eget.
  546.             </li>
  547.           </ul>
  548.         </div>
  549.       </div>
  550.     </div>
  551.   </section>
  553.   #}
  554. {#
  555.   <section class="w-full bg-white py-16">
  556.     <div class="relative grid auto-cols-fr gap-5 max-w-screen-xl px-4 mx-auto lg:grid-cols-2">
  557.       <div class="place-self-start lg:col-span-1 lg:sticky lg:top-32">
  558.         <h3 class="font-semibold uppercase text-base text-slate-400 leading-snug mb-2">
  559.           our commitments
  560.         </h3>
  561.         <div class="text-3xl font-semibold text-slate-600 tracking-normal leading-snug mb-4 md:text-4xl">
  562.           <h2>Unwavering Commitment to Progress: Building a Better Future for All</h2>
  563.         </div>
  564.         <p class="font-normal leading-relaxed text-neutral-600 mb-8 text-base">
  565.           Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
  566.         </p>
  567.         <img class="w-full h-full object-cover object-center rounded-2xl relative" src="{{ asset('/images/composition-6.svg') }}" alt="...">
  568.       </div>
  569.       <div class="lg:col-span-1 divide-y">
  570.         <div class="flex md:flex-row flex-col gap-5 items-start w-full p-4 mb-5">
  571.           <div class="flex w-full flex-col justify-center h-full">
  572.             <h3 class="text-2xl font-medium py-3 text-brand">Policy Innovation</h3>
  573.             <p class="font-normal leading-relaxed text-gray-500 text-lg">Lorem ipsum dolor sit amet tragon consectetur dolseclm adipiscing elit mattis faucibus odio feugiat.</p>
  574.           </div>
  575.         </div>
  576.         <div class="flex md:flex-row flex-col gap-5 items-start w-full p-4 mb-5">
  577.           <div class="flex w-full flex-col justify-center h-full">
  578.             <h3 class="text-2xl font-medium py-3 text-brand">Social Equality</h3>
  579.             <p class="font-normal leading-relaxed text-gray-500 text-lg">Lorem ipsum dolor sit amet tragon consectetur dolseclm adipiscing elit mattis faucibus odio feugiat.</p>
  580.           </div>
  581.         </div>
  582.         <div class="flex md:flex-row flex-col gap-5 items-start w-full p-4 mb-5">
  583.           <div class="flex w-full flex-col justify-center h-full">
  584.             <h3 class="text-2xl font-medium py-3 text-brand">Economic Empowerment</h3>
  585.             <p class="font-normal leading-relaxed text-gray-500 text-lg">Lorem ipsum dolor sit amet tragon consectetur dolseclm adipiscing elit mattis faucibus odio feugiat.</p>
  586.           </div>
  587.         </div>
  588.         <div class="flex md:flex-row flex-col gap-5 items-start w-full p-4 mb-5">
  589.           <div class="flex w-full flex-col justify-center h-full">
  590.             <h3 class="text-2xl font-medium py-3 text-brand">Environmental Stewardship</h3>
  591.             <p class="font-normal leading-relaxed text-gray-500 text-lg">Lorem ipsum dolor sit amet tragon consectetur dolseclm adipiscing elit mattis faucibus odio feugiat.</p>
  592.           </div>
  593.         </div>
  594.         <div class="flex md:flex-row flex-col gap-5 items-start w-full p-4 mb-5">
  595.           <div class="flex w-full flex-col justify-center h-full">
  596.             <h3 class="text-2xl font-medium py-3 text-brand">Inclusive Governance</h3>
  597.             <p class="font-normal leading-relaxed text-gray-500 text-lg">Lorem ipsum dolor sit amet tragon consectetur dolseclm adipiscing elit mattis faucibus odio feugiat.</p>
  598.           </div>
  599.         </div>
  600.       </div>
  601.     </div>
  602.   </section>
  604.   
  606.   <section class="relative py-32 w-full bg-no-repeat bg-cover bg-center">
  607.     <div class="absolute bg-gradient-to-t from-brand/90 to-neutral-900/80 inset-0 w-full h-full z-10"></div>
  608.     <div class="relative flex items-center justify-center z-20">
  609.       <svg xmlns="http://www.w3.org/2000/svg" width="180" height="180" viewBox="0 0 180 180" fill="none" style="&#10;">
  610.         <path d="M90.0043 147.631C129.055 147.631 160.713 116.261 160.713 77.5654C160.713 38.8695 129.055 7.50024 90.0043 7.50024C50.9531 7.50024 19.2959 38.8695 19.2959 77.5654C19.2959 116.261 50.9531 147.631 90.0043 147.631Z" fill="white"/>
  611.         <path d="M115.52 72.5694C115.715 73.4858 115.907 74.3911 116.103 75.3047C117.832 83.3958 120.751 90.9783 125.941 97.5574C127.167 99.0919 128.486 100.552 129.889 101.929C131.919 103.925 133.286 106.487 133.808 109.272C133.859 109.532 133.911 109.789 133.985 110.151C124.808 112.253 115.548 113.514 106.213 114.215C85.9779 115.756 65.9321 114.481 45.9824 110.18C46.1238 109.523 46.2129 108.953 46.3586 108.395C47.0002 105.886 48.3369 103.605 50.2179 101.809C55.2862 96.9044 58.8103 91.0329 61.2413 84.4734C62.4928 81.0935 63.3965 77.6239 64.1375 74.1038C64.2464 73.5895 64.3496 73.0738 64.4571 72.554C81.4206 74.509 98.5552 74.5142 115.52 72.5694Z" fill="#0094DA"/>
  612.         <path d="M134.747 111.99C136.598 114.447 137.077 117.122 136.683 120.107C105.571 126.71 74.526 126.725 43.5472 120.153C42.6818 118.696 43.4525 113.744 45.3857 112.004C46.1026 112.121 46.8734 112.24 47.6413 112.373C50.546 112.876 53.4393 113.417 56.3554 113.878C59.1342 114.319 61.9215 114.705 64.7102 115.068C67.3392 115.411 69.9724 115.743 72.6112 115.99C75.581 116.27 78.5507 116.484 81.5205 116.655C83.9797 116.796 86.4446 116.892 88.9067 116.899C91.6402 116.899 94.3738 116.815 97.1088 116.718C99.0293 116.65 100.948 116.529 102.864 116.377C105.291 116.183 107.718 115.965 110.139 115.7C112.748 115.419 115.353 115.092 117.954 114.74C119.99 114.46 122.018 114.126 124.049 113.801C125.864 113.51 127.678 113.209 129.49 112.896C130.823 112.667 132.152 112.416 133.483 112.182C133.869 112.112 134.275 112.061 134.747 111.99Z" fill="#0094DA"/>
  613.         <path d="M114.355 63.5835C114.563 65.4682 114.765 67.2927 114.977 69.2041C106.663 70.3672 98.3505 70.768 90.0154 70.7708C81.6803 70.7736 73.3566 70.363 65.0002 69.2097C65.2081 67.325 65.4118 65.4977 65.6239 63.5849C67.953 63.882 70.2426 64.2099 72.5406 64.4537C74.8386 64.6975 77.1748 64.9035 79.4969 65.0507C81.8189 65.1978 84.1481 65.2861 86.4758 65.3309C88.8035 65.3758 91.1312 65.3786 93.4575 65.3309C95.7838 65.2833 98.1144 65.1908 100.436 65.0507C102.759 64.9105 105.079 64.7003 107.393 64.4537C109.706 64.2071 111.994 63.8834 114.355 63.5835Z" fill="#0094DA"/>
  614.         <path d="M95.4288 57.054L96.1458 55.5252L101.716 55.7522C101.955 55.4719 102.191 55.2141 102.399 54.9367C102.521 54.7588 102.691 54.6184 102.89 54.5314C103.088 54.4445 103.307 54.4144 103.522 54.4448C105.871 54.6676 108.189 55.0502 110.415 55.8545C111.432 56.2343 112.353 56.833 113.109 57.6075C113.592 58.091 113.973 58.6389 114.089 59.3297C114.052 59.8272 113.708 60.0304 113.283 60.0962C111.586 60.3891 109.874 60.6988 108.162 60.944C106.557 61.1739 104.94 61.342 103.328 61.5172C99.8 61.9011 96.2575 62.0483 92.7093 62.1169C87.9727 62.2184 83.2339 62.0828 78.5111 61.7106C74.5702 61.407 70.6509 60.8732 66.7735 60.1117C66.3493 60.0276 65.9943 59.872 65.8896 59.362C66.0622 58.4413 66.6547 57.7617 67.3717 57.1647C68.4324 56.279 69.6989 55.6689 71.057 55.3893C72.7229 55.0403 74.4072 54.7853 76.0787 54.4714C76.8721 54.3229 77.4505 54.5821 77.8606 55.2604C77.9835 55.4332 78.1177 55.598 78.2622 55.7536L83.8156 55.5252L84.5849 57.0568L95.4288 57.054Z" fill="#0094DA"/>
  615.         <path d="M86.7168 55.1217C86.7168 54.7952 86.7097 54.5332 86.7168 54.2725C86.8327 49.8752 86.9492 45.4779 87.0661 41.0807C87.0788 40.572 87.0661 40.0619 87.0491 39.5546C87.0166 38.4686 87.257 37.4765 88.0121 36.71V31.8979C87.1636 31.1244 87.0307 29.9964 87.0604 28.8151C87.0731 28.333 87.0604 27.8496 87.0505 27.3661C87.0321 26.3628 87.2768 25.4547 87.998 24.7485V19.8607C86.6192 18.479 87.158 16.6994 87.0505 14.9562H88.3968C88.6231 16.0772 88.2554 17.2571 88.6796 18.4272C89.6695 17.6593 90.6213 17.7167 91.6239 18.4118C92.0058 17.2501 91.7399 16.1136 91.8799 14.9534H93.2276C93.164 16.1501 93.3831 17.302 93.0777 18.4286C92.9198 18.9072 92.651 19.3425 92.2928 19.6996V24.841C92.9999 25.4211 93.205 26.2072 93.2149 27.0634C93.2248 27.9196 93.2417 28.7814 93.2149 29.6376C93.1823 30.4252 93.0169 31.1791 92.3056 31.7284V36.8725C93.0126 37.4331 93.1993 38.2206 93.212 39.0796C93.2644 42.2423 93.3139 45.4051 93.3817 48.5692C93.4227 50.4456 93.4977 52.3219 93.5543 54.1983C93.5627 54.4855 93.5543 54.7742 93.5543 55.1217H86.7168ZM91.6579 26.1582C90.576 26.8672 89.6497 26.9359 88.6881 26.1582C88.2639 27.3325 88.5283 28.4872 88.476 29.6166C88.4661 29.852 88.5948 30.093 88.6796 30.4027C89.6978 29.6741 90.6354 29.7918 91.6664 30.4027C91.9181 28.9986 91.9152 27.5613 91.6579 26.1582ZM89.3825 20.7001V23.8572H90.8688C90.8688 22.7867 90.9168 21.7553 90.8447 20.7001H89.3825ZM90.8334 35.8342V32.7583H89.3895V35.9028C89.8138 35.9028 90.1871 35.9028 90.5619 35.9028C90.6545 35.8885 90.7455 35.865 90.8334 35.8328V35.8342ZM88.5099 39.5392C89.3245 39.7284 91.2251 39.7018 91.8657 39.4748C91.8021 39.0894 91.7356 38.69 91.6466 38.1645C90.617 38.8848 89.6823 38.8904 88.7532 38.2556C88.3869 38.6634 88.4491 39.102 88.5099 39.5378V39.5392Z" fill="#0094DA"/>
  616.         <path d="M84.9115 127.745H95.1218C95.154 127.954 95.1752 128.165 95.1854 128.377C95.1854 130.602 95.1684 132.826 95.1925 135.051C95.1962 136.215 94.7981 137.345 94.0641 138.254C93.3302 139.162 92.3046 139.794 91.1578 140.046C88.6915 140.606 86.3172 139.39 85.3018 137.09C85.0526 136.556 84.9086 135.979 84.8775 135.392C84.8295 132.98 84.8535 130.567 84.8549 128.154C84.8643 128.017 84.8832 127.88 84.9115 127.745Z" fill="#0094DA"/>
  617.         <path d="M85.636 40.032V43.9879H84.0098C83.7128 43.9879 83.4144 43.9879 83.1174 43.9879C82.0469 44.0117 81.501 44.5484 81.5915 45.5952C81.7061 46.9279 81.8871 48.2577 82.0412 49.5875C82.2237 51.178 82.4061 52.7685 82.6069 54.4556L79.2525 54.7079C79.0305 53.5546 78.8198 52.5092 78.6289 51.4611C78.2824 49.5637 77.9656 47.6621 77.6036 45.769C77.1496 43.3868 78.3234 41.1811 80.5733 40.3207C80.9468 40.1624 81.3446 40.0677 81.7499 40.0405C83.0057 40.0096 84.2728 40.032 85.636 40.032Z" fill="#0094DA"/>
  618.         <path d="M94.6458 43.9345V40.0879C94.8317 40.0458 95.0209 40.019 95.2114 40.0081C96.5068 40.0501 97.8248 39.9674 99.0919 40.1832C101.485 40.5882 103.121 43.0209 102.712 45.4045C102.202 48.3906 101.644 51.3684 101.104 54.349C101.066 54.4594 101.016 54.5655 100.956 54.6657C99.898 54.7231 98.819 54.5031 97.6551 54.4807C97.7682 53.469 97.8644 52.5441 97.9747 51.6221C98.2038 49.7051 98.44 47.7881 98.6719 45.8767C98.6907 45.7167 98.6997 45.5557 98.6988 45.3947C98.6889 44.5959 98.1614 44.0424 97.3313 44.0046C96.6553 43.9737 95.9779 43.9948 95.3005 43.985C95.0983 43.9765 94.889 43.9485 94.6458 43.9345Z" fill="#0094DA"/>
  619.         <path d="M166.833 109.244L167.886 109.664C167.642 110.328 167.396 111.004 167.115 111.777L178.504 114.728C177.899 116.204 177.314 117.63 176.694 119.135L165.514 115.593C164.779 117.076 164.063 118.516 163.305 120.046L166.235 121.226C165.691 122.032 165.118 122.752 164.697 123.543C164.225 124.382 163.856 125.273 163.595 126.198C163.237 127.599 163.736 128.601 164.941 129.319C166.214 130.075 167.487 130.064 168.716 129.216C170.271 128.144 171.101 126.611 171.48 124.9C171.712 123.855 171.647 122.752 171.718 121.641C172.228 121.826 172.9 122.035 173.532 122.322C173.708 122.402 173.863 122.717 173.856 122.919C173.851 123.482 173.775 124.043 173.63 124.588C172.612 127.93 170.749 130.762 167.741 132.846C167.06 133.313 166.315 133.681 165.528 133.937C162.922 134.778 160.338 133.109 160.154 130.522C160.013 128.442 160.839 126.61 161.803 124.812L162.25 123.985L161.402 123.565C159.499 126.321 157.634 129.03 155.721 131.802L165.45 137.955L162.657 141.377L153.198 134.694L151.476 136.562L160.685 143.569L157.687 146.672L156.308 145.628C155.505 148.207 153.755 149.836 151.057 150.516C149.414 150.937 147.987 150.539 146.846 149.297C145.431 147.767 143.996 146.259 142.538 144.708L141.521 145.4L140.579 144.384C148.649 138.341 155.417 130.759 160.485 122.085C160.117 122.124 159.903 122.134 159.693 122.171C157.947 122.473 156.781 121.55 156.917 119.885C157.076 117.936 158.126 116.365 159.556 115.027C160.168 114.454 160.608 113.892 160.738 113.065C160.836 112.439 161.134 111.829 161.417 111.243C162.094 109.842 162.113 109.849 163.807 109.982C163.568 110.616 162.568 111.124 163.301 111.881C163.492 112.078 164.111 111.91 164.617 111.91C164.626 111.941 164.67 112.118 164.759 112.489C165.979 111.623 165.989 110.317 166.469 109.249L166.833 109.244ZM145.358 142.49C147.035 144.014 148.683 145.607 150.46 147.062C150.884 147.404 151.792 147.482 152.365 147.33C153.43 147.035 154.184 146.238 154.573 145.252C154.714 144.908 154.714 144.289 154.478 144.083C152.639 142.439 150.737 140.86 148.845 139.264C147.735 140.256 146.696 141.184 145.658 142.114C145.551 142.234 145.451 142.359 145.358 142.49ZM163.585 116.005C163.223 116.005 162.923 116.03 162.63 116.005C161.308 115.865 160.299 116.369 159.825 117.496C159.683 117.821 159.638 118.314 159.812 118.574C159.942 118.766 160.519 118.792 160.863 118.74C162.451 118.495 163.223 117.483 163.585 115.998V116.005Z" fill="white"/>
  620.         <path d="M34.724 139.821C42.3605 147.013 51.3221 152.199 61.3981 155.778C61.3302 155.95 61.2892 156.079 61.2298 156.198C61.0884 156.479 60.947 156.759 60.7674 157.112C60.4152 156.989 60.0914 156.871 59.7647 156.762C59.438 156.652 59.151 156.566 58.7748 156.448L53.0559 167.238L49.1443 165.696L49.6379 164.647C48.6041 164.46 47.5307 164.428 46.596 164.071C42.9191 162.67 40.7583 160.077 40.071 156.403C40.0034 156.113 40.0128 155.81 40.0983 155.525C40.1838 155.24 40.3425 154.981 40.5589 154.775C41.1246 154.2 41.5983 153.557 42.0452 153.024C42.9941 153.865 43.8058 154.791 44.8127 155.447C46.4291 156.5 48.3071 156.092 49.2914 154.651C50.1088 153.455 49.8571 152.498 48.5687 151.76C46.5267 150.589 44.5002 149.391 42.3733 148.148L40.1389 150.606C39.149 149.862 38.2623 149.064 37.2441 148.441C34.997 147.072 32.9365 147.332 31.282 149.081C30.0092 150.424 29.9682 151.929 31.282 153.249C32.8786 154.856 34.8471 155.677 37.2356 155.44C37.377 155.426 37.5184 155.44 37.8013 155.44C37.2285 156.103 36.7505 156.711 36.2004 157.255C36.0406 157.415 35.6645 157.465 35.4043 157.439C33.6507 157.251 32.1814 156.448 30.7927 155.488C30.4657 155.229 30.0918 155.034 29.691 154.915C30.7078 156.984 31.726 159.053 32.8248 161.286C31.9664 161.286 31.1985 161.324 30.4405 161.258C30.2524 161.243 30.0163 160.917 29.9413 160.691C29.4704 159.298 29.0151 157.9 28.6092 156.487C28.4748 156.019 28.2684 155.879 27.7522 155.875C26.4696 155.863 25.1728 155.859 23.9071 155.69C22.6753 155.524 22.6598 155.391 22.9497 154.242C23.0176 153.969 23.0996 153.7 23.2127 153.293C25.1105 154.59 27.2615 154.636 29.5906 154.626C29.3078 154.325 29.1239 154.12 28.9302 153.925C27.7198 152.731 26.8385 151.25 26.3706 149.622C26.2942 149.354 25.9562 149.053 25.6635 148.952C22.8267 147.959 20.9133 146.15 20.1581 143.379C19.7183 141.762 20.1751 140.397 21.7307 139.405C23.4659 138.298 25.1501 137.124 26.857 135.976C27.1215 135.798 27.3789 135.61 27.6843 135.396L25.7893 133.147L14.2766 140.256L11.4879 136.778L23.4149 130.144L21.9287 128.035L9.6947 134.318L7.17465 130.549L19.7607 124.804L16.5223 118.99C16.2861 120.188 15.7007 121.092 14.6132 121.634C13.3828 122.248 12.096 122.229 11.0509 121.426C10.0482 120.659 9.24641 119.657 8.38094 118.737C8.15325 118.496 8.01608 118.177 7.72759 117.884C7.89022 119.254 7.02051 120.169 6.26675 121.129C6.15928 121.269 6.05887 121.41 5.95988 121.55C4.22045 123.991 4.48208 125.396 6.99222 127.117C7.17324 127.242 7.34435 127.379 7.64557 127.603C6.691 127.686 5.90049 127.773 5.10007 127.809C4.8711 127.818 4.64741 127.74 4.47359 127.592C2.63517 125.681 1.221 123.563 1.54626 120.866C1.66788 119.865 2.11193 118.868 2.58568 117.947C3.07498 116.989 3.77216 116.125 4.37601 115.219C5.01804 114.259 5.44937 113.257 4.88653 112.056L7.7884 111.386C7.92982 112.467 7.95103 113.459 8.19709 114.402C8.39278 115.141 8.73664 115.834 9.20822 116.439C10.2985 117.828 12.178 118.035 13.6826 117.04C14.6344 116.408 14.8974 115.561 14.4788 114.533C13.8608 113.013 13.2527 111.49 12.6008 109.87L14.3586 109.434C16.9324 116.561 20.383 123.231 24.9833 129.382C26.1542 127.783 27.8936 127.242 29.7914 127.997C30.6675 128.338 31.48 128.822 32.1955 129.428C35.5075 132.319 37.3629 135.922 37.8932 140.134C37.9151 140.33 37.9236 140.527 37.9187 140.724C37.8955 140.84 37.8594 140.954 37.8112 141.063L34.724 139.821ZM43.9925 157.182C43.9246 159.643 46.4588 162.227 48.9548 162.358C50.3039 162.427 51.349 162.117 52.0038 160.817C52.831 159.168 53.8733 157.612 54.8208 156.015C55.0018 155.709 55.1757 155.398 55.3765 155.051L53.0814 154.052C53.2581 155.849 52.5157 157.195 51.0393 158.016C48.5786 159.381 46.2637 158.579 43.9925 157.182ZM33.8784 139.426L34.2333 139.332C34.3125 138.402 34.5246 137.462 34.4469 136.544C34.2376 134.068 32.7244 132.34 30.5042 131.157C29.4435 130.597 28.0746 130.895 27.5344 131.718C27.4647 131.851 27.4284 131.999 27.4284 132.149C27.4284 132.298 27.4647 132.446 27.5344 132.579C27.9389 133.139 28.3862 133.668 28.8722 134.16C30.5353 135.922 32.204 137.677 33.8784 139.426ZM38.5847 146.79L39.313 146.039L31.3343 139.332C30.951 140.965 30.5735 142.573 30.1704 144.294C33.5503 143.728 36.0732 145.068 38.5847 146.79ZM29.1423 139.287L28.8963 139.147C27.3647 140.301 25.819 141.438 24.3059 142.616C23.7148 143.077 23.4248 143.737 23.7105 144.437C24.2295 145.705 25.2406 146.507 26.6732 146.988C28.373 144.589 28.0478 141.745 29.1423 139.283V139.287Z" fill="white"/>
  621.         <path d="M135.089 148.225L135.878 149.253L133.977 150.481C136.144 153.585 138.289 156.656 140.502 159.825L136.791 161.915C136.217 161.011 135.688 160.175 135.094 159.253C134.754 159.851 134.472 160.365 134.172 160.869C133.024 162.797 131.698 164.595 129.878 166.03C128.753 166.915 127.495 167.523 126.023 167.711C125.335 167.799 124.809 167.687 124.48 167.033C124.268 166.613 123.937 166.244 123.546 165.695C128.172 166.146 129.936 162.961 132.246 160.089C131.474 159.434 130.811 158.711 129.984 158.227C129.405 157.887 128.579 157.667 127.918 157.755C126.751 157.905 126.283 158.917 126.737 159.944C126.892 160.295 127.128 160.616 127.4 161.065L122.511 161.422C122.206 160.277 122.482 159.355 123.227 158.587C124.641 157.133 126.399 156.114 128.445 155.806C129.504 155.647 130.667 156.01 131.767 156.213C132.313 156.316 132.822 156.592 133.622 156.892L130.725 152.234C122.947 156.288 114.715 159.052 105.958 160.642C106.658 164.398 107.344 168.068 108.049 171.852L103.382 172.613C103.184 171.101 102.989 169.635 102.799 168.168C102.669 167.162 102.584 166.15 102.398 165.154C102.349 165.006 102.267 164.871 102.157 164.76C102.048 164.648 101.914 164.563 101.767 164.511C99.4546 163.872 97.6473 165.029 97.4267 167.352C97.3491 168.25 97.4227 169.155 97.6445 170.029C98.1126 171.918 99.5211 172.567 101.845 171.991C101.533 172.606 101.292 173.165 100.968 173.672C100.891 173.769 100.794 173.848 100.682 173.903C100.571 173.958 100.449 173.988 100.324 173.99C98.9936 173.873 97.6134 173.873 96.3534 173.511C94.358 172.938 93.1673 171.549 92.9509 169.554C92.7232 167.452 93.3497 165.647 95.2376 164.358C96.5924 163.432 98.1508 163.073 99.794 162.999C100.534 162.965 101.278 162.999 102.118 162.999C102.05 162.414 101.99 161.896 101.929 161.377L90.8805 162.144C90.7589 165.889 90.6359 169.676 90.5115 173.527H86.3312C86.2944 173.218 86.2619 172.949 86.2237 172.63C85.0471 172.63 83.8818 172.719 82.7378 172.613C79.29 172.288 77.6185 170.051 78.3751 166.88C78.433 166.641 78.4953 166.402 78.5419 166.215C77.3243 165.934 76.1817 165.675 75.0376 165.424C74.9712 165.41 74.8722 165.484 74.8015 165.534C73.5909 166.383 72.1796 166.4 70.5816 166.35C70.7729 166.481 70.9531 166.627 71.1204 166.786C71.7158 167.505 72.3352 168.209 72.8641 168.968C73.1186 169.334 73.1766 169.809 73.3548 170.229C73.9431 171.605 74.9443 172.38 76.6696 172.051C75.5906 174.013 75.155 174.209 73.0309 173.843C71.3099 173.546 70.0725 172.666 69.3541 171.17C68.8139 170.049 68.2836 168.908 67.7985 167.756C67.3545 166.687 66.793 165.762 65.3506 165.552C65.6575 164.728 65.9375 163.978 66.1991 163.283C67.2724 163.645 68.2482 164.099 69.2791 164.296C71.44 164.717 72.8909 163.095 72.2489 161.119C72.0283 160.444 71.5602 160.113 70.8574 159.963C69.726 159.722 68.6032 159.445 67.3842 159.16C67.5694 158.669 67.7236 158.257 67.8805 157.838C91.7418 163.531 114.149 160.531 135.089 148.225ZM86.6918 165.085C85.3342 164.705 84.555 164.784 83.838 165.353C82.6402 166.304 82.2315 168.996 83.0998 170.211C83.5622 170.863 84.3994 171.116 85.3356 170.898C86.1473 170.709 86.5956 170.319 86.6154 169.445C86.6494 168.068 86.8233 166.695 86.9322 165.321C87.0185 164.237 87.0962 163.153 87.1726 162.126L75.3572 160.967C76.3387 161.882 76.2312 163.013 75.691 164.264C76.8959 164.417 78.013 164.572 79.1345 164.684C79.3631 164.679 79.5814 164.589 79.7454 164.431C80.946 163.279 82.4323 162.927 84.0883 162.978C86.1106 163.038 86.2364 163.118 86.7187 164.939C86.7159 164.989 86.7068 165.038 86.6918 165.085Z" fill="white"/>
  622.         <path d="M122.036 160.478C119.956 159.777 118.119 160.031 116.171 160.885C116.574 160.974 116.835 161.044 117.1 161.086C118.669 161.338 119.681 162.148 120.111 163.617C120.564 165.158 120.486 166.628 119.161 167.743C117.376 169.247 115.201 169.887 112.84 169.492C109.587 168.951 108.109 165.501 110.011 162.954C110.595 162.198 111.314 161.555 112.132 161.056C114.719 159.446 117.611 158.716 120.712 158.795C120.995 158.795 121.343 159.088 121.532 159.333C121.757 159.616 121.836 159.996 122.036 160.478ZM115.893 161.651C114.634 162.035 113.839 162.646 113.63 163.69C113.408 164.798 113.52 165.89 114.529 166.701C115.429 167.425 116.888 167.203 117.257 166.245C117.639 165.255 117.15 164.382 116.655 163.54C116.287 162.919 115.696 162.738 114.899 162.936L115.893 161.651Z" fill="white"/>
  623.       </svg>
  624.     </div>
  625.   </section>
  627.   #}
  629. {# #}
  630.   <script>
  631.     const firstTab = document.querySelector('.first')
  632.     const secondTab = document.querySelector('.second')
  633.     const thirdTab = document.querySelector('.third')
  635.     const firstContent = document.querySelector('.first-content')
  636.     const secondContent = document.querySelector('.second-content')
  637.     const thirdContent = document.querySelector('.third-content')
  639.     firstTab?.addEventListener('click', () => {
  640.       firstTab.classList.add('bg-white', 'shadow-xl')
  641.       secondTab.classList.remove('bg-white', 'shadow-xl')
  642.       thirdTab.classList.remove('bg-white', 'shadow-xl')
  643.       firstContent.classList.remove('hidden')
  644.       secondContent.classList.add('hidden')
  645.       thirdContent.classList.add('hidden')
  646.     })
  648.     secondTab?.addEventListener('click', () => {
  649.       firstTab.classList.remove('bg-white', 'shadow-xl')
  650.       secondTab.classList.add('bg-white', 'shadow-xl')
  651.       thirdTab.classList.remove('bg-white', 'shadow-xl')
  652.       firstContent.classList.add('hidden')
  653.       secondContent.classList.remove('hidden')
  654.       thirdContent.classList.add('hidden')
  655.     })
  657.     thirdTab?.addEventListener('click', () => {
  658.       firstTab.classList.remove('bg-white', 'shadow-xl')
  659.       secondTab.classList.remove('bg-white', 'shadow-xl')
  660.       thirdTab.classList.add('bg-white', 'shadow-xl')
  661.       firstContent.classList.add('hidden')
  662.       secondContent.classList.add('hidden')
  663.       thirdContent.classList.remove('hidden')
  664.     })
  665.   </script>
  667. {% endblock %}