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

Hero 3

A centered layout with title, description, buttons, and a full-width image.

0px
Loading Preview...

Hero 3 is a centered layout with title, description, and two buttons at the top, followed by a full-width image placeholder below. It's responsive and uses centered alignment throughout.

Fields Reference

Field NameTypeRequiredLocalizedDescription
titletextYesYesMain heading for the hero section.
descriptionrichtextNoYesLonger body text or paragraph content.
buttonsgroupNoNoA group containing up to 2 call-to-action buttons.
imageuploadNoNoImage field referencing the media collection.

Code

//@ts-nocheck
import React from 'react'
import { Button } from "@/components/ui/button"
import { Image as ImageIcon } from "lucide-react"
import RichText from '@/components/cms/RichText'
import { CMSLink } from '@/components/cms/Link'
import { Media } from '@/components/cms/Media'
import { Hero3Type } from '@/payload-types'

const Hero3Component: React.FC<Hero3Type> = ({ title, description, buttons, image }: Hero3Type) => {
    return (
        <section className="w-full min-h-screen bg-background flex flex-col items-center py-16 md:py-24 px-6">
            {/* Content Container */}
            <div className="max-w-3xl w-full text-center flex flex-col items-center gap-6 mb-12 md:mb-20">
                {/* Header */}
                <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold tracking-tight text-foreground leading-[1.1]">
                    {title}
                </h1>

                {/* Subtext */}
                {description && (
                    <RichText
                        data={description}
                        enableGutter={false}
                        className="mx-0 prose prose-lg prose-muted-foreground max-w-2xl"
                    />
                )}

                {/* Buttons */}
                {buttons?.links && buttons.links.length > 0 && (
                    <div className="flex items-center gap-4 mt-2">
                        {buttons.links.map((linkItem, index) => (
                            <CMSLink
                                key={index}
                                {...linkItem.link}
                                className={index === 0
                                    ? "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-foreground text-background hover:bg-foreground/90 h-12 px-8 font-medium"
                                    : "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 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-12 px-8 font-medium"
                                }
                            />
                        ))}
                    </div>
                )}
            </div>

            {/* Image Container */}
            <div className="w-full max-w-6xl aspect-video bg-muted flex items-center justify-center rounded-sm overflow-hidden">
                {image && typeof image === 'object' ? (
                    <Media
                        resource={image}
                        className="w-full h-full"
                        imgClassName="object-cover"
                    />
                ) : (
                    <div className="flex flex-col items-center justify-center text-muted-foreground/40">
                        <ImageIcon size={120} strokeWidth={1} />
                    </div>
                )}
            </div>
        </section>
    )
}

export default Hero3Component