Update components/target-audience.tsx

components/target-audience.tsx

@@ -0,0 +1,52 @@
+"use client";
+import { Container } from "@/components/container";
+import { Card } from "@/components/ui/card";
+import { CheckCircle2 } from "lucide-react";
+
+export function TargetAudience() {
+  const audience = [
+    "تريدين دخلاً إضافياً أو أساسياً",
+    "مبتدئة ولا تعرفين من أين تبدأين",
+    "لديكِ مشروع وتريدين تطويره",
+    "تريدين العمل من المنزل",
+    "تريدين دخول عالم الذكاء الاصطناعي بسهولة"
+  ];
+
+  return (
+    <section className="py-20">
+      <Container>
+        <div className="max-w-4xl mx-auto">
+          <h2 className="text-3xl md:text-5xl font-bold text-center mb-4">
+            <span className="text-gray-900">هل هذا الكورس</span>
+            <br />
+            <span className="golden-text">مناسب لك؟</span>
+          </h2>
+
+          <Card className="mt-12 p-8 md:p-12 bg-white border-2 border-amber-200 golden-shadow">
+            <p className="text-xl font-semibold text-gray-900 mb-8 text-center">
+              هذا الكورس مناسب لكِ إذا كنتِ:
+            </p>
+
+            <div className="space-y-4">
+              {audience.map((item, index) => (
+                <div 
+                  key={index}
+                  className="flex items-start gap-4 p-4 bg-amber-50 rounded-lg hover:bg-amber-100 transition-colors"
+                >
+                  <CheckCircle2 className="w-6 h-6 text-amber-600 flex-shrink-0 mt-1" />
+                  <p className="text-lg text-gray-800 font-medium">{item}</p>
+                </div>
+              ))}
+            </div>
+
+            <div className="mt-10 p-6 golden-gradient rounded-xl text-center">
+              <p className="text-white text-xl font-bold">
+                ✨ إذا كانت إحدى هذه النقاط تنطبق عليك، فهذا الكورس صُمم خصيصاً لك!
+              </p>
+            </div>
+          </Card>
+        </div>
+      </Container>
+    </section>
+  );
+}