Analyser Brainwave et apprendre à construire des interfaces complexes avec React et Tailwind
Chaque fois que les designers apportent des maquettes dans le style des services d'IA modernes, les développeurs commencent à ressentir une légère crispation. Gradients néon, grilles de fond complexes, croix décoratives aux intersections des sections, mises en page bento et parallaxe. Assembler tout cela proprement sans transformer le code en un désordre de centaines de classes Tailwind dispersées peut être un vrai défi.
Dans le dépôt brainwave, l'auteur de la chaîne JavaScript Mastery, Adrian Hajdin, a publié le code source d'une landing page complète pour un produit d'IA fictif. Le projet est construit avec React, Vite et Tailwind CSS. C'est un excellent exemple de la façon d'organiser le style et l'architecture des composants lorsque le design dépasse les cartes et boutons standard.
Ce qu'il y a dans le projet
Le dépôt est un site mono-page frontend prêt à l'emploi. Il inclut tous les blocs typiques d'un site commercial : une section héro avec un appel à l'action, des cartes de fonctionnalités, une feuille de route interactive, une section d'intégrations et des niveaux de tarification.
La valeur principale du projet ne réside pas dans le design lui-même, mais dans l'approche pour implémenter des éléments visuels complexes. Au lieu de brancher des dépendances de bibliothèques de composants lourdes, l'auteur démontre comment tirer le maximum de Tailwind CSS vanilla et de React pur.
Solutions techniques intéressantes
J'ai examiné la base de code et identifié quatre techniques qui seront utiles dans un développement réel.
1. Architecture typographique via le plugin Tailwind
Dans les grands projets Tailwind, un problème courant émerge : les développeurs copient des chaînes de classes longues comme font-semibold text-[2.5rem] leading-[3.25rem] md:text-[2.75rem] d'un titre à un autre. Cela pollue le balisage et complique la refactorisation.
Dans Brainwave, cela a été géré via le fichier de configuration tailwind.config.js. En utilisant la fonction intégrée plugin, l'auteur a créé des classes de composants personnalisés pour tous les niveaux typographiques :
plugins: [
plugin(function ({ addBase, addComponents, addUtilities }) {
addComponents({
".h1": {
"@apply font-semibold text-[2.5rem] leading-[3.25rem] md:text-[2.75rem] md:leading-[3.75rem] lg:text-[3.25rem] lg:leading-[4.0625rem] xl:text-[3.75rem] xl:leading-[4.5rem]":
{},
},
".h2": {
"@apply text-[1.75rem] leading-[2.5rem] md:text-[2rem] md:leading-[2.5rem] lg:text-[2.5rem] lg:leading-[3.5rem] xl:text-[3rem] xl:leading-tight":
{},
},
".body-1": {
"@apply text-[0.875rem] leading-[1.5rem] md:text-[1rem] md:leading-[1.75rem] lg:text-[1.25rem] lg:leading-8":
{},
},
".tagline": {
"@apply font-grotesk font-light text-xs tracking-tagline uppercase":
{},
},
});
}),
]
Maintenant en JSX, il suffit d'écrire <h1 className="h1">, et les styles sont appliqués automatiquement avec les points de rupture responsifs.
2. Wrapper de section universel avec lignes guides
Le design du projet utilise de fines lignes de séparation le long des côtés de la page et des croix décoratives aux intersections des blocs. Construire ce balisage manuellement à l'intérieur de chaque composant est peu pratique.
Le projet inclut un composant dédié Section.jsx qui gère toute la géométrie décorative :
import SectionSvg from "../../public/assets/svg/SectionSvg";
const Section = ({
className,
id,
crosses,
crossesOffset,
customPaddings,
children,
}) => (
<div
id={id}
className={`relative
${
customPaddings ||
`py-10 lg:py-16 xl:py-20 ${crosses ? "lg:py-32 xl:py-40" : ""}`
} ${className || ""}`}
>
{children}
<div className="hidden absolute top-0 left-5 w-0.25 h-full bg-stroke-1 pointer-events-none md:block lg:left-7.5 xl:left-10" />
<div className="hidden absolute top-0 right-5 w-0.25 h-full bg-stroke-1 pointer-events-none md:block lg:right-7.5 xl:right-10" />
{crosses && (
<>
<div
className={`hidden absolute top-0 left-7.5 right-7.5 h-0.25 bg-stroke-1 ${
crossesOffset && crossesOffset
} pointer-events-none lg:block xl:left-10 right-10`}
/>
<SectionSvg crossesOffset={crossesOffset} />
</>
)}
</div>
);
Le composant isole la logique pour le rendu des guides latéraux (w-0.25 h-full bg-stroke-1) et des séparateurs horizontaux avec des icônes SVG aux intersections. Les autres blocs enveloppent simplement dans <Section crosses>, maintenant une structure propre.
3. Mise en page Bento pour la feuille de route
La section Feuille de route est construite comme une grille asymétrique. Les cartes de rang pair se décalent verticalement sur les écrans moyens et grands en utilisant la classe even:md:translate-y-[7rem].
Les bordures en dégradé utilisent une technique de double wrapper : le conteneur externe reçoit un fond en dégradé (bg-conic-gradient) avec un padding minimal p-0.25, tandis que le bloc interne se remplit avec la couleur principale du thème sombre bg-n-8. Cela crée une bordure lumineuse propre d'une fraction de pixel sans filtres CSS lourds.
4. Extraction du contenu vers des constantes
Tout le texte, la structure de navigation, la tarification et les listes de fonctionnalités sont extraits vers le fichier constants/index.js. Les composants eux-mêmes ne contiennent aucune chaîne codée en dur—ils ne font que gérer le mapping des données. Pour adapter le projet à un service réel, il suffit de modifier un objet JS sans toucher au balisage JSX.
Comment exécuter le projet en local
Vous aurez besoin de Node.js et Git installés pour exécuter ceci. Clonez le dépôt et installez les dépendances :
git clone https://github.com/adrianhajdin/brainwave.git
cd brainwave
npm install
npm run dev
Le serveur local Vite démarre à l'adresse http://localhost:5173.
Qui bénéficiera de ce dépôt
Le projet n'a pas de backend, d'intégration de base de données ni de gestion d'état complexe. C'est spécifiquement un modèle et une ressource d'apprentissage pour le développement frontend.
Le dépôt mérite d'être exploré dans deux scénarios :
- Vous souhaitez améliorer vos compétences en Tailwind CSS et comprendre comment personnaliser correctement le thème pour des maquettes de design non standard.
- Vous avez besoin d'un framework prêt à l'emploi pour une landing page pour votre projet personnel ou votre portfolio, où une présentation visuelle impressionnante compte.
Le code est propre, divisé en modules clairs et facile à décomposer en composants réutilibles séparés. Lien du code source : github.com/adrianhajdin/brainwave.
Projets similaires