"use client" // shadcn import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" // third-party import { cn } from "cn" import { motion, type Variants } from "framer-motion" // project-imports import branding from "@/branding.json" import SectionHeader from "@/components/uiable/blocks/landing/components/SectionHeader" // types interface Testimonial { name: string avatar: string description: string rating: number x: string } // data const testimonials: Testimonial[] = [ { name: "Ali", avatar: "https://cdn.uiable.com/block/ali.png", description: "That's awesome Rakesh, all the best! 🔥", rating: 5, x: "https://x.com/alicalimli_dev/status/2091410948506398971", }, { name: "Shefali", avatar: "https://cdn.uiable.com/block/shefali.png", description: `I came across ${branding.brandName} and honestly, it looks super useful. components are clean, easy to use, and the overall setup feels very developer-friendly.`, rating: 5, x: "https://x.com/Shefali__J", }, { name: "Mujeeb Ahmed", avatar: "https://cdn.uiable.com/block/mujeeb.png", description: `${branding.brandName} looks like a handy resource for React developers.`, rating: 5, x: "https://x.com/hey_mujeebahmed/status/2089670798516842737", }, { name: "Ajay Yadav", avatar: "https://cdn.uiable.com/block/ajay_yadav.png", description: "wow loooks nice to me", rating: 5, x: "https://x.com/ATechAjay/status/2089672073107161338", }, { name: "Tech Fusionist | Kushal Gangil", avatar: "https://cdn.uiable.com/block/tech_fusionist.png", description: "it's UI is very much clean....easy to follow", rating: 5, x: "https://x.com/techyoutbe/status/2089815119325020628", }, { name: "Adarsh Chetan", avatar: "https://cdn.uiable.com/block/adarsh_chetan.png", description: "Amazing", rating: 5, x: "https://x.com/AdarshChetan/status/2089924261662314731", }, { name: "H A J R A", avatar: "https://cdn.uiable.com/block/hajra.png", description: "This looks really useful for React developers.", rating: 5, x: "https://x.com/codewithhajra/status/2089660761983320351", }, { name: "Dhanian", avatar: "https://cdn.uiable.com/block/dhanaim.png", description: "This is amazing", rating: 5, x: "https://x.com/e_opore/status/2090100428297867365", }, { name: "Solomon Neas", avatar: "https://cdn.uiable.com/block/solomon_neas.png", description: "love this, the greyscale gets old, fast", rating: 5, x: "https://x.com/solomonneas/status/2073021710236819877", }, { name: "Paweł L", avatar: "https://cdn.uiable.com/block/pawel.png", description: "Clean code and very good docs. It saves quite a lot of dev time so definitely worth the money", rating: 5, x: "", }, { name: "Josef B.", avatar: "", description: "right choice for my project. Love the design, structure is what i expected, and its easily scalable for my need. Highly recommended!", rating: 5, x: "", }, { name: "Luke Martinez", avatar: "", description: "The code quality and structure are excellent it's also very clear and easy to customize.", rating: 5, x: "", }, ] // ------------------------------ | CONSTANTS | ------------------------------ // const containerVariants: Variants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.05, delayChildren: 0.1, }, }, } const itemVariants: Variants = { hidden: { y: 20, opacity: 0 }, visible: { y: 0, opacity: 1, transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] }, }, } function StarIcon({ filled }: { filled: boolean }) { return ( ) } function XIcon() { return ( ) } function TestimonialCard({ testimonial }: { testimonial: Testimonial }) { const initials = testimonial.name .split(" ") .filter(Boolean) .slice(0, 2) .map((part) => part.charAt(0)) .join("") return (

{testimonial.avatar ? ( ) : null} {initials}

{testimonial.name}

{[1, 2, 3, 4, 5].map((i) => ( ))}

{testimonial.x ? ( ) : null}

{testimonial.description}

) } // ------------------------------ | TESTIMONIALS | ------------------------------ // export default function Testimonials() { return (

{testimonials .filter((testimonial) => testimonial.description.trim() !== "") .map((testimonial) => ( ))}

) }