chore: overhaul infrastructure and integrate @mintel packages

- Restructure to pnpm monorepo (site moved to apps/web)
- Integrate @mintel/tsconfig, @mintel/eslint-config, @mintel/husky-config
- Implement Docker service architecture (Varnish, Directus, Gatekeeper)
- Setup environment-aware Gitea Actions deployment

apps/web/src/components/InteractiveElements.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+
+export const InteractiveElements: React.FC = () => {
+  const [progress, setProgress] = useState(0);
+  const [showBackToTop, setShowBackToTop] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollTop = window.scrollY;
+      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+      
+      if (docHeight > 0) {
+        setProgress((scrollTop / docHeight) * 100);
+      }
+
+      setShowBackToTop(scrollTop > 300);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  return (
+    <>
+      {/* Reading Progress Bar */}
+      <div 
+        className="reading-progress-bar" 
+        style={{ 
+          transform: `scaleX(${progress / 100})`,
+          display: 'block'
+        }} 
+      />
+
+      {/* Floating Back to Top Button */}
+      <button 
+        onClick={scrollToTop}
+        className={`floating-back-to-top ${showBackToTop ? 'visible' : ''}`}
+        aria-label="Back to top"
+        style={{ display: 'flex' }}
+      >
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
+        </svg>
+      </button>
+    </>
+  );
+};