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。没有星级评分、没有轮播、没有装饰性引号图标。

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