4e: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"] 4f: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"] 50: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"] 51:T250e,import { Card, CardContent } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Star, Quote, Users, Award, Shield, Truck } from 'lucide-react'; export default function SocialProofReviews() { const trustMetrics = [ { icon: Users, value: '50,000+', label: 'Happy Customers', color: 'text-blue-600', }, { icon: Star, value: '4.9/5', label: 'Average Rating', color: 'text-yellow-500', }, { icon: Award, value: '99%', label: 'Satisfaction Rate', color: 'text-green-600', }, { icon: Shield, value: 'SSL', label: 'Secure Shopping', color: 'text-purple-600', }, ]; const featuredReviews = [ { name: 'Sarah M.', rating: 5, review: 'Incredible quality and fast shipping!', avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3', verified: true, }, { name: 'Mike R.', rating: 5, review: "Best purchase I've made this year.", avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3', verified: true, }, { name: 'Emma K.', rating: 5, review: 'Exceeded all my expectations!', avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3', verified: true, }, ]; const customerPhotos = [ 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3', 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3', 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3', 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3', 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3', 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.0.3', ]; const highlights = [ 'Free shipping on orders over $50', '30-day money-back guarantee', '24/7 customer support', 'Eco-friendly packaging', ]; const recentActivity = [ 'Emma from New York purchased 2 minutes ago', 'James from California purchased 5 minutes ago', 'Sofia from Texas purchased 8 minutes ago', ]; return (

{/* Trust Metrics */}

{trustMetrics.map((metric, index) => (

{metric.value}

{metric.label}

))}

{/* Left Column - Reviews */}

What Our Customers Say

{[...Array(5)].map((_, i) => ( ))}

4.9 out of 5 (2,547 reviews)

{/* Featured Reviews */}

{featuredReviews.map((review, index) => (

"{review.review}"

{review.name[0]}

{review.name}

{review.verified && ( Verified )}

{[...Array(5)].map((_, i) => ( ))}

))}

{/* Right Column - Social Proof */}

{/* Customer Photos */}

Happy Customers

{customerPhotos.map((photo, index) => (

))}

Join 50,000+ satisfied customers

{/* Trust Badges */}

Why Choose Us

{highlights.map((highlight, index) => (

{highlight}

))}

{/* Recent Activity */}

Recent Orders

{recentActivity.map((activity, index) => (

{activity}

))}

{/* Rating Breakdown */}

Rating Breakdown

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

{rating}

{rating === 5 ? '85%' : rating === 4 ? '12%' : '3%'}

))}

); } 52:Ta35,import * as React from "react" import { cn } from "@/lib/utils" function Card({ className, size = "default", ...props }: React.ComponentProps<"div"> & { size?: "default" | "sm" }) { return (

img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className )} {...props} /> ) } function CardHeader({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardTitle({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardDescription({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardAction({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardContent({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardFooter({ className, ...props }: React.ComponentProps<"div">) { return (

) } export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } 53:T749,import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { Slot } from "radix-ui" import { cn } from "@/lib/utils" const badgeVariants = cva( "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", { variants: { variant: { default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80", secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80", destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20", outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground", ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50", link: "text-primary underline-offset-4 hover:underline", }, }, defaultVariants: { variant: "default", }, } ) function Badge({ className, variant = "default", asChild = false, ...props }: React.ComponentProps<"span"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot.Root : "span" return ( ) } export { Badge, badgeVariants } 54:Tc1a,"use client" import * as React from "react" import { Avatar as AvatarPrimitive } from "radix-ui" import { cn } from "@/lib/utils" function Avatar({ className, size = "default", ...props }: React.ComponentProps & { size?: "default" | "sm" | "lg" }) { return ( ) } function AvatarImage({ className, ...props }: React.ComponentProps) { return ( ) } function AvatarFallback({ className, ...props }: React.ComponentProps) { return ( ) } function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) { return ( svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className )} {...props} /> ) } function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) { return (

) } function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">) { return (

svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className )} {...props} /> ) } export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge, } 4a:["$","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":[["$","li","class-variance-authority",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","radix-ui",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"radix-ui"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://www.shadcn-ui-blocks.com/r/ecommerce-ecommerce-customer-reviews-social-proof-reviews.json","proxyUrl":"https://shadcnregistry.com/r/shadcn-ui-blocks/ecommerce-ecommerce-customer-reviews-social-proof-reviews","itemId":"@shadcn-ui-blocks/ecommerce-ecommerce-customer-reviews-social-proof-reviews"}],["$","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"}],["$","$L50",null,{"files":[{"path":"components/blocks/ecommerce/ecommerce-customer-reviews/social-proof-reviews.tsx","content":"$51","type":"registry:component","target":"components/blocks/ecommerce/ecommerce-customer-reviews/social-proof-reviews.tsx"},{"path":"components/ui/card.tsx","content":"$52","type":"registry:ui","target":"components/ui/card.tsx"},{"path":"components/ui/badge.tsx","content":"$53","type":"registry:ui","target":"components/ui/badge.tsx"},{"path":"components/ui/avatar.tsx","content":"$54","type":"registry:ui","target":"components/ui/avatar.tsx"}]}]]}],"$L55"]}]

Social Proof Reviews

Installation

Files

components

Styles