Watercolor_Artistic_Grid_Layout_Consulting
Un composant de mise en page de grille simple et réactif pour le conseil/les services, avec un design aquarelle/artistique doux avec des neutres froids et la prise en charge du mode sombre.
HTML Code
<div class="font-sans bg-gradient-to-br from-blue-50 to-indigo-100 text-gray-800 dark:from-gray-900 dark:to-gray-800 dark:text-gray-200 p-6 md:p-12 lg:p-16
relative overflow-hidden group">
<!-- Background artistic overlay for light mode -->
<div class="absolute inset-0 z-0 opacity-40 dark:opacity-0 pointer-events-none"
style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2020/svg" viewBox="0 0 1000 1000"><filter id="blur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="40" /></filter><circle cx="200" cy="300" r="150" fill="rgb(199, 210, 254)" filter="url(%23blur)" /><circle cx="700" cy="500" r="200" fill="rgb(224, 231, 255)" filter="url(%23blur)" /><circle cx="400" cy="750" r="100" fill="rgb(165, 180, 252)" filter="url(%23blur)" /></svg>'); background-repeat: no-repeat; background-size: cover; background-position: center;"></div>
<!-- Background artistic overlay for dark mode -->
<div class="absolute inset-0 z-0 opacity-0 dark:opacity-30 pointer-events-none"
style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><filter id="blur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="40" /></filter><circle cx="200" cy="300" r="150" fill="rgb(31, 41, 55)" filter="url(%23blur)" /><circle cx="700" cy="500" r="200" fill="rgb(55, 65, 81)" filter="url(%23blur)" /><circle cx="400" cy="750" r="100" fill="rgb(17, 24, 39)" filter="url(%23blur)" /></svg>'); background-repeat: no-repeat; background-size: cover; background-position: center;"></div>
<div class="relative z-10 max-w-7xl mx-auto py-8 lg:py-12">
<header class="text-center mb-12">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-4
text-gray-900 dark:text-gray-50 drop-shadow-lg leading-tight">
Our Consulting Expertise
</h2>
<p class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
Empowering your business with strategic insights and tailored solutions.
</p>
</header>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Service Card 1 -->
<article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300
overflow-hidden border border-gray-200 dark:border-gray-700
transform hover:-translate-y-1 group-hover:scale-[0.99] group-hover:first:scale-100
relative pb-6">
<div class="absolute inset-0 pointer-events-none"
style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1">
<rect x="0" y="0" width="100" height="100" fill="lightgray"/><circle cx="50" cy="50" r="40" fill="lightgray" stroke="white" stroke-width="2"/></svg>');
background-size: 150px; background-repeat: no-repeat; background-position: center top;">
</div>
<div class="relative p-6 flex flex-col items-center text-center">
<img src="https://picsum.photos/id/1015/300/200" alt="Strategy Development" class="rounded-lg mb-4 w-full h-48 object-cover object-center border border-gray-100 dark:border-gray-600 shadow-sm">
<h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Strategy Development</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4 flex-grow">
Crafting innovative strategies to navigate complex markets and achieve sustainable growth.
</p>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
Learn More <span aria-hidden="true">→</span>
</a>
</div>
</article>
<!-- Service Card 2 -->
<article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300
overflow-hidden border border-gray-200 dark:border-gray-700
transform hover:-translate-y-1 group-hover:scale-[0.99] group-hover:first:scale-100
relative pb-6">
<div class="absolute inset-0 pointer-events-none"
style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1">
<rect x="0" y="0" width="100" height="100" fill="lightgray"/><path d="M20 50 L80 50 M50 20 L50 80" stroke="white" stroke-width="2"/></svg>');
background-size: 150px; background-repeat: no-repeat; background-position: center top;">
</div>
<div class="relative p-6 flex flex-col items-center text-center">
<img src="https://picsum.photos/id/1041/300/200" alt="Operations Optimization" class="rounded-lg mb-4 w-full h-48 object-cover object-center border border-gray-100 dark:border-gray-600 shadow-sm">
<h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Operations Optimization</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4 flex-grow">
Streamlining processes and enhancing efficiency to maximize your operational performance.
</p>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
Learn More <span aria-hidden="true">→</span>
</a>
</div>
</article>
<!-- Service Card 3 -->
<article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300
overflow-hidden border border-gray-200 dark:border-gray-700
transform hover:-translate-y-1 group-hover:scale-[0.99] group-hover:first:scale-100
relative pb-6">
<div class="absolute inset-0 pointer-events-none"
style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1">
<rect x="0" y="0" width="100" height="100" fill="lightgray"/><path d="M10 90 L90 10 L80 90 L10 90 Z" fill="lightgray" stroke="white" stroke-width="2"/></svg>');
background-size: 150px; background-repeat: no-repeat; background-position: center top;">
</div>
<div class="relative p-6 flex flex-col items-center text-center">
<img src="https://picsum.photos/id/1060/300/200" alt="Digital Transformation" class="rounded-lg mb-4 w-full h-48 object-cover object-center border border-gray-100 dark:border-gray-600 shadow-sm">
<h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Digital Transformation</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4 flex-grow">
Guiding your journey through digital innovation, from adoption to full integration.
</p>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
Learn More <span aria-hidden="true">→</span>
</a>
</div>
</article>
</div>
</div>
</div>Composants associés
ArtDecoEducationalGrid
Un composant de mise en page de grille complexe et réactif pour les plateformes éducatives, stylisé avec des motifs géométriques Art déco et de riches couleurs d’automne. Comprend la prise en charge du mode sombre et plusieurs éléments interactifs.
Watercolor_Artistic_Dashboard_Grid_Layout
Un composant de mise en page de grille de tableau de bord réactif avec une esthétique aquarelle/artistique, utilisant une palette de couleurs monochromatique. Les fonctionnalités incluent des cartes avec des arrière-plans doux, des ombres subtiles et la prise en charge du mode sombre pour la visualisation des données et les panneaux de contrôle.
Mise en page de réservation de la grille dégradée
Un composant de mise en page de grille complexe et réactif pour les systèmes de réservation, avec des dégradés de couleurs triadiques, des transitions fluides et la prise en charge du mode sombre. Conçu avec plusieurs éléments interactifs.