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

@@ -0,0 +1,54 @@
+import { BookOpen, Code2, Terminal, Wrench } from 'lucide-react';
+import * as React from 'react';
+
+export const Hero: React.FC = () => {
+  return (
+    <section className="relative bg-slate-900 text-white py-20 md:py-24 overflow-hidden">
+      {/* Background pattern */}
+      <div className="absolute inset-0 opacity-10">
+        <div className="absolute inset-0" style={{
+          backgroundImage: 'radial-gradient(circle at 1px 1px, white 1px, transparent 0)',
+          backgroundSize: '40px 40px'
+        }} />
+      </div>
+      
+      <div className="container relative z-10">
+        <div className="max-w-4xl mx-auto text-center">
+          {/* Main heading */}
+          <h1 className="text-4xl md:text-6xl font-bold mb-6 animate-slide-up">
+            Digital Problem Solver
+          </h1>
+          
+          <p className="text-xl md:text-2xl text-slate-300 mb-8 leading-relaxed animate-fade-in">
+            I work on Digital problems and build tools, scripts, and systems to solve them.
+          </p>
+          
+          {/* Quick stats or focus areas */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12 animate-fade-in">
+            <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
+              <Code2 className="mx-auto mb-3 text-slate-400" size={28} />
+              <div className="text-xs font-bold uppercase tracking-widest text-slate-300">Code</div>
+            </div>
+            <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
+              <Wrench className="mx-auto mb-3 text-slate-400" size={28} />
+              <div className="text-xs font-bold uppercase tracking-widest text-slate-300">Tools</div>
+            </div>
+            <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
+              <Terminal className="mx-auto mb-3 text-slate-400" size={28} />
+              <div className="text-xs font-bold uppercase tracking-widest text-slate-300">Automation</div>
+            </div>
+            <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
+              <BookOpen className="mx-auto mb-3 text-slate-400" size={28} />
+              <div className="text-xs font-bold uppercase tracking-widest text-slate-300">Learning</div>
+            </div>
+          </div>
+
+          {/* Topics */}
+          <div className="mt-8 text-sm text-slate-400 animate-fade-in">
+            <span className="font-semibold text-slate-300">Topics:</span> Vibe coding with AI • Debugging • Mac tools • Automation • Small scripts • Learning notes • FOSS
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};