File size: 1,429 Bytes
2a7eb2e 2d7ec06 2a7eb2e 67ea2ab 93233eb 67ea2ab 93233eb 67ea2ab 93233eb 67ea2ab 2a7eb2e 67ea2ab 2a7eb2e 93233eb 67ea2ab 2d7ec06 67ea2ab |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
import Image from "next/image";
import Link from "next/link";
export const Gallery = ({ logos }: { logos: Array<number> }) => {
return (
<section id="gallery" className="w-full py-10 lg:py-16">
<div className="mx-auto bg-amber-500/10 border border-amber-500/15 text-amber-500 px-3 py-1.5 rounded-full flex items-center gap-1 justify-center max-w-max text-xs mb-4">
<span className="text-xs">⚡</span>
Increase your creativity
</div>
<h3 className="max-w-4xl text-2xl lg:text-3xl text-[#aaaaaa] font-semibold mb-12 text-center mx-auto">
See our <span className="text-white">last designs</span>.
</h3>
<div className="max-lg:grid max-lg:grid-cols-2 lg:flex lg:items-start lg:justify-center gap-6 flex-wrap">
{logos.map((index) => (
<Image
key={index}
src={`/api/images/${index}`}
alt="Generated logo"
width={500}
height={500}
className="rounded-2xl w-full lg:size-72 object-cover"
/>
))}
</div>
<div className="mt-12 flex items-center justify-center">
<Link
href="/gallery"
className="rounded-full text-zinc-300 bg-zinc-900 font-medium text-base px-6 py-3 hover:bg-opacity-80 transition-all duration-150 text-center max-lg:w-full"
>
View all examples
</Link>
</div>
</section>
);
};
|