Address ESlint console statements

app/components/ErrorBoundary.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import React, { Component, type ReactNode } from "react";
+import { logger } from "../../lib/logger";
 
 interface ErrorBoundaryProps {
   children: ReactNode;
@@ -24,7 +25,7 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
 
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
     // Log the error to an error reporting service
-    console.error("ErrorBoundary caught an error:", error, errorInfo);
+    logger.error("ErrorBoundary caught an error:", error, errorInfo);
   }
 
   render() {

app/components/QuoteBlock.tsx

@@ -3,6 +3,7 @@
 import { useState, memo } from "react";
 import Image from "next/image";
 import QuoteDecor from "./QuoteDecor";
+import { logger } from "../../lib/logger";
 
 interface QuoteBlockProps {
   variant?: "compact" | "standard" | "extended";
@@ -109,7 +110,7 @@ const QuoteBlock = memo<QuoteBlockProps>(
 
     // Error handling functions
     const handleImageError = (error: unknown) => {
-      console.warn(
+      logger.warn(
         `QuoteBlock: Failed to load avatar image for ${author}:`,
         error,
       );
@@ -135,7 +136,7 @@ const QuoteBlock = memo<QuoteBlockProps>(
 
     // Validate required props
     if (!quote || !author) {
-      console.error("QuoteBlock: Missing required props (quote or author)");
+      logger.error("QuoteBlock: Missing required props (quote or author)");
       if (onError) {
         onError({
           type: "missing_props",

app/components/RuleStack.tsx

@@ -5,6 +5,7 @@ import Image from "next/image";
 import RuleCard from "./RuleCard";
 import Button from "./Button";
 import { getAssetPath } from "../../lib/assetUtils";
+import { logger } from "../../lib/logger";
 
 interface RuleStackProps {
   className?: string;
@@ -38,7 +39,7 @@ const RuleStack = memo<RuleStackProps>(({ className = "" }) => {
         });
       }
     }
-    console.log(`${templateName} template clicked`);
+    logger.debug(`${templateName} template clicked`);
   };
 
   return (

app/components/WebVitalsDashboard.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect, memo } from "react";
+import { logger } from "../../lib/logger";
 
 interface VitalData {
   value: number;
@@ -50,7 +51,7 @@ const WebVitalsDashboard = memo(() => {
         const data = (await response.json()) as { metrics?: Metrics };
         setMetrics(data.metrics || {});
       } catch (error) {
-        console.error("Error fetching web vitals:", error);
+        logger.error("Error fetching web vitals:", error);
       } finally {
         setLoading(false);
       }