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.
118 lines
7.2 KiB
HTML
118 lines
7.2 KiB
HTML
{{ define "main" }}
|
|
|
|
{{ $manifestoPath := cond (eq .Site.Language.Lang "fr") "manifeste" "manifesto" }}
|
|
{{ $projectsPath := cond (eq .Site.Language.Lang "fr") "projets" "projects" }}
|
|
{{ $joinPath := cond (eq .Site.Language.Lang "fr") "devenir-membre" "become-member" }}
|
|
|
|
<!-- ─── HERO ───────────────────────────────────── -->
|
|
<section class="px-6 py-28 lg:px-8 lg:py-36 bg-green-950">
|
|
<div class="mx-auto max-w-4xl">
|
|
<p class="text-sm font-semibold uppercase tracking-widest text-green-400 mb-6">{{ .Params.hero.kicker }}</p>
|
|
<h1 class="text-5xl md:text-6xl lg:text-7xl font-black leading-tight text-white mb-8">
|
|
{{ .Params.hero.titleLine1 }}<br>{{ .Params.hero.titleLine2 }}<br><span class="text-green-400">{{ .Params.hero.titleLine3 }}</span>
|
|
</h1>
|
|
<p class="text-xl text-green-200 max-w-xl mb-10 leading-relaxed">
|
|
{{ partial "brand-highlight.html" .Params.hero.subtitle }}
|
|
</p>
|
|
<div class="flex flex-wrap gap-4">
|
|
<a href="{{ $manifestoPath | relLangURL }}" class="inline-flex items-center gap-2 rounded-lg bg-green-500 px-7 py-3.5 text-sm font-bold text-white hover:bg-green-400 transition">
|
|
{{ .Params.hero.ctaManifesto }}
|
|
<svg class="h-4 w-4" 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>
|
|
<a href="{{ $projectsPath | relLangURL }}" class="inline-flex items-center gap-2 rounded-lg border-2 border-green-700 px-7 py-3.5 text-sm font-bold text-green-200 hover:border-green-500 hover:text-white transition">
|
|
{{ .Params.hero.ctaProjects }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ─── DIVIDER ───────────────────────────────── -->
|
|
<div class="border-t border-slate-100"></div>
|
|
|
|
<!-- ─── STATS ─────────────────────────────────── -->
|
|
<section class="px-6 py-16 lg:px-8 bg-slate-100">
|
|
<div class="mx-auto max-w-5xl">
|
|
<h2 class="text-3xl lg:text-4xl font-black text-slate-900 mb-3 text-center">{{ .Params.whyJoin.title }}</h2>
|
|
<p class="text-center text-slate-600 mb-12 max-w-2xl mx-auto">{{ partial "brand-highlight.html" .Params.whyJoin.intro }}</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{{ range .Params.whyJoin.cards }}
|
|
<div class="rounded-xl border border-slate-100 bg-white p-8 shadow-md hover:shadow-lg transition">
|
|
<div class="text-5xl mb-4">{{ .icon }}</div>
|
|
<h3 class="text-xl font-bold text-slate-900 mb-2">{{ .title }}</h3>
|
|
<p class="text-slate-600">{{ partial "brand-highlight.html" .text }}</p>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ─── DIVIDER ───────────────────────────────── -->
|
|
<div class="border-t border-slate-100"></div>
|
|
|
|
<!-- ─── PILIERS ───────────────────────────────── -->
|
|
<section class="px-6 py-24 lg:px-8 bg-white">
|
|
<div class="mx-auto max-w-5xl">
|
|
<h2 class="text-3xl md:text-4xl font-black text-slate-900 mb-12 text-center">{{ .Params.pillars.title }}</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{{ range $index, $item := .Params.pillars.items }}
|
|
{{ $bgColorClass := cond (eq $index 0) "bg-green-50" (cond (eq $index 1) "bg-green-100" "bg-green-200") }}
|
|
{{ $borderColorClass := cond (eq $index 0) "border-green-600" (cond (eq $index 1) "border-green-700" "border-green-800") }}
|
|
{{ $textColorClass := cond (eq $index 0) "text-green-600" (cond (eq $index 1) "text-green-700" "text-green-800") }}
|
|
<div class="rounded-lg p-8 {{ $bgColorClass }} border-l-4 {{ $borderColorClass }} shadow-sm hover:shadow-md transition">
|
|
<div class="text-4xl font-black {{ $textColorClass }} mb-4">{{ add $index 1 }}</div>
|
|
<h3 class="text-xl font-bold text-slate-900 mb-3">{{ $item.title }}</h3>
|
|
<p class="text-slate-600 leading-relaxed">{{ $item.text }}</p>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ─── PROJETS ───────────────────────────────── -->
|
|
<section id="projects" class="px-6 py-24 lg:px-8 bg-green-900">
|
|
<div class="mx-auto max-w-6xl">
|
|
<h2 class="text-3xl md:text-4xl font-black text-white mb-4 text-center">{{ .Params.projects.title }}</h2>
|
|
<p class="text-green-100 mb-14 max-w-3xl mx-auto text-center">{{ partial "brand-highlight.html" .Params.projects.intro }}</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{{ range .Params.projects.items }}
|
|
{{ $statusColor := cond (eq .status "Production") "bg-green-200 text-green-900" (cond (eq .status "Incubation") "bg-amber-200 text-amber-900" "bg-slate-200 text-slate-800") }}
|
|
<div class="rounded-2xl border border-green-700 bg-green-800 p-8 min-h-[320px] flex flex-col justify-between shadow-md hover:shadow-lg hover:bg-green-700 transition">
|
|
<div>
|
|
<span class="inline-flex rounded-full {{ $statusColor }} px-3 py-1 text-xs font-black uppercase tracking-wide mb-5">{{ .status }}</span>
|
|
<h3 class="text-2xl font-black text-white mb-4">{{ .name }}</h3>
|
|
<p class="text-green-100 leading-relaxed">{{ partial "brand-highlight.html" .text }}</p>
|
|
</div>
|
|
<a href="#" class="mt-8 inline-flex items-center justify-center rounded-lg bg-white px-5 py-3 text-sm font-black text-green-900 hover:bg-green-100 transition">
|
|
{{ .cta }} →
|
|
</a>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ─── MEMBRES ───────────────────────────────── -->
|
|
<section id="membres" class="px-6 py-24 lg:px-8 bg-slate-50">
|
|
<div class="mx-auto max-w-4xl">
|
|
<h2 class="text-3xl md:text-4xl font-black text-slate-900 mb-4">{{ .Params.members.title }}</h2>
|
|
<p class="text-slate-600 mb-14 max-w-xl">{{ partial "brand-highlight.html" .Params.members.subtitle }}</p>
|
|
|
|
<div class="grid md:grid-cols-2 gap-8">
|
|
{{ range .Params.members.categories }}
|
|
<div class="rounded-xl bg-white border border-slate-200 p-8 shadow-sm hover:shadow-md transition">
|
|
<p class="text-xs font-bold uppercase tracking-widest text-green-700 mb-3">{{ .label }}</p>
|
|
<h3 class="text-2xl font-bold text-slate-900 mb-4">{{ .title }}</h3>
|
|
<p class="text-slate-600 mb-6">{{ partial "brand-highlight.html" .text }}</p>
|
|
<a href="{{ (or .link $joinPath) | relLangURL }}" class="inline-flex items-center gap-2 font-bold text-green-800 hover:text-green-900 transition">
|
|
{{ .cta }}
|
|
<svg class="h-4 w-4" 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>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{ end }}
|