Initial commit

components/apps.tsx

@@ -0,0 +1,72 @@
+import { FadeIn } from "./fade-in";
+
+const PLACEHOLDER_APPS = [
+  { icon: "⚡", label: "App 1 — binnenkort" },
+  { icon: "🔧", label: "App 2 — binnenkort" },
+  { icon: "📱", label: "App 3 — binnenkort" },
+];
+
+export function AppsSection() {
+  return (
+    <section
+      id="apps"
+      className="mx-auto max-w-[900px]"
+      style={{ padding: "100px clamp(20px, 6vw, 80px)" }}
+    >
+      <FadeIn>
+        <p
+          className="text-[13px] font-semibold uppercase mb-3"
+          style={{ color: "#c2339b", letterSpacing: 3 }}
+        >
+          Portfolio
+        </p>
+        <h2
+          className="font-serif font-normal mb-4"
+          style={{
+            fontSize: "clamp(32px, 4vw, 48px)",
+            color: "#e8e4df",
+            letterSpacing: -1,
+          }}
+        >
+          Apps & Projecten
+        </h2>
+        <p
+          className="text-[15px] leading-[1.7] mb-12 max-w-[500px]"
+          style={{ color: "rgba(255,255,255,0.45)" }}
+        >
+          Hier komen links naar mijn apps die ik op Vercel host.
+        </p>
+      </FadeIn>
+
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-5">
+        {PLACEHOLDER_APPS.map((app, i) => (
+          <FadeIn key={i} delay={i * 0.1}>
+            <div
+              className="rounded-2xl p-8 flex flex-col items-center justify-center min-h-[200px] text-center"
+              style={{
+                background: "rgba(255,255,255,0.03)",
+                border: "1px dashed rgba(255,255,255,0.1)",
+              }}
+            >
+              <div
+                className="w-12 h-12 rounded-xl flex items-center justify-center mb-4 text-xl"
+                style={{
+                  background: "rgba(194,51,155,0.1)",
+                  color: "#c2339b",
+                }}
+              >
+                {app.icon}
+              </div>
+              <p
+                className="text-[14px]"
+                style={{ color: "rgba(255,255,255,0.3)" }}
+              >
+                {app.label}
+              </p>
+            </div>
+          </FadeIn>
+        ))}
+      </div>
+    </section>
+  );
+}