Initial commit: React frontend (SLP Software) + AIDLC workflow docs

Co-authored-by: Junie <junie@jetbrains.com>

src/components/Hero.tsx

@@ -0,0 +1,41 @@
+import { heroContent } from '../data/content';
+import { handleAnchorClick } from '../utils/scrollToHash';
+
+export function Hero() {
+  return (
+    <header id="top" className="relative overflow-hidden pb-[88px] pt-24">
+      <div className="mx-auto max-w-[1080px] px-6">
+        <span className="font-mono mb-5 block text-sm uppercase tracking-wider text-accent">
+          {heroContent.eyebrow}
+        </span>
+        <h1 className="font-display mb-6 max-w-[15ch] text-4xl font-extrabold leading-tight tracking-tight sm:text-5xl">
+          {heroContent.heading}
+        </h1>
+        <p className="mb-9 max-w-[52ch] text-lg text-muted">{heroContent.lead}</p>
+        <div
+          aria-hidden="true"
+          className="font-mono mb-10 inline-flex max-w-full items-center gap-2 overflow-x-auto whitespace-nowrap rounded border border-line bg-surface px-6 py-4 shadow-lg"
+        >
+          <span>{heroContent.codeLine}</span>
+          <span className="caret" data-testid="hero-caret" />
+        </div>
+        <div className="flex flex-wrap gap-4">
+          <a
+            href="#pakketten"
+            onClick={(event) => handleAnchorClick(event, '#pakketten')}
+            className="rounded-lg bg-accent px-6 py-3.5 text-[0.98rem] font-semibold text-[var(--color-accent-contrast)] transition-transform hover:bg-[var(--color-accent-hover)] active:scale-[0.98]"
+          >
+            Bekijk pakketten
+          </a>
+          <a
+            href="#contact"
+            onClick={(event) => handleAnchorClick(event, '#contact')}
+            className="rounded-lg border border-line px-6 py-3.5 text-[0.98rem] font-semibold text-text transition-colors hover:border-accent-line"
+          >
+            Plan een gesprek
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+}