Remove old favicon and update Caddyfile for improved local development configuration; add debug logging and health checks. Update package.json and package-lock.json to include boring-avatars dependency. Refactor UserProfiles and UserSessions components to utilize boring-avatars for user representation. Adjust styling in various components for better layout and responsiveness.

docs/Caddyfile

@@ -1,17 +1,19 @@
 # Caddyfile for docs
-{
-    # Global options
-    auto_https off      # Disable automatic HTTPS
-    local_certs         # Use local certificates for development
+
+{ # Global options
+auto_https off # Disable automatic HTTPS
+local_certs # Use local certificates for development
+debug # Enable debug logging
 }
 
-{$DOMAIN_NAME:localhost} {
-    # Enable compression
-    encode zstd gzip
+localhost:80 { # Enable compression
+encode zstd gzip
 
     # Proxy all requests to the docs service
-    handle {
-        reverse_proxy docs_app:3000
+    reverse_proxy docs_app:3000 {
+        # Add health checks and timeouts
+        health_timeout 5s
+        health_status 200
     }
 
     # Security headers
@@ -20,4 +22,12 @@
         X-Frame-Options DENY
         Referrer-Policy strict-origin-when-cross-origin
     }
-} 
+
+    # Debug logs
+    log {
+        output stdout
+        format console
+        level DEBUG
+    }
+
+}

docs/package-lock.json

@@ -10,6 +10,7 @@
         "@radix-ui/react-accordion": "^1.2.7",
         "@tailwindcss/postcss": "^4.1.4",
         "@theguild/remark-mermaid": "^0.3.0",
+        "boring-avatars": "^1.11.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "country-flag-icons": "^1.5.18",
@@ -2179,6 +2180,11 @@
         "react": ">=16.8"
       }
     },
+    "node_modules/boring-avatars": {
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/boring-avatars/-/boring-avatars-1.11.2.tgz",
+      "integrity": "sha512-3+wkwPeObwS4R37FGXMYViqc4iTrIRj5yzfX9Qy4mnpZ26sX41dGMhsAgmKks1r/uufY1pl4vpgzMWHYfJRb2A=="
+    },
     "node_modules/braces": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",

docs/package.json

@@ -12,6 +12,7 @@
     "@radix-ui/react-accordion": "^1.2.7",
     "@tailwindcss/postcss": "^4.1.4",
     "@theguild/remark-mermaid": "^0.3.0",
+    "boring-avatars": "^1.11.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "country-flag-icons": "^1.5.18",

docs/src/app/components/Cards/AdvancedFilters.jsx

