28 lines
1.1 KiB
TypeScript
28 lines
1.1 KiB
TypeScript
import { Section } from "./Section";
|
|
import { AUDIENCE_CONFIG } from "@/config/course";
|
|
|
|
export function AudienceSection() {
|
|
return (
|
|
<Section>
|
|
<h2 className="mb-4 text-center text-xl font-bold sm:text-2xl md:text-3xl">
|
|
{AUDIENCE_CONFIG.title}
|
|
</h2>
|
|
<p className="mb-10 text-center text-[var(--muted-foreground)] sm:mb-12 md:mb-16">
|
|
{AUDIENCE_CONFIG.subtitle}
|
|
</p>
|
|
<div className="grid gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-4">
|
|
{AUDIENCE_CONFIG.items.map((a) => (
|
|
<div
|
|
key={a.title}
|
|
className="hover-shimmer rounded-xl border border-[var(--border)] bg-[var(--card)] p-4 transition-all duration-300 hover:border-[var(--accent)]/30 hover:bg-[var(--muted)] hover:-translate-y-0.5 sm:rounded-2xl sm:p-6"
|
|
>
|
|
<div className="mb-3 text-2xl sm:mb-4 sm:text-3xl">{a.emoji}</div>
|
|
<h3 className="mb-2 font-semibold">{a.title}</h3>
|
|
<p className="text-sm text-[var(--muted-foreground)]">{a.desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Section>
|
|
);
|
|
}
|