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

CTA 1

A two-column call-to-action section with an email signup form and media placeholder.

0px
Loading Preview...

CTA 1 is a two-column call-to-action section featuring a title, description, email signup form with terms and conditions, and a media placeholder.

Fields Reference

Field NameTypeRequiredLocalizedDescription
titletextYesYesMain heading for the CTA section.
descriptiontextarea-YesSupporting text or paragraph content.
emailPlaceholdertext-YesPlaceholder text for the email input field.
submitButtonLabeltext-YesText for the submit button.
termsTexttext-YesTerms and conditions text displayed below the form.
termsLinkLink--Link for the terms and conditions text.
imageuploadYes-Image field referencing the media collection.

Code

//@ts-nocheck
'use client';
import React from 'react';
import { Image as ImageIcon } from "lucide-react";
import type { Cta1Type } from '@/payload-types';

const Cta1Component: React.FC<Cta1Type> = ({
    title,
    description,
    emailPlaceholder = 'Enter your email',
    submitButtonLabel = 'Sign up',
    termsText = 'By clicking Sign Up you\'re confirming that you agree with our',
    termsLink,
    image,
}) => {
    return (
        <section className="w-full bg-background py-16 px-6 md:py-24 lg:py-32">
            <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">

                {/* Content Column */}
                <div className="flex flex-col items-start text-left gap-6">
                    <h2 className="text-4xl md:text-5xl font-semibold tracking-tight text-foreground leading-[1.2]">
                        {title}
                    </h2>
                    {description && (
                        <p className="text-muted-foreground text-lg max-w-xl">
                            {description}
                        </p>
                    )}

                    <div className="w-full flex flex-col gap-4 mt-2">
                        <form
                            onSubmit={(e) => e.preventDefault()}
                            className="flex flex-col sm:flex-row gap-3 w-full"
                        >
                            <input
                                type="email"
                                placeholder={emailPlaceholder || 'Enter your email'}
                                className="flex h-12 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 sm:max-w-[320px]"
                            />
                            <button className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-12 px-8">
                                {submitButtonLabel}
                            </button>
                        </form>

                        <p className="text-xs text-muted-foreground">
                            {termsText}{' '}
                            {termsLink && (
                                <a
                                    href={termsLink.url || '#'}
                                    className="underline underline-offset-4 hover:text-foreground transition-colors"
                                    target={termsLink.newTab ? '_blank' : undefined}
                                    rel={termsLink.newTab ? 'noopener noreferrer' : undefined}
                                >
                                    {termsLink.label || 'Terms and Conditions'}
                                </a>
                            )}
                        </p>
                    </div>
                </div>

                {/* Image Column */}
                <div className="w-full aspect-[4/3] bg-muted flex items-center justify-center rounded-sm border border-border">
                    {image && typeof image === 'object' && 'url' in image ? (
                        <img
                            src={image.url || ''}
                            alt={image.alt || 'CTA Image'}
                            className="w-full h-full object-cover"
                        />
                    ) : (
                        <div className="flex flex-col items-center gap-4 text-muted-foreground/30">
                            <ImageIcon className="w-20 h-20 stroke-[1px]" />
                        </div>
                    )}
                </div>

            </div>
        </section>
    );
};

export default Cta1Component;