diff --git a/salesflow-saas/frontend/src/components/dealix/premium-landing.tsx b/salesflow-saas/frontend/src/components/dealix/premium-landing.tsx new file mode 100644 index 00000000..23ae7832 --- /dev/null +++ b/salesflow-saas/frontend/src/components/dealix/premium-landing.tsx @@ -0,0 +1,474 @@ +"use client"; + +import { useRef } from "react"; +import { motion, useInView } from "framer-motion"; +import { + Zap, + MessageSquare, + BarChart3, + FileText, + ShieldCheck, + BrainCircuit, + ChevronLeft, + Play, + CheckCircle2, + ArrowLeft, + Star, + Users, + Trophy, + Rocket, + AlertTriangle, + Clock, + XCircle, + Building2, +} from "lucide-react"; + +/* ───────────── animation helpers ───────────── */ +const fadeUp = { + hidden: { opacity: 0, y: 28 }, + visible: (i: number = 0) => ({ + opacity: 1, + y: 0, + transition: { delay: i * 0.1, duration: 0.55, ease: "easeOut" }, + }), +}; + +const stagger = { + visible: { transition: { staggerChildren: 0.1 } }, +}; + +function Section({ + children, + className = "", +}: { + children: React.ReactNode; + className?: string; +}) { + const ref = useRef(null); + const inView = useInView(ref, { once: true, margin: "-60px" }); + return ( + + {children} + + ); +} + +/* ───────────── data ───────────── */ +const painPoints = [ + { icon: AlertTriangle, title: "بيانات مبعثرة", desc: "معلومات العملاء موزعة بين إكسل وواتساب وأوراق" }, + { icon: Clock, title: "وقت ضائع", desc: "فريق المبيعات يقضي ٦٠٪ من وقته في مهام يدوية" }, + { icon: XCircle, title: "صفقات تضيع", desc: "عدم متابعة العملاء المحتملين في الوقت المناسب" }, + { icon: BarChart3, title: "لا تقارير واضحة", desc: "صعوبة قياس أداء الفريق واتخاذ قرارات مبنية على بيانات" }, +]; + +const features = [ + { icon: MessageSquare, title: "واتساب ذكي", desc: "تواصل تلقائي مع العملاء عبر واتساب مع ردود الذكاء الاصطناعي", color: "text-green-400 bg-green-400/10" }, + { icon: BrainCircuit, title: "تقييم عملاء AI", desc: "تقييم تلقائي لكل عميل محتمل بناءً على سلوكه واهتمامه", color: "text-teal-400 bg-teal-400/10" }, + { icon: BarChart3, title: "Pipeline بصري", desc: "تتبع جميع الصفقات بلوحة كانبان تفاعلية مع drag & drop", color: "text-blue-400 bg-blue-400/10" }, + { icon: FileText, title: "عروض أسعار", desc: "أنشئ عروض أسعار احترافية بضغطة زر مع حسابات تلقائية", color: "text-orange-400 bg-orange-400/10" }, + { icon: ShieldCheck, title: "متوافق مع PDPL", desc: "حماية بيانات العملاء وفق نظام حماية البيانات الشخصية السعودي", color: "text-purple-400 bg-purple-400/10" }, + { icon: Zap, title: "تقارير ذكية", desc: "تحليلات فورية ولوحات بيانات تفاعلية لاتخاذ قرارات أسرع", color: "text-amber-400 bg-amber-400/10" }, +]; + +const steps = [ + { num: "١", title: "سجّل", desc: "أنشئ حسابك في أقل من دقيقتين وابدأ فوراً" }, + { num: "٢", title: "أضف عملاءك", desc: "استورد بياناتك من إكسل أو أضفها يدوياً بسهولة" }, + { num: "٣", title: "ابدأ البيع", desc: "دع الذكاء الاصطناعي يساعدك في إتمام المزيد من الصفقات" }, +]; + +const pricingPlans = [ + { + name: "Starter", + nameAr: "الأساسية", + price: "٥٩", + period: "شهرياً", + features: ["٣ مستخدمين", "٥٠٠ عميل محتمل", "واتساب أساسي", "تقارير أساسية", "دعم بالإيميل"], + cta: "ابدأ مجاناً", + highlighted: false, + }, + { + name: "Professional", + nameAr: "الاحترافية", + price: "١٤٩", + period: "شهرياً", + features: ["١٠ مستخدمين", "عملاء غير محدودين", "واتساب + إيميل + SMS", "تقييم AI للعملاء", "Pipeline بصري", "عروض أسعار", "تقارير متقدمة", "دعم أولوية"], + cta: "ابدأ التجربة المجانية", + highlighted: true, + badge: "الأكثر شعبية", + }, + { + name: "Enterprise", + nameAr: "المؤسسية", + price: "٢٢٥", + period: "شهرياً", + features: ["مستخدمين غير محدودين", "كل مميزات الاحترافية", "PDPL كامل", "API مفتوح", "مدير حساب مخصص", "تدريب الفريق", "SLA ٩٩.٩٪"], + cta: "تواصل معنا", + highlighted: false, + }, +]; + +/* ───────────── 3D Logo placeholder ───────────── */ +function DealixLogo3D() { + return ( + +
+
+
+ + DEALIX +
+
+ + ); +} + +/* ───────────── main component ───────────── */ +export function PremiumLanding() { + return ( +
+ {/* ── mesh background ── */} +
+
+
+
+ {/* mesh dots */} +
+
+ + {/* ═══════════ NAV ═══════════ */} + + + {/* ═══════════ HERO ═══════════ */} +
+
+ {/* left: 3D logo */} + + + + + {/* right: text */} +
+ + نظام المبيعات الذكي +
+ للسعودية + + + وحّد فريق مبيعاتك مع واتساب، أتمت المتابعة بالذكاء الاصطناعي، وتابع كل صفقة من البداية للإغلاق + + + + + +
+
+ + {/* stats bar */} + + {[ + { label: "شركة سعودية", value: "+٥٠٠" }, + { label: "رضا العملاء", value: "٩٥٪" }, + { label: "صفقة مغلقة", value: "+١٠٠٠" }, + ].map((s, i) => ( +
+

{s.value}

+

{s.label}

+
+ ))} + +
+ + {/* ═══════════ PAIN POINTS ═══════════ */} +
+ + مشاكل يعاني منها كل مدير مبيعات + + + هل تواجه هذه التحديات في فريقك؟ Dealix صُمم لحلها + +
+ {painPoints.map((p, i) => ( + +
+ +
+

{p.title}

+

{p.desc}

+ + ))} +
+
+ + {/* ═══════════ FEATURES ═══════════ */} +
+ + كل ما يحتاجه فريق المبيعات + + + أدوات متكاملة مصممة خصيصاً للسوق السعودي + +
+ {features.map((f, i) => ( + +
+ +
+

{f.title}

+

{f.desc}

+ + ))} +
+
+ + {/* ═══════════ HOW IT WORKS ═══════════ */} +
+ + ابدأ في ٣ خطوات بسيطة + +
+ {/* connecting line */} +
+ +
+ {steps.map((s, i) => ( + +
+ {s.num} +
+

{s.title}

+

{s.desc}

+ + ))} +
+
+
+ + {/* ═══════════ SOCIAL PROOF ═══════════ */} +
+ + شركات سعودية تثق بـ Dealix + + + {/* logos row */} + + {["الأفق التقنية", "مجموعة الرواد", "حلول البيانات", "شركة النخبة", "مصنع الشرق"].map((name, i) => ( +
+ + {name} +
+ ))} + + + {/* testimonial */} + +
+ {[...Array(5)].map((_, i) => ( + + ))} +
+

+ “Dealix غيّر طريقة عمل فريق المبيعات عندنا بالكامل. من أول شهر زادت مبيعاتنا ٤٠٪ وصار عندنا رؤية واضحة لكل صفقة.” +

+
+

عبدالله الشمري

+

مدير المبيعات — شركة الأفق التقنية

+
+ +
+ + {/* ═══════════ PRICING ═══════════ */} +
+ + أسعار بسيطة وشفافة + + + ابدأ مجاناً لمدة ١٤ يوم — بدون بطاقة ائتمانية + + +
+ {pricingPlans.map((plan, i) => ( + + {plan.badge && ( + + {plan.badge} + + )} + +

{plan.nameAr}

+

{plan.name}

+ +
+ {plan.price} + ر.س / {plan.period} +
+ +
    + {plan.features.map((f, j) => ( +
  • + + {f} +
    • + ))} +
+ + + + ))} +
+
+ + {/* ═══════════ FINAL CTA ═══════════ */} +
+ + +

+ جاهز تنقل مبيعاتك للمستوى التالي؟ +

+

+ انضم لأكثر من ٥٠٠ شركة سعودية حققت نمو في المبيعات مع Dealix +

+ +

١٤ يوم تجربة مجانية — بدون بطاقة

+ +
+ + {/* ═══════════ FOOTER ═══════════ */} + +
+ ); +}