app-nimble-capybara-buzz/components/results.tsx

64 lines
2.7 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

"use client";
import { Container } from "@/components/container";
import { Card } from "@/components/ui/card";
import { Trophy, Target, Rocket, Star, TrendingUp } from "lucide-react";
export function Results() {
const results = [
{ icon: Trophy, title: "حساب إنستغرام احترافي", description: "جاهز للنمو والتفاعل" },
{ icon: Target, title: "محتوى يومي جاهز", description: "خطة محتوى كاملة لشهر" },
{ icon: Rocket, title: "أول منتج رقمي جاهز للبيع", description: "تبدأين البيع فوراً" },
{ icon: Star, title: "أول عميل خلال 14 يوم", description: "حسب التزامك وتطبيقك" },
{ icon: TrendingUp, title: "فهم كامل للذكاء الاصطناعي", description: "استخدميه لزيادة دخلك" },
];
return (
<section className="py-20 bg-gradient-to-br from-amber-50 to-yellow-50">
<Container>
<div className="text-center mb-12">
<h2 className="text-3xl md:text-5xl font-bold mb-4">
<span className="golden-text">النتائج التي</span>
<br />
<span className="text-gray-900">ستحصلين عليها</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">
{results.map((result, index) => (
<Card
key={index}
className="p-6 bg-white border-2 border-amber-200 hover:golden-shadow hover:scale-105 transition-all duration-300"
>
<div className="flex flex-col items-center text-center">
<div className="p-4 golden-gradient rounded-full mb-4">
<result.icon className="w-8 h-8 text-white" />
</div>
<h3 className="font-bold text-xl text-gray-900 mb-2">
{result.title}
</h3>
<p className="text-gray-600">
{result.description}
</p>
</div>
</Card>
))}
</div>
<div className="mt-12 text-center">
<Card className="inline-block p-8 bg-white border-2 border-amber-300 golden-shadow">
<p className="text-2xl font-bold golden-text mb-2">
🎯 نتائج حقيقية، قابلة للقياس
</p>
<p className="text-gray-600">
كل طالبة تطبق المحتوى تحقق نتائج ملموسة
</p>
</Card>
</div>
</Container>
</section>
);
}