Add portfolio

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