Update components/testimonials.tsx

components/testimonials.tsx

@@ -0,0 +1,78 @@
+"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>
+  );
+}