Herstructureer src/ naar feature-based folderstructuur

Volgt de aanpak uit het React 2025 folder structure artikel en het SlpModularCms/frontend referentieproject: components/{layout,ui,shared}, features/landing/{components,data,hooks,pages,__tests__}, en lib/ voor de query client. routes/index.tsx wordt een dunne wrapper rond de nieuwe features/landing/pages/LandingPage.tsx.
2026-08-01 00:10:21 +02:00
parent a3ecfec668
commit 0037b0d304
25 changed files with 34 additions and 33 deletions
@@ -0,0 +1,49 @@
+import type { PackageCardData } from '../data/content';
+import { handleAnchorClick } from '../../../utils/scrollToHash';
+
+export function PackageCard({ pkg }: { pkg: PackageCardData }) {
+  return (
+    <div
+      className={`relative flex flex-col rounded border p-8 transition-all hover:-translate-y-1 ${
+        pkg.featured
+          ? 'border-accent-line bg-surface-2'
+          : 'border-line bg-surface hover:border-accent-line'
+      }`}
+      data-testid={`package-card-${pkg.id}`}
+    >
+      {pkg.featured && (
+        <span className="font-mono absolute -top-3 left-7 rounded-full bg-accent px-3 py-1 text-[0.7rem] font-bold uppercase tracking-wide text-[var(--color-accent-contrast)]">
+          Meest gekozen
+        </span>
+      )}
+      <span className="font-mono mb-3.5 text-[0.78rem] text-accent">{pkg.id}</span>
+      <h3 className="mb-2.5 text-xl font-bold">{pkg.title}</h3>
+      <p className="mb-6 text-[0.95rem] text-muted">{pkg.description}</p>
+      <div className="font-mono mb-1 text-3xl font-bold">
+        {pkg.price}
+        <small className="mt-0.5 block text-[0.78rem] font-normal text-muted">{pkg.priceNote}</small>
+      </div>
+      <ul className="my-6 flex-1 list-none">
+        {pkg.features.map((feature) => (
+          <li key={feature} className="relative mb-2.5 pl-6 text-[0.93rem] text-muted">
+            <span className="font-mono absolute left-0 text-accent" aria-hidden="true">
+              →
+            </span>
+            {feature}
+          </li>
+        ))}
+      </ul>
+      <a
+        href="#contact"
+        onClick={(event) => handleAnchorClick(event, '#contact')}
+        className={`rounded-lg px-6 py-3.5 text-center text-[0.98rem] font-semibold ${
+          pkg.featured
+            ? 'bg-accent text-[var(--color-accent-contrast)] hover:bg-[var(--color-accent-hover)]'
+            : 'border border-line text-text hover:border-accent-line'
+        }`}
+      >
+        {pkg.ctaLabel}
+      </a>
+    </div>
+  );
+}