www_ourverse_new/src/components/LogoPage.jsx
2024-08-26 21:56:31 +02:00

42 lines
1.4 KiB
JavaScript

import Image from 'next/image'
import logo1 from '@/images/logos/1.svg'
import logo2 from '@/images/logos/2.svg'
import logo3 from '@/images/logos/3.svg'
import logo4 from '@/images/logos/4.svg'
import logo5 from '@/images/logos/5.svg'
import logo6 from '@/images/logos/6.svg'
export function LogoPage() {
const logos = [
{ name: 'CNN', logo: logo1 },
{ name: 'HLS', logo: logo2 },
{ name: 'Bookretreats', logo: logo3 },
{ name: 'Beaviajera', logo: logo4 },
{ name: 'Egytalloyd', logo: logo5 },
{ name: 'AST', logo: logo6 },
]
return (
<div className="relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-b from-white" />
<div className="relative flex items-center justify-center">
<ul
role="list"
className="mt-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-10 sm:flex-col sm:gap-y-10 xl:flex-row xl:gap-x-12"
>
{logos.map((company, index) => (
<li key={index} className="flex">
<Image
src={company.logo}
alt={`${company.name} logo`}
width={100} // Adjust the width and height according to your design
height={50} // Adjust the width and height according to your design
/>
</li>
))}
</ul>
</div>
</div>
)
}