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

@@ -1,7 +1,9 @@
 "use client";
 
 import type React from "react";
-import { motion, Variants } from "framer-motion";
+import { motion, type Variants, useReducedMotion } from "framer-motion";
+import { DrawLine } from "./animations/DrawLine";
+import { TextDiffuseReveal } from "./animations/TextDiffuseReveal";
 import { Reveal } from "./Reveal";
 
 interface SectionProps {
@@ -25,11 +27,33 @@ export const Section = ({
   children,
   disableChildrenAnimation = false,
 }: SectionProps) => {
+  const shouldReduceMotion = useReducedMotion();
   const baseClass = dark ? "ds-section ds-section-dark" : "ds-section";
 
+  const containerVariants: Variants = {
+    hidden: {},
+    visible: {
+      transition: {
+        delayChildren: 0.02,
+        staggerChildren: 0.08,
+      },
+    },
+  };
+
   const itemVariants: Variants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } }
+    hidden: shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: 18 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: shouldReduceMotion
+        ? { duration: 0.25, ease: [0.16, 1, 0.3, 1] }
+        : {
+            type: "spring",
+            stiffness: 60,
+            damping: 20,
+            mass: 0.85,
+          },
+    },
   };
 
   return (
@@ -39,13 +63,8 @@ export const Section = ({
           className="ds-section-header"
           initial="hidden"
           whileInView="visible"
-          viewport={{ once: true, margin: "-100px" }}
-          variants={{
-            hidden: {},
-            visible: {
-              transition: { staggerChildren: 0.15 }
-            }
-          }}
+          viewport={{ once: true, amount: 0.2 }}
+          variants={containerVariants}
         >
           <div className="ds-section-meta">
             {eyebrow && (
@@ -53,20 +72,30 @@ export const Section = ({
                 {eyebrow}
               </motion.p>
             )}
-            <motion.h2 className="ds-section-title" variants={itemVariants}>
-              {title}
-            </motion.h2>
+
+            <h2 className="ds-section-title">
+              <TextDiffuseReveal text={title} />
+            </h2>
+
             {description && (
-              <motion.p className="ds-section-description" variants={itemVariants}>
+              <motion.p
+                className="ds-section-description"
+                variants={itemVariants}
+              >
                 {description}
               </motion.p>
             )}
+
+            <DrawLine delay={0.16} />
           </div>
-          {aside && <motion.aside variants={itemVariants}>{aside}</motion.aside>}
+
+          {aside && (
+            <motion.aside variants={itemVariants}>{aside}</motion.aside>
+          )}
         </motion.div>
-        
+
         {!disableChildrenAnimation ? (
-          <Reveal y={60} duration={1} delay={0.2}>
+          <Reveal y={40} duration={0.9} delay={0.12}>
             <div>{children}</div>
           </Reveal>
         ) : (