blob: d4016a7fd880bf097a76acafdbecddf04d0d9dc4 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
---
import type { Portfolio as Props } from '~/types';
import Headline from '~/components/ui/Headline.astro';
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
import Image from '~/components/common/Image.astro';
import Button from '~/components/ui/Button.astro';
const {
title = '',
subtitle = '',
tagline = '',
items = [],
callToAction,
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} />
<div class="mx-auto max-w-7xl p-4 md:px-8">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{
items &&
items.map((image) => (
<div class="flex h-auto intersect-once motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter">
<div class="relative overflow-hidden rounded-lg shadow-xl dark:shadow-none dark:border dark:border-slate-600 group">
<Image
class="w-full h-64 object-cover transition-transform duration-300 group-hover:scale-105"
width={400}
height={256}
widths={[400, 768, 1200]}
layout="responsive"
{...image}
/>
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-300" />
</div>
</div>
))
}
</div>
</div>
{
callToAction && (
<div class="flex justify-center mx-auto w-fit mt-8 md:mt-12 font-medium">
<Button {...callToAction} />
</div>
)
}
</WidgetWrapper>
|
