Cheick Oumar D
3dbacc94d3
- Created a new layout for projects with sections for hero, projects, roadmap, selection criteria, and a call to action. - Added a single page layout for individual project details, including a hero section and content area. - Introduced a brand highlight partial to emphasize "TheAfriForge" in text. - Implemented an icon partial for reusable SVG icons across the site. - Developed a site header and footer with navigation and legal links, adapting for language variations. - Enhanced the index layout with sections for hero, stats, pillars, projects, and members. - Added a development script to load environment variables and run Hugo with optional arguments.
191 lines
10 KiB
HTML
191 lines
10 KiB
HTML
{{ define "main" }}
|
|
|
|
{{ $p := .Params }}
|
|
{{ $joinPath := cond (eq .Site.Language.Lang "fr") "devenir-membre" "become-member" }}
|
|
|
|
<!-- ─── HERO ─────────────────────────────────────────────────── -->
|
|
<section class="relative overflow-hidden bg-green-950 px-6 py-28 lg:px-8">
|
|
<div class="absolute inset-0 opacity-5" style="background-image:radial-gradient(circle at 1px 1px,white 1px,transparent 0);background-size:40px 40px"></div>
|
|
<div class="relative mx-auto max-w-5xl">
|
|
<span class="inline-flex items-center gap-2 rounded-full border border-green-700 bg-green-900 px-4 py-1.5 text-xs font-bold uppercase tracking-widest text-green-400 mb-8">
|
|
<span class="h-1.5 w-1.5 rounded-full bg-green-400"></span>
|
|
TheAfriForge
|
|
</span>
|
|
<h1 class="text-5xl md:text-7xl font-black leading-none text-white mb-6">{{ .Title }}</h1>
|
|
{{ with .Description }}
|
|
<p class="text-lg text-green-200 max-w-2xl leading-relaxed">{{ . }}</p>
|
|
{{ end }}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ─── PRÉAMBULE ─────────────────────────────────────────────── -->
|
|
<section class="bg-white px-6 py-20 lg:px-8">
|
|
<div class="mx-auto max-w-5xl">
|
|
<blockquote class="relative mb-12 rounded-2xl bg-green-950 px-10 py-10">
|
|
<svg class="absolute top-6 left-6 h-8 w-8 text-green-700" fill="currentColor" viewBox="0 0 24 24"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/></svg>
|
|
<p class="text-2xl md:text-3xl font-black leading-snug text-white pl-6">{{ $p.preamble.quote }}</p>
|
|
</blockquote>
|
|
<div class="grid md:grid-cols-2 gap-8 text-slate-600 text-lg leading-relaxed">
|
|
<p>{{ $p.preamble.text }}</p>
|
|
<div class="rounded-xl border-l-4 border-green-500 bg-green-50 p-6">
|
|
<p class="font-semibold text-green-900">{{ partial "brand-highlight.html" $p.preamble.conviction }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ─── CONVICTION ───────────────────────────────────────────── -->
|
|
<section class="bg-slate-50 px-6 py-20 lg:px-8">
|
|
<div class="mx-auto max-w-5xl">
|
|
<div class="mb-12">
|
|
<h2 class="text-3xl font-black text-slate-900 mb-3">{{ $p.conviction.title }}</h2>
|
|
<p class="text-slate-500 max-w-xl">{{ $p.conviction.intro }}</p>
|
|
</div>
|
|
<div class="grid sm:grid-cols-2 gap-4">
|
|
{{ range $p.conviction.items }}
|
|
<div class="flex items-start gap-4 rounded-xl bg-white border border-slate-100 p-6 shadow-sm hover:shadow-md transition">
|
|
<div class="flex-shrink-0 flex h-11 w-11 items-center justify-center rounded-lg bg-green-100 text-green-700">
|
|
{{ partial "icon.html" .icon }}
|
|
</div>
|
|
<p class="text-slate-700 font-medium leading-relaxed">{{ .text }}</p>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ─── PILIERS ───────────────────────────────────────────────── -->
|
|
<section class="bg-white px-6 py-20 lg:px-8">
|
|
<div class="mx-auto max-w-5xl">
|
|
<div class="mb-12">
|
|
<h2 class="text-3xl font-black text-slate-900 mb-3">{{ $p.pillars.title }}</h2>
|
|
<p class="text-slate-500 max-w-xl">{{ $p.pillars.intro }}</p>
|
|
</div>
|
|
<div class="grid md:grid-cols-3 gap-6">
|
|
{{ range $p.pillars.items }}
|
|
<div class="group relative rounded-2xl border border-slate-200 bg-white p-8 shadow-sm hover:border-green-400 hover:shadow-lg transition">
|
|
<div class="mb-6 flex items-center justify-between">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-green-950 text-green-400">
|
|
{{ partial "icon.html" .icon }}
|
|
</div>
|
|
<span class="text-4xl font-black text-slate-100 group-hover:text-green-100 transition">{{ .number }}</span>
|
|
</div>
|
|
<h3 class="text-xl font-black text-slate-900 mb-3">{{ .title }}</h3>
|
|
<p class="text-slate-600 leading-relaxed text-sm">{{ .text }}</p>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ─── PRINCIPES ─────────────────────────────────────────────── -->
|
|
<section class="bg-green-950 px-6 py-20 lg:px-8">
|
|
<div class="mx-auto max-w-5xl">
|
|
<div class="mb-12">
|
|
<h2 class="text-3xl font-black text-white mb-3">{{ $p.principles.title }}</h2>
|
|
</div>
|
|
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{{ range $p.principles.items }}
|
|
<div class="rounded-xl border border-green-800 bg-green-900 p-6 hover:border-green-600 hover:bg-green-800 transition">
|
|
<div class="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-green-700 text-green-200">
|
|
{{ partial "icon.html" .icon }}
|
|
</div>
|
|
<h3 class="text-base font-black text-white mb-2">{{ .title }}</h3>
|
|
<p class="text-green-300 text-sm leading-relaxed">{{ .text }}</p>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ─── ENGAGEMENTS ───────────────────────────────────────────── -->
|
|
<section class="bg-white px-6 py-20 lg:px-8">
|
|
<div class="mx-auto max-w-5xl">
|
|
<div class="grid md:grid-cols-2 gap-12 items-start">
|
|
<div>
|
|
<h2 class="text-3xl font-black text-slate-900 mb-3">{{ $p.commitments.title }}</h2>
|
|
<p class="text-slate-500 mb-8">{{ $p.commitments.intro }}</p>
|
|
<ul class="space-y-4">
|
|
{{ range $p.commitments.items }}
|
|
<li class="flex items-start gap-3">
|
|
<span class="mt-1 flex-shrink-0 flex h-5 w-5 items-center justify-center rounded-full bg-green-500">
|
|
<svg class="h-3 w-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
|
|
</span>
|
|
<span class="text-slate-700">{{ . }}</span>
|
|
</li>
|
|
{{ end }}
|
|
</ul>
|
|
</div>
|
|
<div class="sticky top-24">
|
|
<div class="rounded-2xl bg-green-950 p-10 text-center">
|
|
<svg class="mx-auto mb-4 h-10 w-10 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
|
|
<p class="text-xl font-black text-white leading-snug">{{ $p.commitments.quote }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ─── VISION ────────────────────────────────────────────────── -->
|
|
<section class="bg-slate-50 px-6 py-20 lg:px-8">
|
|
<div class="mx-auto max-w-5xl">
|
|
<div class="mb-4">
|
|
<h2 class="text-3xl font-black text-slate-900 mb-3">{{ $p.vision.title }}</h2>
|
|
<p class="text-slate-500 max-w-2xl mb-2">{{ partial "brand-highlight.html" $p.vision.intro }}</p>
|
|
<p class="font-bold text-green-800">→ {{ $p.vision.objective }}</p>
|
|
</div>
|
|
<div class="mt-10 grid sm:grid-cols-2 gap-4">
|
|
{{ range $p.vision.items }}
|
|
<div class="flex gap-5 rounded-xl bg-white border border-slate-100 p-6 shadow-sm hover:shadow-md transition">
|
|
<div class="flex-shrink-0 flex h-12 w-12 items-center justify-center rounded-xl bg-slate-900 text-green-400">
|
|
{{ partial "icon.html" .icon }}
|
|
</div>
|
|
<div>
|
|
<h3 class="font-black text-slate-900 mb-1">{{ .title }}</h3>
|
|
<p class="text-slate-500 text-sm leading-relaxed">{{ .text }}</p>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ─── GOUVERNANCE ───────────────────────────────────────────── -->
|
|
<section class="bg-white px-6 py-20 lg:px-8">
|
|
<div class="mx-auto max-w-5xl">
|
|
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
<h2 class="text-3xl font-black text-slate-900 mb-8">{{ $p.governance.title }}</h2>
|
|
<ul class="space-y-4">
|
|
{{ range $p.governance.items }}
|
|
<li class="flex items-start gap-3">
|
|
<span class="mt-0.5 flex-shrink-0 h-5 w-5 text-green-600">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
|
</span>
|
|
<span class="text-slate-700">{{ . }}</span>
|
|
</li>
|
|
{{ end }}
|
|
</ul>
|
|
</div>
|
|
<div class="rounded-2xl border-l-4 border-green-500 bg-green-50 p-8">
|
|
<p class="text-xl font-black text-green-900 leading-snug italic">« {{ $p.governance.quote }} »</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ─── COALITION ─────────────────────────────────────────────── -->
|
|
<section class="bg-green-950 px-6 py-24 lg:px-8">
|
|
<div class="mx-auto max-w-3xl text-center">
|
|
<h2 class="text-4xl md:text-5xl font-black text-white mb-6">{{ $p.coalition.title }}</h2>
|
|
<p class="text-green-200 text-lg leading-relaxed mb-6">{{ $p.coalition.text }}</p>
|
|
<p class="text-white font-bold text-xl mb-10">{{ partial "brand-highlight.html" $p.coalition.statement }}</p>
|
|
<a href="{{ $joinPath | relLangURL }}" class="inline-flex items-center gap-2 rounded-xl bg-green-500 px-8 py-4 text-base font-black text-white hover:bg-green-400 transition">
|
|
{{ $p.coalition.cta }}
|
|
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
|
|
</a>
|
|
<p class="mt-10 text-sm text-green-500 italic">{{ $p.coalition.closing }}</p>
|
|
</div>
|
|
</section>
|
|
|
|
{{ end }}
|