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/providers/AnimationProvider.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { createContext, useContext, type ReactNode } from "react";
+import { useReducedMotion } from "@/app/hooks/useReducedMotion";
+import { animationConfig } from "@/app/lib/animations/config";
+
+/**
+ * Animation Configuration Context
+ * Provides global animation settings including reduced motion detection
+ */
+interface AnimationConfig {
+  reducedMotion: boolean;
+  easings: typeof animationConfig.easings;
+  durations: typeof animationConfig.durations;
+}
+
+const AnimationContext = createContext<AnimationConfig | undefined>(undefined);
+
+interface AnimationProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * AnimationProvider
+ *
+ * Provider component that supplies global animation configuration through React context.
+ * Automatically detects user's reduced motion preference and provides centralized
+ * animation settings (easings, durations) to all child components.
+ *
+ * @example
+ * ```tsx
+ * // In app/layout.tsx
+ * <AnimationProvider>
+ *   <YourApp />
+ * </AnimationProvider>
+ * ```
+ *
+ * @see useAnimationConfig - Hook to consume this context
+ */
+export function AnimationProvider({ children }: AnimationProviderProps) {
+  const reducedMotion = useReducedMotion();
+
+  const config: AnimationConfig = {
+    reducedMotion,
+    easings: animationConfig.easings,
+    durations: animationConfig.durations,
+  };
+
+  return (
+    <AnimationContext.Provider value={config}>
+      {children}
+    </AnimationContext.Provider>
+  );
+}
+
+/**
+ * useAnimationConfig
+ *
+ * Hook to access global animation configuration from AnimationProvider context.
+ * Provides reduced motion state, easing curves, and duration presets.
+ *
+ * @returns {AnimationConfig} Animation configuration object
+ * @throws {Error} If used outside of AnimationProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { reducedMotion, easings, durations } = useAnimationConfig();
+ *
+ *   return (
+ *     <motion.div
+ *       animate={{
+ *         opacity: 1,
+ *         y: reducedMotion ? 0 : 20
+ *       }}
+ *       transition={{
+ *         duration: durations.normal,
+ *         ease: easings.easeOut
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function useAnimationConfig(): AnimationConfig {
+  const context = useContext(AnimationContext);
+
+  if (context === undefined) {
+    throw new Error("useAnimationConfig must be used within AnimationProvider");
+  }
+
+  return context;
+}