72 lines
2 KiB
TypeScript
72 lines
2 KiB
TypeScript
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>
|
|
);
|
|
}
|