Memphis_Marketplace_Charts_Component
Un componente grafico complesso e reattivo con un'estetica Memphis Design, colori complementari audaci, adatto a un mercato multi-vendor. Include il supporto per la modalità oscura ed elementi interattivi.
Codice HTML
<div class="p-4 sm:p-6 md:p-8 bg-pink-100 dark:bg-zinc-900 font-sans min-h-screen flex items-center justify-center">
<div class="w-full max-w-7xl bg-white dark:bg-zinc-800 rounded-3xl shadow-xl overflow-hidden
border-4 border-fuchsia-500 dark:border-teal-400
grid grid-cols-1 lg:grid-cols-3 gap-6 p-6 sm:p-8 lg:p-10
relative">
<!-- Memphis background patterns -->
<div class="absolute inset-0 pointer-events-none overflow-hidden rounded-3xl">
<div class="absolute -bottom-16 -left-16 w-64 h-64 bg-teal-400 dark:bg-fuchsia-600 rounded-full mix-blend-multiply opacity-30"></div>
<div class="absolute -top-20 -right-20 w-80 h-80 bg-fuchsia-500 dark:bg-cyan-500 rounded-full mix-blend-multiply opacity-20"></div>
<div class="absolute top-1/4 left-1/4 w-32 h-32 bg-yellow-300 dark:bg-purple-600 rounded-lg transform rotate-45 mix-blend-multiply opacity-30"></div>
<div class="absolute bottom-1/3 right-1/4 w-48 h-12 bg-blue-400 dark:bg-orange-500 rounded-full mix-blend-multiply opacity-20"></div>
</div>
<!-- Main Content Grid -->
<div class="relative z-10 lg:col-span-2 space-y-6">
<!-- Header -->
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-b-4 border-dashed border-cyan-400 dark:border-yellow-500 pb-6">
<div>
<h1 class="text-4xl sm:text-5xl font-extrabold text-fuchsia-600 dark:text-teal-400 mb-2 leading-tight">Marketplace Insights</h1>
<p class="text-zinc-600 dark:text-zinc-300 text-lg sm:text-xl font-medium">Performance overview for your vendors.</p>
</div>
<button class="px-6 py-3 bg-teal-500 dark:bg-fuchsia-600 text-white rounded-xl shadow-lg
transform hover:scale-105 transition-all duration-300
border-2 border-fuchsia-600 dark:border-teal-500
text-lg font-semibold whitespace-nowrap">View All Reports</button>
</div>
<!-- Main Charts Section -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Sales Volume Chart -->
<div class="bg-violet-100 dark:bg-zinc-700 p-6 rounded-2xl shadow-md border-4 border-fuchsia-400 dark:border-cyan-400">
<h3 class="text-2xl font-bold text-fuchsia-700 dark:text-teal-300 mb-4">Sales Volume by Category</h3>
<div class="h-48 sm:h-64 bg-white dark:bg-zinc-900 rounded-xl flex items-center justify-center border-2 border-slate-300 dark:border-zinc-600 relative overflow-hidden">
<!-- Placeholder for Chart -->
<div class="absolute inset-0 opacity-20 dark:opacity-10 ">
<div class="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-teal-300 to-transparent dark:from-teal-600"></div>
<div class="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-fuchsia-300 to-transparent dark:from-fuchsia-600"></div>
</div>
<p class="text-zinc-500 dark:text-zinc-400 z-10 text-xl">Chart Placeholder</p>
</div>
<div class="text-center mt-4 text-zinc-600 dark:text-zinc-300">
<p class="font-medium">Total Sales: <span class="text-fuchsia-600 dark:text-teal-400 font-bold">$1.2M</span></p>
</div>
</div>
<!-- Vendor Performance Chart -->
<div class="bg-yellow-100 dark:bg-zinc-700 p-6 rounded-2xl shadow-md border-4 border-cyan-400 dark:border-fuchsia-400">
<h3 class="text-2xl font-bold text-cyan-700 dark:text-yellow-300 mb-4">Top 5 Vendor Performance</h3>
<div class="h-48 sm:h-64 bg-white dark:bg-zinc-900 rounded-xl flex items-center justify-center border-2 border-slate-300 dark:border-zinc-600 relative overflow-hidden">
<!-- Placeholder for Chart -->
<div class="absolute inset-0 opacity-20 dark:opacity-10">
<div class="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-fuchsia-300 to-transparent dark:from-fuchsia-600"></div>
<div class="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-teal-300 to-transparent dark:from-teal-600"></div>
</div>
<p class="text-zinc-500 dark:text-zinc-400 z-10 text-xl">Chart Placeholder</p>
</div>
<div class="text-center mt-4 text-zinc-600 dark:text-zinc-300">
<p class="font-medium">Average Rating: <span class="text-cyan-600 dark:text-yellow-400 font-bold">4.7/5</span></p>
</div>
</div>
</div>
<!-- Quick Stats Section -->
<div class="bg-indigo-100 dark:bg-zinc-700 p-6 rounded-2xl shadow-md border-4 border-teal-500 dark:border-purple-400">
<h3 class="text-2xl font-bold text-teal-700 dark:text-purple-300 mb-4">Quick Stats</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
<div class="bg-white dark:bg-zinc-800 p-4 rounded-xl text-center border-2 border-teal-400 dark:border-purple-400 shadow-sm">
<p class="text-3xl font-extrabold text-teal-500 dark:text-purple-300 leading-none">150+</p>
<p class="text-zinc-600 dark:text-zinc-300 text-sm font-medium">Active Vendors</p>
</div>
<div class="bg-white dark:bg-zinc-800 p-4 rounded-xl text-center border-2 border-fuchsia-400 dark:border-cyan-400 shadow-sm">
<p class="text-3xl font-extrabold text-fuchsia-500 dark:text-cyan-300 leading-none">8k+</p>
<p class="text-zinc-600 dark:text-zinc-300 text-sm font-medium">Products Listed</p>
</div>
<div class="bg-white dark:bg-zinc-800 p-4 rounded-xl text-center border-2 border-yellow-400 dark:border-orange-400 shadow-sm">
<p class="text-3xl font-extrabold text-yellow-500 dark:text-orange-300 leading-none">$1.8M</p>
<p class="text-zinc-600 dark:text-zinc-300 text-sm font-medium">Total Commission</p>
</div>
<div class="bg-white dark:bg-zinc-800 p-4 rounded-xl text-center border-2 border-blue-400 dark:border-lime-400 shadow-sm">
<p class="text-3xl font-extrabold text-blue-500 dark:text-lime-300 leading-none">92%</p>
<p class="text-zinc-600 dark:text-zinc-300 text-sm font-medium">Vendor Retention</p>
</div>
</div>
</div>
</div>
<!-- Sidebar / Latest Activity -->
<div class="relative z-10 lg:col-span-1 space-y-6">
<div class="bg-orange-100 dark:bg-zinc-700 p-6 rounded-2xl shadow-md border-4 border-purple-500 dark:border-fuchsia-400">
<h3 class="text-2xl font-bold text-purple-700 dark:text-fuchsia-300 mb-4">Latest Vendor Activity</h3>
<div class="space-y-4">
<div class="flex items-center gap-4 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-orange-300 dark:border-purple-400">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="" class="w-12 h-12 rounded-full border-2 border-purple-400 dark:border-fuchsia-300 shadow-md">
<div>
<p class="font-semibold text-zinc-800 dark:text-zinc-200">Vendor A <span class="text-sm text-zinc-500 dark:text-zinc-400 ml-2">15 min ago</span></p>
<p class="text-zinc-600 dark:text-zinc-300 text-sm">Added <span class="font-bold text-purple-600 dark:text-fuchsia-300">3 new products</span></p>
</div>
</div>
<div class="flex items-center gap-4 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-orange-300 dark:border-purple-400">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="" class="w-12 h-12 rounded-full border-2 border-purple-400 dark:border-fuchsia-300 shadow-md">
<div>
<p class="font-semibold text-zinc-800 dark:text-zinc-200">Vendor B <span class="text-sm text-zinc-500 dark:text-zinc-400 ml-2">1 hour ago</span></p>
<p class="text-zinc-600 dark:text-zinc-300 text-sm">Updated <span class="font-bold text-purple-600 dark:text-fuchsia-300">shipping info</span></p>
</div>
</div>
<div class="flex items-center gap-4 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-orange-300 dark:border-purple-400">
<img src="https://randomuser.me/api/portraits/women/10.jpg" alt="" class="w-12 h-12 rounded-full border-2 border-purple-400 dark:border-fuchsia-300 shadow-md">
<div>
<p class="font-semibold text-zinc-800 dark:text-zinc-200">Vendor C <span class="text-sm text-zinc-500 dark:text-zinc-400 ml-2">3 hours ago</span></p>
<p class="text-zinc-600 dark:text-zinc-300 text-sm">Sold <span class="font-bold text-purple-600 dark:text-fuchsia-300">5 items</span> (electronics)</p>
</div>
</div>
<div class="flex items-center gap-4 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-orange-300 dark:border-purple-400">
<img src="https://randomuser.me/api/portraits/men/50.jpg" alt="" class="w-12 h-12 rounded-full border-2 border-purple-400 dark:border-fuchsia-300 shadow-md">
<div>
<p class="font-semibold text-zinc-800 dark:text-zinc-200">Vendor D <span class="text-sm text-zinc-500 dark:text-zinc-400 ml-2">Yesterday</span></p>
<p class="text-zinc-600 dark:text-zinc-300 text-sm">Responded to <span class="font-bold text-purple-600 dark:text-fuchsia-300">2 customer reviews</span></p>
</div>
</div>
</div>
</div>
<!-- Trending Products -->
<div class="bg-lime-100 dark:bg-zinc-700 p-6 rounded-2xl shadow-md border-4 border-blue-500 dark:border-orange-400">
<h3 class="text-2xl font-bold text-blue-700 dark:text-orange-300 mb-4">Trending Products</h3>
<ul class="space-y-3">
<li class="flex items-center gap-3 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-blue-300 dark:border-orange-400">
<img src="https://picsum.photos/id/198/60/60" alt="Product Image" class="w-16 h-16 object-cover rounded-md border-2 border-blue-400 dark:border-orange-300">
<div>
<p class="font-semibold text-zinc-800 dark:text-zinc-200">Smart Watch X Pro</p>
<p class="text-zinc-600 dark:text-zinc-300 text-sm">Sold: <span class="text-blue-600 dark:text-orange-400 font-bold">120 units</span></p>
</div>
</li>
<li class="flex items-center gap-3 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-blue-300 dark:border-orange-400">
<img src="https://picsum.photos/id/166/60/60" alt="Product Image" class="w-16 h-16 object-cover rounded-md border-2 border-blue-400 dark:border-orange-300">
<div>
<p class="font-semibold text-zinc-800 dark:text-zinc-200">Noise Cancelling Headphones</p>
<p class="text-zinc-600 dark:text-zinc-300 text-sm">Sold: <span class="text-blue-600 dark:text-orange-400 font-bold">95 units</span></p>
</div>
</li>
<li class="flex items-center gap-3 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-blue-300 dark:border-orange-400">
<img src="https://picsum.photos/id/175/60/60" alt="Product Image" class="w-16 h-16 object-cover rounded-md border-2 border-blue-400 dark:border-orange-300">
<div>
<p class="font-semibold text-zinc-800 dark:text-zinc-200">Ergonomic Office Chair</p>
<p class="text-zinc-600 dark:text-zinc-300 text-sm">Sold: <span class="text-blue-600 dark:text-orange-400 font-bold">78 units</span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>Componenti correlati
Componente Grafici
Un componente grafico complesso progettato per siti Web aziendali e aziendali, caratterizzato da un design 3D, una combinazione di colori complementari e una struttura reattiva con supporto per la modalità scura.
Industrial_Chart_Component_Ocean_Blue_Simple
Un componente grafico semplice e reattivo con un'estetica industriale di materie prime che utilizza toni oceano/blu, progettato per organizzazioni senza scopo di lucro/beneficenza. Include il supporto per la modalità scura.
VibranteVetromorfismoGrafico
Un semplice componente del grafico Glassmorphism con colori vivaci, adatto per blog e siti di contenuti. Il componente è reattivo e include il supporto per il tema scuro utilizzando Tailwind CSS.