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

Features 1

A split layout with stats, buttons, and a video/image placeholder.

0px
Loading Preview...

Features 1 is a split layout with tagline, title, description, stats, and action buttons on the left side, and a video/image placeholder with a play button on the right side. It's responsive and stacks on mobile devices, using a 2-column grid on large screens.

Fields Reference

Field NameTypeRequiredLocalizedDescription
taglinetextNoYesA short tagline above the main title.
titletextYesYesMain heading for the block.
descriptionrichtextNoYesLonger body text or paragraph content.
statsarrayNoYesAn array of exactly 2 stat items with value and description.
stats.valuetextYesYesThe stat value (e.g., "50%").
stats.descriptiontextYesYesA description for the stat.
buttonsgroupNoNoA group containing up to 2 call-to-action buttons.
videouploadNoNoVideo or image field referencing the media collection.

Code

//@ts-nocheck
import React from 'react'
import { Button } from "@/components/ui/button"
import { ChevronRight } from "lucide-react"
import RichText from '@/components/cms/RichText'
import { CMSLink } from '@/components/cms/Link'
import { Features1Type } from '@/payload-types'

const Features1Component: React.FC<Features1Type> = ({ tagline, title, description, stats, buttons, video }: Features1Type) => {
    return (
        <section className="w-full min-h-screen bg-background flex items-center justify-center p-6 md:p-12 lg:p-20">
            <div className="max-w-7xl w-full grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">

                {/* Left Content Column */}
                <div className="flex flex-col gap-6">
                    <div className="flex flex-col gap-4">
                        {tagline && (
                            <span className="text-sm font-semibold text-foreground uppercase tracking-wider">
                                {tagline}
                            </span>
                        )}
                        <h1 className="text-4xl md:text-5xl font-semibold tracking-tight text-foreground leading-[1.2]">
                            {title}
                        </h1>
                        {description && (
                            <RichText
                                data={description}
                                enableGutter={false}
                                className="text-muted-foreground mx-0 text-base md:text-lg leading-relaxed max-w-xl"
                            />
                        )}
                    </div>

                    {/* Stats Row */}
                    {stats && stats.length > 0 && (
                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-8 py-4">
                            {stats.map((stat, index) => (
                                <div key={index} className="flex flex-col gap-2">
                                    <span className="text-4xl md:text-5xl font-bold text-foreground">
                                        {stat.value}
                                    </span>
                                    <p className="text-sm text-muted-foreground leading-relaxed">
                                        {stat.description}
                                    </p>
                                </div>
                            ))}
                        </div>
                    )}

                    {/* Action Buttons */}
                    {buttons?.links && buttons.links.length > 0 && (
                        <div className="flex items-center gap-4 pt-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 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
                                        : "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 hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 group"
                                    }
                                >
                                    {linkItem.link.label}
                                    {index === 1 && (
                                        <ChevronRight className="w-4 h-4 ml-1 transition-transform group-hover:translate-x-1" />
                                    )}
                                </CMSLink>
                            ))}
                        </div>
                    )}
                </div>

                {/* Right Media Column */}
                <div className="relative w-full aspect-square bg-muted flex items-center justify-center overflow-hidden">
                    {video && typeof video === 'object' && video.url ? (
                        <img
                            src={video.url}
                            alt={video.alt || title}
                            className="absolute inset-0 w-full h-full object-cover"
                        />
                    ) : (
                        <>
                            <div className="absolute inset-0 flex items-center justify-center opacity-40">
                                <div className="w-full h-full bg-[#666666]" />
                            </div>
                            <div className="relative z-10 w-20 h-14 bg-black/40 backdrop-blur-sm rounded-lg flex items-center justify-center cursor-pointer hover:bg-black/60 transition-colors border border-white/20">
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="32"
                                    height="32"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    strokeWidth="2"
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    className="fill-white text-white ml-1"
                                >
                                    <polygon points="5 3 19 12 5 21 5 3" />
                                </svg>
                            </div>
                        </>
                    )}
                </div>
            </div>
        </section>
    )
}

export default Features1Component