BetaUnder active development — content may be incomplete or change without notice.

CTA 2

A call-to-action section with a background image, title, description, and two action links.

0px
Loading Preview...

CTA 2 is a block featuring a background image, a title and description, and two call-to-action links. The title and description are localized.

Fields Reference

Field NameTypeRequiredLocalizedDescription
titletextYesYesMain heading for the block.
descriptiontextarea-YesLonger body text or paragraph content.
backgroundImageuploadYes-Image field referencing the media collection.
ctaPrimaryLink--Primary call-to-action button/link.
ctaSecondaryLink--Secondary call-to-action button/link.

Code

//@ts-nocheck
'use client'
import React from 'react'
import { Image as ImageIcon } from 'lucide-react'
import type { Cta2Type } from '@/payload-types'
import { Media } from '@/components/cms/Media'
import { CMSLink } from '@/components/cms/Link'

const Cta2Component: React.FC<Cta2Type> = ({ title, description, backgroundImage, links }) => {
    return (
        <section className="relative w-full min-h-[40vh] flex items-center justify-center overflow-hidden">
            {/* Full Width Background Image */}
            <div className="absolute inset-0 z-0 bg-muted">
                {backgroundImage && typeof backgroundImage === 'object' && 'url' in backgroundImage ? (
                    <Media
                        fill
                        resource={backgroundImage}
                        className="w-full h-full object-cover"
                        imgClassName='object-cover'
                    />
                ) : (
                    <div className="w-full h-full flex items-center justify-center opacity-20">
                        <ImageIcon className="w-32 h-32 text-muted-foreground" />
                    </div>
                )}
                {/* Overlay to ensure text legibility */}
                <div className="absolute inset-0 bg-background/60 backdrop-blur-[2px]" />
            </div>

            <div className="relative z-10 max-w-7xl w-full px-6 py-16 md:py-24">
                <div className="max-w-2xl flex flex-col items-start text-left gap-6">
                    {/* Heading */}
                    <h2 className="text-4xl md:text-5xl lg:text-6xl font-semibold tracking-tight text-foreground leading-[1.1]">
                        {title}
                    </h2>

                    {/* Description */}
                    {description && (
                        <p className="text-muted-foreground text-lg md:text-xl max-w-xl">
                            {description}
                        </p>
                    )}

                    {/* Action Buttons */}
                    {links && links.length > 0 && (
                        <div className="flex flex-wrap gap-4 mt-4">
                            {links.map(({ link }, index: number) => (
                                <CMSLink key={index} {...link} />
                            ))}
                        </div>
                    )}
                </div>
            </div>
        </section>
    )
}

export default Cta2Component