Props

Source apps/www/src/components/ActionCallSection.astro @ gitt.one

---
import { Image } from 'astro:assets';
import { resolveImage } from '../lib/images';

interface Props {
  mainTitle: string;
  highlightedText: string;
  description?: string;
  coloredButtonText?: string;
  coloredButtonPath?: string;
  uncoloredButtonText?: string;
  uncoloredButtonPath?: string;
  /** fills the empty half of the block; without it the block stays text-only */
  imageName?: string;
}
const {
  mainTitle,
  highlightedText,
  description,
  coloredButtonText,
  coloredButtonPath,
  uncoloredButtonText,
  uncoloredButtonPath,
  imageName,
} = Astro.props;

const image = imageName ? await resolveImage(imageName) : null;

const sentences = description ? description.split('. ') : [];
---

<div class="relative overflow-hidden bg-stone-800">
  <div class="mx-auto max-w-7xl">
    <div class="relative z-10 bg-stone-800 pb-8 sm:pb-16 md:pb-20 lg:w-full lg:max-w-2xl lg:pb-28 xl:pb-32">
      <main class="mx-auto mt-4 max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
        <div class="sm:text-center lg:text-left">
          <h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl">
            <span class="block">{mainTitle}</span>{' '}
            <span class="block text-primary-600">{highlightedText}</span>
          </h1>
          <div class="mt-3 sm:mt-5 md:mt-5">
            {
              sentences.map((el) => (
                <p
                  class={
                    'text-base text-white/80 sm:mx-auto sm:max-w-[34rem] sm:text-lg md:text-xl lg:mx-0 ' +
                    (el.includes('.') ? 'block' : 'inline')
                  }
                >
                  {el + (el.includes('.') ? '' : '. ')}
                </p>
              ))
            }
          </div>
          <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
            {
              coloredButtonText && (
                <div class="rounded-md shadow">
                  <a
                    href={coloredButtonPath}
                    class="flex w-full items-center justify-center rounded-md border border-transparent bg-primary-700 px-8 py-3 text-base font-medium text-white hover:bg-primary-800 md:px-10 md:py-4 md:text-lg"
                  >
                    {coloredButtonText}
                  </a>
                </div>
              )
            }
            {
              uncoloredButtonText && (
                <div class="mt-3 sm:mt-0 sm:ml-3">
                  <a
                    href={uncoloredButtonPath}
                    class="flex w-full items-center justify-center rounded-md border border-transparent bg-primary-100 px-8 py-3 text-base font-medium text-primary-800 hover:bg-primary-200 md:px-10 md:py-4 md:text-lg"
                  >
                    {uncoloredButtonText}
                  </a>
                </div>
              )
            }
          </div>
        </div>
      </main>
    </div>
    {
      image && (
        <div class="mt-8 lg:absolute lg:inset-y-0 lg:right-0 lg:mt-0 lg:w-1/2">
          <Image
            src={image}
            alt=""
            widths={[400, 840, 1280]}
            class="mx-auto h-56 w-full object-contain px-4 sm:h-72 md:h-96 lg:h-full lg:px-8 lg:py-12"
          />
        </div>
      )
    }
  </div>
</div>