72 lines
3.1 KiB
TypeScript
72 lines
3.1 KiB
TypeScript
"use client";
|
||
import { Container } from "@/components/container";
|
||
import { Card } from "@/components/ui/card";
|
||
import { Award, Users, Heart, Target } from "lucide-react";
|
||
|
||
export function About() {
|
||
const stats = [
|
||
{ icon: Users, value: "500+", label: "طالبة سعيدة" },
|
||
{ icon: Award, value: "5+", label: "سنوات خبرة" },
|
||
{ icon: Heart, value: "100%", label: "رضا العملاء" },
|
||
{ icon: Target, value: "11+", label: "وحدة تعليمية" },
|
||
];
|
||
|
||
return (
|
||
<section className="py-20 bg-white">
|
||
<Container>
|
||
<div className="max-w-5xl mx-auto">
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-3xl md:text-5xl font-bold mb-4">
|
||
<span className="golden-text">من أنا؟</span>
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 gap-8 items-center">
|
||
<div>
|
||
<Card className="p-8 bg-gradient-to-br from-amber-50 to-yellow-50 border-2 border-amber-200">
|
||
<div className="w-32 h-32 mx-auto mb-6 rounded-full golden-gradient flex items-center justify-center text-white text-6xl font-bold shadow-xl">
|
||
ح
|
||
</div>
|
||
<h3 className="text-2xl font-bold text-center text-gray-900 mb-2">
|
||
حنان
|
||
</h3>
|
||
<p className="text-center text-amber-700 font-semibold mb-4">
|
||
مدربة التسويق الرقمي وصناعة المحتوى
|
||
</p>
|
||
</Card>
|
||
</div>
|
||
|
||
<div className="space-y-6">
|
||
<p className="text-lg text-gray-700 leading-relaxed">
|
||
أنا <span className="font-bold text-amber-700">حنان</span>، مدربة في التسويق الرقمي وصناعة المحتوى، ساعدت الكثير من الأشخاص في بناء مشاريع رقمية ناجحة باستخدام إنستغرام والذكاء الاصطناعي.
|
||
</p>
|
||
|
||
<div className="p-6 bg-amber-50 rounded-lg border-2 border-amber-200">
|
||
<p className="text-lg font-semibold text-gray-900">
|
||
💫 رسالتي
|
||
</p>
|
||
<p className="text-gray-700 mt-2">
|
||
مساعدتك على بناء دخل حقيقي بخطوات بسيطة وواضحة، بدون تعقيد أو مصطلحات صعبة.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
{stats.map((stat, index) => (
|
||
<div
|
||
key={index}
|
||
className="p-4 bg-white border-2 border-amber-200 rounded-lg text-center hover:golden-shadow transition-all"
|
||
>
|
||
<stat.icon className="w-8 h-8 text-amber-600 mx-auto mb-2" />
|
||
<p className="text-2xl font-bold golden-text">{stat.value}</p>
|
||
<p className="text-sm text-gray-600">{stat.label}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
</section>
|
||
);
|
||
}
|