e-tib.com/components/blocks/SupportCTA.tsx

import React from 'react';
import TrackedLink from '@/components/analytics/TrackedLink';

export interface SupportCTAProps {
  title: string;
  description: string;
  buttonLabel: string;
  buttonHref: string;
}

export const SupportCTA: React.FC<SupportCTAProps> = (props) => {
  const { title, description, buttonLabel, buttonHref } = props;

  return (
    <div className="mt-24 p-8 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group animate-slight-fade-in-from-bottom">
      <div className="absolute top-0 right-0 w-64 h-full bg-accent/5 -skew-x-12 translate-x-1/2 transition-transform group-hover:translate-x-1/3" />
      <div className="relative z-10 max-w-2xl">
        <h3 className="text-2xl md:text-3xl font-bold mb-4">{title}</h3>
        <p className="text-lg text-white/70 mb-8">{description}</p>
        <TrackedLink
          href={buttonHref}
          className="inline-flex items-center px-8 py-4 bg-accent text-primary-dark font-bold rounded-full hover:bg-white transition-all duration-300 group/link"
          eventProperties={{
            location: 'block_support_cta',
          }}
        >
          {buttonLabel}
          <span className="ml-2 transition-transform group-hover/link:translate-x-1">
            &rarr;
          </span>
        </TrackedLink>
      </div>
    </div>
  );
};