104 lines
4.5 KiB
TypeScript
104 lines
4.5 KiB
TypeScript
import Link from "next/link"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card } from "@/components/ui/card"
|
|
import { Navigation } from "@/components/navigation"
|
|
import { SparkleEffect } from "@/components/sparkle-effect"
|
|
import { Sparkles, Palette, Heart, Star } from "lucide-react"
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<div className="min-h-screen">
|
|
<Navigation />
|
|
<SparkleEffect />
|
|
|
|
<main className="container px-4 py-12">
|
|
{/* Hero Section */}
|
|
<section className="text-center py-20 relative">
|
|
<div className="float mb-8">
|
|
<Sparkles className="h-20 w-20 mx-auto text-primary" />
|
|
</div>
|
|
<h1 className="text-6xl md:text-8xl font-bold mb-6 rainbow-text text-balance">Paint Spark</h1>
|
|
<p className="text-2xl md:text-3xl mb-4 text-foreground font-semibold">by Banksy</p>
|
|
<p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto text-pretty">
|
|
Welcome to my magical world of anime art! ✨ I'm a 10-year-old artist who loves bringing characters to life
|
|
with colors and sparkles!
|
|
</p>
|
|
<div className="flex gap-4 justify-center flex-wrap">
|
|
<Button asChild size="lg" className="text-lg">
|
|
<Link href="/gallery">
|
|
<Palette className="mr-2 h-5 w-5" />
|
|
View Gallery
|
|
</Link>
|
|
</Button>
|
|
<Button asChild size="lg" variant="outline" className="text-lg bg-transparent">
|
|
<Link href="/about">
|
|
<Star className="mr-2 h-5 w-5" />
|
|
About Me
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Features Section */}
|
|
<section className="py-12 grid md:grid-cols-3 gap-6">
|
|
<Card className="p-6 text-center hover:shadow-lg transition-shadow border-2">
|
|
<div className="mb-4 flex justify-center">
|
|
<div className="p-4 bg-primary/10 rounded-full">
|
|
<Palette className="h-8 w-8 text-primary" />
|
|
</div>
|
|
</div>
|
|
<h3 className="text-xl font-bold mb-2 text-card-foreground">Anime Art</h3>
|
|
<p className="text-muted-foreground text-pretty">
|
|
Beautiful anime characters with vibrant colors and expressive emotions
|
|
</p>
|
|
</Card>
|
|
|
|
<Card className="p-6 text-center hover:shadow-lg transition-shadow border-2">
|
|
<div className="mb-4 flex justify-center">
|
|
<div className="p-4 bg-secondary/10 rounded-full">
|
|
<Sparkles className="h-8 w-8 text-secondary" />
|
|
</div>
|
|
</div>
|
|
<h3 className="text-xl font-bold mb-2 text-card-foreground">Magical Effects</h3>
|
|
<p className="text-muted-foreground text-pretty">
|
|
Every piece is filled with sparkles, rainbows, and special anime symbols
|
|
</p>
|
|
</Card>
|
|
|
|
<Card className="p-6 text-center hover:shadow-lg transition-shadow border-2">
|
|
<div className="mb-4 flex justify-center">
|
|
<div className="p-4 bg-accent/10 rounded-full">
|
|
<Heart className="h-8 w-8 text-accent" />
|
|
</div>
|
|
</div>
|
|
<h3 className="text-xl font-bold mb-2 text-card-foreground">Made with Love</h3>
|
|
<p className="text-muted-foreground text-pretty">
|
|
Each artwork is created with passion and lots of imagination
|
|
</p>
|
|
</Card>
|
|
</section>
|
|
|
|
{/* Call to Action */}
|
|
<section className="py-20 text-center">
|
|
<div className="max-w-3xl mx-auto bg-gradient-to-r from-primary/10 via-secondary/10 to-accent/10 rounded-2xl p-12 border-2 border-border">
|
|
<h2 className="text-4xl font-bold mb-4 text-foreground text-balance">Support My Art Journey! 🌟</h2>
|
|
<p className="text-lg text-muted-foreground mb-6 text-pretty">
|
|
Help me continue creating amazing anime art and bring more magical characters to life!
|
|
</p>
|
|
<Button asChild size="lg" className="text-lg">
|
|
<Link href="/sponsor">
|
|
<Heart className="mr-2 h-5 w-5" />
|
|
Become a Sponsor
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer className="border-t border-border py-8 text-center text-muted-foreground">
|
|
<p>© 2025 Paint Spark by Banksy • Made with ✨ and 🌈</p>
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|