← Back to Prompts
Landing

Cinematic Testimonial Reel

A single large testimonial card with a quote, attribution, and subtle film-frame border treatment.

by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyintermediate
English Prompt
Create a cinematic testimonial section. Use a single large quote on a dark background, set in a large serif italic font. Below the quote, place a small horizontal divider, then the attribution: avatar circle, name in white, and role in muted gray. Wrap the entire card in a thin double-border frame with slightly rounded corners, evoking a film negative or editorial print. Add a faint vignette around the card. Use Tailwind CSS. No star ratings, no carousel, no decorative quotation-mark icons.
Chinese Prompt
创建一个电影感客户评价区域。在深色背景上用大号斜体衬线字体展示一条大引言。引言下方放置细水平分隔线,然后是署名:圆形头像、白色姓名和灰色职位。将整个卡片包裹在 thin 双边框框架中,圆角略小,唤起胶片底片或编辑印刷品的感觉。卡片周围添加 faint 暗角。使用 Tailwind CSS。没有星级评分、没有轮播、没有装饰性引号图标。
Cinematic Testimonial Reel screenshot 1
## Overview A testimonial that feels like a pulled quote from a magazine spread. Typography and framing carry the weight instead of stars and icons. ## Features - Large serif italic quote - Dark background - Avatar + name + role attribution - Thin double-border frame - Subtle vignette - No ratings or icons ## Usage Use for high-end product pages, agency portfolios, or editorial-style landing pages. ## Customization Modify the prompt to: - Add a slow crossfade between 2-3 testimonials - Use a vertical film-strip frame instead of rounded - Replace the avatar with a typographic monogram - Add a grain texture behind the quote