SocialProof

Combined section with avatar stack, customer count, and rating stats

Marketing & Landingsocial-prooftestimonialsratings

Dependencies

shadcn/ui components needed:

npx shadcn@latest add cardnpx shadcn@latest add avatar

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { Card, CardContent } from '@/components/ui/card';
4import { Avatar, AvatarFallback } from '@/components/ui/avatar';
5import { Star } from 'lucide-react';
6
7const avatarColors = [
8  'from-purple-500 to-indigo-500',
9  'from-pink-500 to-rose-500',
10  'from-cyan-500 to-blue-500',
11  'from-amber-500 to-orange-500',
12  'from-emerald-500 to-teal-500',
13];
14
15const initials = ['JD', 'AS', 'MK', 'RL', 'TC'];
16
17export default function SocialProof() {
18  return (
19    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 py-20 px-6 flex items-center">
20      <div className="container mx-auto max-w-5xl">
21        <div className="grid lg:grid-cols-2 gap-8 items-center">
22          {/* Left side - Avatar stack and text */}
23          <div className="space-y-6">
24            <div className="flex items-center -space-x-3">
25              {initials.map((initial, index) => (
26                <Avatar
27                  key={index}
28                  className={
29                    'w-12 h-12 border-2 border-slate-900 bg-gradient-to-br ' +
30                    avatarColors[index]
31                  }
32                >
33                  <AvatarFallback className="text-white font-semibold text-sm">
34                    {initial}
35                  </AvatarFallback>
36                </Avatar>
37              ))}
38              <div className="w-12 h-12 rounded-full bg-slate-800 border-2 border-slate-900 flex items-center justify-center text-white font-semibold text-sm">
39                +5K
40              </div>
41            </div>
42            
43            <div>
44              <h3 className="text-2xl md:text-3xl font-bold text-white mb-2">
45                Join 10,000+ happy customers
46              </h3>
47              <div className="flex items-center gap-2">
48                <div className="flex gap-1">
49                  {[...Array(5)].map((_, i) => (
50                    <Star
51                      key={i}
52                      className="h-5 w-5 text-yellow-400 fill-yellow-400"
53                    />
54                  ))}
55                </div>
56                <span className="text-slate-400">4.9 out of 5</span>
57              </div>
58            </div>
59            
60            <p className="text-slate-400 text-lg max-w-md">
61              Thousands of businesses trust us to power their growth. See what makes us different.
62            </p>
63          </div>
64          
65          {/* Right side - Stat cards */}
66          <div className="grid grid-cols-2 gap-4">
67            <Card className="bg-gradient-to-br from-purple-900/30 to-indigo-900/30 border-purple-500/30 hover:border-purple-500/50 transition-all duration-300 hover:-translate-y-1">
68              <CardContent className="p-6 text-center">
69                <div className="flex justify-center gap-1 mb-3">
70                  {[...Array(5)].map((_, i) => (
71                    <Star
72                      key={i}
73                      className="h-4 w-4 text-yellow-400 fill-yellow-400"
74                    />
75                  ))}
76                </div>
77                <p className="text-3xl font-bold text-white mb-1">4.9</p>
78                <p className="text-slate-400 text-sm">out of 5 rating</p>
79              </CardContent>
80            </Card>
81            
82            <Card className="bg-gradient-to-br from-purple-900/30 to-indigo-900/30 border-purple-500/30 hover:border-purple-500/50 transition-all duration-300 hover:-translate-y-1">
83              <CardContent className="p-6 text-center">
84                <div className="w-10 h-10 mx-auto mb-3 bg-gradient-to-br from-purple-500 to-indigo-500 rounded-lg flex items-center justify-center">
85                  <span className="text-white font-bold">10K+</span>
86                </div>
87                <p className="text-3xl font-bold text-white mb-1">10,000+</p>
88                <p className="text-slate-400 text-sm">verified reviews</p>
89              </CardContent>
90            </Card>
91            
92            <Card className="bg-gradient-to-br from-slate-800/50 to-slate-900/50 border-slate-700/50 col-span-2 hover:border-purple-500/30 transition-all duration-300 hover:-translate-y-1">
93              <CardContent className="p-6 flex items-center gap-4">
94                <div className="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-500 rounded-xl flex items-center justify-center flex-shrink-0">
95                  <span className="text-white text-xl">✓</span>
96                </div>
97                <div>
98                  <p className="text-white font-semibold mb-1">
99                    Recommended by 98% of users
100                  </p>
101                  <p className="text-slate-400 text-sm">
102                    Based on our latest customer satisfaction survey
103                  </p>
104                </div>
105              </CardContent>
106            </Card>
107          </div>
108        </div>
109      </div>
110    </div>
111  );
112}