136 lines
6.4 KiB
XML
136 lines
6.4 KiB
XML
type Props = {
|
|
license?: string;
|
|
years?: string;
|
|
rating?: string;
|
|
className?: string;
|
|
};
|
|
|
|
export default function TrustStrip({
|
|
license = 'TECL 12345',
|
|
years = '19+ Years',
|
|
rating = '4.9★ (200+ reviews)',
|
|
className = ''
|
|
}: Props) {
|
|
const trustBadges = [
|
|
{
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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" />
|
|
</svg>
|
|
),
|
|
text: 'Licensed & Insured',
|
|
subtext: license,
|
|
color: 'text-green-600'
|
|
},
|
|
{
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
|
</svg>
|
|
),
|
|
text: 'Top Rated',
|
|
subtext: rating,
|
|
color: 'text-yellow-500'
|
|
},
|
|
{
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<polyline points="12,6 12,12 16,14"/>
|
|
</svg>
|
|
),
|
|
text: '24/7 Emergency',
|
|
subtext: '< 60 min response',
|
|
color: 'text-red-600'
|
|
},
|
|
{
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
|
|
</svg>
|
|
),
|
|
text: 'BBB A+ Rating',
|
|
subtext: 'Accredited Business',
|
|
color: 'text-blue-600'
|
|
},
|
|
{
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
),
|
|
text: 'Free Estimates',
|
|
subtext: 'No hidden fees',
|
|
color: 'text-emerald-600'
|
|
},
|
|
{
|
|
icon: (
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
|
</svg>
|
|
),
|
|
text: 'Local Experts',
|
|
subtext: years,
|
|
color: 'text-purple-600'
|
|
}
|
|
];
|
|
|
|
return (
|
|
<div className={`bg-gradient-to-r from-gray-50 to-gray-100 border-t border-b border-gray-200 py-4 ${className}`} aria-label="trust badges and credentials">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 items-center">
|
|
{trustBadges.map((badge, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex flex-col items-center text-center group hover:scale-105 transition-transform duration-200"
|
|
>
|
|
<div className={`${badge.color} mb-2 group-hover:scale-110 transition-transform duration-200`}>
|
|
{badge.icon}
|
|
</div>
|
|
<div className="text-xs font-semibold text-gray-900 leading-tight">
|
|
{badge.text}
|
|
</div>
|
|
<div className="text-xs text-gray-600 leading-tight">
|
|
{badge.subtext}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Additional trust indicators */}
|
|
<div className="mt-4 pt-4 border-t border-gray-200">
|
|
<div className="flex flex-wrap items-center justify-center gap-6 text-xs text-gray-600">
|
|
<span className="flex items-center gap-1">
|
|
<svg className="w-3.5 h-3.5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
<span>Corpus Christi Local Business</span>
|
|
</span>
|
|
<span className="hidden sm:inline">•</span>
|
|
<span className="flex items-center gap-1">
|
|
<svg className="w-3.5 h-3.5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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" />
|
|
</svg>
|
|
<span>Workers Compensation Insured</span>
|
|
</span>
|
|
<span className="hidden sm:inline">•</span>
|
|
<span className="flex items-center gap-1">
|
|
<svg className="w-3.5 h-3.5 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
|
|
</svg>
|
|
<span>Angie's List Super Service Award</span>
|
|
</span>
|
|
<span className="hidden sm:inline">•</span>
|
|
<span className="flex items-center gap-1">
|
|
<svg className="w-3.5 h-3.5 text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
|
</svg>
|
|
<span>Google 5-Star Rated</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|