add ImagesMarquee section

apps/astro/src/components/Components.astro

@@ -20,6 +20,7 @@ import IrregularImagesAndHeader, {
 } from '@/components/global/IrregularImagesAndHeader.astro'
 import HighlightedPerson, { HighlightedPerson_Query } from '@/components/global/HighlightedPerson.astro'
 import PeopleShowcase, { PeopleShowcase_Query } from '@/components/global/PeopleShowcase.astro'
+import ImagesMarquee, { ImagesMarquee_Query } from '@/components/global/ImagesMarquee.astro'
 
 const components = {
   SimpleCtaSection,
@@ -36,6 +37,7 @@ const components = {
   IrregularImagesAndHeader,
   HighlightedPerson,
   PeopleShowcase,
+  ImagesMarquee,
 }
 
 type ComponentsMap = {
@@ -70,6 +72,7 @@ export const Components_Query = /* groq */ `
     ${IrregularImagesAndHeader_Query}
     ${HighlightedPerson_Query}
     ${PeopleShowcase_Query}
+    ${ImagesMarquee_Query}
   },
 `
 ---

apps/astro/src/components/global/ImagesMarquee.astro

@@ -0,0 +1,96 @@
+---
+import PortableText, { PortableTextQuery, type PortableTextValue } from '@/components/ui/portable-text'
+import Image, { ImageDataQuery, type ImageDataProps } from '@/components/ui/image'
+import Button, { ButtonDataQuery, type ButtonDataProps } from '@/components/ui/button'
+
+export const ImagesMarquee_Query = `
+  _type == "ImagesMarquee" => {
+    ${PortableTextQuery('heading')}
+    ${PortableTextQuery('paragraph')}
+    ${ButtonDataQuery('ctas[]')}
+    ${ImageDataQuery('images[]')}
+  },
+`
+
+export type Props = {
+  index: number
+  heading: PortableTextValue
+  paragraph: PortableTextValue
+  ctas: ButtonDataProps[]
+  images: ImageDataProps[]
+}
+
+const { index, heading, paragraph, ctas, images } = Astro.props
+---
+
+<section class="ImagesMarquee">
+  <div class="images">
+    {
+      Array.from({ length: 2 }).map((_, index) => (
+        <ul aria-hidden={index === 1} style={`animation-duration: ${images.length * 3}s;`}>
+          {images?.map((img) => {
+            const aspectRatio = img.asset.metadata.dimensions.width / img.asset.metadata.dimensions.height
+            const minWidth = Math.round(164 * aspectRatio)
+            const maxWidth = Math.round(210 * aspectRatio)
+            const sizes = `(max-width: 768px) ${minWidth}px, ${maxWidth}px`
+            return (
+              <li>
+                <Image {...img} sizes={sizes} loading={index === 0 ? 'eager' : 'lazy'} />
+              </li>
+            )
+          })}
+        </ul>
+      ))
+    }
+  </div>
+  <header>
+    <PortableText value={heading} heading={index === 0 ? 'h1' : 'h2'} class="h2" />
+    <PortableText value={paragraph} class="paragraph" />
+    <div class="cta-wrapper">
+      {ctas?.map((cta) => <Button {...cta} />)}
+    </div>
+  </header>
+</section>
+
+<style lang="scss">
+  .ImagesMarquee {
+    padding: clamp(4rem, calc(5vw / 0.48), 5rem) 0;
+    .images {
+      height: clamp(164px, calc(210vw / 7.68), 210px);
+      $gap: 1rem;
+      margin: 0 calc(var(--page-margin) * -1);
+      overflow: hidden;
+      display: flex;
+      gap: $gap;
+      ul {
+        flex-shrink: 0;
+        display: flex;
+        gap: $gap;
+        animation: marquee 10s linear infinite;
+        @keyframes marquee {
+          0% {
+            transform: translateX(0);
+          }
+          100% {
+            transform: translateX(calc(-100% - $gap));
+          }
+        }
+        li {
+          flex-shrink: 0;
+          img {
+            width: auto;
+            height: 100%;
+          }
+        }
+      }
+    }
+    header {
+      max-width: 28rem;
+      margin: clamp(2rem, calc(2vw / 0.48), 3rem) auto 0;
+      text-align: center;
+      .paragraph {
+        margin: 1rem 0 clamp(1.5rem, calc(2vw / 0.48), 2rem);
+      }
+    }
+  }
+</style>

apps/astro/src/global/global.scss

@@ -165,7 +165,7 @@ main,
 }
 main {
   & > section:first-of-type {
-    padding-top: 2rem !important;
+    padding-top: clamp(1rem, calc(2vw / 0.48), 2rem) !important;
   }
 }
 
@@ -265,8 +265,8 @@ h3,
 }
 
 .cta-wrapper {
-  display: flex;
+  display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: clamp(0.75rem, calc(16vw / 0.48), 1rem);
+  gap: clamp(0.5rem, calc(0.75vw / 0.48), 0.75rem);
 }

apps/sanity/schema/Components.ts

@@ -13,6 +13,7 @@ import TwoColumnTextWithTags from "./components/TwoColumnTextWithTags";
 import IrregularImagesAndHeader from "./components/IrregularImagesAndHeader";
 import HighlightedPerson from "./components/HighlightedPerson";
 import PeopleShowcase from "./components/PeopleShowcase";
+import ImagesMarquee from "./components/ImagesMarquee";
 
 export default defineType({
   name: 'components',
@@ -33,6 +34,7 @@ export default defineType({
     IrregularImagesAndHeader,
     HighlightedPerson,
     PeopleShowcase,
+    ImagesMarquee,
   ],
   options: {
     insertMenu: {

apps/sanity/schema/components/ImagesMarquee.ts

@@ -0,0 +1,53 @@
+import { defineField } from 'sanity';
+import { toPlainText } from '../../utils/to-plain-text';
+
+const name = 'ImagesMarquee';
+const title = 'Sekcja z przewijającymi się zdjęciami';
+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: 'ctas',
+      type: 'array',
+      of: [{ type: 'cta' }],
+      title: 'CTAs',
+      validation: Rule => Rule.required().min(1).max(2)
+    }),
+    defineField({
+      name: 'images',
+      type: 'array',
+      title: 'Zdjęcia',
+      of: [{ type: 'image' }],
+      validation: Rule => Rule.required().min(5),
+    }),
+  ],
+  preview: {
+    select: {
+      heading: 'heading',
+      media: 'img',
+    },
+    prepare: ({ heading, media }) => ({
+      title: title,
+      subtitle: toPlainText(heading),
+      media,
+      icon,
+    }),
+  },
+});