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/Reveal.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { ReactNode } from "react";
-import { useScrollReveal } from "../hooks/useScrollReveal";
+import type { ReactNode } from "react";
+import { useState } from "react";
+import { motion, useReducedMotion } from "framer-motion";
 
 interface RevealProps {
   children: ReactNode;
@@ -17,20 +18,51 @@ interface RevealProps {
 
 export function Reveal({
   children,
-  y,
-  duration,
-  delay,
-  ease,
-  start,
-  end,
-  scrub,
+  y = 36,
+  duration = 0.8,
+  delay = 0,
   className = "",
 }: RevealProps) {
-  const ref = useScrollReveal({ y, duration, delay, ease, start, end, scrub });
+  const shouldReduceMotion = useReducedMotion();
+  const [animating, setAnimating] = useState(!shouldReduceMotion);
 
   return (
-    <div ref={ref as React.RefObject<HTMLDivElement>} className={className}>
+    <motion.div
+      className={className}
+      initial={
+        shouldReduceMotion
+          ? { opacity: 0 }
+          : { opacity: 0, y, clipPath: "inset(100% 0 0 0)" }
+      }
+      whileInView={
+        shouldReduceMotion
+          ? { opacity: 1 }
+          : { opacity: 1, y: 0, clipPath: "inset(0% 0 0 0)" }
+      }
+      viewport={{ once: true, amount: 0.2 }}
+      transition={
+        shouldReduceMotion
+          ? { duration: 0.25 }
+          : {
+              duration,
+              delay,
+              ease: [0.16, 1, 0.3, 1],
+            }
+      }
+      style={{
+        willChange:
+          animating && !shouldReduceMotion
+            ? "transform, opacity, clip-path"
+            : undefined,
+      }}
+      onAnimationStart={() => {
+        if (!shouldReduceMotion) {
+          setAnimating(true);
+        }
+      }}
+      onAnimationComplete={() => setAnimating(false)}
+    >
       {children}
-    </div>
+    </motion.div>
   );
 }