Composants
Composants de visualisation de données
Luxury_Premium_Grayscale_Dating_Social_Data_Visualization_Component
Luxury_Premium_Grayscale_Dating_Social_Data_Visualization_Component
Un composant de visualisation de données élégant et sophistiqué conçu pour les plateformes de rencontres et les réseaux sociaux, avec une palette de couleurs en niveaux de gris et une mise en page réactive avec prise en charge du mode sombre. Affiche les statistiques des utilisateurs et les mesures de connexion.
HTML Code
<section class="font-sans bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-extrabold tracking-tight text-center mb-12 dark:text-gray-50">
Your Connection Insights
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Card 1: Matches Overview -->
<div class="bg-neutral-100 dark:bg-neutral-900 rounded-xl shadow-lg p-8 transform hover:scale-105 transition-all duration-300 ease-in-out border border-neutral-200 dark:border-neutral-800">
<div class="flex items-center mb-6">
<svg class="h-10 w-10 text-neutral-600 dark:text-neutral-400 mr-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
<h3 class="text-2xl font-semibold text-neutral-800 dark:text-neutral-200">Total Matches</h3>
</div>
<p class="text-6xl font-bold text-neutral-900 dark:text-neutral-50 mb-4">1,245</p>
<p class="text-neutral-600 dark:text-neutral-400">You've made <span class="font-medium text-neutral-800 dark:text-neutral-200">23% more matches</span> this month than last.</p>
<div class="h-2 bg-neutral-300 dark:bg-neutral-700 rounded-full mt-6">
<div class="w-[75%] h-full bg-neutral-600 dark:bg-neutral-400 rounded-full"></div>
</div>
<p class="text-neutral-500 dark:text-neutral-500 text-sm mt-2">Match rate: 75%</p>
</div>
<!-- Card 2: Messages Sent/Received -->
<div class="bg-neutral-100 dark:bg-neutral-900 rounded-xl shadow-lg p-8 transform hover:scale-105 transition-all duration-300 ease-in-out border border-neutral-200 dark:border-neutral-800">
<div class="flex items-center mb-6">
<svg class="h-10 w-10 text-neutral-600 dark:text-neutral-400 mr-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg>
<h3 class="text-2xl font-semibold text-neutral-800 dark:text-neutral-200">Conversations</h3>
</div>
<div class="flex justify-between items-end mb-4">
<div>
<p class="text-5xl font-bold text-neutral-900 dark:text-neutral-50 leading-none">890</p>
<p class="text-lg text-neutral-600 dark:text-neutral-400">Messages Sent</p>
</div>
<div>
<p class="text-5xl font-bold text-neutral-900 dark:text-neutral-50 leading-none">785</p>
<p class="text-lg text-neutral-600 dark:text-neutral-400">Messages Received</p>
</div>
</div>
<p class="text-neutral-600 dark:text-neutral-400">You initiated <span class="font-medium text-neutral-800 dark:text-neutral-200">55% of your conversations</span> this week.</p>
<div class="flex mt-6 gap-2">
<div class="flex-1 h-3 bg-neutral-600 dark:bg-neutral-400 rounded-full"></div>
<div class="flex-1 h-3 bg-neutral-300 dark:bg-neutral-700 rounded-full"></div>
</div>
<p class="text-neutral-500 dark:text-neutral-500 text-sm mt-2 flex justify-between"><span>Your initiative</span><span>Theirs</span></p>
</div>
<!-- Card 3: Profile Views -->
<div class="bg-neutral-100 dark:bg-neutral-900 rounded-xl shadow-lg p-8 transform hover:scale-105 transition-all duration-300 ease-in-out border border-neutral-200 dark:border-neutral-800">
<div class="flex items-center mb-6">
<svg class="h-10 w-10 text-neutral-600 dark:text-neutral-400 mr-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
</svg>
<h3 class="text-2xl font-semibold text-neutral-800 dark:text-neutral-200">Profile Activity</h3>
</div>
<div class="flex items-end mb-4">
<p class="text-6xl font-bold text-neutral-900 dark:text-neutral-50 leading-none">3,421</p>
<p class="text-xl text-neutral-600 dark:text-neutral-400 ml-3">Views</p>
</div>
<p class="text-neutral-600 dark:text-neutral-400">Your profile was viewed <span class="font-medium text-neutral-800 dark:text-neutral-200">15% more often</span> on Sundays.</p>
<div class="mt-6">
<div class="w-full bg-neutral-300 dark:bg-neutral-700 rounded-full h-8 flex items-center justify-between overflow-hidden relative">
<div class="absolute left-0 top-0 h-full w-[60%] bg-neutral-600 dark:bg-neutral-400 rounded-full"></div>
<span class="absolute text-sm font-semibold text-white dark:text-neutral-900 z-10 p-2">60% New Views</span>
<span class="absolute text-sm font-semibold text-neutral-900 dark:text-neutral-50 z-10 right-0 p-2">40% Repeat Views</span>
</div>
</div>
<p class="text-neutral-500 dark:text-neutral-500 text-sm mt-2">Views in last 30 days</p>
</div>
<!-- Card 4: Top Interests/Hobbies -->
<div class="lg:col-span-2 bg-neutral-100 dark:bg-neutral-900 rounded-xl shadow-lg p-8 transform hover:scale-105 transition-all duration-300 ease-in-out border border-neutral-200 dark:border-neutral-800">
<div class="flex items-center mb-6">
<svg class="h-10 w-10 text-neutral-600 dark:text-neutral-400 mr-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.17l-.768.769a9 9 0 00-6.19 6.19l-.769.769a9 9 0 000 12.728l.769.769a9 9 0 006.19 6.19l.769.768a9 9 0 0012.728 0l.768-.769a9 9 0 006.19-6.19l.769-.769a9 9 0 000-12.728l-.769-.768a9 9 0 00-6.19-6.19l-.768-.769A9 9 0 0011.049 2.17z"></path>
</svg>
<h3 class="text-2xl font-semibold text-neutral-800 dark:text-neutral-200">Shared Interests</h3>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-neutral-600 dark:text-neutral-400 mb-6">
<div class="flex items-center"><span class="w-3 h-3 bg-neutral-600 dark:bg-neutral-400 rounded-full mr-2"></span>Reading (<span class="font-medium text-neutral-800 dark:text-neutral-200">78%</span> matches)</div>
<div class="flex items-center"><span class="w-3 h-3 bg-neutral-500 dark:bg-neutral-500 rounded-full mr-2"></span>Traveling (<span class="font-medium text-neutral-800 dark:text-neutral-200">65%</span> matches)</div>
<div class="flex items-center"><span class="w-3 h-3 bg-neutral-400 dark:bg-neutral-600 rounded-full mr-2"></span>Cooking (<span class="font-medium text-neutral-800 dark:text-neutral-200">52%</span> matches)</div>
<div class="flex items-center"><span class="w-3 h-3 bg-neutral-300 dark:bg-neutral-700 rounded-full mr-2"></span>Hiking (<span class="font-medium text-neutral-800 dark:text-neutral-200">47%</span> matches)</div>
</div>
<p class="text-neutral-600 dark:text-neutral-400 mb-4">These are the top interests you share with your connections.</p>
<div class="flex justify-around mt-6">
<div class="text-center">
<img class="h-16 w-16 rounded-full mx-auto mb-2 border-2 border-neutral-400 dark:border-neutral-600 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<p class="text-sm font-semibold text-neutral-800 dark:text-neutral-200">@Alex</p>
<p class="text-xs text-neutral-500 dark:text-neutral-500">Reading</p>
</div>
<div class="text-center">
<img class="h-16 w-16 rounded-full mx-auto mb-2 border-2 border-neutral-400 dark:border-neutral-600 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<p class="text-sm font-semibold text-neutral-800 dark:text-neutral-200">@Sarah</p>
<p class="text-xs text-neutral-500 dark:text-neutral-500">Traveling</p>
</div>
<div class="text-center">
<img class="h-16 w-16 rounded-full mx-auto mb-2 border-2 border-neutral-400 dark:border-neutral-600 object-cover" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
<p class="text-sm font-semibold text-neutral-800 dark:text-neutral-200">@Mark</p>
<p class="text-xs text-neutral-500 dark:text-neutral-500">Cooking</p>
</div>
</div>
</div>
<!-- Card 5: Geographic Distribution (Placeholder) -->
<div class="bg-neutral-100 dark:bg-neutral-900 rounded-xl shadow-lg p-8 transform hover:scale-105 transition-all duration-300 ease-in-out border border-neutral-200 dark:border-neutral-800">
<div class="flex items-center mb-6">
<svg class="h-10 w-10 text-neutral-600 dark:text-neutral-400 mr-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<h3 class="text-2xl font-semibold text-neutral-800 dark:text-neutral-200">Location Insights</h3>
</div>
<img src="https://picsum.photos/400/250?random=1" alt="Placeholder map" class="rounded-lg mb-4 w-full h-32 object-cover object-center border border-neutral-200 dark:border-neutral-800">
<p class="text-neutral-600 dark:text-neutral-400 mb-2">Most of your current matches are from <span class="font-medium text-neutral-800 dark:text-neutral-200">major metropolitan areas</span>.</p>
<a href="#" class="text-neutral-600 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200 text-sm font-medium underline">View detailed map</a>
</div>
</div>
</div>
</section>Composants associés
Composant Composants de visualisation de données
Un composant simple de visualisation de données conçu pour le commerce électronique, doté d’une interface en mode sombre avec des couleurs vives.
Composant de visualisation des données
Un composant de visualisation de données réactif conçu avec une esthétique rétro/vintage inspirée des années 80 et 90, avec la prise en charge des thèmes sombres et l’utilisation d’images de remplacement.
Composante Visualisation de Données - Agriculture Industrielle
Un composant de visualisation de données à l’esthétique industrielle et brute, utilisant une palette de couleurs violet/violet, adapté à l’agriculture et aux sites Web agricoles. Il affiche les indicateurs clés dans une mise en page réactive avec prise en charge du mode sombre.