add BorderedFullImage section

apps/astro/src/components/Components.astro

@@ -13,6 +13,8 @@ import ServicesOverview, { ServicesOverview_Query } from '@/components/global/Se
 import MetricsSection, { MetricsSection_Query } from '@/components/global/MetricsSection.astro'
 import Faq, { Faq_Query } from '@/components/global/Faq.astro'
 import IconGridWithCtaSection, { IconGridWithCtaSection_Query } from '@/components/global/IconGridWithCtaSection.astro'
+import BorderedFullImage, { BorderedFullImage_Query } from '@/components/global/BorderedFullImage.astro'
+
 const components = {
   SimpleCtaSection,
   SplitContentImageGrid,
@@ -23,6 +25,7 @@ const components = {
   MetricsSection,
   Faq,
   IconGridWithCtaSection,
+  BorderedFullImage,
 }
 
 type ComponentsMap = {
@@ -52,6 +55,7 @@ export const Components_Query = /* groq */ `
     ${MetricsSection_Query}
     ${Faq_Query}
     ${IconGridWithCtaSection_Query}
+    ${BorderedFullImage_Query}
   },
 `
 ---

apps/astro/src/components/global/BorderedFullImage.astro

@@ -0,0 +1,118 @@
+---
+import PortableText, { PortableTextQuery, type PortableTextValue } from '@/components/ui/portable-text'
+import Image, { ImageDataQuery, type ImageDataProps } from '@/components/ui/image'
+
+export const BorderedFullImage_Query = `
+  _type == "BorderedFullImage" => {
+    ${PortableTextQuery('heading')}
+    ${PortableTextQuery('paragraph')}
+    ${ImageDataQuery('img')}
+  },
+`
+
+export type Props = {
+  index: number
+  heading: PortableTextValue
+  paragraph: PortableTextValue
+  img: ImageDataProps
+}
+
+const { index, heading, paragraph, img } = Astro.props
+---
+
+<section class="BorderedFullImage">
+  <header>
+    <PortableText value={heading} heading={index === 0 ? 'h1' : 'h2'} class="heading" />
+    <PortableText value={paragraph} class="paragraph" />
+  </header>
+  <div class="img">
+    <Image {...img} sizes="100vw" priority={index === 0} />
+  </div>
+</section>
+
+<style lang="scss">
+  .BorderedFullImage {
+    margin: clamp(3rem, calc(4vw / 0.48), 4rem) calc(var(--page-margin) * -1);
+    padding: 1rem 2rem;
+    position: relative;
+    &::before {
+      content: '';
+      position: absolute;
+      left: 2rem;
+      top: 1rem;
+      bottom: 1rem;
+      right: 2rem;
+      z-index: 1;
+      border: 8px solid var(--primary-100, #fffefd);
+    }
+  }
+  header {
+    max-width: 28rem;
+    z-index: 1;
+    position: relative;
+    background-color: var(--primary-100, #fffefd);
+    min-height: clamp(28rem, calc(28vw / 0.48), 39rem);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: clamp(1rem, calc(2vw / 0.48), 2rem);
+    padding: clamp(1.5rem, calc(2vw / 0.48), 2rem);
+    .heading {
+      font-size: 0.875rem;
+      text-transform: uppercase;
+      letter-spacing: 0.035rem;
+      font-weight: 600;
+    }
+    .paragraph {
+      padding-bottom: 2rem;
+      border-bottom: 1px solid var(--secondary-200, #c0c7db);
+    }
+  }
+  .img {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    overflow: clip;
+    img {
+      height: 100%;
+      @supports (animation-timeline: view()) {
+        animation: scroll-image linear forwards;
+        animation-timeline: view();
+        transform-origin: center;
+        @keyframes scroll-image {
+          from {
+            transform: translateY(-5%) scale(1.1);
+          }
+          to {
+            transform: translateY(0%) scale(1);
+          }
+        }
+      }
+    }
+  }
+  @media (max-width: 56rem) {
+    .BorderedFullImage {
+      margin-left: unset;
+      margin-right: unset;
+      padding: unset;
+      display: grid;
+      &::before {
+        display: none;
+      }
+    }
+    header {
+      max-width: 38rem;
+      background-color: unset;
+      min-height: unset;
+      gap: 2rem;
+      padding: clamp(1.5rem, calc(2vw / 0.48), 2rem) 0 0 0;
+    }
+    .img {
+      margin: 0 calc(var(--page-margin) * -1);
+      order: -1;
+      position: relative;
+    }
+  }
+</style>

apps/sanity/schema/Components.ts

@@ -8,6 +8,7 @@ import ServicesOverview from "./components/ServicesOverview";
 import MetricsSection from "./components/MetricsSection";
 import Faq from "./components/Faq";
 import IconGridWithCtaSection from "./components/IconGridWithCtaSection";
+import BorderedFullImage from "./components/BorderedFullImage";
 
 export default defineType({
   name: 'components',
@@ -23,6 +24,7 @@ export default defineType({
     MetricsSection,
     Faq,
     IconGridWithCtaSection,
+    BorderedFullImage,
   ],
   options: {
     insertMenu: {

apps/sanity/schema/components/BorderedFullImage.ts

@@ -0,0 +1,45 @@
+import { defineField } from 'sanity';
+import { toPlainText } from '../../utils/to-plain-text';
+
+const name = 'BorderedFullImage';
+const title = 'Sekcja z pełnym obrazem i ramką';
+const icon = () => '🖼️';
+
+export default defineField({
+  name,
+  type: 'object',
+  title,
+  icon,
+  fields: [
+    defineField({
+      name: 'heading',
+      type: 'Heading',
+      title: 'Nagłówek',
+      validation: Rule => Rule.required(),
+    }),
+    defineField({
+      name: 'paragraph',
+      type: 'PortableText',
+      title: 'Paragraf',
+      validation: Rule => Rule.required(),
+    }),
+    defineField({
+      name: 'img',
+      type: 'image',
+      title: 'Obraz',
+      validation: Rule => Rule.required(),
+    }),
+  ],
+  preview: {
+    select: {
+      heading: 'heading',
+      media: 'img',
+    },
+    prepare: ({ heading, media }) => ({
+      title: title,
+      subtitle: toPlainText(heading),
+      media,
+      icon,
+    }),
+  },
+});