118 lines
4.8 KiB
TypeScript
118 lines
4.8 KiB
TypeScript
'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>
|
|
)
|
|
}
|