feat: enhance UI with metallic gradient cards - admin and mobile consistent color schemes
This commit is contained in:
ace committed
1 parent
337351dd06
commit
2f79d1547f
8 files changed
+55
-50
No files matched your search
@@ -107,7 +107,7 @@ export default function Home() {
|
||||
{/* Main Content Grid */}
|
||||
<div className="space-y-6 pb-12">
|
||||
{/* User Management - Full Width */}
|
||||
<div className="bg-white rounded-2xl shadow-lg border border-slate-200/80 p-7 hover:shadow-xl transition-shadow">
|
||||
<div className="bg-gradient-to-br from-slate-50 via-blue-50/30 to-slate-50 rounded-2xl shadow-lg border border-slate-200/50 p-7 hover:shadow-2xl transition-all duration-300 backdrop-blur-sm">
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-slate-900">Active Athletes</h2>
|
||||
|
||||
@@ -79,7 +79,7 @@ export function AnalyticsDashboard() {
|
||||
<div className="space-y-4">
|
||||
{/* Key Metrics Cards - 3 columns */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
<div className="bg-gradient-to-br from-blue-600 via-cyan-500 to-teal-500 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white">
|
||||
<div className="bg-gradient-to-br from-blue-700 via-cyan-500 to-blue-600 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white">
|
||||
<p className="text-xs uppercase tracking-wide font-bold text-white mb-2">Total Athletes</p>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<div className="text-2xl font-black text-white">{totalUsers}</div>
|
||||
@@ -87,7 +87,7 @@ export function AnalyticsDashboard() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-emerald-600 via-teal-500 to-cyan-500 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white">
|
||||
<div className="bg-gradient-to-br from-amber-700 via-yellow-500 to-amber-600 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white">
|
||||
<p className="text-xs uppercase tracking-wide font-bold text-white mb-2">Total Revenue</p>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<div className="text-2xl font-black text-white">${totalRevenue.toLocaleString()}</div>
|
||||
@@ -95,7 +95,7 @@ export function AnalyticsDashboard() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-purple-600 via-pink-500 to-blue-500 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white">
|
||||
<div className="bg-gradient-to-br from-pink-700 via-fuchsia-500 to-pink-600 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white">
|
||||
<p className="text-xs uppercase tracking-wide font-bold text-white mb-2">Active Members</p>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<div className="text-2xl font-black text-white">{activeMembers}</div>
|
||||
@@ -106,7 +106,7 @@ export function AnalyticsDashboard() {
|
||||
|
||||
{/* Charts - 3 Columns Horizontal */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
<div className="bg-gradient-to-br from-blue-600 via-cyan-500 to-teal-500 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all">
|
||||
<div className="bg-gradient-to-br from-blue-700 via-cyan-500 to-blue-600 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all">
|
||||
<div className="mb-3">
|
||||
<h3 className="text-sm font-bold text-white">User Growth Trend</h3>
|
||||
<p className="text-xs text-blue-100">Last 6 months performance</p>
|
||||
@@ -116,20 +116,20 @@ export function AnalyticsDashboard() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-emerald-600 via-teal-500 to-cyan-500 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all">
|
||||
<div className="bg-gradient-to-br from-amber-700 via-yellow-500 to-amber-600 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all">
|
||||
<div className="mb-3">
|
||||
<h3 className="text-sm font-bold text-white">Membership Mix</h3>
|
||||
<p className="text-xs text-emerald-100">Distribution breakdown</p>
|
||||
<p className="text-xs text-amber-100">Distribution breakdown</p>
|
||||
</div>
|
||||
<div className="h-48 overflow-auto">
|
||||
<MembershipDistributionChart data={membershipData} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-purple-600 via-pink-500 to-blue-500 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all">
|
||||
<div className="bg-gradient-to-br from-pink-700 via-fuchsia-500 to-pink-600 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all">
|
||||
<div className="mb-3">
|
||||
<h3 className="text-sm font-bold text-white">Revenue Stream</h3>
|
||||
<p className="text-xs text-purple-100">Monthly earnings</p>
|
||||
<p className="text-xs text-pink-100">Monthly earnings</p>
|
||||
</div>
|
||||
<div className="h-48 overflow-auto">
|
||||
<RevenueChart data={revenueData} />
|
||||
|
||||
@@ -13,39 +13,39 @@ interface StatsCardProps {
|
||||
export function StatsCard({ title, value, change, trend, icon: Icon, color = "blue" }: StatsCardProps) {
|
||||
const colorStyles = {
|
||||
blue: {
|
||||
bg: "from-blue-600 via-cyan-500 to-teal-500",
|
||||
bg: "from-blue-700 via-cyan-500 to-blue-600",
|
||||
text: "text-white",
|
||||
light: "from-blue-50 to-cyan-50",
|
||||
badge: "bg-blue-100 text-blue-700",
|
||||
icon: "bg-blue-100/50 text-blue-600",
|
||||
badge: "bg-blue-200/60 text-blue-900 backdrop-blur-sm",
|
||||
icon: "bg-white/20 text-white backdrop-blur-sm",
|
||||
},
|
||||
green: {
|
||||
bg: "from-emerald-600 via-teal-500 to-cyan-500",
|
||||
bg: "from-pink-700 via-fuchsia-500 to-pink-600",
|
||||
text: "text-white",
|
||||
light: "from-emerald-50 to-teal-50",
|
||||
badge: "bg-emerald-100 text-emerald-700",
|
||||
icon: "bg-emerald-100/50 text-emerald-600",
|
||||
light: "from-pink-50 to-rose-50",
|
||||
badge: "bg-pink-200/60 text-pink-900 backdrop-blur-sm",
|
||||
icon: "bg-white/20 text-white backdrop-blur-sm",
|
||||
},
|
||||
purple: {
|
||||
bg: "from-purple-600 via-pink-500 to-blue-500",
|
||||
bg: "from-amber-700 via-yellow-500 to-amber-600",
|
||||
text: "text-white",
|
||||
light: "from-purple-50 to-blue-50",
|
||||
badge: "bg-purple-100 text-purple-700",
|
||||
icon: "bg-purple-100/50 text-purple-600",
|
||||
light: "from-amber-50 to-yellow-50",
|
||||
badge: "bg-amber-200/60 text-amber-900 backdrop-blur-sm",
|
||||
icon: "bg-white/20 text-white backdrop-blur-sm",
|
||||
},
|
||||
orange: {
|
||||
bg: "from-orange-600 via-red-500 to-pink-500",
|
||||
bg: "from-emerald-700 via-teal-500 to-emerald-600",
|
||||
text: "text-white",
|
||||
light: "from-orange-50 to-red-50",
|
||||
badge: "bg-orange-100 text-orange-700",
|
||||
icon: "bg-orange-100/50 text-orange-600",
|
||||
light: "from-emerald-50 to-teal-50",
|
||||
badge: "bg-emerald-200/60 text-emerald-900 backdrop-blur-sm",
|
||||
icon: "bg-white/20 text-white backdrop-blur-sm",
|
||||
},
|
||||
};
|
||||
|
||||
const styles = colorStyles[color];
|
||||
|
||||
return (
|
||||
<Card className={`bg-gradient-to-br ${styles.bg} border-0 shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden group h-full`}>
|
||||
<Card className={`bg-gradient-to-br ${styles.bg} border-0 shadow-2xl hover:shadow-2xl transition-all duration-500 overflow-hidden group h-full relative before:absolute before:inset-0 before:bg-gradient-to-br before:from-white/10 before:to-transparent before:pointer-events-none`}>
|
||||
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2.5 pt-5 px-5">
|
||||
<CardTitle className={`text-xs font-bold uppercase tracking-wider ${styles.text} leading-tight max-w-[70%]`}>
|
||||
{title}
|
||||
|
||||
Reference in new issue
Block a user