132 lines
4.1 KiB
TypeScript
132 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { Palette, Monitor, FileImage, ArrowRight } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
const categories = [
|
|
{
|
|
icon: Monitor,
|
|
title: "Digital Art",
|
|
description:
|
|
"Create stunning digital masterpieces using any software of your choice. From illustrations to photo manipulations.",
|
|
color: "from-violet-500 to-purple-600",
|
|
bgColor: "bg-violet-50",
|
|
},
|
|
{
|
|
icon: Palette,
|
|
title: "Paintings",
|
|
description:
|
|
"Traditional paintings in any medium - oil, acrylic, watercolor. Capture the essence of classic artistry.",
|
|
color: "from-orange-500 to-red-500",
|
|
bgColor: "bg-orange-50",
|
|
},
|
|
{
|
|
icon: FileImage,
|
|
title: "Poster Making",
|
|
description:
|
|
"Design impactful posters that communicate powerful messages. Blend creativity with purpose.",
|
|
color: "from-lime-500 to-green-500",
|
|
bgColor: "bg-lime-50",
|
|
},
|
|
];
|
|
|
|
const containerVariants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.2,
|
|
},
|
|
},
|
|
};
|
|
|
|
const itemVariants = {
|
|
hidden: { opacity: 0, y: 30 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
duration: 0.6,
|
|
},
|
|
},
|
|
};
|
|
|
|
export default function Categories() {
|
|
return (
|
|
<section className="py-24 bg-white">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
{/* Section Header */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="text-center mb-16"
|
|
>
|
|
<span className="inline-block bg-lime-400 text-black px-4 py-1.5 text-xs font-bold tracking-wider rounded-full mb-4">
|
|
CATEGORIES
|
|
</span>
|
|
<h2 className="text-4xl sm:text-5xl font-black tracking-tight text-black mb-4">
|
|
Three Ways to
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-lime-400 to-lime-600">
|
|
{" "}
|
|
Express
|
|
</span>
|
|
</h2>
|
|
<p className="text-zinc-600 text-lg max-w-2xl mx-auto">
|
|
Choose your canvas, unleash your creativity. Each category offers a
|
|
unique way to showcase your artistic vision.
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Categories Grid */}
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={{ once: true }}
|
|
className="grid md:grid-cols-3 gap-8"
|
|
>
|
|
{categories.map((category) => (
|
|
<motion.div
|
|
key={category.title}
|
|
variants={itemVariants}
|
|
className={`group relative ${category.bgColor} rounded-3xl p-8 hover:shadow-2xl transition-all duration-500 overflow-hidden`}
|
|
>
|
|
{/* Background Gradient on Hover */}
|
|
<div
|
|
className={`absolute inset-0 bg-gradient-to-br ${category.color} opacity-0 group-hover:opacity-10 transition-opacity duration-500`}
|
|
/>
|
|
|
|
{/* Icon */}
|
|
<div
|
|
className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${category.color} flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}
|
|
>
|
|
<category.icon className="w-8 h-8 text-white" />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<h3 className="text-2xl font-bold text-black mb-3">
|
|
{category.title}
|
|
</h3>
|
|
<p className="text-zinc-600 mb-6 leading-relaxed">
|
|
{category.description}
|
|
</p>
|
|
|
|
{/* Link */}
|
|
<Link
|
|
href="/submit"
|
|
className="inline-flex items-center gap-2 text-black font-semibold group-hover:gap-4 transition-all"
|
|
>
|
|
Submit Now
|
|
<ArrowRight className="w-4 h-4" />
|
|
</Link>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|