Compare commits
No commits in common. "fcca0688689aa124ec07109b06e9e38bff386883" and "42ee58c18d8f4827f6d606417710793d33fd203d" have entirely different histories.
fcca068868
...
42ee58c18d
21 changed files with 264 additions and 1268 deletions
|
|
@ -1,108 +0,0 @@
|
||||||
title: Livre blanc
|
|
||||||
icon: file
|
|
||||||
status:
|
|
||||||
draft:
|
|
||||||
label: Brouillon
|
|
||||||
text: Non visible
|
|
||||||
listed:
|
|
||||||
label: Publié
|
|
||||||
text: Visible publiquement
|
|
||||||
tabs:
|
|
||||||
content:
|
|
||||||
label: Contenu
|
|
||||||
icon: text
|
|
||||||
columns:
|
|
||||||
main:
|
|
||||||
width: 2/3
|
|
||||||
sections:
|
|
||||||
header:
|
|
||||||
type: fields
|
|
||||||
fields:
|
|
||||||
intro:
|
|
||||||
label: Description courte
|
|
||||||
type: writer
|
|
||||||
nodes: false
|
|
||||||
marks:
|
|
||||||
- bold
|
|
||||||
- italic
|
|
||||||
- link
|
|
||||||
maxlength: 200
|
|
||||||
sidebar:
|
|
||||||
width: 1/3
|
|
||||||
sections:
|
|
||||||
meta:
|
|
||||||
type: fields
|
|
||||||
fields:
|
|
||||||
published:
|
|
||||||
label: Date de publication
|
|
||||||
type: date
|
|
||||||
display: DD/MM/YYYY
|
|
||||||
required: true
|
|
||||||
default: today
|
|
||||||
translate: false
|
|
||||||
cover:
|
|
||||||
label: Image de couverture
|
|
||||||
type: files
|
|
||||||
layout: cards
|
|
||||||
max: 1
|
|
||||||
accept: image/*
|
|
||||||
translate: false
|
|
||||||
image:
|
|
||||||
cover: true
|
|
||||||
ratio: 3/4
|
|
||||||
uploads:
|
|
||||||
template: image
|
|
||||||
downloadFile:
|
|
||||||
label: Fichier PDF
|
|
||||||
type: files
|
|
||||||
max: 1
|
|
||||||
accept: application/pdf
|
|
||||||
translate: false
|
|
||||||
help: Fichier téléchargé après soumission du formulaire
|
|
||||||
leads:
|
|
||||||
label: Contacts intéressés
|
|
||||||
icon: users
|
|
||||||
sections:
|
|
||||||
contactDatabase:
|
|
||||||
type: fields
|
|
||||||
fields:
|
|
||||||
contactDatabase:
|
|
||||||
label: Visiteurs ayant téléchargé
|
|
||||||
type: structure
|
|
||||||
translate: false
|
|
||||||
columns:
|
|
||||||
firstName:
|
|
||||||
label: Prénom
|
|
||||||
width: 1/4
|
|
||||||
lastName:
|
|
||||||
label: Nom
|
|
||||||
width: 1/4
|
|
||||||
email:
|
|
||||||
label: Email
|
|
||||||
width: 1/4
|
|
||||||
company:
|
|
||||||
label: Entreprise
|
|
||||||
width: 1/4
|
|
||||||
role:
|
|
||||||
label: Fonction
|
|
||||||
downloadedAt:
|
|
||||||
label: Date
|
|
||||||
fields:
|
|
||||||
firstName:
|
|
||||||
type: text
|
|
||||||
label: Prénom
|
|
||||||
lastName:
|
|
||||||
type: text
|
|
||||||
label: Nom
|
|
||||||
email:
|
|
||||||
type: email
|
|
||||||
label: Email
|
|
||||||
company:
|
|
||||||
type: text
|
|
||||||
label: Entreprise
|
|
||||||
role:
|
|
||||||
type: text
|
|
||||||
label: Fonction
|
|
||||||
downloadedAt:
|
|
||||||
type: text
|
|
||||||
label: Date
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
title: Livres blancs
|
|
||||||
icon: book
|
|
||||||
status:
|
|
||||||
draft:
|
|
||||||
label: Brouillon
|
|
||||||
text: La page est accessible uniquement pour les éditeurs connectés
|
|
||||||
listed:
|
|
||||||
label: Public
|
|
||||||
text: La page est accessible par tout le monde
|
|
||||||
tabs:
|
|
||||||
content:
|
|
||||||
label: Contenu
|
|
||||||
icon: text
|
|
||||||
sections:
|
|
||||||
content:
|
|
||||||
type: fields
|
|
||||||
fields:
|
|
||||||
intro:
|
|
||||||
type: writer
|
|
||||||
marks:
|
|
||||||
- bold
|
|
||||||
- italic
|
|
||||||
- green
|
|
||||||
- pixel
|
|
||||||
- underline
|
|
||||||
- strike
|
|
||||||
- clear
|
|
||||||
- link
|
|
||||||
nodes:
|
|
||||||
- heading
|
|
||||||
headings:
|
|
||||||
- 1
|
|
||||||
help: Section de texte centrée (optionnelle).
|
|
||||||
items:
|
|
||||||
label: Livres blancs
|
|
||||||
type: pages
|
|
||||||
layout: cards
|
|
||||||
sortBy: published desc
|
|
||||||
template: white-paper
|
|
||||||
image:
|
|
||||||
ratio: 3/4
|
|
||||||
cover: true
|
|
||||||
info: "{{ page.published.toDate('d/m/Y') }}"
|
|
||||||
|
|
@ -1,113 +1,85 @@
|
||||||
title: World Game
|
title: World Game
|
||||||
|
|
||||||
tabs:
|
columns:
|
||||||
mainTab:
|
- width: 1/2
|
||||||
label: Principal
|
sections:
|
||||||
columns:
|
navigation:
|
||||||
- width: 1/2
|
type: pages
|
||||||
sections:
|
label: Menu
|
||||||
navigation:
|
help: Accédez aux pages et réordonnez-les
|
||||||
type: pages
|
layout: list
|
||||||
label: Menu
|
size: small
|
||||||
help: Accédez aux pages et réordonnez-les
|
sortable: true
|
||||||
layout: list
|
create: false
|
||||||
size: small
|
status: listed
|
||||||
sortable: true
|
|
||||||
create: false
|
|
||||||
status: listed
|
|
||||||
|
|
||||||
- width: 1/2
|
- width: 1/2
|
||||||
fields:
|
|
||||||
siteTitle:
|
|
||||||
label: Titre du site
|
|
||||||
type: text
|
|
||||||
translate: true
|
|
||||||
siteTagline:
|
|
||||||
label: Tagline
|
|
||||||
type: text
|
|
||||||
translate: true
|
|
||||||
siteDescription:
|
|
||||||
label: Description
|
|
||||||
type: textarea
|
|
||||||
translate: true
|
|
||||||
footerLogo:
|
|
||||||
label: Logo
|
|
||||||
type: files
|
|
||||||
layout: cards
|
|
||||||
max: 1
|
|
||||||
help: Utilisé en pied de page (page À propos, Blog et Article).
|
|
||||||
|
|
||||||
- width: 1/2
|
|
||||||
fields:
|
|
||||||
contactEmail:
|
|
||||||
label: Email
|
|
||||||
type: email
|
|
||||||
width: 1/2
|
|
||||||
translate: false
|
|
||||||
contactAddress:
|
|
||||||
label: Adresse
|
|
||||||
type: writer
|
|
||||||
buttons: false
|
|
||||||
nodes: false
|
|
||||||
width: 1/2
|
|
||||||
placeholder: 33 rue Jean Dupont
|
|
||||||
socialLinks:
|
|
||||||
label: Liens réseaux sociaux
|
|
||||||
type: structure
|
|
||||||
translate: false
|
|
||||||
fields:
|
|
||||||
label:
|
|
||||||
label: Nom
|
|
||||||
required: true
|
|
||||||
type: text
|
|
||||||
width: 1/3
|
|
||||||
placeholder: "Ex: LinkedIn, Instagram..."
|
|
||||||
url:
|
|
||||||
label: URL
|
|
||||||
required: true
|
|
||||||
type: url
|
|
||||||
width: 1/3
|
|
||||||
picto:
|
|
||||||
label: Icône SVG
|
|
||||||
type: textarea
|
|
||||||
width: 1/3
|
|
||||||
buttons: false
|
|
||||||
size: small
|
|
||||||
help: Collez le code SVG de l'icône
|
|
||||||
|
|
||||||
- width: 1/2
|
|
||||||
sections:
|
|
||||||
contact:
|
|
||||||
type: fields
|
|
||||||
fields:
|
|
||||||
legalNotices:
|
|
||||||
label: Mentions légales (PDF)
|
|
||||||
type: files
|
|
||||||
max: 1
|
|
||||||
accept: application/pdf
|
|
||||||
translate: false
|
|
||||||
dataTab:
|
|
||||||
label: Données d'usage
|
|
||||||
icon: chart
|
|
||||||
fields:
|
fields:
|
||||||
contactDatabase:
|
siteTitle:
|
||||||
label: Ont téléchargé un livre blanc
|
label: Titre du site
|
||||||
|
type: text
|
||||||
|
translate: true
|
||||||
|
siteTagline:
|
||||||
|
label: Tagline
|
||||||
|
type: text
|
||||||
|
translate: true
|
||||||
|
siteDescription:
|
||||||
|
label: Description
|
||||||
|
type: textarea
|
||||||
|
translate: true
|
||||||
|
footerLogo:
|
||||||
|
label: Logo
|
||||||
|
type: files
|
||||||
|
layout: cards
|
||||||
|
max: 1
|
||||||
|
help: Utilisé en pied de page (page À propos, Blog et Article).
|
||||||
|
|
||||||
|
- width: 1/2
|
||||||
|
fields:
|
||||||
|
contactEmail:
|
||||||
|
label: Email
|
||||||
|
type: email
|
||||||
|
width: 1/2
|
||||||
|
translate: false
|
||||||
|
contactAddress:
|
||||||
|
label: Adresse
|
||||||
|
type: writer
|
||||||
|
buttons: false
|
||||||
|
nodes: false
|
||||||
|
width: 1/2
|
||||||
|
placeholder: 33 rue Jean Dupont
|
||||||
|
socialLinks:
|
||||||
|
label: Liens réseaux sociaux
|
||||||
type: structure
|
type: structure
|
||||||
|
translate: false
|
||||||
fields:
|
fields:
|
||||||
firstName:
|
label:
|
||||||
label: Prénom
|
|
||||||
type: text
|
|
||||||
required: true
|
|
||||||
lastName:
|
|
||||||
label: Nom
|
label: Nom
|
||||||
type: text
|
|
||||||
required: true
|
required: true
|
||||||
company:
|
|
||||||
label: Société
|
|
||||||
type: text
|
type: text
|
||||||
role:
|
width: 1/3
|
||||||
label: Fonction
|
placeholder: "Ex: LinkedIn, Instagram..."
|
||||||
type: text
|
url:
|
||||||
email:
|
label: URL
|
||||||
type: email
|
|
||||||
required: true
|
required: true
|
||||||
|
type: url
|
||||||
|
width: 1/3
|
||||||
|
picto:
|
||||||
|
label: Icône SVG
|
||||||
|
type: textarea
|
||||||
|
width: 1/3
|
||||||
|
buttons: false
|
||||||
|
size: small
|
||||||
|
help: Collez le code SVG de l'icône
|
||||||
|
|
||||||
|
- width: 1/2
|
||||||
|
sections:
|
||||||
|
contact:
|
||||||
|
type: fields
|
||||||
|
fields:
|
||||||
|
legalNotices:
|
||||||
|
label: Mentions légales (PDF)
|
||||||
|
type: files
|
||||||
|
max: 1
|
||||||
|
accept: application/pdf
|
||||||
|
translate: false
|
||||||
|
|
|
||||||
|
|
@ -11,8 +11,4 @@ return [
|
||||||
],
|
],
|
||||||
|
|
||||||
'thumbs' => require __DIR__ . '/thumbs.php',
|
'thumbs' => require __DIR__ . '/thumbs.php',
|
||||||
|
|
||||||
'routes' => [
|
|
||||||
require(__DIR__ . '/routes/download-white-paper.php')
|
|
||||||
],
|
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -29,8 +29,7 @@ return [
|
||||||
'portfolio' => menuItem('portfolio', 'Portfolio','images', 'pages/portfolio'),
|
'portfolio' => menuItem('portfolio', 'Portfolio','images', 'pages/portfolio'),
|
||||||
'jouer' => menuItem('jouer', 'Jouer', 'play', 'pages/jouer'),
|
'jouer' => menuItem('jouer', 'Jouer', 'play', 'pages/jouer'),
|
||||||
'a-propos' => menuItem('a-propos', 'À propos', 'users', 'pages/a-propos'),
|
'a-propos' => menuItem('a-propos', 'À propos', 'users', 'pages/a-propos'),
|
||||||
'blog' => menuItem('blog', 'Blog', 'text', 'pages/blog'),
|
'blog' => menuItem('blog', 'Blog', 'text', 'pages/blog'),
|
||||||
'white-papers' => menuItem('livres-blancs', 'Livres blancs', 'book', 'pages/livres-blancs'),
|
|
||||||
'-',
|
'-',
|
||||||
'users',
|
'users',
|
||||||
'system',
|
'system',
|
||||||
|
|
|
||||||
|
|
@ -1,93 +0,0 @@
|
||||||
<?php
|
|
||||||
|
|
||||||
function wpReject(int $code, string $message): void {
|
|
||||||
http_response_code($code);
|
|
||||||
header('Content-Type: application/json');
|
|
||||||
echo json_encode(['error' => $message]);
|
|
||||||
exit;
|
|
||||||
}
|
|
||||||
|
|
||||||
return [
|
|
||||||
'pattern' => ['(:any)/(:any)/download', 'en/(:any)/(:any)/download'],
|
|
||||||
'method' => 'POST',
|
|
||||||
'action' => function (string $parent, string $slug) {
|
|
||||||
|
|
||||||
$page = page($parent . '/' . $slug);
|
|
||||||
if (!$page || $page->intendedTemplate()->name() !== 'white-paper') {
|
|
||||||
wpReject(404, 'Not found');
|
|
||||||
}
|
|
||||||
|
|
||||||
$body = kirby()->request()->body()->toArray();
|
|
||||||
|
|
||||||
// ── Honeypot ──────────────────────────────────────────────
|
|
||||||
if (!empty($body['_hp'])) {
|
|
||||||
wpReject(400, 'Bad request');
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Rate limiting (5 req / hour / IP) ─────────────────────
|
|
||||||
$ip = $_SERVER['HTTP_X_FORWARDED_FOR'] ?? $_SERVER['REMOTE_ADDR'] ?? 'unknown';
|
|
||||||
$cacheKey = 'wp-dl-' . md5($ip);
|
|
||||||
$cache = kirby()->cache('pages');
|
|
||||||
$hits = (int)($cache->get($cacheKey) ?? 0);
|
|
||||||
if ($hits >= 5) {
|
|
||||||
wpReject(429, 'Too many requests');
|
|
||||||
}
|
|
||||||
$cache->set($cacheKey, $hits + 1, 60); // TTL 60 min
|
|
||||||
|
|
||||||
// ── Validation des champs requis ──────────────────────────
|
|
||||||
$firstName = trim($body['firstName'] ?? '');
|
|
||||||
$lastName = trim($body['lastName'] ?? '');
|
|
||||||
$email = trim($body['email'] ?? '');
|
|
||||||
|
|
||||||
if ($firstName === '' || $lastName === '' || $email === '') {
|
|
||||||
wpReject(422, 'Missing required fields');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
|
|
||||||
wpReject(422, 'Invalid email');
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Stocker le lead dans contactDatabase ──────────────────
|
|
||||||
$company = trim($body['company'] ?? '');
|
|
||||||
$role = trim($body['role'] ?? '');
|
|
||||||
$entries = $page->contactDatabase()->toStructure()->toArray();
|
|
||||||
|
|
||||||
$existingIndex = null;
|
|
||||||
foreach ($entries as $i => $entry) {
|
|
||||||
if (strtolower($entry['email'] ?? '') === strtolower($email)) {
|
|
||||||
$existingIndex = $i;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if ($existingIndex !== null) {
|
|
||||||
// Contact déjà présent — on enrichit les champs vides uniquement
|
|
||||||
if ($company !== '' && empty($entries[$existingIndex]['company'])) {
|
|
||||||
$entries[$existingIndex]['company'] = $company;
|
|
||||||
}
|
|
||||||
if ($role !== '' && empty($entries[$existingIndex]['role'])) {
|
|
||||||
$entries[$existingIndex]['role'] = $role;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
$entries[] = [
|
|
||||||
'firstName' => $firstName,
|
|
||||||
'lastName' => $lastName,
|
|
||||||
'email' => $email,
|
|
||||||
'company' => $company,
|
|
||||||
'role' => $role,
|
|
||||||
'downloadedAt' => date('d/m/Y H:i'),
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
kirby()->impersonate('kirby', function () use ($page, $entries) {
|
|
||||||
$page->update(['contactDatabase' => \Kirby\Data\Data::encode($entries, 'yaml')]);
|
|
||||||
});
|
|
||||||
|
|
||||||
header('Content-Type: application/json');
|
|
||||||
echo json_encode([
|
|
||||||
'success' => true,
|
|
||||||
'fileUrl' => $page->downloadFile()->toFile()?->url(),
|
|
||||||
]);
|
|
||||||
exit;
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
<?php
|
|
||||||
|
|
||||||
$specificData = [
|
|
||||||
'published' => $page->published()->toDate('d/m/Y'),
|
|
||||||
'intro' => $page->intro()->inline()->value(),
|
|
||||||
'cover' => $page->cover()->toFile()?->url(),
|
|
||||||
'fileUrl' => $page->downloadFile()->toFile()?->url(),
|
|
||||||
];
|
|
||||||
|
|
||||||
$pageData = array_merge($genericData, $specificData);
|
|
||||||
|
|
||||||
header('Content-Type: application/json');
|
|
||||||
echo json_encode($pageData);
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
<?php snippet('header') ?>
|
|
||||||
<?php snippet('footer') ?>
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
<?php
|
|
||||||
|
|
||||||
$items = $page->children()->listed()->sortBy('published', 'desc');
|
|
||||||
|
|
||||||
$mapItem = function ($item) {
|
|
||||||
return [
|
|
||||||
'title' => $item->title()->value(),
|
|
||||||
'slug' => $item->slug(),
|
|
||||||
'published' => $item->published()->toDate('d/m/Y'),
|
|
||||||
'intro' => $item->intro()->value(),
|
|
||||||
'cover' => $item->cover()->toFile()?->url(),
|
|
||||||
];
|
|
||||||
};
|
|
||||||
|
|
||||||
$singleSlug = $items->count() === 1 ? $items->first()->slug() : null;
|
|
||||||
|
|
||||||
$specificData = [
|
|
||||||
'intro' => $page->intro()->value(),
|
|
||||||
'items' => $items->map($mapItem)->values(),
|
|
||||||
'singleSlug' => $singleSlug,
|
|
||||||
];
|
|
||||||
|
|
||||||
$pageData = array_merge($genericData, $specificData);
|
|
||||||
|
|
||||||
header('Content-Type: application/json');
|
|
||||||
echo json_encode($pageData);
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
<?php snippet('header') ?>
|
|
||||||
<?php snippet('footer') ?>
|
|
||||||
|
|
@ -16,7 +16,6 @@
|
||||||
import Game from '@views/Game.svelte'
|
import Game from '@views/Game.svelte'
|
||||||
import Blog from '@views/Blog.svelte'
|
import Blog from '@views/Blog.svelte'
|
||||||
import Article from '@views/Article.svelte'
|
import Article from '@views/Article.svelte'
|
||||||
import WhitePapers from '@views/WhitePapers.svelte'
|
|
||||||
import Default from '@views/Default.svelte'
|
import Default from '@views/Default.svelte'
|
||||||
|
|
||||||
const templates = {
|
const templates = {
|
||||||
|
|
@ -29,7 +28,6 @@
|
||||||
game: Game,
|
game: Game,
|
||||||
blog: Blog,
|
blog: Blog,
|
||||||
article: Article,
|
article: Article,
|
||||||
'white-papers': WhitePapers,
|
|
||||||
default: Default
|
default: Default
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -58,22 +56,10 @@
|
||||||
window.addEventListener('resize', handleResize)
|
window.addEventListener('resize', handleResize)
|
||||||
|
|
||||||
const handleKeydown = (e) => {
|
const handleKeydown = (e) => {
|
||||||
if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return
|
|
||||||
|
|
||||||
// Si on est sur une sous-page (ex: /livres-blancs/slug), ne pas changer de slide
|
|
||||||
const activePath = slides.active?.path ?? ''
|
|
||||||
const currentPath = window.location.pathname.replace(/^\/en/, '') || '/'
|
|
||||||
const isSubPage = activePath && currentPath.startsWith(activePath + '/')
|
|
||||||
|
|
||||||
if (isSubPage) {
|
|
||||||
if (e.key === 'ArrowLeft') history.back()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.key === 'ArrowRight') {
|
if (e.key === 'ArrowRight') {
|
||||||
const next = slides.all[slides.activeIndex + 1]
|
const next = slides.all[slides.activeIndex + 1]
|
||||||
if (next) slideTo(next.path)
|
if (next) slideTo(next.path)
|
||||||
} else {
|
} else if (e.key === 'ArrowLeft') {
|
||||||
const prev = slides.all[slides.activeIndex - 1]
|
const prev = slides.all[slides.activeIndex - 1]
|
||||||
if (prev) slideTo(prev.path)
|
if (prev) slideTo(prev.path)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleMouseOver = (e) => {
|
const handleMouseOver = (e) => {
|
||||||
onTarget = !!e.target.closest('a, button:not([disabled]), [role="button"]:not([disabled]), [tabindex]')
|
onTarget = !!e.target.closest('a, button, [role="button"], [tabindex]')
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleMouseOut = () => {
|
const handleMouseOut = () => {
|
||||||
|
|
|
||||||
|
|
@ -124,7 +124,7 @@
|
||||||
margin-left: -16.6vw;
|
margin-left: -16.6vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.collection .page-scrollable-footer) {
|
:global(.blog .page-scrollable-footer) {
|
||||||
margin-left: -12.4vw;
|
margin-left: -12.4vw;
|
||||||
margin-top: 5rem;
|
margin-top: 5rem;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -47,31 +47,6 @@ const dict = {
|
||||||
privacy: { fr: "Confidentialité", en: "Privacy" },
|
privacy: { fr: "Confidentialité", en: "Privacy" },
|
||||||
// About
|
// About
|
||||||
our_team: { fr: "NOTRE ÉQUIPE", en: "OUR TEAM" },
|
our_team: { fr: "NOTRE ÉQUIPE", en: "OUR TEAM" },
|
||||||
// White Papers
|
|
||||||
white_paper_label: { fr: "LIVRE BLANC", en: "WHITE PAPER" },
|
|
||||||
read_wp: { fr: "Télécharger", en: "Download" },
|
|
||||||
wp_form_intro: {
|
|
||||||
fr: "Renseignez vos informations pour télécharger notre livre blanc.",
|
|
||||||
en: "Fill in your information to download our white paper.",
|
|
||||||
},
|
|
||||||
wp_firstname: { fr: "Prénom*", en: "First name*" },
|
|
||||||
wp_lastname: { fr: "Nom*", en: "Last name*" },
|
|
||||||
wp_company: { fr: "Société", en: "Company" },
|
|
||||||
wp_role: { fr: "Fonction", en: "Role" },
|
|
||||||
wp_email: { fr: "E-mail*", en: "E-mail*" },
|
|
||||||
wp_consent: {
|
|
||||||
fr: "En cochant cette case, j'accepte d'être recontacté par la société World Game. Mes données ne seront ni vendues, ni partagées.",
|
|
||||||
en: "By checking this box, I agree to be contacted by World Game. My data will not be sold or shared.",
|
|
||||||
},
|
|
||||||
wp_download: { fr: "TÉLÉCHARGER", en: "DOWNLOAD" },
|
|
||||||
wp_success: {
|
|
||||||
fr: "Votre demande a été enregistrée. Le téléchargement devrait démarrer.",
|
|
||||||
en: "Your request has been registered. The download should start.",
|
|
||||||
},
|
|
||||||
wp_error: {
|
|
||||||
fr: "Une erreur est survenue, veuillez réessayer.",
|
|
||||||
en: "An error occurred, please try again.",
|
|
||||||
},
|
|
||||||
// Menu
|
// Menu
|
||||||
menu: { fr: "MENU", en: "MENU" },
|
menu: { fr: "MENU", en: "MENU" },
|
||||||
connect: { fr: "CONNECT", en: "CONNECT" },
|
connect: { fr: "CONNECT", en: "CONNECT" },
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,6 @@ button {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
button[disabled] {
|
|
||||||
cursor: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Button */
|
/* Button */
|
||||||
.button {
|
.button {
|
||||||
width: 14vmax;
|
width: 14vmax;
|
||||||
|
|
@ -30,7 +26,7 @@ button[disabled] {
|
||||||
outline: 2px solid #04fea0;
|
outline: 2px solid #04fea0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:not([disabled]):hover {
|
.button:hover {
|
||||||
background-color: initial;
|
background-color: initial;
|
||||||
background-position: 0;
|
background-position: 0;
|
||||||
outline: 2px solid #04fea0;
|
outline: 2px solid #04fea0;
|
||||||
|
|
@ -68,5 +64,6 @@ button[disabled] {
|
||||||
|
|
||||||
/* Clickable elements */
|
/* Clickable elements */
|
||||||
.clickable {
|
.clickable {
|
||||||
|
cursor: pointer;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,180 +0,0 @@
|
||||||
/* Shared styles for collection pages (Blog, WhitePapers) */
|
|
||||||
|
|
||||||
/* --- Header / Intro --- */
|
|
||||||
.collection-header {
|
|
||||||
text-align: center;
|
|
||||||
padding: 6rem 0 3rem;
|
|
||||||
max-width: 40rem;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collection-header h1 {
|
|
||||||
font-size: var(--font-size-title-main);
|
|
||||||
text-transform: uppercase;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collection-header p {
|
|
||||||
font-size: var(--font-size-subtitle);
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collection-header :global(h1) {
|
|
||||||
font-family: "Terminal", sans-serif;
|
|
||||||
font-size: var(--font-size-title-main);
|
|
||||||
text-transform: uppercase;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collection-header :global(p) {
|
|
||||||
font-size: var(--font-size-subtitle);
|
|
||||||
line-height: 1.6;
|
|
||||||
max-width: 640px;
|
|
||||||
margin: 0 auto;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Card --- */
|
|
||||||
.collection-card {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 2rem;
|
|
||||||
padding: 1.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collection-card-text {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1rem;
|
|
||||||
max-width: 640px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collection-card-date {
|
|
||||||
color: #d9d9d9;
|
|
||||||
font-size: var(--font-size-paragraph);
|
|
||||||
}
|
|
||||||
|
|
||||||
.collection-card-title {
|
|
||||||
font-family: "Danzza", sans-serif;
|
|
||||||
font-size: 40px;
|
|
||||||
max-width: 80%;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collection-card-title a {
|
|
||||||
transition: color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collection-card-title a:hover {
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.collection-card-description {
|
|
||||||
color: #d9d9d9;
|
|
||||||
font-family: "Danzza", sans-serif;
|
|
||||||
font-size: var(--font-size-paragraph);
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collection-card-readmore {
|
|
||||||
color: var(--color-primary);
|
|
||||||
font-family: "Danzza", sans-serif;
|
|
||||||
font-size: var(--font-size-paragraph);
|
|
||||||
font-weight: 500;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collection-card-readmore .arrow {
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Image --- */
|
|
||||||
.collection-card-image img {
|
|
||||||
width: 300px;
|
|
||||||
height: 169px;
|
|
||||||
object-fit: cover;
|
|
||||||
transition: transform 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collection-card-image img:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.collection-card-image--featured img {
|
|
||||||
width: auto;
|
|
||||||
height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Divider --- */
|
|
||||||
.collection-divider {
|
|
||||||
border: none;
|
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.15);
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Featured --- */
|
|
||||||
.collection-card--featured .collection-card-title {
|
|
||||||
font-size: 36px;
|
|
||||||
line-height: 1.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Loading --- */
|
|
||||||
.collection-loading {
|
|
||||||
text-align: center;
|
|
||||||
padding: 4rem 0;
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Mobile --- */
|
|
||||||
@media (max-width: 700px) {
|
|
||||||
.collection-header {
|
|
||||||
padding: 4rem 0 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collection-header :global(h1) {
|
|
||||||
font-size: var(--font-size-title-main-mobile);
|
|
||||||
}
|
|
||||||
|
|
||||||
.collection-header :global(p) {
|
|
||||||
font-size: var(--font-size-subtitle-mobile);
|
|
||||||
}
|
|
||||||
|
|
||||||
.collection-card {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collection-card-image img,
|
|
||||||
.collection-card-image--featured img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
aspect-ratio: 16/9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collection-card--featured .collection-card-title {
|
|
||||||
font-size: var(--font-size-title-section-mobile);
|
|
||||||
}
|
|
||||||
|
|
||||||
.collection-card-title {
|
|
||||||
font-size: var(--font-size-title-section-mobile);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Tablet --- */
|
|
||||||
@media (min-width: 701px) and (max-width: 912px) {
|
|
||||||
.collection-header :global(h1) {
|
|
||||||
font-size: var(--font-size-title-main-tablet);
|
|
||||||
}
|
|
||||||
|
|
||||||
.collection-card {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.collection-card-image img,
|
|
||||||
.collection-card-image--featured img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
aspect-ratio: 16/9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -65,7 +65,3 @@
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pixel {
|
|
||||||
font-family: "Terminal", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,6 @@
|
||||||
@import './reset.css';
|
@import './reset.css';
|
||||||
@import './fonts.css';
|
@import './fonts.css';
|
||||||
@import './layout.css';
|
@import './layout.css';
|
||||||
@import './collection.css';
|
|
||||||
@import './buttons.css';
|
@import './buttons.css';
|
||||||
@import './cursor.css';
|
@import './cursor.css';
|
||||||
@import './utils.css';
|
@import './utils.css';
|
||||||
|
|
|
||||||
|
|
@ -95,11 +95,10 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// Reset après la fin de la transition de slide (1100ms) pour éviter le flash
|
// Reset article view when leaving the blog slide
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (!isActive && articleData) {
|
if (!isActive && articleData) {
|
||||||
const timer = setTimeout(() => { articleData = null }, 1100)
|
articleData = null
|
||||||
return () => clearTimeout(timer)
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -107,7 +106,7 @@
|
||||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||||
<section
|
<section
|
||||||
class="collection blog page-scrollable"
|
class="blog page-scrollable"
|
||||||
class:golden-grid={!!articleData}
|
class:golden-grid={!!articleData}
|
||||||
bind:this={sectionEl}
|
bind:this={sectionEl}
|
||||||
onclick={handleClick}
|
onclick={handleClick}
|
||||||
|
|
@ -120,49 +119,49 @@
|
||||||
<div class="page-container">
|
<div class="page-container">
|
||||||
|
|
||||||
{#if data?.intro}
|
{#if data?.intro}
|
||||||
<header class="collection-header">
|
<header class="blog-header">
|
||||||
{@html data.intro}
|
{@html data.intro}
|
||||||
</header>
|
</header>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if featured}
|
{#if featured}
|
||||||
<article class="collection-card collection-card--featured">
|
<article class="blog-card blog-card--featured">
|
||||||
<div class="collection-card-text">
|
<div class="blog-card-text">
|
||||||
<time class="collection-card-date">{featured.published}</time>
|
<time class="blog-card-date">{featured.published}</time>
|
||||||
<h2 class="collection-card-title">
|
<h2 class="blog-card-title">
|
||||||
<a href="/blog/{featured.slug}">{featured.title}</a>
|
<a href="/blog/{featured.slug}">{featured.title}</a>
|
||||||
</h2>
|
</h2>
|
||||||
{#if featured.intro}
|
{#if featured.intro}
|
||||||
<p class="collection-card-description">{featured.intro}</p>
|
<p class="blog-card-description">{featured.intro}</p>
|
||||||
{/if}
|
{/if}
|
||||||
<a href="/blog/{featured.slug}" class="collection-card-readmore">
|
<a href="/blog/{featured.slug}" class="blog-card-readmore">
|
||||||
{t('read_article')} <span class="arrow">→</span>
|
{t('read_article')} <span class="arrow">→</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
{#if featured.cover}
|
{#if featured.cover}
|
||||||
<div class="collection-card-image collection-card-image--featured">
|
<div class="blog-card-image blog-card-image--featured">
|
||||||
<a href="/blog/{featured.slug}">
|
<a href="/blog/{featured.slug}">
|
||||||
<img src={featured.cover} alt={featured.title} />
|
<img src={featured.cover} alt={featured.title} />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</article>
|
</article>
|
||||||
<hr class="collection-divider" />
|
<hr class="blog-divider" />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#each articles as article, i}
|
{#each articles as article, i}
|
||||||
<article class="collection-card">
|
<article class="blog-card">
|
||||||
<div class="collection-card-text">
|
<div class="blog-card-text">
|
||||||
<time class="collection-card-date">{article.date}</time>
|
<time class="blog-card-date">{article.date}</time>
|
||||||
<h2 class="collection-card-title">
|
<h2 class="blog-card-title">
|
||||||
<a href="/blog/{article.slug}">{article.title}</a>
|
<a href="/blog/{article.slug}">{article.title}</a>
|
||||||
</h2>
|
</h2>
|
||||||
<a href="/blog/{article.slug}" class="collection-card-readmore">
|
<a href="/blog/{article.slug}" class="blog-card-readmore">
|
||||||
{t('read_article')} <span class="arrow">→</span>
|
{t('read_article')} <span class="arrow">→</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
{#if article.cover}
|
{#if article.cover}
|
||||||
<div class="collection-card-image">
|
<div class="blog-card-image">
|
||||||
<a href="/blog/{article.slug}">
|
<a href="/blog/{article.slug}">
|
||||||
<img src={article.cover} alt={article.title} />
|
<img src={article.cover} alt={article.title} />
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -170,12 +169,12 @@
|
||||||
{/if}
|
{/if}
|
||||||
</article>
|
</article>
|
||||||
{#if i < articles.length - 1}
|
{#if i < articles.length - 1}
|
||||||
<hr class="collection-divider" />
|
<hr class="blog-divider" />
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
|
|
||||||
{#if articleLoading}
|
{#if articleLoading}
|
||||||
<p class="collection-loading">{t('loading')}</p>
|
<p class="blog-loading">{t('loading')}</p>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|
@ -190,18 +189,178 @@
|
||||||
padding: 0 50px;
|
padding: 0 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --- Header / Intro --- */
|
||||||
|
.blog-header {
|
||||||
|
text-align: center;
|
||||||
|
padding: 6rem 0 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-header :global(h1) {
|
||||||
|
font-family: "Terminal", sans-serif;
|
||||||
|
font-size: var(--font-size-title-main);
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-header :global(p) {
|
||||||
|
font-size: var(--font-size-subtitle);
|
||||||
|
line-height: 1.6;
|
||||||
|
max-width: 640px;
|
||||||
|
margin: 0 auto;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
.page-container {
|
.page-container {
|
||||||
max-width: none;
|
max-width: none;
|
||||||
padding: 0 10%;
|
padding: 0 10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collection-card-readmore:hover {
|
/* --- Card (article item) --- */
|
||||||
|
.blog-card {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 2rem;
|
||||||
|
padding: 1.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card-text {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
max-width: 640px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card-date {
|
||||||
|
color: #d9d9d9;
|
||||||
|
font-size: var(--font-size-paragraph);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card-title {
|
||||||
|
font-family: "Danzza", sans-serif;
|
||||||
|
font-size: 40px;
|
||||||
|
max-width: 80%;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card-title a {
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card-title a:hover {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card-description {
|
||||||
|
color: #d9d9d9;
|
||||||
|
font-family: "Danzza",sans-serif;
|
||||||
|
font-size: var(--font-size-paragraph);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card-readmore {
|
||||||
|
color: var(--color-primary);
|
||||||
|
font-family: "Danzza", sans-serif;
|
||||||
|
font-size: var(--font-size-paragraph);
|
||||||
|
font-weight: 500;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card-readmore .arrow {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card-readmore:hover {
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --- Image --- */
|
||||||
|
.blog-card-image img {
|
||||||
|
width: 300px;
|
||||||
|
height: 169px;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card-image img:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card-image--featured img {
|
||||||
|
width: auto;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Divider --- */
|
||||||
|
.blog-divider {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.15);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Featured --- */
|
||||||
|
.blog-card--featured .blog-card-title {
|
||||||
|
font-size: 36px;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Loading --- */
|
||||||
|
.blog-loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 4rem 0;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Mobile --- */
|
||||||
@media (max-width: 700px) {
|
@media (max-width: 700px) {
|
||||||
.blog {
|
.blog-header {
|
||||||
padding: 0 1.25rem;
|
padding: 4rem 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-header :global(h1) {
|
||||||
|
font-size: var(--font-size-title-main-mobile);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-header :global(p) {
|
||||||
|
font-size: var(--font-size-subtitle-mobile);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card-image img,
|
||||||
|
.blog-card-image--featured img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
aspect-ratio: 16/9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card--featured .blog-card-title {
|
||||||
|
font-size: var(--font-size-title-section-mobile);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card-title {
|
||||||
|
font-size: var(--font-size-title-section-mobile);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Tablet --- */
|
||||||
|
@media (min-width: 701px) and (max-width: 912px) {
|
||||||
|
.blog-header :global(h1) {
|
||||||
|
font-size: var(--font-size-title-main-tablet);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card-image img,
|
||||||
|
.blog-card-image--featured img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
aspect-ratio: 16/9;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,437 +0,0 @@
|
||||||
<script>
|
|
||||||
import { locale } from '@state/locale.svelte'
|
|
||||||
import { t } from '@i18n'
|
|
||||||
|
|
||||||
let { data, onBack } = $props()
|
|
||||||
|
|
||||||
let firstName = $state('')
|
|
||||||
let lastName = $state('')
|
|
||||||
let company = $state('')
|
|
||||||
let role = $state('')
|
|
||||||
let email = $state('')
|
|
||||||
let consent = $state(false)
|
|
||||||
let submitting = $state(false)
|
|
||||||
let status = $state(null) // null | 'success' | 'error'
|
|
||||||
let showForm = $state(false)
|
|
||||||
let honeypot = $state('')
|
|
||||||
|
|
||||||
let isEmailValid = $derived.by(() => {
|
|
||||||
const emailValidator = /^[\w\-\.]+@([\w-]+\.)+[\w-]{2,}$/gm
|
|
||||||
return emailValidator.test(email)
|
|
||||||
})
|
|
||||||
|
|
||||||
let isDownloadable = $derived.by(() => {
|
|
||||||
return firstName.length > 0 && lastName.length > 0 && email.length > 0 && isEmailValid && consent
|
|
||||||
})
|
|
||||||
|
|
||||||
async function handleSubmit(e) {
|
|
||||||
e.preventDefault()
|
|
||||||
if (!consent) return
|
|
||||||
submitting = true
|
|
||||||
status = null
|
|
||||||
try {
|
|
||||||
const prefix = locale.current === 'en' ? '/en' : ''
|
|
||||||
const res = await fetch(`${prefix}/${data.uri}/download`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ firstName, lastName, company, role, email, _hp: honeypot })
|
|
||||||
})
|
|
||||||
const result = await res.json()
|
|
||||||
if (result.fileUrl) {
|
|
||||||
window.open(result.fileUrl, '_blank')
|
|
||||||
status = 'success'
|
|
||||||
} else {
|
|
||||||
status = 'error'
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
status = 'error'
|
|
||||||
} finally {
|
|
||||||
submitting = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="white-paper">
|
|
||||||
<div class="catch-area">
|
|
||||||
<!-- Label — separate so form can align with title -->
|
|
||||||
<p class="label">{t('white_paper_label')}</p>
|
|
||||||
|
|
||||||
<!-- Title + description + mobile trigger -->
|
|
||||||
<div class="text">
|
|
||||||
<h1 class="title">{data.title}</h1>
|
|
||||||
{#if data.intro}
|
|
||||||
<p class="description">{data.intro}</p>
|
|
||||||
{/if}
|
|
||||||
<button class="trigger button" onclick={() => showForm = true}>
|
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
||||||
<path d="M12 16L7 11H10V4H14V11H17L12 16Z" fill="currentColor"/>
|
|
||||||
<path d="M5 20H19V18H5V20Z" fill="currentColor"/>
|
|
||||||
</svg>
|
|
||||||
{t('wp_download')}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Cover image -->
|
|
||||||
{#if data.cover}
|
|
||||||
<img src={data.cover} alt={data.title} class="cover" />
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<!-- Form area: right column on desktop, full-screen overlay on mobile -->
|
|
||||||
<div class="form-area" class:is-visible={showForm}>
|
|
||||||
<button class="form-close" onclick={() => showForm = false} aria-label="Fermer">✕</button>
|
|
||||||
<div class="form-card">
|
|
||||||
<p class="form-intro">{t('wp_form_intro')}</p>
|
|
||||||
<form class="form" onsubmit={handleSubmit}>
|
|
||||||
<div class="form-row">
|
|
||||||
<input class="input" type="text" placeholder={t('wp_firstname')} bind:value={firstName} required />
|
|
||||||
<input class="input" type="text" placeholder={t('wp_lastname')} bind:value={lastName} required />
|
|
||||||
</div>
|
|
||||||
<input class="input" type="text" placeholder={t('wp_company')} bind:value={company} />
|
|
||||||
<input class="input" type="text" placeholder={t('wp_role')} bind:value={role} />
|
|
||||||
<input class="input" type="email" placeholder={t('wp_email')} bind:value={email} required />
|
|
||||||
|
|
||||||
<div class="hp" aria-hidden="true">
|
|
||||||
<label for="website">Website</label>
|
|
||||||
<input id="website" type="text" name="website" tabindex="-1" autocomplete="off" bind:value={honeypot} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<label class="consent">
|
|
||||||
<input type="checkbox" bind:checked={consent} required />
|
|
||||||
<span>{t('wp_consent')}</span>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
{#if status === 'success'}
|
|
||||||
<p class="status status--success">{t('wp_success')}</p>
|
|
||||||
{:else if status === 'error'}
|
|
||||||
<p class="status status--error">{t('wp_error')}</p>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<button type="submit" class="submit button" disabled={submitting || !isDownloadable}>
|
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
||||||
<path d="M12 16L7 11H10V4H14V11H17L12 16Z" fill="currentColor"/>
|
|
||||||
<path d="M5 20H19V18H5V20Z" fill="currentColor"/>
|
|
||||||
</svg>
|
|
||||||
{t('wp_download')}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.white-paper {
|
|
||||||
color: var(--color-text);
|
|
||||||
padding: 8rem 5rem;
|
|
||||||
display: flex;
|
|
||||||
column-gap: 5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.catch-area {
|
|
||||||
width: min(100%, 45vw);
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
align-self: end;
|
|
||||||
font-family: "Terminal", sans-serif;
|
|
||||||
font-size: var(--font-size-paragraph);
|
|
||||||
color: var(--color-primary);
|
|
||||||
text-transform: uppercase;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Title + description + mobile trigger ── */
|
|
||||||
.text {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 1.5rem;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-family: "Danzza bold", sans-serif;
|
|
||||||
font-size: var(--font-size-title-main);
|
|
||||||
font-weight: 400;
|
|
||||||
text-transform: uppercase;
|
|
||||||
line-height: 1.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.description {
|
|
||||||
font-family: "Danzza", sans-serif;
|
|
||||||
font-size: var(--font-size-paragraph);
|
|
||||||
opacity: 0.8;
|
|
||||||
max-width: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile trigger: hidden on desktop */
|
|
||||||
.trigger {
|
|
||||||
display: none;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cover {
|
|
||||||
align-self: start;
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
object-fit: contain;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Form area: desktop — right column ── */
|
|
||||||
.form-area {
|
|
||||||
margin-top: 2rem;
|
|
||||||
width: min(100%, 30vw);
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Close button: hidden on desktop */
|
|
||||||
.form-close {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-card {
|
|
||||||
background: #0b0b18;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 2.5rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-intro {
|
|
||||||
font-family: "Danzza", sans-serif;
|
|
||||||
font-size: var(--font-size-paragraph);
|
|
||||||
line-height: 1.5;
|
|
||||||
color: #fff;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-row {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input {
|
|
||||||
background: rgba(255, 255, 255, 0.08);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
|
||||||
color: #fff;
|
|
||||||
font-family: "Danzza", sans-serif;
|
|
||||||
font-size: var(--font-size-paragraph);
|
|
||||||
padding: 0.875rem 1rem;
|
|
||||||
width: 100%;
|
|
||||||
transition: border-color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.input::placeholder {
|
|
||||||
color: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hp {
|
|
||||||
position: absolute;
|
|
||||||
left: -9999px;
|
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
overflow: hidden;
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.consent {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 0.75rem;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.consent input[type="checkbox"] {
|
|
||||||
flex-shrink: 0;
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
margin-top: 2px;
|
|
||||||
accent-color: var(--color-primary);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.consent span {
|
|
||||||
font-family: "Danzza", sans-serif;
|
|
||||||
font-size: var(--font-size-paragraph-small);
|
|
||||||
color: rgba(255, 255, 255, 0.75);
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submit {
|
|
||||||
margin-top: 1rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submit:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status {
|
|
||||||
padding: 0.5rem 0.75rem;
|
|
||||||
font-family: "Danzza", sans-serif;
|
|
||||||
font-size: var(--font-size-paragraph-small);
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status--success {
|
|
||||||
background: rgba(4, 254, 160, 0.15);
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.status--error {
|
|
||||||
background: rgba(255, 107, 107, 0.15);
|
|
||||||
color: #ff6b6b;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Mobile ── */
|
|
||||||
@media (max-width: 700px) {
|
|
||||||
.white-paper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100vh;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 6vh 1.25rem 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
font-size: var(--font-size-paragraph-small);
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
flex: 1;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
gap: 1rem;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: clamp(2rem, 10vw, 3.5rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.description {
|
|
||||||
max-width: 100%;
|
|
||||||
font-size: var(--font-size-paragraph-small);
|
|
||||||
}
|
|
||||||
|
|
||||||
.trigger {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cover {
|
|
||||||
position: absolute;
|
|
||||||
bottom: -10%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 75%;
|
|
||||||
max-width: 300px;
|
|
||||||
z-index: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Form overlay */
|
|
||||||
.form-area {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
z-index: 100;
|
|
||||||
background: #0b0b18;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 1.5rem 1.25rem;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-area.is-visible {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-close {
|
|
||||||
display: block;
|
|
||||||
align-self: flex-end;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0.25rem 0.5rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-card {
|
|
||||||
background: none;
|
|
||||||
padding: 0;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submit {
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Tablet ── */
|
|
||||||
@media (min-width: 701px) and (max-width: 912px) {
|
|
||||||
.white-paper {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
grid-template-rows: auto 1fr;
|
|
||||||
height: 100vh;
|
|
||||||
padding: 6vh 2rem 2rem;
|
|
||||||
gap: 1rem 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
grid-column: 1;
|
|
||||||
grid-row: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
grid-column: 1;
|
|
||||||
grid-row: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cover {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-area {
|
|
||||||
grid-column: 2;
|
|
||||||
grid-row: 1 / span 2;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.trigger {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,179 +0,0 @@
|
||||||
<script>
|
|
||||||
import { onMount } from 'svelte'
|
|
||||||
import { slides } from '@state/slides.svelte'
|
|
||||||
import { locale } from '@state/locale.svelte'
|
|
||||||
import WhitePaper from '@views/WhitePaper.svelte'
|
|
||||||
import { t } from '@i18n'
|
|
||||||
import Footer from '@components/layout/Footer.svelte'
|
|
||||||
|
|
||||||
let { data } = $props()
|
|
||||||
|
|
||||||
const isActive = $derived(slides.active?.id === data?.uri)
|
|
||||||
const items = $derived(data?.items ?? [])
|
|
||||||
const pageUri = $derived(data?.uri ?? 'white-papers') // ex: "livres-blancs"
|
|
||||||
|
|
||||||
let itemData = $state(null)
|
|
||||||
let itemLoading = $state(false)
|
|
||||||
let sectionEl = $state(null)
|
|
||||||
|
|
||||||
function getSlugFromUrl() {
|
|
||||||
const parts = window.location.pathname.replace(/^\/en/, '').split('/').filter(Boolean)
|
|
||||||
return parts.length >= 2 && parts[0] === pageUri ? parts[1] : null
|
|
||||||
}
|
|
||||||
|
|
||||||
async function openItem(slug) {
|
|
||||||
itemLoading = true
|
|
||||||
try {
|
|
||||||
const prefix = locale.current === 'en' ? '/en' : ''
|
|
||||||
const res = await fetch(`${prefix}/${pageUri}/${slug}.json`)
|
|
||||||
if (!res.ok) throw new Error(`HTTP ${res.status}`)
|
|
||||||
itemData = await res.json()
|
|
||||||
sectionEl?.scrollTo(0, 0)
|
|
||||||
} catch (e) {
|
|
||||||
console.error(`[${pageUri}] Failed to load:`, e)
|
|
||||||
itemData = null
|
|
||||||
} finally {
|
|
||||||
itemLoading = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function backToList() {
|
|
||||||
itemData = null
|
|
||||||
const prefix = locale.current === 'en' ? '/en' : ''
|
|
||||||
history.pushState({}, '', `${prefix}/${pageUri}`)
|
|
||||||
document.title = `${data?.title ?? pageUri} — World Game`
|
|
||||||
sectionEl?.scrollTo(0, 0)
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleClick(e) {
|
|
||||||
const link = e.target.closest('a[href]')
|
|
||||||
if (!link) return
|
|
||||||
const url = new URL(link.href, window.location.origin)
|
|
||||||
if (url.origin !== window.location.origin) return
|
|
||||||
const match = url.pathname.match(new RegExp(`^(?:/en)?/${pageUri}/([^/]+)$`))
|
|
||||||
if (match) {
|
|
||||||
e.preventDefault()
|
|
||||||
e.stopPropagation()
|
|
||||||
const slug = match[1]
|
|
||||||
const prefix = locale.current === 'en' ? '/en' : ''
|
|
||||||
history.pushState({}, '', `${prefix}/${pageUri}/${slug}`)
|
|
||||||
openItem(slug)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handlePopState() {
|
|
||||||
if (!isActive) return
|
|
||||||
// Si l'URL n'appartient plus à ce slide, le router gère — on ne touche à rien
|
|
||||||
const onThisPage = window.location.pathname.replace(/^\/en/, '').startsWith(`/${pageUri}`)
|
|
||||||
if (!onThisPage) return
|
|
||||||
const slug = getSlugFromUrl()
|
|
||||||
if (slug && (!itemData || itemData.uri !== `${pageUri}/${slug}`)) {
|
|
||||||
openItem(slug)
|
|
||||||
} else if (!slug && itemData) {
|
|
||||||
itemData = null
|
|
||||||
sectionEl?.scrollTo(0, 0)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
const slug = getSlugFromUrl() ?? (data?.singleSlug ?? null)
|
|
||||||
if (slug) openItem(slug)
|
|
||||||
|
|
||||||
window.addEventListener('popstate', handlePopState)
|
|
||||||
return () => window.removeEventListener('popstate', handlePopState)
|
|
||||||
})
|
|
||||||
|
|
||||||
// Quand le slide devient actif avec un seul livre blanc :
|
|
||||||
// - remplace l'URL /parent par /parent/slug (back saute le parent)
|
|
||||||
// - ré-ouvre l'item si itemData a été vidé
|
|
||||||
$effect(() => {
|
|
||||||
if (isActive && data?.singleSlug) {
|
|
||||||
if (!getSlugFromUrl()) {
|
|
||||||
const prefix = locale.current === 'en' ? '/en' : ''
|
|
||||||
history.replaceState({}, '', `${prefix}/${pageUri}/${data.singleSlug}`)
|
|
||||||
}
|
|
||||||
if (!itemData) openItem(data.singleSlug)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// Reset après la fin de la transition de slide (1100ms) pour éviter le flash
|
|
||||||
// Pas de reset pour singleSlug : le contenu reste en mémoire et est pré-affiché à l'arrivée
|
|
||||||
$effect(() => {
|
|
||||||
if (!isActive && itemData && !data?.singleSlug) {
|
|
||||||
const timer = setTimeout(() => { itemData = null }, 1100)
|
|
||||||
return () => clearTimeout(timer)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
||||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
||||||
<section
|
|
||||||
class="collection white-papers page-scrollable"
|
|
||||||
bind:this={sectionEl}
|
|
||||||
onclick={handleClick}
|
|
||||||
>
|
|
||||||
{#if itemData}
|
|
||||||
<WhitePaper data={itemData} onBack={backToList} />
|
|
||||||
{:else}
|
|
||||||
<div class="page-container">
|
|
||||||
|
|
||||||
{#if data?.intro}
|
|
||||||
<header class="collection-header">
|
|
||||||
{@html data.intro}
|
|
||||||
</header>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#each items as item, i}
|
|
||||||
<article class="collection-card">
|
|
||||||
<div class="collection-card-text">
|
|
||||||
<time class="collection-card-date">{item.published}</time>
|
|
||||||
<h2 class="collection-card-title">
|
|
||||||
<a href="/{pageUri}/{item.slug}">{item.title}</a>
|
|
||||||
</h2>
|
|
||||||
{#if item.intro}
|
|
||||||
<p class="collection-card-description">{item.intro}</p>
|
|
||||||
{/if}
|
|
||||||
<a href="/{pageUri}/{item.slug}" class="collection-card-readmore">
|
|
||||||
{t('read_wp')} <span class="arrow">→</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
{#if item.cover}
|
|
||||||
<div class="collection-card-image">
|
|
||||||
<a href="/{pageUri}/{item.slug}">
|
|
||||||
<img src={item.cover} alt={item.title} />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</article>
|
|
||||||
{#if i < items.length - 1}
|
|
||||||
<hr class="collection-divider" />
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
{#if itemLoading}
|
|
||||||
<p class="collection-loading">{t('loading')}</p>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<Footer class="page-scrollable-footer" />
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.white-papers {
|
|
||||||
color: var(--color-text);
|
|
||||||
padding: 0 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-container {
|
|
||||||
max-width: none;
|
|
||||||
padding: 0 10%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 700px) {
|
|
||||||
.white-papers {
|
|
||||||
padding: 0 1.25rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue