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/globals.css

@@ -44,8 +44,8 @@
   --paper: #f4f2ed;
   --paper-dark: #eceae4;
   --white: #ffffff;
-  --slash: #e8ff00;
-  --slash-dim: rgba(232, 255, 0, 0.15);
+  --slash: #ccff00;
+  --slash-dim: rgba(204, 255, 0, 0.16);
   --meta: #777;
   --border: rgba(10, 10, 10, 0.1);
   --border-light: rgba(10, 10, 10, 0.06);
@@ -158,7 +158,7 @@ textarea {
 }
 
 .ds-section-meta {
-  max-width: 400px;
+  max-width: 700px;
 }
 
 .ds-eyebrow,
@@ -205,16 +205,21 @@ textarea {
 .ds-panel {
   border: 1px solid var(--border);
   min-width: 0;
+  height: 100%;
 }
 
 .ds-card {
   background: rgba(255, 255, 255, 0.55);
   padding: var(--sp-6);
+  display: flex;
+  flex-direction: column;
 }
 
 .ds-panel {
   background: rgba(10, 10, 10, 0.02);
   padding: var(--sp-5);
+  display: flex;
+  flex-direction: column;
 }
 
 .ds-card-title {
@@ -230,23 +235,26 @@ textarea {
   color: var(--ink-80);
   font-size: 12px;
   line-height: 1.8;
+  flex-grow: 1;
 }
 
 .ds-tags {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--sp-2);
+  gap: var(--sp-3);
   list-style: none;
+  margin-top: auto;
+  padding-top: var(--sp-8);
 }
 
 .ds-tag {
-  padding: 6px 10px;
+  padding: 8px 12px;
   border: 1px solid var(--border);
-  border-radius: var(--r-full);
   background: rgba(10, 10, 10, 0.03);
   font-size: 10px;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.12em;
   text-transform: uppercase;
+  font-weight: 500;
 }
 
 .ds-metric {
@@ -293,6 +301,7 @@ textarea {
   padding-left: var(--sp-5);
   font-size: 12px;
   line-height: 1.8;
+  flex-grow: 1;
 }
 
 .ds-list li::marker {
@@ -337,6 +346,113 @@ textarea {
   border-color: rgba(255, 255, 255, 0.12);
 }
 
+.ds-draw-line {
+  display: block;
+  width: 100%;
+  height: 1px;
+  margin-top: var(--sp-5);
+  background: linear-gradient(
+    90deg,
+    rgba(10, 10, 10, 0.55) 0%,
+    rgba(10, 10, 10, 0.08) 100%
+  );
+}
+
+.ds-section-dark .ds-draw-line {
+  background: linear-gradient(
+    90deg,
+    rgba(204, 255, 0, 0.75) 0%,
+    rgba(204, 255, 0, 0.1) 100%
+  );
+}
+
+@keyframes ds-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes marquee {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes marquee-reverse {
+  0% {
+    transform: translateX(-50%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.animate-marquee {
+  animation: marquee 40s linear infinite;
+}
+
+.animate-marquee-reverse {
+  animation: marquee-reverse 45s linear infinite;
+}
+
+.ds-skeleton-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-3);
+}
+
+.ds-skeleton {
+  position: relative;
+  overflow: hidden;
+  border-radius: 4px;
+  background: #111;
+}
+
+.ds-skeleton::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, #111 0%, #1f1f1f 50%, #111 100%);
+  background-size: 220% 100%;
+  animation: ds-shimmer 1.4s linear infinite;
+}
+
+.ds-skeleton-kicker {
+  height: 10px;
+  width: 30%;
+}
+
+.ds-skeleton-title {
+  height: 26px;
+  width: 72%;
+}
+
+.ds-skeleton-line {
+  height: 12px;
+  width: 100%;
+}
+
+.ds-skeleton-line-short {
+  width: 62%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
 @media (max-width: 1024px) {
   .ds-section {
     padding: var(--sp-16) var(--sp-6);