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

Hero 1

A vertically stacked set of interactive headings that each reveal a section of content.

0px
Loading Preview...

Hero 1 is a horizontal split layout with text content on one side and an image on the other. It supports eyebrow text, a headline, subtitle, description, dual CTAs, and configurable text/image placement.

Fields Reference

Field NameTypeRequiredLocalizedDescription
eyebrowtext-YesA short, optional heading above the main title.
titletextYesYesMain heading for the block.
subtitletext-YesSecondary heading under the main title.
descriptiontextarea-YesLonger body text or paragraph content.
ctaPrimaryLink--Primary call-to-action button/link.
ctaSecondaryLink--Secondary call-to-action button/link.
imageuploadYes-Image field referencing the media collection.
textPlacementselect--Positions text left or right of the image.
textAlignmentselect--Aligns text within its column: start, center, or end.

Code

import { Button } from "@/components/ui/button";


const Hero1 = () => {
    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]">
                            Medium length hero heading goes here
                        </h1>

                        <p className="max-w-[500px] text-lg text-muted-foreground leading-relaxed">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
                            varius enim in eros elementum tristique. Duis cursus, mi quis viverra
                            ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
                        </p>

                        <div className="flex flex-row gap-4 pt-4">
                            {/* Shadcn UI Primary Button */}
                            <Button size="lg" >
                                Button
                            </Button>

                            {/* Shadcn UI Outline Button */}
                            <Button variant="outline" size="lg" >
                                Button
                            </Button>
                        </div>
                    </div>

                    {/* Right Image Placeholder Column */}
                    <div className="relative aspect-square w-full bg-muted flex items-center justify-center overflow-hidden">
                        <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 Hero1