Typewriter Testimonial
This Typewriter Testimonial displays your testimonials in an interactive way.
Combining audio and a typewriter effect.
Installation
npx @ayushmxxn/serenity-ui@latest add typewriter-testimonial
Usage
import React from 'react'
import TypewriterTestimonial from './components/ui/TypewriterTestimonial'
const testimonials = [
{
image: 'https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=1780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
text: 'Using this component library has significantly speed up our development process. The quality and ease of integration are remarkable!',
name: 'David Smith',
jobtitle: 'UI Designer',
audio: 'David.mp3',
social: 'https://i.imgur.com/VRtqhGC.png'
},
{
image: 'https://i.imgur.com/cRwFxtE.png',
text: 'I love how intuitive and well-documented this component library is. It has significantly improved our UI consistency across projects.',
name: 'James Wilson',
jobtitle: 'Product Manager',
audio: 'James.mp3',
social: 'https://i.imgur.com/VRtqhGC.png'
},
{
image: 'https://i.imgur.com/3ROmJ0S.png',
text: 'Using this library has been a game-changer for our product development.',
name: 'Michael Davis',
jobtitle: 'Full Stack Developer',
audio: 'Michael.mp3',
social: 'https://i.imgur.com/VRtqhGC.png'
},
{
image: 'https://i.imgur.com/6fKCuVC.png',
text: 'The components are highly responsive and work seamlessly across different devices and screen sizes.',
name: 'Emily Chen',
jobtitle: 'Mobile App Developer',
audio: 'Emily.mp3',
social: 'https://i.imgur.com/VRtqhGC.png'
},
{
image: 'https://i.imgur.com/bG88vHI.png',
text: 'This library has saved us a significant amount of time and effort. The components are well-documented and easy to integrate.',
name: 'Sarah Taylor',
jobtitle: 'Backend Developer',
audio: 'Sarah.mp3',
social: 'https://i.imgur.com/VRtqhGC.png'
},
{
image: 'https://i.imgur.com/tjmS77j.png',
text: 'I appreciate the attention to detail in the design. The components are visually appealing and professional.',
name: 'Kevin White',
jobtitle: 'UI/UX Designer',
audio: 'Kevin.mp3',
social: 'https://i.imgur.com/VRtqhGC.png'
},
{
image: 'https://i.imgur.com/yTsomza.png',
text: 'The components are highly customizable and can be easily integrated with our existing UI framework.',
name: 'Rachel Patel',
jobtitle: 'Full Stack Developer',
audio: 'Rachel.mp3',
social: 'https://i.imgur.com/VRtqhGC.png'
},
{
image: 'https://i.imgur.com/pnsLqpq.png',
text: 'I love how the components are designed to be highly responsive and work well across different screen sizes.',
name: 'Brian Kim',
jobtitle: 'Mobile App Developer',
audio: 'Brian.mp3',
social: 'https://i.imgur.com/VRtqhGC.png'
},
];
function page() {
return (
<div>
<TypewriterTestimonial testimonials={testimonials}/>
</div>
)
}
export default page;
Props
Prop Name | Type | Description |
---|---|---|
image | string | Represents the URL or path to an avatar image |
name | string | Specifies the name of the person |
jobtitle | string | Specifies the job title of the person |
text | string | Specifies the testimonial that the person has given |
audio | string | Represents the URL or path to an audio file |