46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import React from 'react'
|
||
|
||
const partners = [
|
||
'شركة النفط اليمنية',
|
||
'مجموعة هائل سعيد أنعم',
|
||
'منظمة الصحة العالمية',
|
||
'اليونيسيف',
|
||
'مركز الملك سلمان',
|
||
'الهلال الأحمر الإماراتي',
|
||
'مؤسسة صلة للتنمية',
|
||
'مؤسسة العون للتنمية',
|
||
]
|
||
|
||
const Partners = () => {
|
||
return (
|
||
<section className="py-12 bg-gray-50 border-y border-gray-100 font-cairo" dir="rtl">
|
||
<div className="container mx-auto px-4 overflow-hidden">
|
||
<h3 className="text-center text-gray-500 mb-8 font-bold">شركاء النجاح</h3>
|
||
<div className="flex animate-scroll whitespace-nowrap space-x-reverse space-x-12">
|
||
{[...partners, ...partners].map((partner, index) => (
|
||
<div
|
||
key={index}
|
||
className="inline-block text-medicalGreen-800 font-bold text-xl opacity-60 hover:opacity-100 transition-opacity"
|
||
>
|
||
{partner}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<style jsx>{`
|
||
@keyframes scroll {
|
||
0% { transform: translateX(0); }
|
||
100% { transform: translateX(50%); }
|
||
}
|
||
.animate-scroll {
|
||
display: flex;
|
||
width: 200%;
|
||
animation: scroll 30s linear infinite;
|
||
}
|
||
`}</style>
|
||
</section>
|
||
)
|
||
}
|
||
|
||
export default Partners
|