Skip to content

Refonte visuelle de la page Techletter #2361

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Mopolo merged 1 commit into from
Aug 25, 2026
Merged

Refonte visuelle de la page Techletter #2361

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 54 additions & 46 deletions templates/site/techletter/index.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,61 +1,69 @@
{% extends 'site/base.html.twig' %}
{% extends 'layouts/site.html.twig' %}
{% set menu_current_feuille_id = constant('Afup\\Site\\Corporate\\Feuille::ID_FEUILLE_NOS_ACTIONS') %}

{% block title %}La veille de l'AFUP{% endblock %}

{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="{{ asset('css/glyphicons.css') }}" media="screen" />
<link rel="stylesheet" href="{{ asset('css/techletter.css') }}" media="screen" />
{% endblock %}

{% block content %}
{{ render(controller(
'AppBundle\\Controller\\Website\\SecondaryMenuController::display',
{ 'feuille_id': constant('Afup\\Site\\Corporate\\Feuille::ID_FEUILLE_NOS_ACTIONS') }
)) }}

<div class="techletter-subscription" id="container">
{# En-tête pleine largeur, sur le même voile bleu nuit que les autres pages refondues,
avec la capture d'un numéro à droite pour montrer le produit tout de suite. #}
<div class="bg-gradient-to-br from-afup-900 via-afup-800 to-afup-700">
<div class="container mx-auto px-4 py-12 sm:px-28 sm:py-16 relative isolate grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
<div class="flex flex-col items-start gap-6">
<p class="flex items-center gap-2 font-sans font-normal text-sm text-white py-1.5 px-3 bg-white/20 rounded-full">
<twig:ux:icon name="mdi:email-fast-outline" class="size-4" />
Tous les 15 jours
</p>

<div class="techletter-subscription--header">
<div class="techletter-subscription-capture">
<img src="{{ asset('images/techletter/sample.png') }}" alt="La veille de l'AFUP" />
</div>
<div class="techletter-subscription-header-content">
<h1>Simplifiez votre veille sur PHP.</h1>
<p>
Tous les 15 jours, recevez les infos à ne pas rater, sélectionnées par les experts de l'AFUP.<br />
</p>
<p>
<a class="banner-button" href="{{ path('member_techletter') }}">&gt;&gt; Je m'inscris &lt;&lt;</a>
</p>
<h1 class="font-titre font-normal text-3xl sm:text-4xl leading-tight text-white">Simplifiez votre veille sur PHP.</h1>

<p class="font-sans font-normal text-base text-white/90 max-w-xl">
Tous les 15 jours, recevez les infos à ne pas rater, sélectionnées par les experts de l'AFUP.
</p>

<twig:Button variant="primary" as="a" href="{{ path('member_techletter') }}" class="px-8 py-3 text-base font-semibold">Je m'inscris</twig:Button>
</div>

<img src="{{ asset('images/techletter/sample.png') }}" alt="Aperçu d'un numéro de la veille de l'AFUP" width="480" height="320"
class="w-full max-w-[480px] mx-auto rounded-2xl ring-1 ring-white/20 shadow-2xl" />

<div class="absolute w-64 h-64 top-0 right-0 translate-x-1/3 -translate-y-1/3 bg-white/5 blur-3xl rounded-full -z-10"></div>
</div>
</div>

<div class="techletter-subscription-body">
<div class="techletter-subscription-argument">
<h2 class="h3-like">Le meilleur de PHP, directement par mail</h2>
<p>
Une sélection drastique est effectuée en amont, afin de vous permettre d'accéder aux meilleurs articles
du moment.<br />Ne perdez plus de temps à aller de lien en lien et concentrez-vous sur votre métier.
</p>
</div>
<div class="container mx-auto flex flex-col px-4 py-6 gap-6 sm:px-28 sm:py-10 sm:gap-10">
<div class="flex flex-col gap-5">
<twig:SectionTitle>Pourquoi s'y abonner ?</twig:SectionTitle>

<div class="techletter-subscription-argument">
<h2 class="h3-like">Un avantage exclusif pour nos membres</h2>
<p>
Seuls les membres AFUP peuvent accéder à ce concentré de veille qui couvre l'essentiel de
l'actualité de PHP et des technologies connexes.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 sm:gap-8">

<twig:Card class="flex flex-col gap-3 p-6 sm:p-8">
<h3 class="font-titre font-bold text-lg text-afup-800">Le meilleur de PHP, directement par mail</h3>
<p class="font-sans font-normal text-base text-neutre-700">
Une sélection drastique est effectuée en amont, afin de vous permettre d'accéder aux meilleurs articles
du moment.<br />Ne perdez plus de temps à aller de lien en lien et concentrez-vous sur votre métier.
</p>
</twig:Card>

<twig:Card class="flex flex-col gap-3 p-6 sm:p-8">
<h3 class="font-titre font-bold text-lg text-afup-800">Un avantage exclusif pour nos membres</h3>
<p class="font-sans font-normal text-base text-neutre-700">
Seuls les membres AFUP peuvent accéder à ce concentré de veille qui couvre l'essentiel de
l'actualité de PHP et des technologies connexes.
</p>
</twig:Card>

<twig:Card class="flex flex-col gap-3 p-6 sm:p-8">
<h3 class="font-titre font-bold text-lg text-afup-800">Prérequis</h3>
<p class="font-sans font-normal text-base text-neutre-700">
Pour recevoir cette veille il faut être membre à jour de cotisation et cliquer sur le
<a href="{{ path('member_techletter') }}" class="text-afup-500 underline hover:no-underline">bouton d'inscription</a>
dans l'espace membres.
</p>
</twig:Card>

<div class="techletter-subscription-argument">
<h2 class="h3-like">Prérequis</h2>
<p>
Pour recevoir cette veille il faut être membre à jour de cotisation et cliquer sur le <a href="{{ path('member_techletter') }}">bouton d'inscription</a>
dans l'espace membres.
</p>
</div>
</div>
</div>

</div>
{% endblock %}
Loading