2026-04-12 08:00:58 +02:00
< ? php
require_once __DIR__ . '/../includes/cache.php' ;
2026-04-12 08:20:18 +02:00
$data = getContent ( 'en' );
2026-04-12 08:00:58 +02:00
?>
<! DOCTYPE html >
< html lang = " en " >
< head >
< meta charset = " UTF-8 " />
< meta name = " viewport " content = " width=device-width, initial-scale=1.0 " />
< title >< ? = htmlspecialchars ( $data [ 'metaTitle' ] ? ? 'Support Index' ) ?> </title>
2026-04-28 15:22:47 +02:00
< meta name = " description " content = " <?= htmlspecialchars( $data['metaDescription'] ?? 'Index defends press freedom where it is most at risk. Support our mission with a tax-deductible donation and help journalists work safely.') ?> " />
< link rel = " canonical " href = " https://soutenir.index.ngo/en/ " />
< link rel = " alternate " hreflang = " fr " href = " https://soutenir.index.ngo/ " />
< link rel = " alternate " hreflang = " en " href = " https://soutenir.index.ngo/en/ " />
<!-- OpenGraph -->
< meta property = " og:type " content = " website " />
< meta property = " og:url " content = " https://soutenir.index.ngo/en/ " />
< meta property = " og:site_name " content = " Index " />
< meta property = " og:title " content = " <?= htmlspecialchars( $data['metaTitle'] ?? 'Support Index') ?> " />
< meta property = " og:description " content = " <?= htmlspecialchars( $data['metaDescription'] ?? 'Index defends press freedom where it is most at risk. Support our mission with a tax-deductible donation and help journalists work safely.') ?> " />
< meta property = " og:image " content = " https://soutenir.index.ngo/assets/images/logo-opengraph.png " />
< meta property = " og:image:width " content = " 1200 " />
< meta property = " og:image:height " content = " 630 " />
< meta property = " og:locale " content = " en_GB " />
< meta property = " og:locale:alternate " content = " fr_FR " />
<!-- Twitter Card -->
< meta name = " twitter:card " content = " summary_large_image " />
< meta name = " twitter:title " content = " <?= htmlspecialchars( $data['metaTitle'] ?? 'Support Index') ?> " />
< meta name = " twitter:description " content = " <?= htmlspecialchars( $data['metaDescription'] ?? 'Index defends press freedom where it is most at risk. Support our mission with a tax-deductible donation and help journalists work safely.') ?> " />
< meta name = " twitter:image " content = " https://soutenir.index.ngo/assets/images/logo-opengraph.png " />
2026-04-12 08:00:58 +02:00
< link rel = " stylesheet " href = " https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css " />
< script src = " https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js " ></ script >
< link rel = " icon " type = " image/png " href = " /assets/favicon.png " />
< link rel = " stylesheet " type = " text/css " href = " /assets/fonts/stylesheet.css " />
< link rel = " stylesheet " type = " text/css " href = " /assets/css/style.css " />
< script src = " /assets/js/onload.js " ></ script >
< script src = " /assets/js/temp/includeHtml.js " ></ script >
< script src = " /assets/js/donorbox-gauge.js " ></ script >
< script src = " /assets/js/donation.js " ></ script >
< script src = " /assets/js/newsletter-brevo.js " ></ script >
< meta name = " robots " content = " index, nofollow " />
</ head >
< body data - template = " support " >
< header id = " site-header " >
< div class = " header-left " ></ div >
< div class = " header-center " >
< h1 class = " site-title " >
< a href = " https://www.index.ngo/en " aria - label = " Back to home " title = " go to Index website " >
< svg width = " 100% " height = " 100% " viewBox = " 0 0 162 29 " version = " 1.1 " xmlns = " http://www.w3.org/2000/svg " xmlns : xlink = " http://www.w3.org/1999/xlink " xml : space = " preserve " xmlns : serif = " http://www.serif.com/ " style = " fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2; " >
< title > Index . ngo </ title >
< g transform = " matrix(1.04516,0,0,0.659091,57.4839,-6.59091) " >
< rect x = " -55 " y = " 10 " width = " 155 " height = " 44 " style = " fill:none " />
< clipPath id = " _clip1 " >< rect x = " -55 " y = " 10 " width = " 155 " height = " 44 " /></ clipPath >
< g clip - path = " url(#_clip1) " >
< g transform = " matrix(0.95679,0,0,1.51724,-55,10) " >
< path d = " M162,29L148.198,29L141.174,20.767L134.15,29L91.184,29L91.184,0.004L120.653,0.004L120.653,7.351L102.637,7.351L102.637,10.867L120.137,10.867L120.137,18.13L102.637,18.13L102.637,21.606L120.926,21.606L120.926,28.951L134.273,14.414L120.807,0L134.56,0L141.388,7.767L147.76,0L161.201,0L148.236,13.79L161.996,28.997L162,29ZM68.58,29L54.224,29L54.224,0.004L68.637,0.004C74.672,0.004 78.31,0.004 82.046,2.045C86.259,4.379 88.674,8.889 88.674,14.417C88.674,19.406 86.862,23.405 83.427,25.975C79.463,29 75.345,29 68.58,29ZM49.819,29L38.775,29L31.499,19.815C29.746,17.735 28.088,15.545 27.307,14.495C27.387,15.813 27.524,17.238 27.524,20.499L27.524,29L15.965,29L15.965,0.004L27.009,0.004L33.798,8.349C36.223,11.121 37.709,12.993 38.393,13.881C38.347,12.615 38.26,9.911 38.26,6.84L38.26,0.004L49.819,0.004L49.819,29ZM11.559,29L0,29L0,0.004L11.559,0.004L11.559,29ZM65.784,21.818L67.904,21.818C70.918,21.818 73.067,21.818 74.728,20.531C76.074,19.491 76.845,17.308 76.845,14.541C76.845,11.526 76.084,9.541 74.525,8.476C72.895,7.411 71.461,7.224 67.578,7.224L65.784,7.224L65.784,21.818Z " style = " fill-rule:nonzero " />
</ g >
</ g >
</ g >
</ svg >
</ a >
</ h1 >
</ div >
< div class = " header-right " >
< ul id = " toggle-lang " >
< li >< a href = " ../ " > Fr </ a ></ li >
< li class = " is-selected " >< a href = " ./ " > En </ a ></ li >
</ ul >
</ div >
</ header >
< main >
< div class = " col-left " >
< section id = " section__hero " >
2026-04-22 10:41:39 +02:00
< div class = " hero-heading " >< ? = $data [ 'heroHeading' ] ? ? '' ?> </div>
2026-04-12 08:00:58 +02:00
< div class = " gauge-container " >
< div id = " gauge " style = " --pourcent: 0% " ></ div >
< div class = " gauge-info " id = " gauge-info--supporters " >
< p class = " property " > Regular supporters </ p >
< p class = " value " > 0 </ p >
</ div >
< div class = " gauge-info " id = " gauge-info--goal " >
< p class = " property " > Goal </ p >
< p class = " value " > 500 </ p >
</ div >
</ div >
2026-04-22 10:41:39 +02:00
< div class = " hero-heading " >
< p >
< ? = htmlspecialchars ( $data [ 'subtitleBlack' ] ? ? '' ) ?>
< ? php if ( ! empty ( $data [ 'subtitleGreen' ])) : ?> <br /><strong><?= htmlspecialchars($data['subtitleGreen']) ?></strong><?php endif; ?>
</ p >
</ div >
2026-04-12 08:00:58 +02:00
</ section >
< section id = " section__baseline " >
< p class = " subheading " >< ? = $data [ 'subheading' ] ? ? '' ?> </p>
</ section >
< section id = " section__video " >
< h2 class = " section-heading " >< ? = $data [ 'videoSectionHeading' ] ? ? '' ?> </h2>
< div class = " video-container " >
< iframe
title = " Campaign video "
src = " <?= htmlspecialchars( $data['mainVideoUrl'] ?? '') ?> "
style = " aspect-ratio: 9/16; width: 100%; border: 0 "
allow = " autoplay; fullscreen; picture-in-picture "
allowfullscreen
></ iframe >
</ div >
< ? php if ( ! empty ( $data [ 'testimonies' ])) : ?>
< input type = " checkbox " id = " testimonies-toggle " />
< label class = " btn-expand " for = " testimonies-toggle " >
< span class = " txt " >< ? = htmlspecialchars ( $data [ 'testimoniesButtonLabel' ] ? ? 'Watch testimonies' ) ?> </span>
< span class = " icon " >< svg width = " 34px " height = " 34px " viewBox = " 0 0 16 13 " version = " 1.1 " xmlns = " http://www.w3.org/2000/svg " style = " fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2; " >
< rect x = " 0 " y = " 0 " width = " 15.43 " height = " 12.636 " style = " fill:none " />
< path d = " M0,7.29L0,5.373L9.801,5.373C10.67,5.373 11.757,5.4 12.387,5.427C11.952,5.022 11.366,4.455 10.888,3.969L8.432,1.404L9.366,0L15.43,6.318L9.366,12.636L8.432,11.232L10.888,8.667C11.366,8.181 11.952,7.614 12.387,7.236C11.757,7.263 10.67,7.29 9.801,7.29L0,7.29Z " style = " fill-rule:nonzero " />
</ svg ></ span >
</ label >
< ul class = " testimonies-list " >
< ? php foreach ( $data [ 'testimonies' ] as $testimony ) : ?>
< li class = " testimony-item " data - video = " <?= htmlspecialchars( $testimony['videoUrl'] ) ?> " >
< span class = " icon " >
< svg height = " 80px " width = " 80px " viewBox = " 0 0 512 512 " xmlns = " http://www.w3.org/2000/svg " >
< path d = " M500.203,236.907L30.869,2.24c-6.613-3.285-14.443-2.944-20.736,0.939C3.84,7.083,0,13.931,0,21.333v469.333 c0,7.403,3.84,14.251,10.133,18.155c3.413,2.112,7.296,3.179,11.2,3.179c3.264,0,6.528-0.747,9.536-2.24l469.333-234.667 C507.435,271.467,512,264.085,512,256S507.435,240.533,500.203,236.907z " />
</ svg >
</ span >
< p class = " txt " >< ? = $testimony [ 'description' ] ?> </p>
</ li >
< ? php endforeach ; ?>
</ ul >
< ? php endif ; ?>
</ section >
< section id = " section__questions " >
< h2 class = " section-heading " >< ? = htmlspecialchars ( $data [ 'faqHeading' ] ? ? 'Frequently Asked Questions' ) ?> </h2>
< ? php foreach (( $data [ 'questions' ] ? ? []) as $q ) : ?>
< details >
< summary >< ? = htmlspecialchars ( $q [ 'question' ]) ?> </summary>
< ? = $q [ 'answer' ] ?>
</ details >
< ? php endforeach ; ?>
</ section >
</ div >
< div class = " col-right " >
< section id = " section__donation " >
< nav class = " nav--tabs " >
2026-04-15 07:30:59 +02:00
< button class = " nav--tabs__btn is-selected " data - tab = " monthly " > Monthly donation </ button >
< button class = " nav--tabs__btn " data - tab = " one-off " > One - time donation </ button >
2026-04-12 08:00:58 +02:00
</ nav >
< div data - donation = " one-off " class = " donation-grid " >
< button class = " donation-btn " >
< p class = " bold " > 200 & #8239;€</p>
< p class = " small " > That is 68 & #8239;€ after tax</p>
</ button >
< button class = " donation-btn donation-btn--wide " >
< p class = " bold " > 100 & #8239;€</p>
< p class = " small " > That is 34 & #8239;€ after tax</p>
</ button >
< button class = " donation-btn donation-btn--wide " >
< p class = " bold " > 50 & #8239;€</p>
< p class = " small " > That is 17 & #8239;€ after tax</p>
</ button >
< button class = " donation-btn donation-btn--wide " >
< p class = " bold " > 20 & #8239;€</p>
< p class = " small " > That is 6.80 & #8239;€ after tax</p>
</ button >
< button class = " donation-btn donation-btn--full " >
< p class = " bold " > Choose your amount </ p >
< p class = " small " > With 66 & #8239;% tax deduction</p>
</ button >
</ div >
< div data - donation = " monthly " class = " donation-grid is-selected " >
< button class = " donation-btn " >
< p class = " bold " > 5 € / month </ p >
< p class = " small " > That is X€ after taxes </ p >
</ button >
< button class = " donation-btn donation-btn--wide " >
< p class = " bold " > 10 € / month </ p >
< p class = " small " > That is X€ after taxes </ p >
</ button >
< button class = " donation-btn donation-btn--wide " >
< p class = " bold " > 20 € / month </ p >
< p class = " small " > That is X€ after taxes </ p >
</ button >
< button class = " donation-btn donation-btn--wide " >
< p class = " bold " > 50 € / month </ p >
< p class = " small " > That is X€ after taxes </ p >
</ button >
< button class = " donation-btn donation-btn--full " >
< p class = " bold " > Choose your amount </ p >
< p class = " small " > With tax deduction </ p >
</ button >
</ div >
</ section >
< section id = " section__comments " >
< h2 class = " section-heading " >< ? = htmlspecialchars ( $data [ 'commentsHeading' ] ? ? 'Donor comments' ) ?> </h2>
< div class = " swiper " id = " comments-slider " >
< div class = " swiper-wrapper " >
< ? php foreach (( $data [ 'comments' ] ? ? []) as $comment ) : ?>
< div class = " swiper-slide " >
< p class = " comment-text " >< ? = htmlspecialchars ( $comment [ 'text' ]) ?> </p>
< p class = " comment-name " >< ? = htmlspecialchars ( $comment [ 'name' ]) ?> </p>
</ div >
< ? php endforeach ; ?>
</ div >
< div class = " swiper-pagination comments-dots " ></ div >
</ div >
</ section >
</ div >
< div id = " donation-cta-mobile " >
< a href = " #section__donation " class = " donation-cta " role = " button " >
< span class = " txt " > Donate </ span >
< span class = " icon " >
< svg clip - rule = " evenodd " fill - rule = " evenodd " stroke - linejoin = " round " stroke - miterlimit = " 2 " viewBox = " 0 0 24 24 " xmlns = " http://www.w3.org/2000/svg " >
< path d = " m14.523 18.787s4.501-4.505 6.255-6.26c.146-.146.219-.338.219-.53s-.073-.383-.219-.53c-1.753-1.754-6.255-6.258-6.255-6.258-.144-.145-.334-.217-.524-.217-.193 0-.385.074-.532.221-.293.292-.295.766-.004 1.056l4.978 4.978h-14.692c-.414 0-.75.336-.75.75s.336.75.75.75h14.692l-4.979 4.979c-.289.289-.286.762.006 1.054.148.148.341.222.533.222.19 0 .378-.072.522-.215z " fill - rule = " nonzero " />
</ svg >
</ span >
</ a >
</ div >
</ main >
< footer id = " site-footer " >
< div class = " footer-container " >
< div class = " footer-newsletter " >
< p >< ? = $data [ 'footerNewsletterText' ] ? ? '' ?> </p>
< form class = " newsletter-form " >
< input type = " email " name = " email " placeholder = " Your email address " required />
< button class = " btn--bold " type = " submit " aria - label = " subscribe " >
< span class = " txt " >< ? = htmlspecialchars ( $data [ 'footerNewsletterCta' ] ? ? 'Subscribe' ) ?> </span>
< span class = " icon " >
< svg clip - rule = " evenodd " fill - rule = " evenodd " stroke - linejoin = " round " stroke - miterlimit = " 2 " viewBox = " 0 0 24 24 " xmlns = " http://www.w3.org/2000/svg " >
< path d = " m14.523 18.787s4.501-4.505 6.255-6.26c.146-.146.219-.338.219-.53s-.073-.383-.219-.53c-1.753-1.754-6.255-6.258-6.255-6.258-.144-.145-.334-.217-.524-.217-.193 0-.385.074-.532.221-.293.292-.295.766-.004 1.056l4.978 4.978h-14.692c-.414 0-.75.336-.75.75s.336.75.75.75h14.692l-4.979 4.979c-.289.289-.286.762.006 1.054.148.148.341.222.533.222.19 0 .378-.072.522-.215z " fill - rule = " nonzero " />
</ svg >
</ span >
</ button >
</ form >
< p class = " text-small " >< ? = $data [ 'footerNewsletterDisclaimer' ] ? ? '' ?> </p>
</ div >
< div class = " footer-socials " >
< p >< ? = htmlspecialchars ( $data [ 'footerSocialsHeading' ] ? ? '' ) ?> </p>
< ul id = " socials-list " >
< ? php foreach (( $data [ 'footerSocials' ] ? ? []) as $social ) : ?>
< li >
< a href = " <?= htmlspecialchars( $social['url'] ) ?> " target = " _blank " rel = " noopener noreferrer " >
< span class = " icon " >< ? = $social [ 'svgIcon' ] ?> </span>
< span class = " text " >< ? = htmlspecialchars ( $social [ 'name' ]) ?> </span>
</ a >
</ li >
< ? php endforeach ; ?>
</ ul >
</ div >
< div class = " footer-mentions " >
< p class = " text-small " >< ? = $data [ 'footerMentions' ] ? ? '' ?> </p>
</ div >
</ div >
</ footer >
< script >
const swiper = new Swiper ( '#comments-slider' , {
slidesPerView : 1 ,
loop : true ,
autoplay : {
delay : 4000 ,
disableOnInteraction : false ,
},
pagination : {
el : '.comments-dots' ,
clickable : true ,
},
});
</ script >
</ body >
</ html >
