Add portfolio

6 files changed, 83 insertions, 0 deletions

diff --git a/src/assets/images/portfolio/portfolio-1.webp b/src/assets/images/portfolio/portfolio-1.webp
new file mode 100644
index 0000000..2e95222
--- /dev/null
+++ b/src/assets/images/portfolio/portfolio-1.webp
diff --git a/src/assets/images/portfolio/portfolio-2.webp b/src/assets/images/portfolio/portfolio-2.webp
new file mode 100644
index 0000000..8b45442
--- /dev/null
+++ b/src/assets/images/portfolio/portfolio-2.webp
diff --git a/src/assets/images/portfolio/portfolio-3.webp b/src/assets/images/portfolio/portfolio-3.webp
new file mode 100644
index 0000000..32574bd
--- /dev/null
+++ b/src/assets/images/portfolio/portfolio-3.webp
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
diff --git a/src/pages/index.astro b/src/pages/index.astro
index cd79040..7b5ae89 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -13,6 +13,7 @@ import Stats from '~/components/widgets/Stats.astro';
 import CallToAction from '~/components/widgets/CallToAction.astro';
 import CallToActionImage from '~/components/widgets/CallToActionImage.astro';
 import Pricing from '~/components/widgets/Pricing.astro';
+import Portfolio from '~/components/widgets/Portfolio.astro';
 
 const metadata = {
   title: 'CustomWorks – Detailing, wrapping, tuning | Profesjonalne usługi pielęgnacji samochodów – Bydgoszcz',
@@ -258,6 +259,26 @@ const metadata = {
     </Fragment>
   </Pricing>
 
+  <!-- Portfolio **************** -->
+
+  <Portfolio
+    title="Portfolio"
+    items={[
+      {
+        src: '~/assets/images/portfolio/portfolio-1.webp',
+        alt: 'CustomWorks - Przykład pracy detailingowej',
+      },
+      {
+        src: '~/assets/images/portfolio/portfolio-2.webp',
+        alt: 'CustomWorks - Przykład pracy detailingowej',
+      },
+      {
+        src: '~/assets/images/portfolio/portfolio-3.webp',
+        alt: 'CustomWorks - Przykład pracy detailingowej',
+      },
+    ]}
+  />
+
   <!-- Kontakt **************** -->
 
   <Steps2
diff --git a/src/types.d.ts b/src/types.d.ts
index 491ba89..6d0a0e9 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -288,4 +288,10 @@ export interface Content extends Omit<Headline, 'classes'>, Widget {
   callToAction?: CallToAction;
 }
 
+export interface Portfolio extends Omit<Headline, 'classes'>, Widget {
+  items?: Array<Image>;
+  columns?: number;
+  callToAction?: CallToAction;
+}
+
 export interface Contact extends Omit<Headline, 'classes'>, Form, Widget {}