37 lines
1.5 KiB
Plaintext
37 lines
1.5 KiB
Plaintext
---
|
|
import type { SiteConfig } from '../../utils/configLoader';
|
|
|
|
interface Props {
|
|
config: SiteConfig['bento'];
|
|
}
|
|
|
|
const { config } = Astro.props;
|
|
---
|
|
|
|
<section id="services" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto relative">
|
|
<div class="text-center max-w-3xl mx-auto mb-16 space-y-3">
|
|
<h2 class="text-3xl font-extrabold text-white tracking-tight uppercase">{config.sectionTitle}</h2>
|
|
<p class="text-slate-400 text-xs sm:text-sm">{config.sectionSubtitle}</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{config.cards.map((card) => (
|
|
<div class={`relative glass-panel glass-panel-hover rounded-2xl p-8 flex flex-col justify-between overflow-hidden group ${card.colSpan === 2 ? 'md:col-span-2' : 'md:col-span-1'}`}>
|
|
<div class="space-y-4 relative z-10">
|
|
{card.badge && (
|
|
<span class="inline-block text-[10px] font-mono uppercase tracking-wider text-sky-400 bg-sky-400/10 px-2.5 py-1 rounded border border-sky-400/20">
|
|
{card.badge}
|
|
</span>
|
|
)}
|
|
<h3 class="text-xl font-bold text-white tracking-tight">{card.title}</h3>
|
|
<p class="text-slate-400 text-xs sm:text-sm leading-relaxed">{card.description}</p>
|
|
</div>
|
|
|
|
<div class="mt-8 flex justify-end items-center opacity-40 group-hover:opacity-100 transition-opacity">
|
|
<span class="text-xs font-mono text-sky-400">Details →</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|