Function FeatureSection

web/src/components/ui/landing/feature/index.tsx:82–195

({
  title,
  description,
  backdropColor = BlockColor.DarkForestGreen,
  imagePosition = 'right',
  tagline,
  decorativeColors = [BlockColor.GenerativeGreen, BlockColor.DarkForestGreen],
  highlightText,
  highlightIcon,
  illustration,
  learnMoreText = 'Learn More',
  learnMoreLink,
  textColor,
}: FeatureSectionProps)

}

export function FeatureSection({
  title,
  description,
  backdropColor = BlockColor.DarkForestGreen,
  imagePosition = 'right',
  tagline,
  decorativeColors = [BlockColor.GenerativeGreen, BlockColor.DarkForestGreen],
  highlightText,
  highlightIcon,
  illustration,
  learnMoreText = 'Learn More',
  learnMoreLink,
  textColor,
}: FeatureSectionProps) {
  const isLight =
    backdropColor === BlockColor.CRTAmber ||
    backdropColor === BlockColor.TerminalYellow
  const isMobile = useIsMobile()

  const renderContent = () => (
    <div className="space-y-6">
      <div>
        <h2 className="feature-heading">{title}</h2>

        <span className="text-xs font-semibold uppercase tracking-wider mt-2 inline-block opacity-70">
          {tagline}
        </span>
      </div>

      <HighlightText text={highlightText} isLight={isLight} icon={highlightIcon} />

      <p className="text-lg leading-relaxed opacity-70 font-paragraph">
        {description}
      </p>

      <LearnMoreLink
        href={learnMoreLink}
        text={learnMoreText}
        isLight={isLight}
        textColor={textColor}
      />
    </div>
  )

  return (
    <Section background={backdropColor}>
      <div
        className={cn(
          'text-white max-w-7xl mx-auto px-4 sm:px-6 lg:px-8',
          { 'text-black': isLight },
          textColor,
        )}
      >
        <div
          className={cn(
            'grid gap-8 items-center',
            isMobile ? 'grid-cols-1' : 'lg:grid-cols-2 lg:gap-16',
          )}