61 lines
2.9 KiB
TypeScript
61 lines
2.9 KiB
TypeScript
"use client";
|
||
import { Container } from "@/components/container";
|
||
import { Card } from "@/components/ui/card";
|
||
import { CheckCircle2 } from "lucide-react";
|
||
|
||
export function WhySection() {
|
||
return (
|
||
<section className="py-20 relative">
|
||
<Container>
|
||
<div className="max-w-4xl mx-auto">
|
||
<h2 className="text-3xl md:text-5xl font-bold text-center mb-4">
|
||
<span className="golden-text">لماذا هذا الكورس</span>
|
||
<br />
|
||
<span className="text-gray-900">هو خيارك الأفضل؟</span>
|
||
</h2>
|
||
|
||
<Card className="mt-12 p-8 md:p-12 bg-white/80 backdrop-blur-sm border-2 border-amber-200 golden-shadow">
|
||
<div className="space-y-6">
|
||
<p className="text-lg md:text-xl text-gray-700 leading-relaxed">
|
||
لأنك ستحصلين على <span className="font-bold text-amber-700">خطة جاهزة، قوالب جاهزة، أفكار جاهزة</span>، وكل ما تحتاجينه لتبدئي فوراً بدون تعقيد.
|
||
</p>
|
||
|
||
<div className="grid md:grid-cols-3 gap-4 mt-8">
|
||
<div className="flex items-start gap-3 p-4 bg-amber-50 rounded-lg">
|
||
<CheckCircle2 className="w-6 h-6 text-amber-600 flex-shrink-0 mt-1" />
|
||
<div>
|
||
<h3 className="font-bold text-gray-900 mb-1">بدون خبرة</h3>
|
||
<p className="text-sm text-gray-600">نبدأ من الصفر تماماً</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-start gap-3 p-4 bg-amber-50 rounded-lg">
|
||
<CheckCircle2 className="w-6 h-6 text-amber-600 flex-shrink-0 mt-1" />
|
||
<div>
|
||
<h3 className="font-bold text-gray-900 mb-1">بدون رأس مال</h3>
|
||
<p className="text-sm text-gray-600">أدوات مجانية 100%</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-start gap-3 p-4 bg-amber-50 rounded-lg">
|
||
<CheckCircle2 className="w-6 h-6 text-amber-600 flex-shrink-0 mt-1" />
|
||
<div>
|
||
<h3 className="font-bold text-gray-900 mb-1">بدون جمهور</h3>
|
||
<p className="text-sm text-gray-600">نبني معاً من الصفر</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-8 p-6 bg-gradient-to-r from-amber-100 to-yellow-100 rounded-lg border-2 border-amber-300">
|
||
<p className="text-center text-lg font-semibold text-gray-900">
|
||
فقط <span className="golden-text text-2xl">التزام بسيط</span>… والنتائج ستبدأ بالظهور ✨
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
</Container>
|
||
</section>
|
||
);
|
||
}
|