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>
77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
import { FadeIn } from "./fade-in";
|
|
import { getCvData, type Lang } from "@/lib/cv-data";
|
|
|
|
export function ContactSection({ lang }: { lang: Lang }) {
|
|
const data = getCvData(lang);
|
|
const { label, heading, emailLabel, locationLabel, websiteLabel } = data.ui.contact;
|
|
|
|
const CONTACT_ITEMS = [
|
|
{ label: emailLabel, value: data.contact.email, href: `mailto:${data.contact.email}` },
|
|
{ label: locationLabel, value: data.contact.location, href: null },
|
|
{ label: websiteLabel, value: "jp-visser.nl", href: "https://jp-visser.nl" },
|
|
];
|
|
|
|
return (
|
|
<section
|
|
id="contact"
|
|
className="mx-auto max-w-[900px]"
|
|
style={{ padding: "100px clamp(20px, 6vw, 80px) 60px" }}
|
|
>
|
|
<FadeIn>
|
|
<p
|
|
className="text-[13px] font-semibold uppercase mb-3"
|
|
style={{ color: "#c2339b", letterSpacing: 3 }}
|
|
>
|
|
{label}
|
|
</p>
|
|
<h2
|
|
className="font-serif font-normal mb-12"
|
|
style={{
|
|
fontSize: "clamp(32px, 4vw, 48px)",
|
|
color: "#e8e4df",
|
|
letterSpacing: -1,
|
|
}}
|
|
>
|
|
{heading}
|
|
</h2>
|
|
</FadeIn>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-5">
|
|
{CONTACT_ITEMS.map((item, i) => (
|
|
<FadeIn key={item.label} delay={i * 0.1}>
|
|
<div
|
|
className="rounded-2xl p-7"
|
|
style={{
|
|
background: "rgba(255,255,255,0.03)",
|
|
border: "1px solid rgba(255,255,255,0.06)",
|
|
}}
|
|
>
|
|
<p
|
|
className="text-[12px] font-semibold uppercase mb-2"
|
|
style={{
|
|
color: "rgba(255,255,255,0.35)",
|
|
letterSpacing: 2,
|
|
}}
|
|
>
|
|
{item.label}
|
|
</p>
|
|
{item.href ? (
|
|
<a
|
|
href={item.href}
|
|
className="text-[15px] no-underline"
|
|
style={{ color: "#c2339b" }}
|
|
>
|
|
{item.value}
|
|
</a>
|
|
) : (
|
|
<p className="text-[15px]" style={{ color: "#e8e4df" }}>
|
|
{item.value}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</FadeIn>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|