115 lines
2.4 KiB
Markdown
115 lines
2.4 KiB
Markdown
---
|
|
name: psychology/trust-signals
|
|
title: Trust Signals & Credibility Indicators
|
|
description: Badges, certifications, security indicators, social proof placement.
|
|
tags: [psychology, trust, credibility, badges, security, cialdini]
|
|
source: stripe.com, raycast.com, resend.com, baymard.com
|
|
---
|
|
|
|
# Trust Signals & Credibility Indicators
|
|
|
|
## Пирамида доверия
|
|
|
|
```
|
|
[Security Certifications] ← PCI DSS, GDPR, SOC 2
|
|
↓
|
|
[Brand Logos] ← Known clients, partners
|
|
↓
|
|
[Statistics] ← Numbers, users, uptime
|
|
↓
|
|
[Testimonials] ← Reviews, case studies
|
|
↓
|
|
[Guarantees] ← Money-back, free trial
|
|
```
|
|
|
|
## 1. Security Badges
|
|
|
|
```html
|
|
<div class="trust-badges">
|
|
<div class="badge">
|
|
<svg width="24" height="24">🔒</svg>
|
|
<span>SSL Encrypted</span>
|
|
</div>
|
|
<div class="badge">
|
|
<svg width="24" height="24">🛡️</svg>
|
|
<span>GDPR Compliant</span>
|
|
</div>
|
|
<div class="badge">
|
|
<svg width="24" height="24">✓</svg>
|
|
<span>SOC 2 Certified</span>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
```css
|
|
.trust-badges {
|
|
display: flex;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
padding: 24px 0;
|
|
}
|
|
|
|
.badge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 8px;
|
|
font-size: 0.875rem;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
```
|
|
|
|
## 2. Uptime/Status
|
|
|
|
```html
|
|
<div class="status-bar">
|
|
<div class="status-indicator online">
|
|
<span class="dot"></span>
|
|
<span>99.9% uptime</span>
|
|
</div>
|
|
<div class="status-indicator">
|
|
<span>⚡ Fastest in Russia</span>
|
|
</div>
|
|
<div class="status-indicator">
|
|
<span>🌍 Moscow, SPb, Vladivostok</span>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
```css
|
|
.status-bar {
|
|
display: flex;
|
|
gap: 24px;
|
|
justify-content: center;
|
|
padding: 16px 0;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.dot {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #10b981;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
```
|
|
|
|
## 3. Guarantee Section
|
|
|
|
```html
|
|
<section class="guarantee">
|
|
<div class="guarantee-badge">🛡️</div>
|
|
<h3>30-день гарантия возврата</h3>
|
|
<p>Если вам не понравится — вернём деньги без вопросов.</p>
|
|
<div class="trust-logos">
|
|
<img src="/vis...[truncated] |