Menu
Testimonial 4
<section id="relume" class="px-[5%] py-16 md:py-24 lg:py-28">
<div class="container">
<div class="mx-auto w-full max-w-lg text-center">
<div class="mb-6 flex items-center justify-center md:mb-8">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21.947 9.179a1.001 1.001 0 0 0-.868-.676l-5.701-.453-2.467-5.461a.998.998 0 0 0-1.822-.001L8.622 8.05l-5.701.453a1 1 0 0 0-.619 1.713l4.213 4.107-1.49 6.452a1 1 0 0 0 1.53 1.057L12 18.202l5.445 3.63a1.001 1.001 0 0 0 1.517-1.106l-1.829-6.4 4.536-4.082c.297-.268.406-.686.278-1.065z"
></path></svg
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21.947 9.179a1.001 1.001 0 0 0-.868-.676l-5.701-.453-2.467-5.461a.998.998 0 0 0-1.822-.001L8.622 8.05l-5.701.453a1 1 0 0 0-.619 1.713l4.213 4.107-1.49 6.452a1 1 0 0 0 1.53 1.057L12 18.202l5.445 3.63a1.001 1.001 0 0 0 1.517-1.106l-1.829-6.4 4.536-4.082c.297-.268.406-.686.278-1.065z"
></path></svg
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21.947 9.179a1.001 1.001 0 0 0-.868-.676l-5.701-.453-2.467-5.461a.998.998 0 0 0-1.822-.001L8.622 8.05l-5.701.453a1 1 0 0 0-.619 1.713l4.213 4.107-1.49 6.452a1 1 0 0 0 1.53 1.057L12 18.202l5.445 3.63a1.001 1.001 0 0 0 1.517-1.106l-1.829-6.4 4.536-4.082c.297-.268.406-.686.278-1.065z"
></path></svg
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21.947 9.179a1.001 1.001 0 0 0-.868-.676l-5.701-.453-2.467-5.461a.998.998 0 0 0-1.822-.001L8.622 8.05l-5.701.453a1 1 0 0 0-.619 1.713l4.213 4.107-1.49 6.452a1 1 0 0 0 1.53 1.057L12 18.202l5.445 3.63a1.001 1.001 0 0 0 1.517-1.106l-1.829-6.4 4.536-4.082c.297-.268.406-.686.278-1.065z"
></path></svg
><svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21.947 9.179a1.001 1.001 0 0 0-.868-.676l-5.701-.453-2.467-5.461a.998.998 0 0 0-1.822-.001L8.622 8.05l-5.701.453a1 1 0 0 0-.619 1.713l4.213 4.107-1.49 6.452a1 1 0 0 0 1.53 1.057L12 18.202l5.445 3.63a1.001 1.001 0 0 0 1.517-1.106l-1.829-6.4 4.536-4.082c.297-.268.406-.686.278-1.065z"
></path>
</svg>
</div>
<blockquote class="text-xl font-bold md:text-2xl">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in
eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut
commodo diam libero vitae erat."
</blockquote>
<div
class="mt-6 flex w-full flex-col items-center justify-center gap-3 text-center md:mt-8 md:w-auto md:flex-row md:gap-5 md:text-left"
>
<div>
<img
src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
alt="Testimonial avatar 1"
class="size-14 min-h-14 min-w-14 rounded-full object-cover"
/>
</div>
<div class="mb-4 md:mb-0">
<p class="font-semibold">Name Surname</p>
<p>Position, Company name</p>
</div>
<div class="hidden w-px self-stretch bg-black md:block"></div>
<div>
<img
src="https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg"
alt="Webflow logo 1"
class="max-h-12"
/>
</div>
</div>
</div>
</div>
</section>
import { BiSolidStar } from "react-icons/bi";
type ImageProps = {
url?: string;
src: string;
alt?: string;
};
type Props = {
numberOfStars: number;
quote: string;
avatar: ImageProps;
name: string;
position: string;
logo: ImageProps;
};
export type Testimonial4Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
export const Testimonial4 = (props: Testimonial4Props) => {
const { numberOfStars, quote, avatar, name, position, logo } = {
...Testimonial4Defaults,
...props,
};
return (
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
<div className="container">
<div className="mx-auto w-full max-w-lg text-center">
<div className="mb-6 flex items-center justify-center md:mb-8">
{Array(numberOfStars)
.fill(null)
.map((_, starIndex) => (
<BiSolidStar key={starIndex} className="size-6" />
))}
</div>
<blockquote className="text-xl font-bold md:text-2xl">{quote}</blockquote>
<div className="mt-6 flex w-full flex-col items-center justify-center gap-3 text-center md:mt-8 md:w-auto md:flex-row md:gap-5 md:text-left">
<div>
<img
src={avatar.src}
alt={avatar.alt}
className="size-14 min-h-14 min-w-14 rounded-full object-cover"
/>
</div>
<div className="mb-4 md:mb-0">
<p className="font-semibold">{name}</p>
<p>{position}</p>
</div>
<div className="hidden w-px self-stretch bg-black md:block" />
<div>
<img src={logo.src} alt={logo.alt} className="max-h-12" />
</div>
</div>
</div>
</div>
</section>
);
};
export const Testimonial4Defaults: Props = {
numberOfStars: 5,
quote:
'"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat."',
avatar: {
src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
alt: "Testimonial avatar 1",
},
name: "Name Surname",
position: "Position, Company name",
logo: {
src: "https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg",
alt: "Webflow logo 1",
},
};
.svg)
.svg)
Need help?
For installation guidelines and API information, visit the docs.
Examples
No items found.
.avif)
.avif)
.avif)
.webp)
.webp)
.webp)
