add SimpleCtaSection

apps/astro/src/components/Components.astro

@@ -0,0 +1,40 @@
+---
+import type { ComponentProps } from 'astro/types'
+import SimpleCtaSection, { SimpleCtaSection_Query } from '@/components/global/SimpleCtaSection.astro'
+
+const components = {
+  SimpleCtaSection,
+}
+
+type ComponentsMap = {
+  [Component in keyof typeof components]: {
+    _type: Component
+  } & ComponentProps<(typeof components)[Component]>
+}
+
+export type ComponentsProps = Array<ComponentsMap[keyof typeof components]>
+
+type Props = {
+  data: ComponentsProps
+  indexStart?: number
+}
+
+const { data, indexStart = 0 } = Astro.props
+
+export const Components_Query = /* groq */ `
+  components[] {
+    _type,
+    _type == "SimpleCtaSection" => {
+      ${SimpleCtaSection_Query}
+    },
+  },
+`
+---
+
+{
+  data?.map((item, i) => {
+    const DynamicComponent = components[item._type]
+    if (!DynamicComponent) return null
+    return <DynamicComponent {...item} index={indexStart + i} />
+  })
+}

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

@@ -0,0 +1,48 @@
+---
+import PortableText, { PortableTextQuery, type PortableTextValue } from '@/src/components/ui/portable-text'
+import Button, { ButtonDataQuery, type ButtonDataProps } from '@/components/ui/button'
+
+export const SimpleCtaSection_Query = `
+  ${PortableTextQuery('name')}
+  ${PortableTextQuery('text')}
+  ${ButtonDataQuery('cta')}
+`
+
+export type Props = {
+  index: number
+  name: PortableTextValue
+  text: PortableTextValue
+  cta: ButtonDataProps
+}
+
+const { index, name, text, cta } = Astro.props
+---
+
+<section class="SimpleCtaSection sec-wo-margin">
+  <div class="max-width">
+    <PortableText value={name} class="h3" />
+    <header>
+      <PortableText value={text} heading={index === 0 ? 'h1' : 'h2'} class="h3" />
+      <Button {...cta} class="cta" />
+    </header>
+  </div>
+</section>
+
+<style lang="scss">
+  .SimpleCtaSection {
+    padding: clamp(calc(32rem / 16), calc(80vw / 7.68), calc(144rem / 16)) 0;
+    background: var(--primary-300, #f4efe8);
+    .max-width {
+      max-width: calc(1024rem / 16);
+      display: grid;
+      gap: clamp(calc(32rem / 16), calc(56vw / 7.68), calc(56rem / 16))
+        clamp(calc(42rem / 16), calc(56vw / 7.68), calc(56rem / 16));
+      @media (min-width: calc(1000rem / 16)) {
+        grid-template-columns: 1fr 3.6fr;
+      }
+    }
+  }
+  .cta {
+    margin-top: 2rem;
+  }
+</style>

apps/astro/src/global/global.scss

@@ -26,8 +26,29 @@
 }
 
 :root {
+  --primary-100: #fffefd;
+  --primary-300: #f4efe8;
+  --primary-700: #ad6116;
+  --primary-800: #9c5712;
+
+  --secondary-100: #dee1e6;
+  --secondary-200: #c0c7db;
+  --secondary-300: #7d8fc1;
+  --secondary-500: #374776;
+  --secondary-700: #0c2d63;
+  --secondary-800: #0b2348;
+  --secondary-900: #122441;
+
+  --error-500: #c8452e;
+
+  --success-500: #298441;
+
+  --visited-500: #713776;
+
   --gap: clamp(96px, calc(132vw / 7.68), 152px);
 
+  --easing: cubic-bezier(0.17, 0.84, 0.44, 1);
+
   --pageMargin: clamp(16px, calc(40vw / 7.68), 40px);
   @media (max-width: 899px) and (min-width: 600px) {
     --pageMargin: clamp(40px, calc(80vw / 7.68), 80px);
@@ -110,7 +131,7 @@ img {
   outline: none;
 }
 :focus-visible {
-  outline: 2px solid var(--primary-800, #01403b);
+  outline: 2px solid var(--secondary-700, #0c2d63);
   outline-offset: 3px;
 }
 
@@ -127,15 +148,15 @@ body {
   min-width: 320px;
   -webkit-tap-highlight-color: transparent;
   background: var(--background-100, #fffcf9);
-  color: var(--primary-900, #001b19);
-  font-family: 'Poppins', sans-serif;
+  color: var(--secondary-700, #0c2d63);
+  font-family: 'Fixel', sans-serif;
   font-size: 1rem;
   line-height: 158%;
 }
 
 main,
 .max-width {
-  max-width: 1200px;
+  max-width: 1300px;
   width: calc(100% - var(--pageMargin) * 2);
   margin: 0 auto;
   height: 100%;
@@ -160,22 +181,24 @@ h6,
 .h6 {
   overflow-wrap: anywhere;
   font-weight: 400;
-  line-height: 128%;
-  color: var(--primary-800, #01403b);
+  line-height: 120%;
+  color: var(--secondary-700, #0c2d63);
+  font-variant-numeric: lining-nums tabular-nums;
   strong {
-    font-weight: 400;
-    color: var(--primary-900, #001b19);
+    font-weight: 600;
   }
 }
 h1,
-.h1,
-h2,
-.h2 {
-  font-size: clamp(calc(28rem / 16), calc(42vw / 7.68), calc(42rem / 16));
+.h1 {
+  font-size: clamp(calc(28rem / 16), calc(40vw / 7.68), calc(40rem / 16));
+  letter-spacing: -0.06em;
 }
+h2,
+.h2,
 h3,
 .h3 {
-  font-size: clamp(calc(18rem / 16), calc(24vw / 7.68), calc(24rem / 16));
+  font-size: clamp(calc(24rem / 16), calc(32vw / 7.68), calc(32rem / 16));
+  letter-spacing: -0.04em;
 }
 
 .link {
@@ -202,8 +225,8 @@ h3,
 
 .sec-wo-margin {
   margin: 0 calc(var(--pageMargin) * -1);
-  @media (min-width: 1280px) {
-    margin: 0 calc((100vw - 1200px) / -2);
+  @media (min-width: 1380px) {
+    margin: 0 calc((100vw - 1300px) / -2);
   }
 }
 

apps/astro/src/pages/index.astro

@@ -1,10 +1,20 @@
 ---
 import Layout from '@/src/layouts/Layout.astro'
 import metadataFetch from '@/utils/metadata.fetch'
+import sanityFetch from '@/utils/sanity.fetch'
+import Components, { Components_Query, type ComponentsProps } from '@/components/Components.astro'
 
 const metadata = await metadataFetch('Index_Page')
+
+const data = await sanityFetch<{ components: ComponentsProps }>({
+  query: `
+    *[_type == "Index_Page"][0] {
+      ${Components_Query}
+    }
+  `,
+})
 ---
 
 <Layout {...metadata}>
-  <h1>Index Page</h1>
+  <Components data={data.components} />
 </Layout>

apps/sanity/schema/components/SimpleCtaSection.ts

@@ -28,7 +28,7 @@ export default defineField({
       type: 'cta',
       title: 'Wezwanie do działania',
       validation: Rule => Rule.required(),
-    })
+    }),
   ],
   preview: {
     select: {