32 lines
1.3 KiB
TypeScript
32 lines
1.3 KiB
TypeScript
import { Section } from "./Section";
|
|
import { BENEFITS_CONFIG } from "@/config/course";
|
|
|
|
export function BenefitsSection() {
|
|
return (
|
|
<Section>
|
|
<h2 className="mb-4 text-center text-xl font-bold sm:text-2xl md:text-3xl">
|
|
{BENEFITS_CONFIG.title}
|
|
</h2>
|
|
<p className="mb-10 text-center text-[var(--muted-foreground)] sm:mb-12 md:mb-16">
|
|
{BENEFITS_CONFIG.subtitle}
|
|
</p>
|
|
<div className="space-y-4 sm:space-y-6">
|
|
{BENEFITS_CONFIG.items.map((b) => (
|
|
<div
|
|
key={b.num}
|
|
className="hover-shimmer flex flex-col gap-4 rounded-xl border border-[var(--border)] bg-[var(--card)] p-4 transition-all duration-300 hover:border-[var(--accent)]/30 hover:-translate-y-0.5 sm:flex-row sm:gap-6 sm:rounded-2xl sm:p-6"
|
|
>
|
|
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[var(--accent-muted)] text-base font-bold text-[var(--accent)] sm:h-12 sm:w-12 sm:text-lg">
|
|
{b.num}
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<h3 className="mb-1 font-semibold">{b.title}</h3>
|
|
<p className="text-sm text-[var(--muted-foreground)]">{b.desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Section>
|
|
);
|
|
}
|