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

Testimonial 1

A centered testimonial with company logo, quote, and author details.

0px
Loading Preview...

Testimonial 1 is a centered testimonial layout with the company logo at the top, a quote in the middle, and the author's avatar, name, and position at the bottom. It's fully responsive and uses Shadcn UI color variables.

Fields Reference

Field NameTypeRequiredLocalizedDescription
logouploadNoNoCompany logo image referencing the media collection.
quoterichtextYesYesThe testimonial quote text.
avataruploadNoNoAuthor's avatar image referencing the media collection.
nametextYesYesThe author's name.
positiontextNoYesThe author's position and company name.

Code

//@ts-nocheck
import React from 'react'
import { Image as ImageIcon } from "lucide-react"
import RichText from '@/components/cms/RichText'
import { Testimonial1Type } from '@/payload-types'

const Testimonial1Component: React.FC<Testimonial1Type> = ({ logo, quote, avatar, name, position }: Testimonial1Type) => {
    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-4xl w-full flex flex-col items-center text-center gap-8 md:gap-12">

                {/* Company Logo */}
                {logo && typeof logo === 'object' && logo.url && (
                    <a
                        href="#"
                        className="w-full flex justify-center h-10 transition-opacity hover:opacity-80"
                    >
                        <img
                            src={logo.url}
                            alt={logo.alt || 'Company Logo'}
                            className="h-full w-auto object-contain dark:invert"
                        />
                    </a>
                )}

                {/* Testimonial Quote */}
                <blockquote className="text-xl md:text-2xl font-semibold tracking-tight text-foreground leading-[1.4] max-w-3xl mx-0">
                    <RichText
                        data={quote}
                        enableGutter={false}
                        className="[&_p]:text-xl [&_p]:md:text-2xl [&_p]:font-semibold [&_p]:tracking-tight [&_p]:text-foreground [&_p]:leading-[1.4]"
                    />
                </blockquote>

                {/* User Info */}
                <div className="flex flex-col items-center gap-4">
                    {/* Avatar */}
                    <div className="relative w-14 h-14 rounded-full bg-muted flex items-center justify-center overflow-hidden border border-border">
                        {avatar && typeof avatar === 'object' && avatar.url ? (
                            <img
                                src={avatar.url}
                                alt={avatar.alt || name}
                                className="w-full h-full object-cover"
                            />
                        ) : (
                            <ImageIcon className="w-6 h-6 text-muted-foreground/40" />
                        )}
                    </div>

                    <div className="flex flex-col gap-0.5">
                        <cite className="not-italic font-semibold text-foreground text-base">
                            {name}
                        </cite>
                        {position && (
                            <p className="text-muted-foreground text-sm font-medium">
                                {position}
                            </p>
                        )}
                    </div>
                </div>

            </div>
        </section>
    )
}

export default Testimonial1Component