50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1fd9,'use client'; import { useState } from 'react'; import { AnimatePresence, motion, useReducedMotion } from 'framer-motion'; import { Button } from '@/components/ui/button'; import { TestimonialsCard } from './testimonials-card'; const INITIAL_MOBILE_CARDS = 3; const MOBILE_CARDS_PER_LOAD = 3; const TESTIMONIALS_GRID_ID = 'testimonials-grid'; interface Testimonial { avatar: string; comment: string; name: string; role: string; company?: string; } const testimonials: Testimonial[] = [ { avatar: "/demo/avatars/avatar-1.svg", comment: "This solution has completely transformed how our team works. The efficiency gains have been remarkable, and our productivity has increased significantly.", name: 'Sarah Anderson', role: 'Product Manager', company: 'TechFlow Inc.', }, { avatar: "/demo/avatars/avatar-2.svg", comment: "I've been impressed with the seamless integration and exceptional support. It's rare to find a product that delivers on all its promises.", name: 'Michael Chen', role: 'CEO', company: 'CloudX Solutions', }, { avatar: "/demo/avatars/avatar-3.svg", comment: "The results speak for themselves. We've seen a 40% improvement in our workflow efficiency and the team loves the intuitive interface.", name: 'Emma Rodriguez', role: 'Operations Director', company: 'NextGen Systems', }, { avatar: "/demo/avatars/avatar-4.svg", comment: 'Outstanding product with incredible attention to detail. The customer service team goes above and beyond to ensure success.', name: 'James Wilson', role: 'CTO', company: 'Digital Innovations', }, { avatar: "/demo/avatars/avatar-5.svg", comment: 'From day one, the implementation was smooth and the ROI has exceeded our expectations. This is a game-changer for our organization.', name: 'Lisa Zhang', role: 'VP of Strategy', company: 'Future Corp', }, { avatar: "/demo/avatars/avatar-6.svg", comment: 'What sets this apart is the commitment to continuous improvement. Every update brings valuable enhancements that our team immediately benefits from.', name: 'David Kim', role: 'Head of Development', company: 'InnovateTech', }, ]; export function SocialProof() { const [visibleMobileCards, setVisibleMobileCards] = useState(INITIAL_MOBILE_CARDS); const prefersReducedMotion = useReducedMotion(); const visibleTestimonials = testimonials.slice(0, visibleMobileCards); const hasHiddenTestimonials = visibleMobileCards < testimonials.length; const hasExpandedTestimonials = visibleMobileCards > INITIAL_MOBILE_CARDS; const loadMoreTestimonials = () => { setVisibleMobileCards((currentCount) => Math.min(currentCount + MOBILE_CARDS_PER_LOAD, testimonials.length) ); }; const showFewerTestimonials = () => { setVisibleMobileCards(INITIAL_MOBILE_CARDS); }; return (

{/* Scoped CSS: swaps the mobile/desktop grid via media queries, and applies a bottom fade mask to the mobile grid while it's collapsed. */}

{/* Header */}

Trusted by Industry Leaders

See how companies like yours are achieving remarkable results with our solution

{/* The complete grid stays visible on desktop. */}

{testimonials.map((testimonial) => ( ))}

{/* Mobile uses a slice so testimonials are added in predictable batches. */}

{visibleTestimonials.map((testimonial, index) => ( ))}

{hasHiddenTestimonials && ( )} {hasExpandedTestimonials && ( )}

); } 53:T6ff,import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Card } from '@/components/ui/card'; interface Testimonial { avatar: string; comment: string; name: string; role: string; company?: string; } interface TestimonialsCardProps { testimonial: Testimonial; /** When true, the card is hidden on mobile but still shown on desktop (md+). */ hidden?: boolean; } export function TestimonialsCard({ testimonial, hidden = false }: TestimonialsCardProps) { return ( {/* Author Info */}

{/* Fallback initials: first letter of each name part (e.g. "Sarah Anderson" -> "SA"). */} {testimonial.name.split(' ').map((n) => n[0]).join('')}

{testimonial.name}

{testimonial.role} {testimonial.company && ` • ${testimonial.company}`}

{/* Comment */}

{testimonial.comment}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@hexui","registryDependencies":["avatar","button","card"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/blocks/social-proof/social-proof-testimonials-1/source/app/social-proof/page.tsx","content":"import { SocialProof } from \"../../components/social-proof\"\n\nexport default function Page() {\n return (\n \n )\n}\n","type":"registry:page","target":"app/social-proof/page.tsx"},{"path":"registry/blocks/social-proof/social-proof-testimonials-1/source/components/social-proof.tsx","content":"$52","type":"registry:component"},{"path":"registry/blocks/social-proof/social-proof-testimonials-1/source/components/testimonials-card.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]