Composant Cartes thermiques
Composant de carte thermique 3D avec une palette de couleurs analogue, adapté à un portfolio. Il est réactif et prend en charge le mode sombre.
HTML Code
<div class="p-8 dark:bg-gray-900 min-h-screen">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-6 text-center">3D Heat Map Portfolio</h2>
<!-- Responsive Grid for Heat Map Squares -->
<div class="grid grid-cols-7 sm:grid-cols-14 md:grid-cols-21 lg:grid-cols-28 gap-1">
{[...Array(98)].map((_, i) => (
<div key={i} class="w-6 h-6 rounded-md shadow-md transform hover:scale-110 transition-transform duration-200"
style={`background-color: hsl(${10 + i * 2}, 70%, ${50 + (i % 2) * 5}%); transform: rotateX(15deg) rotateY(15deg);`}></div>
))}
</div>
<div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Project 1 -->
<div class="bg-gradient-to-br from-green-300 to-teal-400 dark:from-green-700 dark:to-teal-800 p-6 rounded-lg shadow-xl transform transition duration-300 hover:scale-105">
<h3 class="text-2xl font-semibold text-white mb-3">Project Alpha Insights</h3>
<p class="text-white text-opacity-90 leading-relaxed">Showcasing data trends with a unique 3D heat map visualization. This interactive element provides deep insights into user engagement over time, making complex data easily digestible for stakeholders.</p>
<img src="https://picsum.photos/400/250?random=1" alt="Project Alpha" class="mt-4 rounded-lg shadow-md">
</div>
<!-- Project 2 -->
<div class="bg-gradient-to-br from-blue-300 to-indigo-400 dark:from-blue-700 dark:to-indigo-800 p-6 rounded-lg shadow-xl transform transition duration-300 hover:scale-105">
<h3 class="text-2xl font-semibold text-white mb-3">User Flow Analytics</h3>
<p class="text-white text-opacity-90 leading-relaxed">A detailed heat map demonstrating user navigation paths on a e-commerce platform. The 3D perspective highlights popular routes and potential bottlenecks, informing design optimizations.</p>
<img src="https://picsum.photos/400/250?random=2" alt="Project Beta" class="mt-4 rounded-lg shadow-md">
</div>
</div>
<div class="mt-12 text-center">
<h3 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Meet the Creator</h3>
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-24 h-24 rounded-full mx-auto mb-4 shadow-lg">
<p class="text-gray-700 dark:text-gray-300 text-lg">John Doe, Data Visualization Specialist</p>
<p class="text-gray-600 dark:text-gray-400 text-md mt-2">"Passionate about transforming complex data into beautiful and intuitive visual stories."</p>
</div>
</div>
</div>Composants associés
Composant Cartes thermiques
Un composant de carte thermique réactif conçu avec des effets de glassmorphism, avec des éléments translucides semblables à du verre dépoli et la prise en charge du style de thème sombre, à l’aide de Tailwind CSS.
Composant Cartes thermiques
Un composant de cartes thermiques conçu dans le style du glassmorphism, avec des tons de terre. La mise en page est simple, composée d’éléments de base destinés à une utilisation professionnelle/d’entreprise, et prend en charge le mode sombre.
Composant Cartes thermiques
Un composant de cartes thermiques réactives conçu avec une esthétique rétro/vintage, intégrant la prise en charge du thème sombre. Il comporte des sections pour un titre, un sous-titre et une carte avec des zones surlignées par la chaleur, avec des images aléatoires supplémentaires et des avatars pour un look nostalgique.