4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:Tfc9,"use client"; import { Marquee } from '@/components/ui/marquee'; import { TestimonialCard, type Testimonial } from './testimonials-card'; 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', }, ]; // Split testimonials into two rows; the second row scrolls in reverse for a counter-flow effect. const firstRow = testimonials.slice(0, testimonials.length / 2) const secondRow = testimonials.slice(testimonials.length / 2) export function SocialProof() { return (

{/* Header */}

Trusted by Industry Leaders

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

{/* Testimonials Marquee */}

{firstRow.map((testimonial, index) => ( ))} {secondRow.map((testimonial, index) => ( ))}

); } 53:T676,import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'; import { Card } from '@/components/ui/card'; export interface Testimonial { avatar: string; comment: string; name: string; role: string; company?: string; } interface TestimonialCardProps { testimonial: Testimonial; } export function TestimonialCard({ testimonial }: TestimonialCardProps) { 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}

); }54:T839,import { type ComponentPropsWithoutRef } from "react" import { cn } from "@/lib/utils" interface MarqueeProps extends ComponentPropsWithoutRef<"div"> { /** * Optional CSS class name to apply custom styles */ className?: string /** * Whether to reverse the animation direction * @default false */ reverse?: boolean /** * Whether to pause the animation on hover * @default false */ pauseOnHover?: boolean /** * Content to be displayed in the marquee */ children: React.ReactNode /** * Whether to animate vertically instead of horizontally * @default false */ vertical?: boolean /** * Number of times to repeat the content * @default 4 */ repeat?: number } export function Marquee({ className, reverse = false, pauseOnHover = false, children, vertical = false, repeat = 4, style, ...props }: MarqueeProps) { // Edge-fade mask applied via CSS mask-image so content fades out at both ends. const fadeMask = vertical ? "linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%)" : "linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%)" return (

{/* Duplicate children N times so the marquee loops seamlessly without a visible gap. */} {Array.from({ length: repeat }).map((_, i) => (

{children}

))}

) } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4f",null,{"registryDependencies":["avatar","card"]}]]}],["$","$L50",null,{"sourceUrl":"https://hexui.sh/r/social-proof-testimonials-2.json","proxyUrl":"https://shadcnregistry.com/r/hexui/social-proof-testimonials-2","itemId":"@hexui/social-proof-testimonials-2"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"registry/blocks/social-proof/social-proof-testimonials-2/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-2/source/components/social-proof.tsx","content":"$52","type":"registry:component"},{"path":"registry/blocks/social-proof/social-proof-testimonials-2/source/components/testimonials-card.tsx","content":"$53","type":"registry:component"},{"path":"registry/components/marquee.tsx","content":"$54","type":"registry:ui"}]}]]}],"$L55"]}]

Social Proof Testimonials 2

Installation

Files

app

components

Styles