The Testimonial component is designed to display a testimonial with customizable content, an optional logo, and information about the author. This component provides a visually appealing layout with a background gradient and shadow effects. It is suitable for showcasing testimonials or quotes in a prominent manner.

To use the Testimonial component in your Vue.js application, you need to pass the necessary props:

resources/views/livewire/testimonial.blade.php
<section class="relative isolate overflow-hidden bg-base px-6 py-24 sm:py-32 lg:px-8">
    <div class="absolute inset-0 -z-10 bg-[radial-gradient(45rem_50rem_at_top,theme(colors.indigo.100),white)] opacity-20"></div>
    <div class="absolute inset-y-0 right-1/2 -z-10 mr-16 w-[200%] origin-bottom-left skew-x-[-30deg] bg-base shadow-xl shadow-indigo-600/10 ring-1 ring-indigo-50 sm:mr-28 lg:mr-0 xl:mr-16 xl:origin-center"></div>
    <div class="mx-auto max-w-2xl lg:max-w-4xl">
        <img v-if="logo" class="mx-auto h-12" :src="logo" alt="">
        <figure class="mt-10">
            <blockquote class="text-center text-xl font-semibold leading-8 text-gray-900 sm:text-2xl sm:leading-9">
                <p>
                    {{ $content }}
                </p>
            </blockquote>
            <figcaption class="mt-10">
                @if ($author['avatar'])
                    <img class="mx-auto h-10 w-10 rounded-full" src="{{ $author['avatar'] }}" alt="">
                @endif
                <div class="mt-4 flex items-center justify-center space-x-3 text-base">
                    <div class="font-semibold text-gray-900">{{ $author['name'] }}</div>
                    <svg viewBox="0 0 2 2" width="3" height="3" aria-hidden="true" class="fill-gray-900">
                        <circle cx="1" cy="1" r="1" />
                    </svg>
                    <div class="text-gray-600">{{ $author['position'] }}</div>
                </div>
            </figcaption>
        </figure>
    </div>
</section>

​
Props

The Testimonial component accepts the following props:

  • content (String): The main content of the testimonial.
  • logo (String): The path to the logo image (optional).
  • author (Object): An object containing information about the author.
    • name (String): The name of the author.
    • position (String): The position or role of the author.
    • avatar (String): The path to the author’s avatar image (optional).

Feel free to adapt and extend the Testimonial component to fit your specific use case.

ProblemFAQ