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>
|
|
|
|
|
<meta name="description" content="<?= htmlspecialchars($data['metaDescription'] ?? '') ?>" />
|
|
|
|
|
|
|
|
|
|
<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">
|
|
|
|
|
<p class="hero-heading"><?= $data['heroHeading'] ?? '' ?></p>
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
<p class="hero-heading">
|
2026-04-12 09:50:14 +02:00
|
|
|
<?= htmlspecialchars($data['heroObjectiveLabel'] ?? '') ?>
|
|
|
|
|
<?php if (!empty($data['heroObjectiveDate'])): ?><br /><strong><?= htmlspecialchars($data['heroObjectiveDate']) ?></strong><?php endif; ?>
|
2026-04-12 08:00:58 +02:00
|
|
|
</p>
|
|
|
|
|
</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 €</p>
|
|
|
|
|
<p class="small">That is 68 € after tax</p>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="donation-btn donation-btn--wide">
|
|
|
|
|
<p class="bold">100 €</p>
|
|
|
|
|
<p class="small">That is 34 € after tax</p>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="donation-btn donation-btn--wide">
|
|
|
|
|
<p class="bold">50 €</p>
|
|
|
|
|
<p class="small">That is 17 € after tax</p>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="donation-btn donation-btn--wide">
|
|
|
|
|
<p class="bold">20 €</p>
|
|
|
|
|
<p class="small">That is 6.80 € after tax</p>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="donation-btn donation-btn--full">
|
|
|
|
|
<p class="bold">Choose your amount</p>
|
|
|
|
|
<p class="small">With 66 % 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>
|
