トラストバッジ

1export function TrustBadges001() {
2  const badges = [
3    {
4      icon: (
5        <svg
6          className="h-6 w-6"
7          fill="none"
8          stroke="currentColor"
9          viewBox="0 0 24 24"
10        >
11          <path
12            strokeLinecap="round"
13            strokeLinejoin="round"
14            strokeWidth={1.5}
15            d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
16          />
17        </svg>
18      ),
19      title: "SOC 2 Certified",
20      description: "Enterprise-grade security",
21    },
22    {
23      icon: (
24        <svg
25          className="h-6 w-6"
26          fill="none"
27          stroke="currentColor"
28          viewBox="0 0 24 24"
29        >
30          <path
31            strokeLinecap="round"
32            strokeLinejoin="round"
33            strokeWidth={1.5}
34            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
35          />
36        </svg>
37      ),
38      title: "GDPR Compliant",
39      description: "Your data is protected",
40    },
41    {
42      icon: (
43        <svg
44          className="h-6 w-6"
45          fill="none"
46          stroke="currentColor"
47          viewBox="0 0 24 24"
48        >
49          <path
50            strokeLinecap="round"
51            strokeLinejoin="round"
52            strokeWidth={1.5}
53            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
54          />
55        </svg>
56      ),
57      title: "99.9% Uptime",
58      description: "Reliable & always available",
59    },
60    {
61      icon: (
62        <svg
63          className="h-6 w-6"
64          fill="none"
65          stroke="currentColor"
66          viewBox="0 0 24 24"
67        >
68          <path
69            strokeLinecap="round"
70            strokeLinejoin="round"
71            strokeWidth={1.5}
72            d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"
73          />
74        </svg>
75      ),
76      title: "24/7 Support",
77      description: "We're here to help",
78    },
79  ];
80
81  const awards = [
82    { name: "Product Hunt", label: "#1 Product of the Day" },
83    { name: "G2", label: "Leader Spring 2024" },
84    { name: "Capterra", label: "Best Ease of Use" },
85    { name: "TrustRadius", label: "Top Rated 2024" },
86  ];
87
88  return (
89    <section className="bg-zinc-950 py-20 border-y border-zinc-800/50">
90      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
91        {/* Trust Badges */}
92        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
93          {badges.map((badge, index) => (
94            <div
95              key={index}
96              className="flex items-center gap-4 rounded-xl border border-zinc-800/50 bg-zinc-900/50 p-5"
97            >
98              <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-lg border border-zinc-800 bg-zinc-900 text-zinc-400">
99                {badge.icon}
100              </div>
101              <div>
102                <p className="font-medium tracking-wide text-white">
103                  {badge.title}
104                </p>
105                <p className="text-xs tracking-wide text-zinc-500">
106                  {badge.description}
107                </p>
108              </div>
109            </div>
110          ))}
111        </div>
112
113        {/* Divider */}
114        <div className="my-14 border-t border-zinc-800/50" />
115
116        {/* Awards */}
117        <div className="flex flex-wrap items-center justify-center gap-10 lg:gap-16">
118          {awards.map((award, index) => (
119            <div key={index} className="text-center">
120              <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full border border-zinc-800 bg-zinc-900">
121                <svg
122                  className="h-6 w-6 text-zinc-400"
123                  fill="currentColor"
124                  viewBox="0 0 20 20"
125                >
126                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
127                </svg>
128              </div>
129              <p className="mt-3 font-medium tracking-wide text-white">
130                {award.name}
131              </p>
132              <p className="text-xs tracking-wide text-zinc-500">
133                {award.label}
134              </p>
135            </div>
136          ))}
137        </div>
138      </div>
139    </section>
140  );
141}