101 lines
4.1 KiB
TypeScript
101 lines
4.1 KiB
TypeScript
import { Navigation } from "@/components/navigation"
|
|
import { SparkleEffect } from "@/components/sparkle-effect"
|
|
import { Card } from "@/components/ui/card"
|
|
import { Palette } from "lucide-react"
|
|
|
|
export default function GalleryPage() {
|
|
const artworks = [
|
|
{
|
|
id: 1,
|
|
title: "Magical Girl Transformation",
|
|
description: "A magical girl in the middle of her transformation sequence with sparkles everywhere!",
|
|
query: "anime magical girl transformation with sparkles and rainbow effects",
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Dragon Spirit",
|
|
description: "A cute dragon spirit with colorful scales and glowing eyes",
|
|
query: "cute anime dragon spirit with rainbow scales and sparkles",
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Cherry Blossom Dreams",
|
|
description: "An anime character surrounded by cherry blossoms and petals",
|
|
query: "anime character with cherry blossoms and pink petals floating",
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Star Guardian",
|
|
description: "A hero protecting the stars with magical powers",
|
|
query: "anime star guardian with magical staff and celestial effects",
|
|
},
|
|
{
|
|
id: 5,
|
|
title: "Rainbow Warrior",
|
|
description: "A brave warrior with rainbow-colored armor and weapons",
|
|
query: "anime warrior with rainbow armor and colorful magical effects",
|
|
},
|
|
{
|
|
id: 6,
|
|
title: "Fairy Friend",
|
|
description: "A tiny fairy with glittering wings and a big smile",
|
|
query: "cute anime fairy with sparkly wings and magical dust",
|
|
},
|
|
]
|
|
|
|
return (
|
|
<div className="min-h-screen">
|
|
<Navigation />
|
|
<SparkleEffect />
|
|
|
|
<main className="container px-4 py-12">
|
|
<div className="max-w-6xl mx-auto">
|
|
{/* Header */}
|
|
<div className="text-center mb-12">
|
|
<div className="float mb-6">
|
|
<Palette className="h-16 w-16 mx-auto text-primary" />
|
|
</div>
|
|
<h1 className="text-5xl md:text-6xl font-bold mb-4 rainbow-text text-balance">Art Gallery</h1>
|
|
<p className="text-xl text-muted-foreground text-pretty">Explore my magical anime creations! ✨🎨</p>
|
|
</div>
|
|
|
|
{/* Gallery Grid */}
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{artworks.map((artwork) => (
|
|
<Card key={artwork.id} className="overflow-hidden hover:shadow-xl transition-shadow border-2 group">
|
|
<div className="aspect-square bg-gradient-to-br from-primary/20 via-secondary/20 to-accent/20 relative overflow-hidden">
|
|
<img
|
|
src={`/.jpg?height=400&width=400&query=${encodeURIComponent(artwork.query)}`}
|
|
alt={artwork.title}
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
</div>
|
|
<div className="p-6">
|
|
<h3 className="text-xl font-bold mb-2 text-card-foreground text-balance">{artwork.title}</h3>
|
|
<p className="text-muted-foreground text-pretty">{artwork.description}</p>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
{/* Coming Soon */}
|
|
<div className="mt-12 text-center">
|
|
<Card className="p-8 border-2 bg-gradient-to-r from-primary/5 via-secondary/5 to-accent/5">
|
|
<h2 className="text-2xl font-bold mb-3 text-card-foreground">More Art Coming Soon! 🌟</h2>
|
|
<p className="text-muted-foreground text-pretty">
|
|
I'm always creating new pieces! Check back often to see my latest anime artwork filled with rainbows and
|
|
sparkles!
|
|
</p>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer className="border-t border-border py-8 text-center text-muted-foreground mt-12">
|
|
<p>© 2025 Paint Spark by Banksy • Made with ✨ and 🌈</p>
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|