add FeatureAccordionSection

apps/astro/src/components/Components.astro

@@ -3,11 +3,15 @@ import type { ComponentProps } from 'astro/types'
 import SimpleCtaSection, { SimpleCtaSection_Query } from '@/components/global/SimpleCtaSection.astro'
 import SplitContentImageGrid, { SplitContentImageGrid_Query } from '@/components/global/SplitContentImageGrid.astro'
 import SimpleHeadingFullImage, { SimpleHeadingFullImage_Query } from '@/components/global/SimpleHeadingFullImage.astro'
+import FeatureAccordionSection, {
+  FeatureAccordionSection_Query,
+} from '@/components/global/FeatureAccordionSection.astro'
 
 const components = {
   SimpleCtaSection,
   SplitContentImageGrid,
   SimpleHeadingFullImage,
+  FeatureAccordionSection,
 }
 
 type ComponentsMap = {
@@ -31,6 +35,7 @@ export const Components_Query = /* groq */ `
     _type == "SimpleCtaSection" => ${SimpleCtaSection_Query}
     _type == "SplitContentImageGrid" => ${SplitContentImageGrid_Query}
     _type == "SimpleHeadingFullImage" => ${SimpleHeadingFullImage_Query}
+    _type == "FeatureAccordionSection" => ${FeatureAccordionSection_Query}
   },
 `
 ---

apps/astro/src/components/global/FeatureAccordionSection.astro

@@ -0,0 +1,68 @@
+---
+import PortableText, { PortableTextQuery, type PortableTextValue } from '@/components/ui/portable-text'
+import Image, { ImageDataQuery, type ImageDataProps } from '@/components/ui/image'
+import Accordion from '@/components/ui/Accordion.astro'
+
+export const FeatureAccordionSection_Query = `
+  {
+    ${ImageDataQuery('img')}
+    ${PortableTextQuery('heading')}
+    list[] {
+      ${PortableTextQuery('title')}
+      ${PortableTextQuery('description')}
+    }
+  },
+`
+export type Props = {
+  index: number
+  img: ImageDataProps
+  heading: PortableTextValue
+  list: {
+    title: PortableTextValue
+    description: PortableTextValue
+  }[]
+}
+
+const { index, img, heading, list } = Astro.props
+---
+
+<section class="FeatureAccordionSection">
+  <Image {...img} sizes="(max-width: calc(499rem / 16)) 100vw, 50vw" priority={index === 0} />
+  <div>
+    <PortableText value={heading} heading={index === 0 ? 'h1' : 'h2'} class="heading" />
+    {
+      list?.map(({ title, description }, i) => (
+        <Accordion summary={title} class="accordion" open={i === 0}>
+          <PortableText value={description} />
+        </Accordion>
+      ))
+    }
+  </div>
+</section>
+
+<style lang="scss">
+  .FeatureAccordionSection {
+    display: grid;
+    align-items: flex-start;
+    gap: clamp(calc(32rem / 16), calc(48vw / 7.68), calc(48rem / 16))
+      clamp(calc(64rem / 16), calc(82vw / 7.68), calc(124rem / 16));
+    grid-template-columns: 1fr 1.2fr;
+    @media (max-width: calc(899rem / 16)) {
+      grid-template-columns: 1fr;
+      img {
+        width: 298px;
+      }
+    }
+    & > div {
+      max-width: calc(608rem / 16);
+    }
+  }
+  .heading {
+    margin-bottom: clamp(calc(32rem / 16), calc(48vw / 7.68), calc(48rem / 16));
+  }
+  .accordion {
+    &:not(:last-child) {
+      margin-bottom: clamp(calc(24rem / 16), calc(48vw / 7.68), calc(48rem / 16));
+    }
+  }
+</style>

apps/astro/src/components/global/SimpleHeadingFullImage.astro

@@ -58,10 +58,10 @@ const { index, heading, paragraph, cta, image } = Astro.props
       @supports (animation-timeline: view()) {
         animation: scroll-image linear forwards;
         animation-timeline: view();
-        transform-origin: bottom;
+        transform-origin: center;
         @keyframes scroll-image {
           from {
-            transform: translateY(-10%) scale(1.1);
+            transform: translateY(-8%) scale(1.16);
           }
           to {
             transform: translateY(0%) scale(1);

apps/sanity/schema/Components.ts

@@ -2,6 +2,7 @@ import { defineType } from "sanity";
 import SimpleCtaSection from "./components/SimpleCtaSection";
 import SplitContentImageGrid from "./components/SplitContentImageGrid";
 import SimpleHeadingFullImage from "./components/SimpleHeadingFullImage";
+import FeatureAccordionSection from "./components/FeatureAccordionSection";
 
 export default defineType({
   name: 'components',
@@ -10,7 +11,8 @@ export default defineType({
   of: [
     SimpleCtaSection,
     SplitContentImageGrid,
-    SimpleHeadingFullImage
+    SimpleHeadingFullImage,
+    FeatureAccordionSection,
   ],
   options: {
     insertMenu: {

apps/sanity/schema/components/FeatureAccordionSection.ts

@@ -0,0 +1,75 @@
+import { defineField } from 'sanity';
+import { toPlainText } from '../../utils/to-plain-text';
+
+const name = 'FeatureAccordionSection';
+const title = 'Sekcja z akordeonem cech';
+const icon = () => '🏛️';
+
+export default defineField({
+  name,
+  type: 'object',
+  title,
+  icon,
+  fields: [
+    defineField({
+      name: 'img',
+      type: 'image',
+      title: 'Zdjęcie',
+      validation: Rule => Rule.required(),
+    }),
+    defineField({
+      name: 'heading',
+      type: 'Heading',
+      title: 'Nagłówek',
+      validation: Rule => Rule.required(),
+    }),
+    defineField({
+      name: 'list',
+      type: 'array',
+      title: 'Lista',
+      of: [
+        defineField({
+          name: 'item',
+          type: 'object',
+          fields: [
+            defineField({
+              name: 'title',
+              type: 'Heading',
+              title: 'Tytuł',
+              validation: Rule => Rule.required(),
+            }),
+            defineField({
+              name: 'description',
+              type: 'PortableText',
+              title: 'Opis',
+              validation: Rule => Rule.required(),
+            }),
+          ],
+          preview: {
+            select: {
+              title: 'title',
+              description: 'description',
+            },
+            prepare: ({ title, description }) => ({
+              title: toPlainText(title),
+              subtitle: toPlainText(description),
+            }),
+          }
+        }),
+      ],
+      validation: Rule => Rule.required()
+    }),
+  ],
+  preview: {
+    select: {
+      heading: 'heading',
+      media: 'img',
+    },
+    prepare: ({ heading, media }) => ({
+      title: title,
+      subtitle: toPlainText(heading),
+      media,
+      icon,
+    }),
+  },
+});