Add Drupal headless stack with Next.js frontend

- Add Next.js frontend service (nextjs) with Dockerfile and source
- Update docker-compose.yml: image names, Drupal 11.3.3, nextjs service
- Add docker-compose.override.yml.disabled for dev hot-reload
- Add install-headless-modules.sh for OAuth/JSON:API module setup
- Add README.md with full setup and configuration guide
- Update nginx/Dockerfile and nginx.conf.template for cms. subdomain
- Update drupal/Dockerfile PHP-FPM build args
- Gitignore **/.vscode/ to prevent IDE workspace files from being tracked

drupal/nextjs/components/home-features.tsx

@@ -0,0 +1,63 @@
+import Link from "next/link"
+import { FileText, Database, ArrowRight } from "lucide-react"
+
+const features = [
+  {
+    title: "Articles",
+    description:
+      "Tutorials, guides, and insights on data engineering and software development.",
+    href: "/resources/articles",
+    icon: FileText,
+    color: "emerald",
+  },
+  {
+    title: "Datamodelling",
+    description:
+      "Structured data models and schemas from real-world projects.",
+    href: "/resources/datamodelling",
+    icon: Database,
+    color: "fuchsia",
+  },
+]
+
+export function HomeFeatures() {
+  return (
+    <section className="home-features py-10">
+      <div className="home-features-header mb-6 text-center">
+        <h2 className="home-features-title mb-3 text-3xl font-bold tracking-tight text-slate-900">
+          Resources
+        </h2>
+        <p className="home-features-description mx-auto max-w-3xl text-slate-600" style={{ fontSize: "var(--fluid-hero-desc)" }}>
+          Use one or all. Curated content for data engineers and developers.
+        </p>
+      </div>
+      <div className="home-features-grid grid gap-8 sm:grid-cols-2">
+        {features.map((feature, index) => (
+          <Link
+            key={feature.href}
+            href={feature.href}
+            className={`home-features-card group block rounded-xl border border-slate-200 bg-white p-8 outline-none transition-all duration-200 ease-out hover:border-emerald-500/40 hover:shadow-lg focus-visible:ring-2 focus-visible:ring-emerald-600 focus-visible:ring-offset-2 animate-fade-in-up ${index === 1 ? "animate-delay-100" : ""}`}
+          >
+            <div
+              className={`home-features-card-icon mb-4 inline-flex rounded-lg p-3 ${
+                feature.color === "emerald"
+                  ? "bg-emerald-100 text-emerald-600"
+                  : "bg-fuchsia-100 text-fuchsia-600"
+              }`}
+            >
+              <feature.icon className="size-6" aria-hidden />
+            </div>
+            <h3 className="home-features-card-title mb-2 text-xl font-semibold text-slate-900">
+              {feature.title}
+            </h3>
+            <p className="home-features-card-description mb-4 text-slate-600">{feature.description}</p>
+            <span className="home-features-card-link inline-flex items-center gap-2 text-sm font-medium text-emerald-600 transition-colors duration-200 ease-out group-hover:text-emerald-500">
+              Learn more
+              <ArrowRight className="size-4 transition-transform duration-200 ease-out group-hover:translate-x-1" aria-hidden />
+            </span>
+          </Link>
+        ))}
+      </div>
+    </section>
+  )
+}