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

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import Link from 'next/link';
+
+interface Post {
+  title: string;
+  description: string;
+  date: string;
+  slug: string;
+  tags?: string[];
+}
+
+interface MediumCardProps {
+  post: Post;
+}
+
+export const MediumCard: React.FC<MediumCardProps> = ({ post }) => {
+  const { title, description, date, slug } = post;
+
+  const formattedDate = new Date(date).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+
+  return (
+    <Link href={`/blog/${slug}`} className="group block">
+      <article className="space-y-4 py-8 px-8 border border-slate-200 rounded-3xl group-hover:border-slate-400 transition-all duration-500 bg-white">
+        <time className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400 group-hover:text-slate-900 transition-colors">
+          {formattedDate}
+        </time>
+        
+        <h3 className="text-3xl md:text-4xl font-bold text-slate-900 tracking-tight group-hover:text-slate-900 transition-colors">
+          {title}
+        </h3>
+        
+        <p className="text-xl text-slate-500 font-serif italic leading-snug line-clamp-2">
+          {description}
+        </p>
+        
+        <div className="pt-4 flex items-center gap-4 text-slate-900 font-bold text-xs uppercase tracking-widest group/link">
+          Lesen
+          <div className="w-10 h-px bg-slate-200 group-hover:bg-slate-400 group-hover:w-16 transition-all duration-500"></div>
+        </div>
+      </article>
+    </Link>
+  );
+};