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

Features 2

A split layout with stacked content blocks and a video/image placeholder.

0px
Loading Preview...

Features 2 is a split layout with multiple stacked content blocks on the left side, and a video/image placeholder with a play button on the right side. Some content blocks can have an accent border. It's responsive and stacks on mobile devices, using a 2-column grid on large screens.

Fields Reference

Field NameTypeRequiredLocalizedDescription
featuresarrayYesYesAn array of feature content blocks.
features.titletextYesYesThe heading for the feature block.
features.descriptionrichtextNoYesThe description for the feature block.
features.accentcheckboxNoNoShow an accent border on the left side of the block.
videouploadNoNoVideo or image field referencing the media collection.

Code

//@ts-nocheck
import React from 'react'
import RichText from '@/components/cms/RichText'
import { Features2Type } from '@/payload-types'

const Features2Component: React.FC<Features2Type> = ({ features, video }: Features2Type) => {
    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-12">
                    {features?.map((feature, index) => (
                        <div
                            key={index}
                            className={`flex flex-col gap-4 ${feature.accent ? 'pl-6 border-l-2 border-foreground' : ''}`}
                        >
                            <h2 className="text-2xl md:text-3xl font-semibold tracking-tight text-foreground">
                                {feature.title}
                            </h2>
                            {feature.description && (
                                <RichText
                                    data={feature.description}
                                    enableGutter={false}
                                    enableProse={false}
                                    className="text-muted-foreground text-sm md:text-base leading-relaxed max-w-xl"
                                />
                            )}
                        </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 || 'Features'}
                            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 Features2Component