// This is a demo of a preview
'use client';
import { Component } from "@/components/ui/voice-testimonial";
const DemoOne = () => {
const testimonials = [
{
image: 'https://cdn.21st.dev/assets/mirror/f0/f0c838a25f6460c39c84cb5835882259b9d99bae288116728edb4d28c9b730a9.jpg',
name: 'Ethan Smith',
jobtitle: 'Software Engineer',
text: 'This component library is incredibly versatile. It saved me hours of development time. The voice testimonials are a brilliant addition!',
audio: 'ethan-smith.mp3',
social: 'https://twitter.com/ethansmithdev',
},
{
image: 'https://cdn.21st.dev/assets/mirror/9f/9f8b26f06055b0fad168c4ecfa5d66444476b9c4aa37bc71d49208157883406d.jpg',
name: 'Olivia Chen',
jobtitle: 'Product Manager',
text: 'The seamless integration and intuitive design of these components are truly impressive. Our users love the new audio testimonials!',
audio: 'olivia-chen.mp3',
social: 'https://twitter.com/oliviachenpm',
},
{
image: 'https://cdn.21st.dev/assets/mirror/6b/6ba5674f5c5b523d73342d575c82e6767da8e7b9fc6ffddac67c93dd17d171c7.jpg',
name: 'Liam Johnson',
jobtitle: 'UX Designer',
text: 'As a UX designer, I appreciate the attention to detail. The audio feature adds a new dimension to testimonials, making them more engaging.',
audio: 'liam-johnson.mp3',
social: 'https://twitter.com/liamjohnsonux',
},
{
image: 'https://cdn.21st.dev/assets/mirror/72/72aaaefa57fb63db19fb0ee8be7ab81247f6a1a705af013862591a6a1a9be2ae.jpg',
name: 'Ava Martinez',
jobtitle: 'Marketing Specialist',
text: 'This library is a game-changer for our marketing efforts. The voice testimonials have significantly boosted our conversion rates!',
audio: 'ava-martinez.mp3',
social: 'https://twitter.com/avamarketing',
},
{
image: 'https://images.unsplash.com/photo-1507003211169-0a6dd7228f2d?q=80&w=1780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
name: 'Noah Williams',
jobtitle: 'Full Stack Developer',
text: 'Developing with these components is a breeze. The documentation is clear, and the audio testimonials offer a unique user experience.',
audio: 'noah-williams.mp3',
social: 'https://twitter.com/noahwdev',
},
{
image: 'https://cdn.21st.dev/assets/mirror/c5/c5e905b2860ce5a3e29444919c8ea8ae09056efbf0f8c556c7dac89bee1f7c06.jpg',
name: 'Sophia Brown',
jobtitle: 'Content Creator',
text: 'The voice testimonial component is fantastic! It makes our content more dynamic and engaging. Highly recommend it to others.',
audio: 'sophia-brown.mp3',
social: 'https://twitter.com/sophiacreates',
},
{
image: 'https://cdn.21st.dev/assets/mirror/d3/d3df836ddb1cdd5c3f9b67cee0fbc2f703adecc684034c08114bb2f3dfa1f201.jpg',
name: 'James Davis',
jobtitle: 'Startup Founder',
text: 'As a startup, efficiency is key. This component library provides high-quality, ready-to-use solutions. The audio testimonials are a standout.',
audio: 'james-davis.mp3',
social: 'https://twitter.com/jamesdfounder',
},
{
image: 'https://cdn.21st.dev/assets/mirror/32/32f64aca4c830306f5500a0fac1f016796fe71d74d93047225b725174e4db3ce.jpg',
name: 'Benjamin Miller',
jobtitle: 'Backend Engineer',
text: 'Solid components and excellent performance. The voice testimonials integrate smoothly and provide a rich user experience.',
audio: 'benjamin-miller.mp3',
social: 'https://twitter.com/benmillerdev',
},
];
return (
<div className="flex w-full h-screen justify-center items-center">
<Component mode="dark" testimonials={testimonials} />
</div>
);
};
export default DemoOne;Part of Serenity UI — browse the full library on 21st.dev.