import React, { useState, useEffect, useRef } from ‘react’; // Custom hook for scroll animations const useIntersectionObserver = (options = {}) => { const [isVisible, setIsVisible] = useState(false); const ref = useRef(null); useEffect(() => { const observer = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { setIsVisible(true); } }, { threshold: 0.1, …options }); if (ref.current) observer.observe(ref.current); return () => observer.disconnect(); }, []); return [ref, isVisible]; }; // Animated Section Wrapper const AnimatedSection = ({ children, delay = 0, className = ” }) => { const [ref, isVisible] = useIntersectionObserver(); return (

{children}

); }; // Icons const Icons = { Register: () => ( ), Create: () => ( ), Connect: () => ( ), Agreement: () => ( ), Manage: () => ( ), ArrowLeft: () => ( ), ArrowRight: () => ( ), Lightbulb: () => ( ), Handshake: () => ( ), }; // Real Hasel Platform Project Data with actual image URLs const allProjects = [ { id: 1, name: ‘مبادرة رعاية وتنمية المشاريع الإبداعية’, type: ‘عرض’, status: ‘تم النشر’, org: ‘آفاق للإبداع’, location: ‘الرياض’, closingDate: ’28 فبراير 2026′, eventDates: null, categories: [‘تواصل’, ‘ثقافي’, ‘مؤتمر’], image: ‘https://hasel.sa/storage/117/01KE775013AR4T99K4TNYQ013N.jpg’, hasSponsor: true, }, { id: 2, name: ‘منتدى صناع المستقبل’, type: ‘طلب’, status: ‘تم النشر’, org: ‘عبدالله بن فهد’, location: ‘الرياض’, closingDate: ’01 مارس 2026′, eventDates: ’15 مارس 2026 – 17 مارس 2026′, categories: [‘تعليمية’, ‘تواصل’, ‘مؤتمر’], image: ‘https://hasel.sa/storage/113/01KE75M24NQZ2A4MQYR2FNK043.png’, hasSponsor: false, }, { id: 3, name: ‘هكاثون الإبصار التقني’, type: ‘طلب’, status: ‘تم النشر’, org: ‘الجمعية التعاونية للبصريات’, location: ‘الرياض’, closingDate: ’09 أكتوبر 2026′, eventDates: ’10 أكتوبر 2026 – 15 أكتوبر 2026′, categories: [‘تقنية’, ‘صحة ورفاهية’, ‘عمل خيري’], image: ‘https://hasel.sa/storage/110/01KDMZJ86DX7FG58EQF0FP3PDJ.jpg’, hasSponsor: false, }, { id: 4, name: ‘بودكاست فراغ’, type: ‘طلب’, status: ‘تم النشر’, org: ‘شركة تخاطر الأفكار للإنتاج الإعلامي’, location: ‘الرياض’, closingDate: ’01 فبراير 2026′, eventDates: null, categories: [‘تواصل’, ‘أعمال’, ‘ثقافي’], image: ‘https://hasel.sa/storage/106/01KDJ5QCEDWQ5DVNFRC7NXP4B7.png’, hasSponsor: false, }, { id: 5, name: ‘مجلس أثر المتطوعين’, type: ‘طلب’, status: ‘مغلق’, org: ‘جمعية وطن طموح’, location: ‘الرياض’, closingDate: ’30 ديسمبر 2025′, eventDates: ’01 يناير 2026 – 30 أغسطس 2026′, categories: [‘أعمال’, ‘تعليمية’, ‘تقنية’], image: ‘https://hasel.sa/storage/64/01K7H7FEKSG0TKM459A02E58QR.jpg’, hasSponsor: false, }, { id: 6, name: ‘توب فاشن’, type: ‘طلب’, status: ‘منتهي’, org: ‘شركة الطريق النجاح للتسويق الرقمي’, location: ‘الرياض’, closingDate: ’21 سبتمبر 2025′, eventDates: ’23 سبتمبر 2025 – 25 سبتمبر 2025′, categories: [‘ثقافي’, ‘معرض’, ‘صحة ورفاهية’], image: ‘https://hasel.sa/storage/70/01K8878GFPKVG7T9TTFCD0F5QQ.jpg’, hasSponsor: false, }, ]; // Status and Type color configurations const statusConfig = { ‘تم النشر’: { bg: ‘bg-emerald-500’, text: ‘text-white’ }, ‘مغلق’: { bg: ‘bg-slate-400’, text: ‘text-white’ }, ‘منتهي’: { bg: ‘bg-orange-500’, text: ‘text-white’ }, }; const typeConfig = { ‘طلب’: { bg: ‘bg-amber-400’, text: ‘text-slate-900’ }, ‘عرض’: { bg: ‘bg-emerald-500’, text: ‘text-white’ }, }; // Category color mapping const categoryColors = [ ‘bg-amber-100 text-amber-800’, ‘bg-emerald-100 text-emerald-800’, ‘bg-blue-100 text-blue-800’, ‘bg-purple-100 text-purple-800’, ‘bg-rose-100 text-rose-800’, ]; const testimonials = [ { id: 1, name: ‘أحمد الراشد’, title: ‘مؤسس مبادرة إبداع’, quote: ‘منصة حاصل غيّرت مسار مشروعنا بالكامل. وجدنا رعاة يؤمنون برؤيتنا وساهموا في تحويل الفكرة إلى واقع ملموس.’, image: ‘https://i.pravatar.cc/150?img=33’, project: ‘مهرجان الفنون الإبداعية’, }, { id: 2, name: ‘نورة العتيبي’, title: ‘مديرة التسويق – شركة الابتكار’, quote: ‘كراعٍ، وجدنا في حاصل فرصاً استثنائية للتواصل مع مشاريع مؤثرة تتوافق مع قيمنا ورؤيتنا المجتمعية.’, image: ‘https://i.pravatar.cc/150?img=47’, project: ‘برنامج التدريب المهني’, }, { id: 3, name: ‘خالد المحمد’, title: ‘رئيس جمعية الشباب’, quote: ‘سهولة الاستخدام والشفافية في التعامل جعلت تجربتنا مع حاصل استثنائية. نوصي بها لكل صاحب مشروع طموح.’, image: ‘https://i.pravatar.cc/150?img=12’, project: ‘مبادرة تمكين الشباب’, }, { id: 4, name: ‘سارة القحطاني’, title: ‘مديرة المسؤولية الاجتماعية’, quote: ‘حاصل منصة موثوقة تجمع بين الاحترافية والتأثير الحقيقي. نفخر بشراكتنا مع مشاريع ملهمة من خلالها.’, image: ‘https://i.pravatar.cc/150?img=45’, project: ‘مؤتمر ريادة الأعمال’, }, ]; const partners = [ { name: ‘أرامكو’, logo: ‘A’ }, { name: ‘سابك’, logo: ‘S’ }, { name: ‘الاتصالات السعودية’, logo: ‘STC’ }, { name: ‘البنك الأهلي’, logo: ‘NCB’ }, { name: ‘موبايلي’, logo: ‘M’ }, { name: ‘زين’, logo: ‘Z’ }, { name: ‘الراجحي’, logo: ‘R’ }, { name: ‘جرير’, logo: ‘J’ }, ]; const steps = [ { icon: Icons.Register, title: ‘سجل حسابك’, desc: ‘أنشئ حسابك كصاحب مشروع أو كجهة راعية في دقائق معدودة’ }, { icon: Icons.Create, title: ‘أنشئ أو اكتشف مشروع’, desc: ‘أضف تفاصيل مشروعك أو تصفح المشاريع المتاحة للرعاية’ }, { icon: Icons.Connect, title: ‘تواصل وتفاوض’, desc: ‘تواصل مع الأطراف المهتمة وتفاوض على شروط الرعاية المناسبة’ }, { icon: Icons.Agreement, title: ‘أبرم الاتفاقية’, desc: ‘قم بإنهاء الاتفاقيات بشكل آمن وموثق عبر المنصة’ }, { icon: Icons.Manage, title: ‘أدر الرعاية’, desc: ‘تابع تقدم المشروع وأدر علاقة الرعاية بفعالية وشفافية’ }, ]; // Components const Header = () => { const [scrolled, setScrolled] = useState(false); useEffect(() => { const handleScroll = () => setScrolled(window.scrollY > 50); window.addEventListener(‘scroll’, handleScroll); return () => window.removeEventListener(‘scroll’, handleScroll); }, []); return (

