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

Hero 2

A split layout with image on the left and email signup form on the right.

0px
Loading Preview...

Hero 2 is a split layout with an image placeholder on the left side, and title, description, email signup form (with input and button), and disclaimer text on the right side. It's responsive and stacks on mobile devices, using a 2-column layout on large screens.

Fields Reference

Field NameTypeRequiredLocalizedDescription
titletextYesYesMain heading for the hero section.
descriptionrichtextNoYesLonger body text or paragraph content.
imageuploadNoNoImage field referencing the media collection.
showEmailSignupcheckboxNoNoShow or hide the email signup form (defaults to true).
disclaimerrichtextNoYesDisclaimer text shown below the email signup form.

Code

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

const Hero2Component: React.FC<Hero2Type> = ({ title, description, image, showEmailSignup, disclaimer }: Hero2Type) => {
    return (
        <section className="w-full min-h-screen bg-background flex flex-col lg:flex-row">
            {/* Image Container */}
            <div className="w-full lg:w-1/2 bg-muted flex items-center justify-center min-h-[300px] lg:min-h-screen">
                {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>

            {/* Content Container */}
            <div className="w-full lg:w-1/2 flex items-center justify-center p-8 md:p-16 lg:p-24">
                <div className="max-w-xl w-full flex flex-col gap-6">
                    {/* Header */}
                    <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold tracking-tight text-foreground">
                        {title}
                    </h1>

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

                    {/* Form */}
                    {showEmailSignup && (
                        <div className="flex flex-col gap-4">
                            <div className="flex flex-col sm:flex-row gap-3">
                                <Input
                                    type="email"
                                    placeholder="Enter your email"
                                    className="h-12 bg-background border-input"
                                />
                                <Button
                                    variant="default"
                                    className="h-12 px-8 font-medium bg-foreground text-background hover:bg-foreground/90"
                                >
                                    Sign up
                                </Button>
                            </div>

                            {/* Disclaimer */}
                            {disclaimer && (
                                <div className="text-xs text-muted-foreground">
                                    <RichText
                                        data={disclaimer}
                                        enableGutter={false}
                                        className="mx-0 prose prose-xs prose-muted-foreground max-w-none"
                                    />
                                </div>
                            )}
                        </div>
                    )}
                </div>
            </div>
        </section>
    )
}

export default Hero2Component