Update UI styles and dashboard product display

Refined color scheme in AnimatedStatsSection to use indigo instead of pink, and improved gradient backgrounds. In dashboard/content.tsx, updated TopProduct price to support arrays and display revenue per product. UnifiedNotifications received minor style and layout adjustments for better consistency and usability.

app/page.tsx

@@ -13,7 +13,7 @@ export default async function Home() {
     const stats = await getPlatformStatsServer();
 
     return (
-      <div className="flex flex-col min-h-screen bg-black text-white">
+      <div className="relative flex flex-col min-h-screen bg-black text-white">
         <div className="absolute inset-0 bg-gradient-to-br from-indigo-500/10 via-purple-500/5 to-transparent pointer-events-none scale-100" />
         <HomeNavbar />
 

components/animated-stats-section.tsx

@@ -20,9 +20,9 @@ export function AnimatedStatsSection({ stats }: AnimatedStatsProps) {
   return (
     <div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-3">
       <div className="group relative overflow-hidden flex flex-col items-center text-center rounded-xl bg-gradient-to-b from-zinc-900/50 to-black border border-[#1C1C1C] p-6">
-        <div className="absolute inset-0 bg-[#D53F8C]/5 opacity-0 group-hover:opacity-100 transition-opacity" />
+        <div className="absolute inset-0 bg-indigo-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
         <div className="relative flex flex-col items-center">
-          <Package className="h-6 w-6 text-[#D53F8C]" />
+          <Package className="h-6 w-6 text-indigo-500" />
           <div className="mt-4 text-3xl font-bold text-white">
             <AnimatedCounter
               value={stats.orders.completed}
@@ -40,9 +40,9 @@ export function AnimatedStatsSection({ stats }: AnimatedStatsProps) {
       </div>
 
       <div className="group relative overflow-hidden flex flex-col items-center text-center rounded-xl bg-gradient-to-b from-zinc-900/50 to-black border border-[#1C1C1C] p-6">
-        <div className="absolute inset-0 bg-[#D53F8C]/5 opacity-0 group-hover:opacity-100 transition-opacity" />
+        <div className="absolute inset-0 bg-indigo-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
         <div className="relative flex flex-col items-center">
-          <Users className="h-6 w-6 text-[#D53F8C]" />
+          <Users className="h-6 w-6 text-indigo-500" />
           <div className="mt-4 text-3xl font-bold text-white">
             <AnimatedCounter
               value={stats.vendors.total}
@@ -60,9 +60,9 @@ export function AnimatedStatsSection({ stats }: AnimatedStatsProps) {
       </div>
 
       <div className="group relative overflow-hidden flex flex-col items-center text-center rounded-xl bg-gradient-to-b from-zinc-900/50 to-black border border-[#1C1C1C] p-6">
-        <div className="absolute inset-0 bg-[#D53F8C]/5 opacity-0 group-hover:opacity-100 transition-opacity" />
+        <div className="absolute inset-0 bg-indigo-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
         <div className="relative flex flex-col items-center">
-          <CreditCard className="h-6 w-6 text-[#D53F8C]" />
+          <CreditCard className="h-6 w-6 text-indigo-500" />
           <div className="mt-4 text-3xl font-bold text-white">
             <AnimatedCounter
               value={stats.transactions.volume}

components/dashboard/content.tsx

@@ -25,7 +25,7 @@ interface ContentProps {
 interface TopProduct {
   id: string;
   name: string;
-  price: number;
+  price: number | number[];
   image: string;
   count: number;
   revenue: number;
@@ -73,7 +73,7 @@ export default function Content({ username, orderStats }: ContentProps) {
           <h1 className="text-4xl font-bold tracking-tight text-foreground">
             {greeting}, <span className="text-primary">{username}</span>!
           </h1>
-          <p className="text-muted-foreground mt-2 max-w-2xl text-lg">
+          <p className="text-muted-foreground mt-2 text-lg">
             "{randomQuote.text}" — <span className="font-medium">{randomQuote.author}</span>
           </p>
         </div>
@@ -181,14 +181,13 @@ export default function Content({ username, orderStats }: ContentProps) {
                       <div className="flex-grow min-w-0">
                         <h4 className="font-semibold text-lg truncate group-hover:text-primary transition-colors">{product.name}</h4>
                         <div className="flex items-center gap-3 mt-0.5">
-                          <span className="text-sm text-muted-foreground font-medium">£{(Number(product.price) || 0).toFixed(2)}</span>
+                          <span className="text-sm text-muted-foreground font-medium">£{(Number(Array.isArray(product.price) ? product.price[0] : product.price) || 0).toFixed(2)}</span>
-                          <span className="h-1 w-1 rounded-full bg-muted-foreground/30" />
-                          <span className="text-xs text-muted-foreground">ID: {product.id.slice(-6)}</span>
                         </div>
                       </div>
                       <div className="text-right">
                         <div className="text-xl font-bold">{product.count}</div>
-                        <div className="text-xs text-muted-foreground font-medium uppercase tracking-tighter">Units Sold</div>
+                        <div className="text-xs text-muted-foreground font-medium uppercase tracking-tighter mb-1">Units Sold</div>
+                        <div className="text-sm font-semibold text-primary">£{product.revenue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
                       </div>
                     </motion.div>
                   ))}

components/notifications/UnifiedNotifications.tsx

@@ -58,7 +58,7 @@ export default function UnifiedNotifications() {
           )}
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-80">
+      <DropdownMenuContent align="end" className="w-80" collisionPadding={10}>
         <div className="p-2 border-b">
           <Tabs defaultValue="all" value={activeTab} onValueChange={setActiveTab}>
             <TabsList className="grid w-full grid-cols-3">