diff options
Diffstat (limited to 'src/components/widgets')
| -rw-r--r-- | src/components/widgets/Portfolio.astro | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/src/components/widgets/Portfolio.astro b/src/components/widgets/Portfolio.astro new file mode 100644 index 0000000..8cd230c --- /dev/null +++ b/src/components/widgets/Portfolio.astro @@ -0,0 +1,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 = [], + columns = 3, + 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> + </div> + + { + callToAction && ( + <div class="flex justify-center mx-auto w-fit mt-8 md:mt-12 font-medium"> + <Button {...callToAction} /> + </div> + ) + } +</WidgetWrapper>
\ No newline at end of file |