Complete UI overhaul with luxury design: 3D agent carousel, credits system, enhanced sidebar, profile features, and logo updates

src/components/SidebarNav.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+
+type Item = {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+};
+
+interface SidebarNavProps {
+  items: Item[];
+  activeId: string;
+  onSelect: (id: string) => void;
+}
+
+const SidebarNav: React.FC<SidebarNavProps> = ({ items, activeId, onSelect }) => {
+  return (
+    <aside className="w-20 md:w-64 border-r border-luxury-gold/25 bg-gradient-to-b from-deep-forest/90 via-deep-forest/80 to-rich-brown/70 backdrop-blur-xl sticky top-16 md:top-20 h-[calc(100vh-4rem)] md:h-[calc(100vh-5rem)] overflow-hidden">
+      {/* Decorative background elements */}
+      <div className="absolute inset-0 pointer-events-none">
+        <div className="absolute -top-20 -left-10 w-40 h-40 bg-luxury-gold/5 rounded-full blur-3xl"></div>
+        <div className="absolute -bottom-20 -right-10 w-32 h-32 bg-bronze/5 rounded-full blur-2xl"></div>
+        <div className="absolute top-1/2 left-0 w-0.5 h-32 bg-gradient-to-b from-transparent via-luxury-gold/20 to-transparent"></div>
+      </div>
+      
+      {/* Premium border accent */}
+      <div className="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-luxury-gold/40 to-transparent"></div>
+      
+      <nav className="relative p-3 md:p-6 space-y-2">
+        {/* Navigation title */}
+        <div className="hidden md:block mb-6">
+          <h3 className="text-luxury-gold/80 text-xs font-montserrat font-semibold uppercase tracking-wider mb-2">Navigation</h3>
+          <div className="w-8 h-0.5 bg-gradient-to-r from-luxury-gold to-transparent rounded-full"></div>
+        </div>
+        
+        {items.map((it, index) => {
+          const isActive = activeId === it.id;
+          return (
+            <button
+              key={it.id}
+              onClick={() => onSelect(it.id)}
+              className={`group relative w-full flex items-center gap-3 md:gap-4 px-4 py-4 rounded-2xl transition-all duration-300 transform hover:scale-[1.02] ${
+                isActive 
+                  ? 'bg-gradient-to-r from-luxury-gold/25 to-brass/20 border border-luxury-gold/50 shadow-[0_8px_32px_rgba(197,157,89,0.15)] text-cream' 
+                  : 'border border-transparent hover:border-luxury-gold/30 hover:bg-gradient-to-r hover:from-luxury-gold/10 hover:to-transparent text-cream/80 hover:text-cream'
+              }`}
+              style={{
+                animationDelay: `${index * 100}ms`
+              }}
+            >
+              {/* Icon container with enhanced styling */}
+              <div className={`relative w-8 h-8 rounded-xl flex items-center justify-center transition-all duration-300 ${
+                isActive 
+                  ? 'bg-gradient-to-br from-luxury-gold/30 to-brass/30 shadow-lg' 
+                  : 'bg-deep-forest/50 group-hover:bg-luxury-gold/20'
+              }`}>
+                <span className={`text-lg transition-all duration-300 ${
+                  isActive ? 'scale-110' : 'group-hover:scale-105'
+                }`}>
+                  {it.icon}
+                </span>
+                {/* Active indicator dot */}
+                {isActive && (
+                  <div className="absolute -right-1 -top-1 w-3 h-3 bg-luxury-gold rounded-full shadow-[0_0_8px_rgba(197,157,89,0.6)] animate-pulse"></div>
+                )}
+              </div>
+              
+              {/* Label with enhanced typography */}
+              <div className="hidden md:block flex-1">
+                <span className={`text-sm font-montserrat font-medium transition-all duration-300 ${
+                  isActive ? 'font-semibold' : 'group-hover:font-medium'
+                }`}>
+                  {it.label}
+                </span>
+                {/* Subtle underline for active item */}
+                {isActive && (
+                  <div className="w-full h-0.5 bg-gradient-to-r from-luxury-gold/60 to-transparent rounded-full mt-1"></div>
+                )}
+              </div>
+              
+              {/* Hover effect overlay */}
+              <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-luxury-gold/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
+              
+              {/* Active selection indicator */}
+              {isActive && (
+                <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-gradient-to-b from-luxury-gold to-brass rounded-r-full shadow-[0_0_8px_rgba(197,157,89,0.4)]"></div>
+              )}
+            </button>
+          );
+        })}
+        
+        {/* Bottom decorative element */}
+        <div className="hidden md:block mt-8 pt-6">
+          <div className="flex items-center justify-center">
+            <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-luxury-gold/10 to-bronze/5 border border-luxury-gold/20 flex items-center justify-center">
+              <div className="w-6 h-6 rounded-lg bg-luxury-gold/20 animate-pulse"></div>
+            </div>
+          </div>
+        </div>
+      </nav>
+      
+      {/* Bottom gradient fade */}
+      <div className="absolute bottom-0 left-0 w-full h-16 bg-gradient-to-t from-deep-forest/50 to-transparent pointer-events-none"></div>
+    </aside>
+  );
+};
+
+export default SidebarNav;