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

Hero 1

A split layout with title, description, buttons, and an image.

0px
Loading Preview...

Hero 1 is a split layout with title, description, and two buttons on the left side, and an image placeholder on the right side. It's responsive and stacks on mobile devices, using a 2-column grid on large screens.

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 RichText from '@/components/cms/RichText'
import { CMSLink } from '@/components/cms/Link'
import { Media } from '@/components/cms/Media'
import { Hero1Type } from '@/payload-types'

const Hero1Component: React.FC<Hero1Type> = ({ title, description, buttons, image }: Hero1Type) => {
    return (
        <section className="w-full bg-background py-12 md:py-24 transition-colors">
            <div className="container mx-auto px-6 lg:px-12">
                <div className="grid grid-cols-1 items-center gap-12 lg:grid-cols-2">

                    {/* Left Content Column */}
                    <div className="flex flex-col space-y-6 text-left">
                        <h1 className="text-4xl font-semibold tracking-tight text-foreground sm:text-5xl md:text-6xl lg:leading-[1.1]">
                            {title}
                        </h1>

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

                        {buttons?.links && buttons.links.length > 0 && (
                            <div className="flex flex-row gap-4 pt-4">
                                {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-primary text-primary-foreground hover:bg-primary/90 h-11 px-8"
                                            : "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-11 px-8"
                                        }
                                    />
                                ))}
                            </div>
                        )}
                    </div>

                    {/* Right Image Column */}
                    <div className="relative aspect-square w-full bg-muted flex items-center justify-center overflow-hidden">
                        {image && typeof image === 'object' ? (
                            <Media
                                resource={image}
                                className="absolute inset-0 w-full h-full"
                                imgClassName="object-cover"
                            />
                        ) : (
                            <div className="text-muted-foreground/40">
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="80"
                                    height="80"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    strokeWidth="1.5"
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                >
                                    <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
                                    <circle cx="9" cy="9" r="2" />
                                    <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
                                </svg>
                            </div>
                        )}
                    </div>

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

export default Hero1Component