Pinterest-style testimonial cards featuring user profile images, names, and quotes over scenic backgrounds. Ideal for showcasing customer stories, social proof, or community highlights in a visually engaging way.
import * as React from 'react';
import { MasonryGrid } from '@/components/ui/image-testimonial-grid'; // Adjust the import path as needed
// --- Data for the cards ---
const testimonials = [
{
profileImage: 'https://cdn.21st.dev/assets/mirror/a6/a634d4f02fe5b77804943c1d74b8d70e35ffe26454e0e9af9717432a2c72bfde.jpg',
name: 'Anaam Farooq',
feedback: "Kashmir's Hidden Winter Wonderland",
mainImage: 'https://cdn.21st.dev/assets/mirror/e6/e65a9bed6f3ac4780519b0047cb73eafce53a1ac6820da0b7daf4eb48d178edc.jpg',
},
{
profileImage: 'https://cdn.21st.dev/assets/mirror/d8/d8dab29a5736d5c2b0084d720d3db02c785560071609be501541922928fdf831.jpg',
name: 'neophyte_clicker',
feedback: 'Celebrating Diwali Through The Lens',
mainImage: 'https://cdn.21st.dev/assets/mirror/c8/c8c4168fd74ed81d91e31cd79a552239ec00eea04e3d87945fe569d18a84b78a.jpg',
},
{
profileImage: 'https://cdn.21st.dev/assets/mirror/76/7641e5550cab8285a253f41bd03ff144ccd06bf847577af55bcb8b45e2908649.jpg',
name: 'Badshah1341',
feedback: 'A Sunset Symphony in Gold',
mainImage: 'https://cdn.21st.dev/assets/mirror/49/4915dfcfa43fc5689a2c142af75ff23925207edbfed9b9ecf02f105be6ad10e7.jpg',
},
{
profileImage: 'https://cdn.21st.dev/assets/mirror/dc/dc47fd5c6525a85ad39123b776bc6d19267d1be0a6962a8d89a3eed16ec8d7d3.jpg',
name: 'mohsinsyasin_',
feedback: 'realme Insider Event Kashmir',
mainImage: 'https://cdn.21st.dev/assets/mirror/4d/4d31450a10fcb8b4bf0db66c708695f30b96ba0a39f1d9698d54bfff9be4c8c2.jpg',
},
{
profileImage: 'https://cdn.21st.dev/assets/mirror/f0/f07b84f12ef125cbb837a7bd64da401992f5f62bd55fee10d01cd3dcc8abae80.jpg',
name: 'Naaz khan',
feedback: 'Illuminate the Night with the P3 Pro',
mainImage: 'https://cdn.21st.dev/assets/mirror/bf/bfa0e5c45572b61d57dbfcbbeaccd2fabace44828db428bc2fa0079ccf3f9372.jpg',
},
{
profileImage: 'https://cdn.21st.dev/assets/mirror/1b/1b3bb15506d4e4378f8c31f163859bba7155263c02d06221e3b376285498764e.jpg',
name: 'Venky_smile',
feedback: 'Highlights from realme',
mainImage: 'https://cdn.21st.dev/assets/mirror/1f/1fbc761ab05b00ba3fd750ae25670684c3a8159cbd773401b6b587c6e149c4fa.jpg',
},
{
profileImage: 'https://cdn.21st.dev/assets/mirror/35/3560ff7cbc9e86c333fccefe248e3ea5cdade4e46f6b2fc85d84755896cb2e5a.jpg',
name: 'LoserAnant',
feedback: '14 Pro Series Launch Event Recap',
mainImage: 'https://cdn.21st.dev/assets/mirror/e8/e8a342f265a46c21a89e81924102d27f7dd205937c7357b45844886ac1c0ff7d.jpg',
},
{
profileImage: 'https://cdn.21st.dev/assets/mirror/e6/e6ee2e0593ec044ab8b7a4697e34cfb92551c62b9495bf8a524ba905845ddb5d.jpg',
name: 'Isabella',
feedback: 'The mountains are calling me.',
mainImage: 'https://cdn.21st.dev/assets/mirror/41/41c53fd89fde691f276255f6787ab367446ce6966964af3f089ae01971f9f743.jpg',
},
];
// --- Reusable Card Component ---
const TestimonialCard = ({ profileImage, name, feedback, mainImage }: (typeof testimonials)[0]) => (
<div className="relative rounded-2xl overflow-hidden group transition-transform duration-300 ease-in-out hover:scale-105">
<img
src={mainImage}
alt={feedback}
className="w-full h-auto object-cover"
onError={(e) => {
e.currentTarget.src = 'https://cdn.21st.dev/assets/mirror/62/622147c3a5c3fcd93c2eff1c22e7d69535e41ce2ff7e53e23b74d4a99d9bf762.svg';
}}
/>
<div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/20 to-transparent" />
<div className="absolute top-0 left-0 p-4 text-white">
<div className="flex items-center gap-3 mb-2">
<img
src={profileImage}
className="w-8 h-8 rounded-full border-2 border-white/80"
alt={name}
onError={(e) => {
e.currentTarget.src = 'https://cdn.21st.dev/assets/mirror/70/7096a27b1a65059923fdabb49f2ccda1052a0ac25625304fcd520599d0f926d5.svg';
}}
/>
<span className="font-semibold text-sm drop-shadow-md">{name}</span>
</div>
<p className="text-sm font-medium leading-tight drop-shadow-md">{feedback}</p>
</div>
</div>
);
// --- Demo Component ---
const MasonryGridDemo = () => {
const [columns, setColumns] = React.useState(4);
// Function to determine columns based on screen width
const getColumns = (width: number) => {
if (width < 640) return 1; // sm
if (width < 1024) return 2; // lg
if (width < 1280) return 3; // xl
return 4; // 2xl and up
};
React.useEffect(() => {
const handleResize = () => {
setColumns(getColumns(window.innerWidth));
};
handleResize(); // Set initial columns on mount
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return (
<div className="w-full min-h-screen p-4 sm:p-6 lg:p-8 bg-background text-foreground">
<div className="max-w-7xl mx-auto">
<h1 className="text-3xl md:text-4xl font-bold mb-8 text-center">What People Are Saying</h1>
<MasonryGrid columns={columns} gap={4}>
{testimonials.map((card, index) => (
<TestimonialCard key={index} {...card} />
))}
</MasonryGrid>
</div>
</div>
);
};
export default MasonryGridDemo;