ok

src/components/Logos.jsx

@@ -0,0 +1,47 @@
+import Image from 'next/image'
+
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+
+
+export function Logos() {
+  return (
+    <Container>
+      <div className="relative z-10 pt-10">
+        <p className="mt-10 font-display text-large lg:text-2xl font-semibold italic text-slate-900">
+          As seen and featured on
+        </p>
+        <ul
+          role="list"
+          className="mt-8 flex items-center flex-wrap justify-center gap-x-8 sm:flex-col sm:gap-x-0 sm:gap-y-10 xl:flex-row xl:gap-x-12 xl:gap-y-0"
+        >
+          {[
+            [
+              { name: 'CNN', logo: '/images/logos/1.svg' },
+              { name: 'HLS', logo: '/images/logos/2.svg' },
+              { name: 'Bookretreats', logo: '/images/logos/3.svg' },
+            ],
+            [
+              { name: 'Beaviajera', logo: '/images/logos/4.svg' },
+              { name: 'Egytalloyd', logo: '/images/logos/5.svg' },
+              { name: 'AST', logo: '/images/logos/6.svg' },
+            ],
+          ].map((group, groupIndex) => (
+            <li key={groupIndex}>
+              <ul
+                role="list"
+                className="flex flex-col items-center gap-y-8 sm:flex-row sm:gap-x-12 sm:gap-y-0"
+              >
+                {group.map((company) => (
+                  <li key={company.name} className="flex">
+                    <Image src={company.logo} alt={company.name} width={120} height={40} unoptimized />
+                  </li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </Container>
+  )
+}