62 lines
2.5 KiB
TypeScript
62 lines
2.5 KiB
TypeScript
import Image from "next/image"
|
|
|
|
export function ImageGallery() {
|
|
return (
|
|
<section className="py-16 bg-muted/30">
|
|
<div className="container mx-auto px-4">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-center mb-12">The Mycelial Vision</h2>
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 max-w-6xl mx-auto">
|
|
<div className="relative aspect-square rounded-lg overflow-hidden">
|
|
<Image
|
|
src="/images/mushroom-gills.jpg"
|
|
alt="Macro view of mushroom gills showing natural hyphal patterns"
|
|
fill
|
|
className="object-cover hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
<div className="relative aspect-square rounded-lg overflow-hidden">
|
|
<Image
|
|
src="/images/dreamy-mushrooms.png"
|
|
alt="Ethereal mushrooms in golden light"
|
|
fill
|
|
className="object-cover hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
<div className="relative aspect-square rounded-lg overflow-hidden">
|
|
<Image
|
|
src="/images/mycelial-network-blue.png"
|
|
alt="Digital visualization of mycelial network connections"
|
|
fill
|
|
className="object-cover hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
<div className="relative aspect-square rounded-lg overflow-hidden">
|
|
<Image
|
|
src="/images/fractal-mushroom.png"
|
|
alt="Fractal art inspired by mushroom growth patterns"
|
|
fill
|
|
className="object-cover hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
<div className="relative aspect-square rounded-lg overflow-hidden">
|
|
<Image
|
|
src="/images/mushroom-forest.png"
|
|
alt="Psychedelic mushroom forest with interconnected mycelial roots"
|
|
fill
|
|
className="object-cover hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
<div className="relative aspect-square rounded-lg overflow-hidden">
|
|
<Image
|
|
src="/images/always-has-been.png"
|
|
alt="The revolution will be mycelial - always has been"
|
|
fill
|
|
className="object-cover hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|