chore(strip): fase 0 — verwijder marketing, leads, archive en sitemap
Prototype-ballast verwijderd als eerste stap van de ECD-rebuild: - app/(marketing) incl. blog, contact, documentatie + lib/mdx, lib/content, content/ - /api/leads en publieke marketing-routes uit middleware - app/epd/_archive (backup van clients-module) - sitemap.ts (verwees alleen naar blog), globals.css.backup - root / redirect naar /login; robots.txt op disallow-all (afgeschermd systeem) FHIR-routes blijven bewust staan: /api/fhir/Patient is de facto de patienten-API voor dossier, agenda en Cortex — vervangen volgt in fase 3. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
colinislit
@@ -1,117 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import Image from 'next/image'
|
||||
import { ScrollReveal } from '@/components/ui/scroll-reveal'
|
||||
import aboutContent from '@/content/nl/about.json'
|
||||
|
||||
export function WhyMe() {
|
||||
const [mounted, setMounted] = useState(false)
|
||||
const { title, subtitle, image, paragraphs, stats, expertise } = aboutContent
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<section
|
||||
id="over"
|
||||
className="section-padding bg-gray-50 relative overflow-hidden"
|
||||
>
|
||||
{/* Decorative elements */}
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-teal/5 rounded-full blur-3xl translate-x-1/2 -translate-y-1/2" />
|
||||
<div className="absolute bottom-0 left-0 w-96 h-96 bg-teal/5 rounded-full blur-3xl -translate-x-1/2 translate-y-1/2" />
|
||||
|
||||
<div className="container-custom relative z-10">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-center max-w-6xl mx-auto">
|
||||
{/* Left: Text Content */}
|
||||
<ScrollReveal direction="left">
|
||||
<div className="space-y-8">
|
||||
<h2 className="text-5xl md:text-6xl lg:text-7xl font-heading font-bold text-text-primary leading-tight">
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
<p className="text-xl md:text-2xl text-text-secondary font-light leading-relaxed">
|
||||
{subtitle}
|
||||
</p>
|
||||
|
||||
<div className="space-y-6 text-text-secondary text-lg leading-relaxed">
|
||||
{paragraphs.map((paragraph, index) => (
|
||||
<p key={index}>{paragraph}</p>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 pt-8">
|
||||
{stats.map((stat, index) => (
|
||||
<div key={index}>
|
||||
<div className="text-3xl font-heading font-bold text-text-primary mb-1">{stat.value}</div>
|
||||
<div className="text-text-secondary text-sm">{stat.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
{/* Right: Photo */}
|
||||
<ScrollReveal direction="right" delay={200}>
|
||||
<div className="relative aspect-[3/4] lg:aspect-[4/5] max-w-md mx-auto lg:ml-auto">
|
||||
{/* Optional subtle border/frame effect */}
|
||||
<div className="absolute inset-0 rounded-2xl bg-teal/10" />
|
||||
|
||||
<div className="relative w-full h-full rounded-2xl overflow-hidden">
|
||||
<Image
|
||||
src={image.src}
|
||||
alt={image.alt}
|
||||
fill
|
||||
className="object-cover"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
{/* FASE 2: Expertise Section - Full Width with Floating Animation */}
|
||||
{expertise && (
|
||||
<div className="mt-16 pt-16 border-t border-gray-200">
|
||||
<ScrollReveal>
|
||||
<h3 className="text-2xl md:text-3xl font-heading font-bold text-center mb-3 text-text-primary">
|
||||
{expertise.label}
|
||||
</h3>
|
||||
<p className="text-center text-text-secondary mb-12 max-w-2xl mx-auto">
|
||||
De tools en methoden waarmee ik jouw AI-uitdaging aanpak
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-4 max-w-5xl mx-auto">
|
||||
{expertise.items.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`
|
||||
group px-5 py-3 rounded-full font-medium text-sm
|
||||
transition-all duration-300 cursor-default animate-float
|
||||
border shadow-sm
|
||||
${
|
||||
item.highlight
|
||||
? 'bg-teal-700 text-white border-teal-700 hover:bg-teal-600 hover:-translate-y-2 hover:rotate-2 hover:shadow-md'
|
||||
: 'bg-white text-gray-800 border-gray-300 hover:bg-teal-50 hover:border-teal-600 hover:text-teal-800 hover:-translate-y-2 hover:rotate-1 hover:shadow-md'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
animationDelay: mounted ? `${index * 150}ms` : '0ms',
|
||||
animationDuration: `${5 + (index % 3) * 0.8}s`,
|
||||
}}
|
||||
>
|
||||
<span className="font-semibold">{item.name}</span>
|
||||
<span className={`ml-2 text-xs ${item.highlight ? 'opacity-80 group-hover:opacity-100' : 'opacity-70 group-hover:opacity-100'}`}>
|
||||
{item.category}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user