website refactor

apps/website/components/shared/ProgressLine.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { Box } from '@/ui/Box';
+import { motion } from 'framer-motion';
+
+interface ProgressLineProps {
+  isLoading: boolean;
+}
+
+export function ProgressLine({ isLoading }: ProgressLineProps) {
+  if (!isLoading) return null;
+
+  return (
+    <Box
+      fullWidth
+      height="2px"
+      bg="var(--ui-color-bg-surface-muted)"
+      style={{ overflow: 'hidden', position: 'relative' }}
+    >
+      <motion.div
+        style={{ 
+          position: 'absolute', 
+          top: 0, 
+          left: 0, 
+          height: '100%', 
+          backgroundColor: 'var(--ui-color-intent-primary)' 
+        }}
+        initial={{ width: '0%', left: '0%' }}
+        animate={{
+          width: ['20%', '50%', '20%'],
+          left: ['-20%', '100%', '-20%'],
+        }}
+        transition={{
+          duration: 1.5,
+          repeat: Infinity,
+          ease: 'linear',
+        }}
+      />
+    </Box>
+  );
+}