feat: add animated components for enhanced UI/UX

- Introduced DrawLine component for drawing animations.
- Added LazyRevealImage component for lazy loading images with reveal animations.
- Implemented TextDiffuseReveal for animated text reveals with staggered effects.
- Created TopProgressBar for a dynamic loading indicator.
- Added PointCloud mock for testing animations.
- Developed useReducedMotion hook to handle user preferences for reduced motion.
- Centralized animation configurations in config.ts for easier management.
- Defined animation variants in variants.ts for consistent animation effects.
- Established AnimationProvider to supply global animation settings.
- Created tests for AnimationProvider and useReducedMotion hook.
- Added SVG assets for branding and UI elements.
- Documented frontend review plan and hero circuit board animation plan.

app/components/Logo.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { motion, useReducedMotion } from "framer-motion";
+
 interface LogoProps {
   variant?: "mark" | "wordmark" | "icon";
   size?: "sm" | "md" | "lg" | "xl";
@@ -23,11 +25,12 @@ export function Logo({
   showTagline = false,
 }: Readonly<LogoProps>) {
   const dimensions = sizeMap[size];
+  const shouldReduceMotion = useReducedMotion();
 
   const colors = {
     dark: {
       primary: "#FFFFFF",
-      slash: "#E8FF00",
+      slash: "#CCFF00",
     },
     light: {
       primary: "#0A0A0A",
@@ -41,9 +44,22 @@ export function Logo({
 
   const c = colors[theme];
 
+  const hoverMotion = shouldReduceMotion
+    ? undefined
+    : {
+        scale: 1.03,
+        rotate: -2,
+      };
+
+  const hoverTransition = {
+    type: "spring" as const,
+    stiffness: 280,
+    damping: 18,
+  };
+
   if (variant === "icon") {
     return (
-      <svg
+      <motion.svg
         width={dimensions.width}
         height={dimensions.height}
         viewBox="0 0 64 64"
@@ -51,6 +67,8 @@ export function Logo({
         className={className}
         role="img"
         aria-label="Evandro icon logo"
+        whileHover={hoverMotion}
+        transition={hoverTransition}
       >
         <title>Evandro icon logo</title>
         <rect width="64" height="64" rx="14" fill={c.primary} />
@@ -89,13 +107,17 @@ export function Logo({
           r="5"
           fill={theme === "dark" ? "#0A0A0A" : c.primary}
         />
-      </svg>
+      </motion.svg>
     );
   }
 
   if (variant === "wordmark") {
     return (
-      <div className={`flex items-center gap-3 ${className}`}>
+      <motion.div
+        className={`flex items-center gap-3 ${className}`}
+        whileHover={hoverMotion}
+        transition={hoverTransition}
+      >
         <svg
           width={dimensions.width}
           height={dimensions.height}
@@ -134,12 +156,12 @@ export function Logo({
             </div>
           )}
         </div>
-      </div>
+      </motion.div>
     );
   }
 
   return (
-    <svg
+    <motion.svg
       width={dimensions.width}
       height={dimensions.height}
       viewBox="0 0 120 80"
@@ -147,6 +169,8 @@ export function Logo({
       className={className}
       role="img"
       aria-label="Evandro mark logo"
+      whileHover={hoverMotion}
+      transition={hoverTransition}
     >
       <title>Evandro mark logo</title>
       <rect x="10" y="8" width="9" height="64" fill={c.primary} />
@@ -155,6 +179,6 @@ export function Logo({
       <rect x="19" y="63" width="28" height="9" fill={c.primary} />
       <polygon points="50,55 57,55 74,25 67,25" fill={c.slash} />
       <circle cx="80" cy="63" r="7" fill={c.primary} />
-    </svg>
+    </motion.svg>
   );
 }