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

@@ -1,72 +1,126 @@
 "use client";
 
 import { useMemo } from "react";
+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 Experience() {
   const { data, loading, error } = usePortfolioData();
+  const shouldReduceMotion = useReducedMotion();
 
   const sortedExperiences = useMemo(() => {
     if (!data?.experiences) return [];
     return [...data.experiences]
       .filter((exp) => exp.featured)
       .sort((a, b) => {
-        const yearA = parseInt(a.period.match(/\d{4}/)?.[0] || "0", 10);
-        const yearB = parseInt(b.period.match(/\d{4}/)?.[0] || "0", 10);
+        const yearA = Number.parseInt(a.period.match(/\d{4}/)?.[0] || "0", 10);
+        const yearB = Number.parseInt(b.period.match(/\d{4}/)?.[0] || "0", 10);
         return yearB - yearA;
       });
   }, [data]);
 
-  if (loading) return <div className="ds-loading">Loading system logs</div>;
-  if (error || !data)
+  if (loading) {
+    return <SectionLoading message="Loading system logs" />;
+  }
+
+  if (error || !data) {
     return <div className="ds-error">Error loading system logs</div>;
+  }
+
+  const listVariants: Variants = {
+    hidden: {},
+    visible: {
+      transition: {
+        delayChildren: 0.08,
+        staggerChildren: 0.08,
+      },
+    },
+  };
+
+  const itemVariants: 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="experience"
       eyebrow="SYSTEM_LOGS.history"
-      title="Trajetória focada em produto, legado e crescimento sustentável"
-      description="Experiências recentes onde combinei entrega rápida com responsabilidade arquitetural."
+      title="Trajetoria focada em produto, legado e crescimento sustentavel"
+      description="Experiencias recentes onde combinei entrega rapida com responsabilidade arquitetural."
       disableChildrenAnimation
     >
-      <div className="space-y-sp-6">
-        {sortedExperiences.map((exp, index) => (
-          <Reveal key={exp.id} y={50} duration={0.8} delay={0.1 * index}>
-            <article className="ds-card">
-              <div className="ds-grid-2">
-                <div>
-                  <div className="ds-kicker">{exp.period}</div>
-                  <h3 className="ds-card-title">{exp.title}</h3>
-                  <div className="mt-sp-3 text-[11px] uppercase tracking-[0.1em] text-meta">
-                    {exp.company} · {exp.type}
-                  </div>
-                </div>
-                <div className="flex flex-wrap items-start justify-start gap-sp-3 lg:justify-end">
-                  <span className="ds-tag">{exp.location}</span>
-                  <span className="ds-tag">
-                    {exp.technologies.length} tecnologias
-                  </span>
+      <motion.div
+        className="space-y-sp-6"
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, amount: 0.18 }}
+        variants={listVariants}
+      >
+        {sortedExperiences.map((exp) => (
+          <motion.article
+            key={exp.id}
+            className="ds-card h-full"
+            variants={itemVariants}
+            whileHover={
+              shouldReduceMotion
+                ? undefined
+                : {
+                    y: -4,
+                    boxShadow: "0 16px 36px rgba(10,10,10,0.15)",
+                  }
+            }
+            whileTap={shouldReduceMotion ? undefined : { scale: 0.995 }}
+            transition={{ type: "spring", stiffness: 170, damping: 20 }}
+          >
+            <div className="flex flex-col lg:grid lg:grid-cols-[1fr_auto] gap-sp-4 items-start">
+              <div>
+                <div className="ds-kicker">{exp.period}</div>
+                <DrawLine delay={0.04} />
+                <h3 className="ds-card-title">{exp.title}</h3>
+                <div className="mt-sp-3 text-[11px] uppercase tracking-[0.1em] text-meta">
+                  {exp.company} | {exp.type}
                 </div>
               </div>
-              <p className="ds-copy">{exp.description}</p>
-              <ul className="ds-list">
-                {exp.achievements?.map((achievement) => (
-                  <li key={achievement}>{achievement}</li>
-                ))}
-              </ul>
-              <ul className="ds-tags mt-sp-6">
-                {exp.technologies?.map((tech) => (
-                  <li key={tech} className="ds-tag">
-                    {tech}
-                  </li>
-                ))}
-              </ul>
-            </article>
-          </Reveal>
+              <div className="flex flex-wrap items-start justify-start gap-sp-3 lg:justify-end">
+                <span className="ds-tag">{exp.location}</span>
+                <span className="ds-tag">
+                  <CounterValue
+                    value={exp.technologies.length}
+                    suffix=" tecnologias"
+                  />
+                </span>
+              </div>
+            </div>
+            <p className="ds-copy">{exp.description}</p>
+            <ul className="ds-list">
+              {exp.achievements?.map((achievement) => (
+                <li key={achievement}>{achievement}</li>
+              ))}
+            </ul>
+            <ul className="ds-tags mt-sp-6">
+              {exp.technologies?.map((tech) => (
+                <li key={tech} className="ds-tag">
+                  {tech}
+                </li>
+              ))}
+            </ul>
+          </motion.article>
         ))}
-      </div>
+      </motion.div>
     </Section>
   );
 }