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,44 @@
+import { aboutContent } from '../data/content';
+
+export function AboutSection() {
+  return (
+    <section id="over" className="py-[88px]">
+      <div className="mx-auto max-w-[1080px] px-6">
+        <div className="grid grid-cols-1 items-start gap-12 sm:grid-cols-[1.2fr_0.8fr]">
+          <div>
+            <div className="mb-6">
+              <span className="font-mono block text-sm uppercase tracking-wider text-accent">
+                // over
+              </span>
+              <h2 className="font-display mt-3.5 text-3xl font-bold sm:text-4xl">
+                Eén ontwikkelaar, korte lijnen
+              </h2>
+            </div>
+            {aboutContent.paragraphs.map((paragraph) => (
+              <p key={paragraph} className="mb-4 text-muted">
+                {paragraph}
+              </p>
+            ))}
+          </div>
+          <div className="font-mono rounded border border-line bg-surface p-6 text-[0.85rem]">
+            <div className="mb-3.5 text-[0.75rem] uppercase tracking-wider text-accent">
+              tech_stack
+            </div>
+            <ul className="list-none">
+              {aboutContent.techStack.map((item, index) => (
+                <li
+                  key={item.label}
+                  className={`py-1.5 text-muted ${
+                    index < aboutContent.techStack.length - 1 ? 'border-b border-line' : ''
+                  }`}
+                >
+                  <b className="font-medium text-text">{item.label}</b> — {item.value}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}