add SplitContentImageGrid section

apps/astro/src/components/Components.astro

@@ -1,9 +1,11 @@
 ---
 import type { ComponentProps } from 'astro/types'
 import SimpleCtaSection, { SimpleCtaSection_Query } from '@/components/global/SimpleCtaSection.astro'
+import SplitContentImageGrid, { SplitContentImageGrid_Query } from '@/components/global/SplitContentImageGrid.astro'
 
 const components = {
   SimpleCtaSection,
+  SplitContentImageGrid,
 }
 
 type ComponentsMap = {
@@ -24,16 +26,15 @@ const { data, indexStart = 0 } = Astro.props
 export const Components_Query = /* groq */ `
   components[] {
     _type,
-    _type == "SimpleCtaSection" => {
-      ${SimpleCtaSection_Query}
-    },
+    _type == "SimpleCtaSection" => ${SimpleCtaSection_Query}
+    _type == "SplitContentImageGrid" => ${SplitContentImageGrid_Query}
   },
 `
 ---
 
 {
   data?.map((item, i) => {
-    const DynamicComponent = components[item._type]
+    const DynamicComponent = components[item._type] as any
     if (!DynamicComponent) return null
     return <DynamicComponent {...item} index={indexStart + i} />
   })

apps/astro/src/components/global/SimpleCtaSection.astro

@@ -1,11 +1,13 @@
 ---
-import PortableText, { PortableTextQuery, type PortableTextValue } from '@/src/components/ui/portable-text'
+import PortableText, { PortableTextQuery, type PortableTextValue } from '@/components/ui/portable-text'
 import Button, { ButtonDataQuery, type ButtonDataProps } from '@/components/ui/button'
 
 export const SimpleCtaSection_Query = `
-  ${PortableTextQuery('name')}
-  ${PortableTextQuery('text')}
-  ${ButtonDataQuery('cta')}
+  {
+    ${PortableTextQuery('name')}
+    ${PortableTextQuery('text')}
+    ${ButtonDataQuery('cta')}
+  },
 `
 
 export type Props = {

apps/astro/src/components/global/SplitContentImageGrid.astro

@@ -0,0 +1,105 @@
+---
+import PortableText, { PortableTextQuery, type PortableTextValue } from '@/components/ui/portable-text'
+import Button, { ButtonDataQuery, type ButtonDataProps } from '@/components/ui/button'
+import Image, { ImageDataQuery, type ImageDataProps } from '@/components/ui/image'
+
+export const SplitContentImageGrid_Query = `
+  {
+    ${PortableTextQuery('heading')}
+    ${PortableTextQuery('paragraph')}
+    ${ButtonDataQuery('cta')}
+    ${ImageDataQuery('images[]')}
+  },
+`
+
+export type Props = {
+  index: number
+  heading: PortableTextValue
+  paragraph: PortableTextValue
+  cta: ButtonDataProps
+  images: ImageDataProps[]
+}
+
+const { index, heading, paragraph, cta, images } = Astro.props
+---
+
+<section class="SplitContentImageGrid sec-wo-margin">
+  <div class="max-width">
+    <header>
+      <PortableText value={heading} heading={index === 0 ? 'h1' : 'h2'} class="h3" />
+      <PortableText value={paragraph} class="paragraph h3" />
+      <Button {...cta} />
+    </header>
+    <div class="images">
+      <div>
+        {
+          [images[0], images[2]].map((img) => (
+            <Image {...img} sizes="(max-width: 1049px) 50vw, 25vw" loading={index === 0 ? 'eager' : 'lazy'} />
+          ))
+        }
+      </div>
+      <div>
+        {
+          [images[1], images[3]].map((img) => (
+            <Image {...img} sizes="(max-width: 1049px) 50vw, 25vw" loading={index === 0 ? 'eager' : 'lazy'} />
+          ))
+        }
+      </div>
+    </div>
+  </div>
+</section>
+
+<style lang="scss">
+  .SplitContentImageGrid {
+    background-color: var(--primary-300, #f4efe8);
+  }
+  header {
+    padding: clamp(calc(64rem / 16), calc(82vw / 7.68), calc(82rem / 16)) 0;
+  }
+  .max-width {
+    max-width: calc(1080rem / 16);
+    display: grid;
+    align-items: center;
+    column-gap: clamp(calc(64rem / 16), calc(96vw / 7.68), calc(96rem / 16));
+    @media (min-width: calc(1050rem / 16)) {
+      grid-template-columns: 1fr 1.25fr;
+    }
+  }
+  .paragraph {
+    margin: calc(24rem / 16) 0 clamp(calc(48rem / 16), calc(48vw / 7.68), calc(64rem / 16));
+  }
+  .images {
+    max-width: calc(608rem / 16);
+    overflow: clip;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: clamp(calc(8rem / 16), calc(12vw / 7.68), calc(12rem / 16));
+    margin-bottom: -89px;
+    div {
+      display: grid;
+      gap: clamp(calc(8rem / 16), calc(12vw / 7.68), calc(12rem / 16));
+      &:first-child {
+        animation: SplitContentImageGridUp 1s;
+        animation-timeline: view();
+      }
+      animation: SplitContentImageGridDown 1s;
+      animation-timeline: view();
+    }
+  }
+  @keyframes SplitContentImageGridUp {
+    from {
+      transform: translateY(0px);
+    }
+    to {
+      transform: translateY(-89px);
+    }
+  }
+  @keyframes SplitContentImageGridDown {
+    from {
+      transform: translateY(-89px);
+    }
+    to {
+      transform: translateY(0px);
+    }
+  }
+</style>

apps/astro/src/components/ui/image/index.astro

@@ -33,7 +33,7 @@ const imageProps = {
   style: {
     background: `url(${asset.metadata.lqip}) center / cover no-repeat`,
   },
-  onload: 'this.removeAttribute("style")',
+  onload: 'this.style.removeProperty("background")',
   ...(priority && {
     loading: 'eager',
     fetchpriority: 'high',

apps/sanity/schema/Components.ts

@@ -1,12 +1,14 @@
 import { defineType } from "sanity";
 import SimpleCtaSection from "./components/SimpleCtaSection";
+import SplitContentImageGrid from "./components/SplitContentImageGrid";
 
 export default defineType({
   name: 'components',
   type: 'array',
   title: 'Components',
   of: [
     SimpleCtaSection,
+    SplitContentImageGrid,
   ],
   options: {
     insertMenu: {

apps/sanity/schema/components/SplitContentImageGrid.ts

@@ -0,0 +1,50 @@
+import { defineField } from 'sanity';
+import { toPlainText } from '../../utils/to-plain-text';
+
+const name = 'SplitContentImageGrid';
+const title = 'Sekcja z treścią i siatką obrazów';
+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: 'cta',
+      type: 'cta',
+      title: 'Przycisk CTA',
+      validation: Rule => Rule.required(),
+    }),
+    defineField({
+      name: 'images',
+      type: 'array',
+      of: [{ type: 'image' }],
+      title: 'Obrazy',
+      validation: Rule => Rule.required().min(4).max(4),
+    }),
+  ],
+  preview: {
+    select: {
+      heading: 'heading',
+    },
+    prepare: ({ heading }) => ({
+      title,
+      subtitle: toPlainText(heading),
+      icon,
+    }),
+  },
+});