mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-16 22:39:41 +02:00
d36b321d9d
Applied formatting to 1487+ files using pnpm format:write - TypeScript/JavaScript files - Svelte components - Astro pages - JSON configs - Markdown docs 13 files still need manual review (Astro JSX comments)
95 lines
2.4 KiB
Text
95 lines
2.4 KiB
Text
---
|
|
/**
|
|
* Shared Feature Section component
|
|
* Displays features in a responsive grid
|
|
*/
|
|
import Container from '../atoms/Container.astro';
|
|
import Card from '../atoms/Card.astro';
|
|
import SectionHeader from '../atoms/SectionHeader.astro';
|
|
|
|
interface Feature {
|
|
icon: string;
|
|
title: string;
|
|
description: string;
|
|
href?: string;
|
|
}
|
|
|
|
interface Props {
|
|
title: string;
|
|
subtitle?: string;
|
|
features: Feature[];
|
|
columns?: 2 | 3 | 4;
|
|
variant?: 'cards' | 'simple' | 'icons-left';
|
|
class?: string;
|
|
id?: string;
|
|
}
|
|
|
|
const {
|
|
title,
|
|
subtitle,
|
|
features,
|
|
columns = 3,
|
|
variant = 'cards',
|
|
class: className = '',
|
|
id,
|
|
} = Astro.props;
|
|
|
|
const gridCols = {
|
|
2: 'md:grid-cols-2',
|
|
3: 'md:grid-cols-2 lg:grid-cols-3',
|
|
4: 'md:grid-cols-2 lg:grid-cols-4',
|
|
};
|
|
---
|
|
|
|
<section id={id} class:list={['py-16 md:py-24', className]}>
|
|
<Container>
|
|
<SectionHeader title={title} subtitle={subtitle} />
|
|
|
|
<div class:list={['grid gap-6 md:gap-8', gridCols[columns]]}>
|
|
{
|
|
features.map((feature) =>
|
|
variant === 'cards' ? (
|
|
<Card variant="hover" padding="lg" as={feature.href ? 'a' : 'div'} href={feature.href}>
|
|
<div class="flex flex-col items-center text-center h-full">
|
|
<div class="text-4xl sm:text-5xl mb-4 transform group-hover:scale-110 transition-transform duration-300">
|
|
{feature.icon}
|
|
</div>
|
|
<h3 class="font-semibold text-lg sm:text-xl text-[var(--color-text-primary)] mb-3">
|
|
{feature.title}
|
|
</h3>
|
|
<p class="text-[var(--color-text-secondary)] text-sm sm:text-base leading-relaxed">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
) : variant === 'icons-left' ? (
|
|
<div class="flex gap-4">
|
|
<div class="flex-shrink-0 text-3xl">{feature.icon}</div>
|
|
<div>
|
|
<h3 class="font-semibold text-lg text-[var(--color-text-primary)] mb-2">
|
|
{feature.title}
|
|
</h3>
|
|
<p class="text-[var(--color-text-secondary)] text-sm leading-relaxed">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div class="text-center">
|
|
<div class="text-4xl mb-4">{feature.icon}</div>
|
|
<h3 class="font-semibold text-lg text-[var(--color-text-primary)] mb-2">
|
|
{feature.title}
|
|
</h3>
|
|
<p class="text-[var(--color-text-secondary)] text-sm leading-relaxed">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
)
|
|
)
|
|
}
|
|
</div>
|
|
|
|
<slot name="highlight" />
|
|
<slot />
|
|
</Container>
|
|
</section>
|