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

@@ -1,46 +1,98 @@
 "use client";
 
+import { motion, type Variants, useReducedMotion } from "framer-motion";
 import { usePortfolioData } from "@/lib/usePortfolioData";
 import { Section } from "./Section";
-import { Reveal } from "./Reveal";
+import { DrawLine } from "./animations/DrawLine";
+import { CounterValue } from "./animations/CounterValue";
+import { SectionLoading } from "./SectionLoading";
 
 export default function Skills() {
   const { data, loading, error } = usePortfolioData();
+  const shouldReduceMotion = useReducedMotion();
+
+  if (loading) {
+    return <SectionLoading dark message="Loading skill registry" />;
+  }
 
-  if (loading) return <div className="ds-loading">Loading skill registry</div>;
   if (error || !data) {
     return <div className="ds-error">Error loading skill registry</div>;
   }
 
+  const gridVariants: Variants = {
+    hidden: {},
+    visible: {
+      transition: {
+        delayChildren: 0.06,
+        staggerChildren: 0.08,
+      },
+    },
+  };
+
+  const cardVariants: Variants = {
+    hidden: shouldReduceMotion
+      ? { opacity: 0 }
+      : { opacity: 0, y: 20, clipPath: "inset(100% 0 0 0)" },
+    visible: {
+      opacity: 1,
+      y: 0,
+      clipPath: "inset(0% 0 0 0)",
+      transition: shouldReduceMotion
+        ? { duration: 0.25 }
+        : { duration: 0.8, ease: [0.16, 1, 0.3, 1] },
+    },
+  };
+
   return (
     <Section
       id="skills"
       eyebrow="MODULE_REGISTRY.lib"
-      title="Stack modular para produto, operação e escala"
-      description="Ferramentas escolhidas por previsibilidade operacional, velocidade de entrega e facilidade de manutenção."
+      title="Stack modular para produto, operacao e escala"
+      description="Ferramentas escolhidas por previsibilidade operacional, velocidade de entrega e facilidade de manutencao."
       dark
       disableChildrenAnimation
     >
-      <div className="ds-grid-2">
+      <motion.div
+        className="ds-grid-2"
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, amount: 0.2 }}
+        variants={gridVariants}
+      >
         {data.skills.technical.map((category, index) => (
-          <Reveal key={category.category} y={40} duration={0.8} delay={0.1 * index}>
-            <article className="ds-card h-full">
-              <div className="flex items-center justify-between gap-sp-4">
-                <div className="ds-kicker">ID_0{index + 1}X</div>
-                <div className="ds-metric">{category.skills.length} items</div>
+          <motion.article
+            key={category.category}
+            className="ds-card h-full"
+            variants={cardVariants}
+            whileHover={
+              shouldReduceMotion
+                ? undefined
+                : {
+                    y: -4,
+                    boxShadow: "0 20px 40px rgba(0, 0, 0, 0.35)",
+                  }
+            }
+            whileTap={shouldReduceMotion ? undefined : { scale: 0.99 }}
+            transition={{ type: "spring", stiffness: 180, damping: 18 }}
+          >
+            <div className="flex items-center justify-between gap-sp-4">
+              <div className="ds-kicker">ID_0{index + 1}X</div>
+              <div className="ds-metric">
+                <CounterValue value={category.skills.length} suffix=" items" />
               </div>
-              <h3 className="ds-card-title">{category.category}</h3>
-              <ul className="ds-tags mt-sp-6">
-                {category.skills.map((skill) => (
-                  <li key={skill} className="ds-tag">
-                    {skill}
-                  </li>
-                ))}
-              </ul>
-            </article>
-          </Reveal>
+            </div>
+            <DrawLine delay={0.05} />
+            <h3 className="ds-card-title mb-sp-8">{category.category}</h3>
+            <ul className="ds-tags">
+              {category.skills.map((skill) => (
+                <li key={skill} className="ds-tag">
+                  {skill}
+                </li>
+              ))}
+            </ul>
+          </motion.article>
         ))}
-      </div>
+      </motion.div>
     </Section>
   );
 }