57 lines
1.9 KiB
Plaintext
57 lines
1.9 KiB
Plaintext
---
|
|
import Headline from '~/components/ui/Headline.astro';
|
|
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
|
|
import { Icon } from 'astro-icon/components';
|
|
import type { Features as Props } from '~/types';
|
|
|
|
const {
|
|
title = await Astro.slots.render('title'),
|
|
subtitle = await Astro.slots.render('subtitle'),
|
|
tagline = await Astro.slots.render('tagline'),
|
|
items = [],
|
|
defaultIcon = 'tabler:point-filled',
|
|
|
|
id,
|
|
isDark = false,
|
|
classes = {},
|
|
bg = await Astro.slots.render('bg'),
|
|
} = Astro.props;
|
|
---
|
|
|
|
<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
|
|
<Headline
|
|
title={title}
|
|
subtitle={subtitle}
|
|
tagline={tagline}
|
|
classes={{
|
|
container: 'max-w-3xl',
|
|
title: 'text-3xl lg:text-4xl',
|
|
}}
|
|
/>
|
|
|
|
<div class="mt-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
|
{items.map(({ title, description, icon }) => (
|
|
<div class="group bg-white dark:bg-slate-800 p-3 rounded-lg shadow-sm hover:shadow-md transition-all duration-300 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-800 border border-gray-200 dark:border-gray-700">
|
|
<div class="flex items-center mb-2">
|
|
<Icon name={icon || defaultIcon} class="w-5 h-5 mr-2 text-primary transition-transform duration-300 group-hover:scale-110" />
|
|
<h3 class="text-base font-semibold">{title}</h3>
|
|
</div>
|
|
<div class="text-muted overflow-hidden">
|
|
<p class="text-xs max-h-[8rem] hover:max-h-[300px] transition-all duration-500 ease-skills">{description}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</WidgetWrapper>
|
|
|
|
<style>
|
|
/* Custom easing function for skills expansion */
|
|
.ease-skills {
|
|
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
|
|
/* Fade effect for the gradient overlay */
|
|
.hover\:opacity-0:hover {
|
|
opacity: 0;
|
|
}
|
|
</style> |