File manager - Edit - /home/verseaumee/quaadraa/views/pages/vision.php
Back
<?php $l = $lang ?? 'fr'; $prefix = "/{$l}"; ?> <section class="page-hero vision-hero"> <div class="container"> <span class="section-label">QUAADRAA Group</span> <h1 class="page-hero-title"><?= $t('vision.title') ?></h1> <p class="page-hero-sub"><?= $t('vision.lead') ?></p> </div> </section> <section class="section vision-intro-section"> <div class="container vision-intro"> <p class="vision-lead-text" data-scroll-reveal> <?= $t('vision.subtitle') ?> </p> </div> </section> <section class="section vision-pillars-section"> <div class="container"> <div class="vision-pillars"> <?php $pillars = [ [ 'num' => '01', 'key' => 'v1', 'icon' => '<path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>', 'color' => '#1a6b8a', ], [ 'num' => '02', 'key' => 'v2', 'icon' => '<circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/>', 'color' => '#8b2fc9', ], [ 'num' => '03', 'key' => 'v3', 'icon' => '<path d="M22 16.92v3a2 2 0 01-2.18 2A19.79 19.79 0 012.1 5.17 2 2 0 014.11 3h3a2 2 0 012 1.72 13 13 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 10.91a16 16 0 006 6z"/>', 'color' => '#2e7d4f', ], [ 'num' => '04', 'key' => 'v4', 'icon' => '<path d="M2 20h20M4 20V8l4-4 4 4v12M14 20v-8l3-3 3 3v8"/><rect x="8" y="12" width="2" height="3"/><rect x="12" y="12" width="2" height="3"/>', 'color' => '#FFCE00', ], ]; foreach ($pillars as $i => $p): ?> <div class="vision-pillar" style="--pillar-color:<?= $p['color'] ?>" data-scroll-reveal> <div class="pillar-num"><?= $p['num'] ?></div> <div class="pillar-icon" aria-hidden="true"> <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="1.5"> <?= $p['icon'] ?> </svg> </div> <h3 class="pillar-title"><?= $t("vision.{$p['key']}_title") ?></h3> <p class="pillar-text"><?= $t("vision.{$p['key']}_text") ?></p> <div class="pillar-bar" aria-hidden="true"></div> </div> <?php endforeach; ?> </div> </div> </section> <section class="section vision-ambition-section"> <div class="container"> <div class="ambition-block" data-scroll-reveal> <div class="ambition-icon" aria-hidden="true">◈</div> <blockquote class="ambition-quote"> <p><?= $t('vision.ambition') ?></p> </blockquote> </div> </div> </section> <section class="cta-section section"> <div class="container cta-inner"> <div class="cta-content"> <h2 class="cta-title"> <?= $l === 'fr' ? 'Rejoignez notre aventure africaine' : 'Join our African adventure' ?> </h2> <p class="cta-subtitle"> <?= $l === 'fr' ? 'Découvrez nos pôles d\'activité et nos entreprises membre.' : 'Discover our business divisions and member companies.' ?> </p> </div> <a href="<?= $l === 'fr' ? '/fr/activites' : '/en/activities' ?>" class="btn btn-primary btn-large"> <?= $t('nav.activities') ?> </a> </div> </section> <style> .vision-hero { background: linear-gradient(135deg, var(--c-dark-2) 0%, var(--c-black) 60%), radial-gradient(ellipse at 80% 50%, rgba(201,168,76,.06) 0%, transparent 60%); } .vision-intro-section { background: var(--c-dark); padding-block: 5rem; } .vision-intro { max-width: 780px; margin-inline: auto; text-align: center; } .vision-lead-text { font-family: var(--font-display); font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 400; font-style: italic; line-height: 1.6; color: var(--c-grey-4); } .vision-pillars-section { background: var(--c-black); } .vision-pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--c-dark-3); } .vision-pillar { background: var(--c-dark-2); padding: 3.5rem 2.5rem; position: relative; overflow: hidden; transition: background .3s; } .vision-pillar:hover { background: var(--c-dark-3); } .pillar-num { font-family: var(--font-display); font-size: 5rem; font-weight: 700; color: rgba(255,255,255,.03); line-height: 1; position: absolute; top: 1.5rem; right: 2rem; pointer-events: none; user-select: none; } .pillar-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); color: var(--pillar-color); margin-bottom: 1.5rem; } .pillar-title { font-family: var(--font-cond); font-size: 1.2rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c-white); margin-bottom: .75rem; } .pillar-text { font-size: .92rem; color: var(--c-grey-4); line-height: 1.7; max-width: 380px; } .pillar-bar { position: absolute; bottom: 0; left: 0; height: 3px; width: 0; background: var(--pillar-color); transition: width .5s var(--ease-out); } .vision-pillar:hover .pillar-bar { width: 100%; } @media(max-width:768px){ .vision-pillars{grid-template-columns:1fr;} } .vision-ambition-section { background: var(--c-dark); } .ambition-block { max-width: 800px; margin-inline: auto; text-align: center; padding: 4rem 3rem; border: 1px solid rgba(201,168,76,.15); position: relative; } .ambition-icon { font-size: 2rem; color: var(--c-gold); margin-bottom: 2rem; display: block; } .ambition-quote p { font-family: var(--font-display); font-size: clamp(1.2rem, 2.5vw, 1.7rem); font-style: italic; line-height: 1.6; color: var(--c-white); } </style>
| ver. 1.4 |
Github
|
.
| PHP 8.5.7 | Generation time: 0 |
proxy
|
phpinfo
|
Settings