53 lines
2 KiB
TypeScript
53 lines
2 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import Link from "next/link";
|
||
|
|
import { ArrowRight } from "lucide-react";
|
||
|
|
import { useScrollReveal } from "../hooks/useScrollReveal";
|
||
|
|
import { hobbies, hobbiesPage } from "../data/hobbies";
|
||
|
|
import { Icon } from "@/lib/icons";
|
||
|
|
|
||
|
|
export default function HobbiesSection() {
|
||
|
|
const revealRef = useScrollReveal<HTMLDivElement>({ stagger: 0.2 });
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section id="hobbies" className="py-20 md:py-32 px-[5vw]">
|
||
|
|
<div className="max-w-[1200px] mx-auto">
|
||
|
|
<div className="space-y-4 mb-12">
|
||
|
|
<p className="section-label">{hobbiesPage.label}</p>
|
||
|
|
<p className="text-text-secondary max-w-xl">
|
||
|
|
{hobbiesPage.sectionSubtitle}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div ref={revealRef} className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
|
|
{hobbies.map((hobby) => (
|
||
|
|
<div
|
||
|
|
key={hobby.id}
|
||
|
|
className="border border-warm-grey p-8 space-y-6 group hover:border-amber/30 transition-colors"
|
||
|
|
>
|
||
|
|
<div className="w-10 h-10 flex items-center justify-center border border-warm-grey">
|
||
|
|
<Icon name={hobby.icon} size={20} className="text-amber" />
|
||
|
|
</div>
|
||
|
|
<h3 className="font-display font-semibold text-text-primary text-2xl tracking-tight">
|
||
|
|
{hobby.title}
|
||
|
|
</h3>
|
||
|
|
<p className="text-text-secondary leading-relaxed">
|
||
|
|
{hobby.shortDescription}
|
||
|
|
</p>
|
||
|
|
<Link
|
||
|
|
href="/hobbies"
|
||
|
|
className="inline-flex items-center gap-2 text-amber hover:text-amber-hover transition-colors group/link"
|
||
|
|
>
|
||
|
|
<span className="text-link">{hobbiesPage.linkText}</span>
|
||
|
|
<ArrowRight
|
||
|
|
size={18}
|
||
|
|
className="group-hover/link:translate-x-1 transition-transform"
|
||
|
|
/>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|