حاصل

); }; const HeroSection = () => { return (

{/* Animated Background */}

{/* Grid Pattern */}

المنصة الرائدة للرعاية في المملكة

رعايات تحقق أهدافك
مع حاصل

نجمع بين أصحاب المشاريع الإبداعية والجهات الراعية لبناء شراكات مؤثرة تصنع الفرق

{/* Dual CTA Cards */}

هل لديك مشروع إبداعي؟

اعرضه الآن واحصل على الدعم والرعاية من جهات موثوقة

هل تبحث عن فرصة لإحداث تأثير؟

اكتشف المشاريع الملهمة وكن شريكاً في قصص النجاح

{/* Stats */}

+500

مشروع ناجح

+200

جهة راعية

50M+

ريال تمويل

{/* Scroll Indicator */}

); }; const ProjectCard = ({ project }) => { const status = statusConfig[project.status] || statusConfig[‘تم النشر’]; const type = typeConfig[project.type] || typeConfig[‘طلب’]; const [imgError, setImgError] = React.useState(false); return (

{!imgError ? ( {project.name}

setImgError(true)} /> ) : (

{project.name.slice(0, 20)}…

)} {/* Status Badge – Top Left */}

{project.status}

{/* Type Badge – Top Right */}

{project.type}

{/* Gradient Overlay */}

{project.name}

{project.org}

المملكة العربية السعودية، {project.location}

{/* Event Dates or Closing Date */}

{project.eventDates && ( {project.eventDates} )} آخر موعد: {project.closingDate}

{/* Categories */}

{project.categories.map((cat, idx) => ( {cat} ))}

{/* Sponsor indicator (if available) */} {project.hasSponsor && (

يوجد راعي رسمي

)} {/* View Details Button – Push to bottom */}

); }; const ProjectsSection = () => { const [activeTab, setActiveTab] = useState(‘all’); const tabs = [ { id: ‘all’, label: ‘جميع المشاريع’ }, { id: ‘published’, label: ‘المشاريع النشطة’ }, { id: ‘closed’, label: ‘المشاريع المنتهية’ }, ]; const filteredProjects = activeTab === ‘all’ ? allProjects : activeTab === ‘published’ ? allProjects.filter(p => p.status === ‘تم النشر’) : allProjects.filter(p => p.status === ‘مغلق’ || p.status === ‘منتهي’); return (

اكتشف الفرص

أبرز المشاريع

تصفح المشاريع واكتشف فرص الرعاية المتاحة

{tabs.map((tab) => ( ))}

{filteredProjects.map((project, index) => ( ))}

{filteredProjects.length === 0 && (

لا توجد مشاريع في هذا التصنيف

)}

); }; const HowItWorksSection = () => { return (

{/* Background Elements */}

رحلتك معنا

كيف يعمل حاصل

{/* Timeline Line */}

{steps.map((step, index) => { const Icon = step.icon; const isEven = index % 2 === 0; return (

{/* Content */}

{step.title}

{step.desc}

{/* Icon (Desktop) */}

{/* Step Number */}

); })}

); }; const TestimonialsSection = () => { const [currentIndex, setCurrentIndex] = useState(0); const nextSlide = () => setCurrentIndex((prev) => (prev + 1) % testimonials.length); const prevSlide = () => setCurrentIndex((prev) => (prev – 1 + testimonials.length) % testimonials.length); return (

شهادات النجاح

قصص نجاح

شركاؤنا في النجاح يشاركون قصصهم

{testimonials.map((testimonial) => (

”

“{testimonial.quote}”

{testimonial.name}

{testimonial.title}

مشروع: {testimonial.project} ←

))}

{/* Navigation */}

{testimonials.map((_, index) => (

); }; const PartnersSection = () => { return (

شركاؤنا في النجاح

جهات راعية موثوقة

{partners.map((partner, index) => (

{partner.logo}

))}

); }; const Footer = () => { return ( ); }; // Main App export default function HaselHomepage() { return (

); }

رعايات تحقق أهدافك مع حاصل