53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
"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>
|
||
);
|
||
}
|