79 lines
2.8 KiB
TypeScript
79 lines
2.8 KiB
TypeScript
"use client";
|
||
import { Container } from "@/components/container";
|
||
import { Card } from "@/components/ui/card";
|
||
import { Star, Quote } from "lucide-react";
|
||
|
||
export function Testimonials() {
|
||
const testimonials = [
|
||
{
|
||
name: "سارة أحمد",
|
||
text: "بدأت من الصفر واليوم عندي أول عميلة… شكراً على كل شيء!",
|
||
rating: 5
|
||
},
|
||
{
|
||
name: "نور محمد",
|
||
text: "الكورس غير حياتي، خاصة قسم الذكاء الاصطناعي.",
|
||
rating: 5
|
||
},
|
||
{
|
||
name: "ليلى حسن",
|
||
text: "صفحة الهبوط اللي تعلمتها ساعدتني أبيع أول منتج رقمي.",
|
||
rating: 5
|
||
}
|
||
];
|
||
|
||
return (
|
||
<section className="py-20 bg-white">
|
||
<Container>
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-3xl md:text-5xl font-bold mb-4">
|
||
<span className="golden-text">آراء الزبائن</span>
|
||
</h2>
|
||
<p className="text-lg text-gray-600">
|
||
ماذا تقول الطالبات عن الكورس؟
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
||
{testimonials.map((testimonial, index) => (
|
||
<Card
|
||
key={index}
|
||
className="p-6 bg-gradient-to-br from-amber-50 to-yellow-50 border-2 border-amber-200 hover:golden-shadow hover:scale-105 transition-all duration-300 relative"
|
||
>
|
||
<Quote className="absolute top-4 left-4 w-8 h-8 text-amber-300 opacity-50" />
|
||
|
||
<div className="relative z-10">
|
||
<div className="flex gap-1 mb-4">
|
||
{[...Array(testimonial.rating)].map((_, i) => (
|
||
<Star key={i} className="w-5 h-5 fill-amber-400 text-amber-400" />
|
||
))}
|
||
</div>
|
||
|
||
<p className="text-gray-700 text-lg mb-6 leading-relaxed">
|
||
"{testimonial.text}"
|
||
</p>
|
||
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-12 h-12 rounded-full golden-gradient flex items-center justify-center text-white font-bold text-xl">
|
||
{testimonial.name.charAt(0)}
|
||
</div>
|
||
<div>
|
||
<p className="font-bold text-gray-900">{testimonial.name}</p>
|
||
<p className="text-sm text-gray-600">طالبة في الكورس</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
|
||
<div className="mt-12 text-center">
|
||
<p className="text-xl text-gray-700">
|
||
<span className="font-bold golden-text">500+</span> طالبة سعيدة بالنتائج ✨
|
||
</p>
|
||
</div>
|
||
</Container>
|
||
</section>
|
||
);
|
||
}
|