Madhura68
d352a7d496
- Add English translations to cv-data.ts with getCvData(lang) helper - Create app/[lang]/ routing with static generation for nl and en - Add language switcher in nav (NL / EN toggle) - Add middleware for Accept-Language auto-redirect on root path - Root layout reads x-lang header to set <html lang> correctly - All components accept lang prop and render translated content Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import { FadeIn } from "./fade-in";
|
|
import { getCvData, type Lang } from "@/lib/cv-data";
|
|
|
|
export function MotivationSection({ lang }: { lang: Lang }) {
|
|
const data = getCvData(lang);
|
|
|
|
return (
|
|
<section
|
|
id="motivatie"
|
|
className="mx-auto max-w-[900px]"
|
|
style={{ padding: "20px clamp(20px, 6vw, 80px) 100px" }}
|
|
>
|
|
<FadeIn>
|
|
<div
|
|
className="pl-6"
|
|
style={{ borderLeft: "2px solid rgba(194,51,155,0.45)" }}
|
|
>
|
|
<p
|
|
className="text-[13px] font-semibold uppercase mb-3"
|
|
style={{ color: "#c2339b", letterSpacing: 3 }}
|
|
>
|
|
{data.ui.motivation.label}
|
|
</p>
|
|
<h2
|
|
className="font-serif font-normal mb-7"
|
|
style={{
|
|
fontSize: "clamp(28px, 3.5vw, 40px)",
|
|
color: "#e8e4df",
|
|
letterSpacing: -1,
|
|
}}
|
|
>
|
|
{data.ui.motivation.heading}
|
|
</h2>
|
|
|
|
<div className="max-w-[760px]">
|
|
{data.motivation.map((paragraph) => (
|
|
<p
|
|
key={paragraph}
|
|
className="text-[15px] leading-[1.8] mb-5 last:mb-0"
|
|
style={{ color: "rgba(255,255,255,0.55)" }}
|
|
>
|
|
{paragraph}
|
|
</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</FadeIn>
|
|
</section>
|
|
);
|
|
}
|