Testimonial cards on torn-out notebook paper. The punch holes are a real CSS mask composited with subtract, so the page shows through them, and the ruled lines share one number with the text's line-height so the writing sits on the rules at any length. Hover straightens a sheet and lifts it off the wall. Deterministic tilts, any number of cards, zero dependencies.
"use client"
import NotebookTestimonials from "@/components/ui/notebook-testimonials"
const ITEMS = [
{
quote: "A story that lingers long after the last page. Not loud, but deeply impactful.",
handle: "@the_sleepy_reader",
rating: 5,
date: "Oct 31, 2025",
},
{
quote: "One of those books you keep thinking about. Worth the read.",
handle: "@emmaonbooks",
rating: 5,
date: "Sep 10, 2024",
},
{
quote: "A thoughtful and well-paced read that stays with you.",
handle: "@pageswithtea",
rating: 5,
date: "Jul 23, 2026",
},
]
export default function Demo() {
return (
<div className="flex w-full items-center justify-center bg-[#ececec] px-6 py-24">
<NotebookTestimonials items={ITEMS} />
</div>
)
}