79 lines
3.3 KiB
TypeScript
79 lines
3.3 KiB
TypeScript
"use client";
|
||
import { Container } from "@/components/container";
|
||
import { Card } from "@/components/ui/card";
|
||
import {
|
||
Store,
|
||
TrendingUp,
|
||
ShoppingCart,
|
||
Video,
|
||
Instagram,
|
||
Sparkles,
|
||
Package,
|
||
Film,
|
||
Zap,
|
||
EyeOff,
|
||
Users
|
||
} from "lucide-react";
|
||
|
||
export function CourseContent() {
|
||
const modules = [
|
||
{ icon: Store, title: "بناء متاجر مجاناً", color: "text-amber-600" },
|
||
{ icon: TrendingUp, title: "التسويق الرقمي", color: "text-yellow-600" },
|
||
{ icon: ShoppingCart, title: "البيع أونلاين", color: "text-orange-600" },
|
||
{ icon: Video, title: "صناعة المحتوى", color: "text-amber-700" },
|
||
{ icon: Instagram, title: "كيف أصعد حسابي على الانستغرام", color: "text-pink-600" },
|
||
{ icon: Sparkles, title: "كيف أوظف الذكاء الاصطناعي لصالحي", color: "text-purple-600" },
|
||
{ icon: Package, title: "كيف أصنع منتج رقمي", color: "text-blue-600" },
|
||
{ icon: Film, title: "كيف أعمل ريلز احترافي", color: "text-red-600" },
|
||
{ icon: Zap, title: "كيف أسوي نظام بيع أوتوماتيكي", color: "text-green-600" },
|
||
{ icon: EyeOff, title: "كيف أنجح بدون ظهور على الكاميرا", color: "text-indigo-600" },
|
||
{ icon: Users, title: "بناء حساب إنستغرام احترافي", color: "text-amber-600" },
|
||
];
|
||
|
||
return (
|
||
<section id="content" className="py-20 bg-white/50">
|
||
<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 max-w-2xl mx-auto">
|
||
كل ما تحتاجينه لبناء مشروع رقمي ناجح من الصفر
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
||
{modules.map((module, index) => (
|
||
<Card
|
||
key={index}
|
||
className="p-6 bg-white border-2 border-amber-100 hover:border-amber-300 transition-all duration-300 hover:golden-shadow hover:scale-105 cursor-pointer group"
|
||
>
|
||
<div className="flex items-start gap-4">
|
||
<div className="p-3 bg-amber-50 rounded-lg group-hover:bg-amber-100 transition-colors">
|
||
<module.icon className={`w-6 h-6 ${module.color}`} />
|
||
</div>
|
||
<div className="flex-1">
|
||
<h3 className="font-bold text-gray-900 text-lg leading-tight">
|
||
{module.title}
|
||
</h3>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
|
||
<div className="mt-12 text-center">
|
||
<div className="inline-block p-6 bg-gradient-to-r from-amber-100 to-yellow-100 rounded-2xl border-2 border-amber-300 golden-shadow">
|
||
<p className="text-xl font-bold text-gray-900">
|
||
<span className="golden-text text-2xl">11+ وحدة تعليمية</span> شاملة ومفصلة
|
||
</p>
|
||
<p className="text-sm text-gray-600 mt-2">
|
||
كل وحدة مصممة خصيصاً للمبتدئات
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
</section>
|
||
);
|
||
}
|