Updated Frontend

2026-02-21 15:02:57 +05:30
parent a8a756457f
commit 29fc82c104
12 changed files with 3767 additions and 72 deletions
--- a/app/components/Categories.tsx
+++ b/app/components/Categories.tsx
@@ -0,0 +1,131 @@
+"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>
+  );
+}