Загрузка...
Секция отзывов и рейтингов на Tailwind CSS. Отображает звезды, цитаты, статистику и CTA для написания отзыва. Адаптивный дизайн.
<section class="sm:px-6 lg:px-8 bg-white max-w-7xl rounded-2xl mr-auto ml-auto pt-16 pr-4 pb-16 pl-4 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]">
<div class="text-center mb-12">
<h2 class="text-3xl font-semibold tracking-tight font-geist mb-4">What Our Customers Say</h2>
<p class="text-lg text-neutral-600 font-sans">Join thousands of satisfied Nike customers</p>
<div class="flex items-center justify-center gap-2 mt-4">
<div class="flex items-center">
<svg class="w-5 h-5 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" 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" class=""></path>
</svg>
</div>
<span class="text-sm font-medium text-neutral-900 ml-2 font-geist">4.8/5 based on 12,847 reviews</span>
</div>
</div>
<!-- Featured Testimonials -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
<!-- Testimonial 1 -->
<article class="bg-gradient-to-br from-neutral-50 to-neutral-100 rounded-2xl p-8 hover-lift fade-in">
<div class="flex items-center gap-1 mb-4">
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
</div>
<div class="flex items-center gap-3">
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
<span class="text-white font-semibold font-geist">SJ</span>
</div>
<div>
<div class="font-semibold text-neutral-900 font-geist">Sarah Johnson</div>
<div class="text-sm text-neutral-600 font-sans">Verified Buyer • 2 weeks ago</div>
</div>
</div>
</article>
<!-- Testimonial 2 -->
<article class="bg-gradient-to-br from-neutral-50 to-neutral-100 rounded-2xl p-8 hover-lift fade-in" style="animation-delay: 0.1s;">
<div class="flex items-center gap-1 mb-4">
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
</div>
<div class="flex items-center gap-3">
<div class="w-12 h-12 bg-gradient-to-br from-green-500 to-teal-600 rounded-full flex items-center justify-center">
<span class="text-white font-semibold font-geist">MC</span>
</div>
<div>
<div class="font-semibold text-neutral-900 font-geist">Mike Chen</div>
<div class="text-sm text-neutral-600 font-sans">Verified Buyer • 1 month ago</div>
</div>
</div>
</article>
<!-- Testimonial 3 -->
<article class="bg-gradient-to-br from-neutral-50 to-neutral-100 rounded-2xl p-8 hover-lift fade-in" style="animation-delay: 0.2s;">
<div class="flex items-center gap-1 mb-4">
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
</div>
<div class="flex items-center gap-3">
<div class="w-12 h-12 bg-gradient-to-br from-pink-500 to-rose-600 rounded-full flex items-center justify-center">
<span class="text-white font-semibold font-geist">ER</span>
</div>
<div>
<div class="font-semibold text-neutral-900 font-geist">Emma Rodriguez</div>
<div class="text-sm text-neutral-600 font-sans">Verified Buyer • 3 weeks ago</div>
</div>
</div>
</article>
</div>
<!-- Review Stats -->
<div class="bg-gradient-to-r from-neutral-100 to-neutral-50 rounded-2xl p-8 mb-12">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="text-center">
<div class="text-3xl font-bold text-neutral-900 font-geist mb-2">12,847</div>
<div class="text-sm text-neutral-600 font-sans">Total Reviews</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-neutral-900 font-geist mb-2">4.8/5</div>
<div class="text-sm text-neutral-600 font-sans">Average Rating</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-neutral-900 font-geist mb-2">96%</div>
<div class="text-sm text-neutral-600 font-sans">Would Recommend</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-neutral-900 font-geist mb-2">89%</div>
<div class="text-sm text-neutral-600 font-sans">5-Star Reviews</div>
</div>
</div>
</div>
<!-- Recent Reviews -->
<div class="">
<div class="flex items-center justify-between mb-8">
<h3 class="text-2xl font-semibold tracking-tight font-geist">Recent Reviews</h3>
<button class="inline-flex items-center gap-2 text-sm font-medium text-neutral-900 hover:text-neutral-700 transition-all duration-200 hover:scale-105 font-sans">
View All Reviews
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</button>
</div>
<div class="space-y-6">
<!-- Review 1 -->
<article class="border border-neutral-200 rounded-xl p-6 hover-lift fade-in bg-white">
<div class="flex items-start justify-between mb-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-gradient-to-br from-orange-500 to-red-600 rounded-full flex items-center justify-center">
<span class="text-white font-semibold text-sm font-geist">JD</span>
</div>
<div>
<div class="font-semibold text-neutral-900 font-geist">James Davis</div>
<div class="text-sm text-neutral-600 font-sans">Purchased Nike Air Max 270 • US 10</div>
</div>
</div>
<div class="flex items-center gap-1">
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
</div>
</div>
<p class="text-neutral-700 font-geist mb-4">
"Absolutely love these shoes! The fit is perfect and they're incredibly comfortable for all-day wear. The Air Max cushioning really makes a difference during workouts. Highly recommend!"
</p>
<div class="flex items-center gap-4 text-sm text-neutral-500">
<span class="font-sans">3 days ago</span>
<span class="font-sans">Verified Purchase</span>
<button class="inline-flex items-center gap-1 hover:text-neutral-700 transition-colors font-sans">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3">
<path d="M7 10v12l5-3 5 3V10" class=""></path>
<path d="M7 10V6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4" class=""></path>
</svg>
Helpful (24)
</button>
</div>
</article>
<!-- Review 2 -->
<article class="border border-neutral-200 rounded-xl p-6 hover-lift fade-in bg-white" style="animation-delay: 0.1s;">
<div class="flex items-start justify-between mb-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-full flex items-center justify-center">
<span class="text-white font-semibold text-sm font-geist">AL</span>
</div>
<div class="">
<div class="font-semibold text-neutral-900 font-geist">Alex Thompson</div>
<div class="text-sm text-neutral-600 font-sans">Purchased Nike Air Max 270 • US 9</div>
</div>
</div>
<div class="flex items-center gap-1">
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-4 h-4 text-neutral-300 fill-current" 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" class=""></path>
</svg>
</div>
</div>
<p class="text-neutral-700 font-geist mb-4">
"Great quality and style! The only minor issue is they run slightly large, so consider sizing down. Otherwise, these are fantastic everyday sneakers."
</p>
<div class="flex items-center gap-4 text-sm text-neutral-500">
<span class="font-sans">1 week ago</span>
<span class="font-sans">Verified Purchase</span>
<button class="inline-flex items-center gap-1 hover:text-neutral-700 transition-colors font-sans">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3">
<path d="M7 10v12l5-3 5 3V10" class=""></path>
<path d="M7 10V6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4" class=""></path>
</svg>
Helpful (18)
</button>
</div>
</article>
<!-- Review 3 -->
<article class="border border-neutral-200 rounded-xl p-6 hover-lift fade-in bg-white" style="animation-delay: 0.2s;">
<div class="flex items-start justify-between mb-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-gradient-to-br from-emerald-500 to-green-600 rounded-full flex items-center justify-center">
<span class="text-white font-semibold text-sm font-geist">LS</span>
</div>
<div class="">
<div class="font-semibold text-neutral-900 font-geist">Lisa Smith</div>
<div class="text-sm text-neutral-600 font-sans">Purchased Nike Air Max 270 • US 8</div>
</div>
</div>
<div class="flex items-center gap-1">
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
<svg class="w-4 h-4 text-yellow-400 fill-current" 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" class=""></path>
</svg>
</div>
</div>
<p class="text-neutral-700 font-geist mb-4">
"Super fast delivery and excellent packaging. The shoes are exactly as described and the quality is top-notch. Will definitely order from Nike again!"
</p>
<div class="flex items-center gap-4 text-sm text-neutral-500">
<span class="font-sans">2 weeks ago</span>
<span class="font-sans">Verified Purchase</span>
<button class="inline-flex items-center gap-1 hover:text-neutral-700 transition-colors font-sans">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3">
<path d="M7 10v12l5-3 5 3V10" class=""></path>
<path d="M7 10V6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4" class=""></path>
</svg>
Helpful (31)
</button>
</div>
</article>
</div>
</div>
<!-- Write a Review CTA -->
<div class="text-center mt-12 p-8 bg-gradient-to-br from-neutral-900 to-neutral-800 rounded-2xl text-white">
<h3 class="text-xl font-semibold tracking-tight font-geist mb-2">Share Your Experience</h3>
<p class="text-neutral-300 mb-6 font-sans">Help other customers by writing a review</p>
<button class="inline-flex items-center gap-2 bg-white text-black px-6 py-3 rounded-lg font-medium hover:bg-neutral-100 transition-all duration-300 hover:scale-105 font-geist">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
<path d="M12 20h9" class=""></path>
<path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" class=""></path>
</svg>
Write a Review
</button>
</div>
</section>