@@ -105,7 +105,7 @@ export function AdvancedFilters() {
     <div className="bg-neutral-800/50 p-6 rounded-xl border border-neutral-700">
       <h3 className="text-xl font-semibold mb-3">Advanced Filters</h3>
       <p className="text-neutral-300">Drill down into your data with advanced filters across over a dozen dimensions.</p>
-      <div className="flex flex-wrap justify-center gap-4 mt-4">  
+      <div className="flex flex-wrap justify-center gap-3.5 mt-8">  
         {FilterOptions.map((option) => (
           <div key={option.value} className="flex items-center gap-2 text-base bg-neutral-800 border border-neutral-700 py-1 px-2 rounded-md">
             {option.icon}

docs/src/app/components/Cards/EventTracking.jsx

@@ -25,6 +25,10 @@ export function EventTracking() {
             <span className="text-neutral-400 text-sm w-28">user_segment</span>
             <span className="text-white text-sm ml-2 font-medium">new_visitor</span>
           </div>
+          <div className="flex bg-neutral-800 p-2 rounded">
+            <span className="text-neutral-400 text-sm w-28">ab_test</span>
+            <span className="text-white text-sm ml-2 font-medium">version-a</span>
+          </div>
         </div>
       </div>
     </div>

docs/src/app/components/Cards/UserBehaviorTrends.jsx

@@ -16,7 +16,7 @@ export function UserBehaviorTrends() {
         <div className="flex mt-2">
           {/* Hours column */}
           <div className="w-10 flex-shrink-0">
-            <div className="h-5"></div> {/* Empty space for top row with day labels */}
+            <div className="h-4"></div> {/* Empty space for top row with day labels */}
             {[0, 6, 12, 18].map(hour => (
               <div key={hour} className="h-4 text-xs flex items-center justify-end pr-2 text-neutral-400 my-2">
                 {hour === 0 ? '12am' : hour === 12 ? '12pm' : hour > 12 ? `${hour-12}pm` : `${hour}am`}
@@ -101,7 +101,7 @@ export function UserBehaviorTrends() {
         </div>
         
         {/* Legend */}
-        <div className="mt-5 flex items-center justify-center">
+        <div className="mt-3 flex items-center justify-center">
           <div className="flex items-center gap-1">
             <div style={{ backgroundColor: 'rgba(99, 102, 241, 0.1)' }} className="w-3 h-3 rounded-sm"></div>
             <span className="text-xs text-neutral-400">Low</span>

docs/src/app/components/Cards/UserProfiles.jsx

@@ -2,6 +2,9 @@ import { CountryFlag } from "../Country";
 import { Browser } from "../Browser";
 import { OperatingSystem } from "../OperatingSystem";
 import { Laptop } from "lucide-react";
+import Avatar from "boring-avatars";
+
+
 
 export function UserProfiles() {
   return (
@@ -14,11 +17,14 @@ export function UserProfiles() {
           {/* User basic info */}
           <div className="flex-1">
             <div className="flex items-center gap-2 mb-4">
-              <div className="w-10 h-10 rounded-full bg-emerald-600 flex items-center justify-center text-white font-bold">
-                JD
-              </div>
+              <Avatar
+                size={32}
+                name={"bill"}
+                variant="marble"
+                colors={["#226756", "#6eaaa3", "#e8e8e8", "#bbc1e2", "#7182d6"]}
+              />
               <div>
-                <div className="font-medium">User #8a4f3d7e</div>
+                <div className="text-neutral-50">8a4f3d7e</div>
                 <div className="flex items-center gap-2 text-sm text-neutral-400">
                   <CountryFlag country="US" />
                   <OperatingSystem os="macOS" />

docs/src/app/components/Cards/UserSessions.jsx

@@ -2,6 +2,7 @@ import { Clock, FileText, MousePointerClick, Laptop } from "lucide-react";
 import { CountryFlag } from "../Country";
 import { Browser } from "../Browser";
 import { OperatingSystem } from "../OperatingSystem";
+import Avatar from "boring-avatars";
 
 export function UserSessions() {
   return (
@@ -12,11 +13,14 @@ export function UserSessions() {
       <div className="mt-4 bg-neutral-900 p-4 rounded-md">
         <div className="flex justify-between items-center mb-4">
           <div className="flex items-center gap-2">
-            <div className="h-8 w-8 bg-neutral-800 rounded-full flex items-center justify-center flex-shrink-0">
-              <div className="text-sm font-medium">JD</div>
-            </div>
+            <Avatar
+              size={32}
+              name={"billy"}
+              variant="marble"
+              colors={["#226756", "#6eaaa3", "#e8e8e8", "#bbc1e2", "#7182d6"]}
+            />
             <div>
-              <div className="text-sm">Session #2c49ae3</div>
+              <div className="text-sm">2c49ae3</div>
               <div className="text-xs text-neutral-400">Today, 14:22 - 14:36 (14m)</div>
             </div>
           </div>
@@ -27,7 +31,7 @@ export function UserSessions() {
             <Laptop className="w-4 h-4" />
           </div>
         </div>
-        
+{/*         
         <div className="flex gap-2 mb-3">
           <div className="flex items-center gap-1 text-xs bg-blue-500/20 text-blue-400 px-2 py-1 rounded">
             <FileText className="w-3 h-3" />
@@ -37,7 +41,7 @@ export function UserSessions() {
             <MousePointerClick className="w-3 h-3" />
             <span>Events: 2</span>
           </div>
-        </div>
+        </div> */}
         
         {/* Timeline */}
         <div className="px-1 py-2">