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/HowItWorks.tsx
+++ b/app/components/HowItWorks.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { UserPlus, Upload, Shield, Vote, Trophy } from "lucide-react";
+
+const steps = [
+  {
+    icon: UserPlus,
+    step: "01",
+    title: "Register",
+    description: "Sign up with your SJEC email to participate in the competition.",
+  },
+  {
+    icon: Upload,
+    step: "02",
+    title: "Submit",
+    description: "Upload your artwork with title, description, and category details.",
+  },
+  {
+    icon: Shield,
+    step: "03",
+    title: "Review",
+    description: "Moderators review submissions to ensure guidelines are met.",
+  },
+  {
+    icon: Vote,
+    step: "04",
+    title: "Public Voting",
+    description: "The public votes for their favorite artworks in each category.",
+  },
+  {
+    icon: Trophy,
+    step: "05",
+    title: "Results",
+    description: "Winners are announced and celebrated across all categories.",
+  },
+];
+
+export default function HowItWorks() {
+  return (
+    <section className="py-24 bg-black text-white overflow-hidden">
+      <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">
+            HOW IT WORKS
+          </span>
+          <h2 className="text-4xl sm:text-5xl font-black tracking-tight mb-4">
+            Your Journey to
+            <span className="text-lime-400"> Victory</span>
+          </h2>
+          <p className="text-zinc-400 text-lg max-w-2xl mx-auto">
+            From registration to winning, here's how ArtSplash works.
+          </p>
+        </motion.div>
+
+        {/* Steps Timeline */}
+        <div className="relative">
+          {/* Connection Line */}
+          <div className="absolute top-1/2 left-0 right-0 h-0.5 bg-zinc-800 hidden lg:block" />
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-8 lg:gap-4">
+            {steps.map((step, index) => (
+              <motion.div
+                key={step.step}
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: index * 0.1 }}
+                className="relative"
+              >
+                {/* Card */}
+                <div className="bg-zinc-900 rounded-2xl p-6 h-full border border-zinc-800 hover:border-lime-400/50 transition-colors group">
+                  {/* Step Number */}
+                  <div className="relative z-10 w-12 h-12 rounded-full bg-lime-400 text-black font-black text-sm flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                    {step.step}
+                  </div>
+
+                  {/* Icon */}
+                  <step.icon className="w-8 h-8 text-lime-400 mb-4" />
+
+                  {/* Content */}
+                  <h3 className="text-xl font-bold mb-2">{step.title}</h3>
+                  <p className="text-zinc-400 text-sm leading-relaxed">
+                    {step.description}
+                  </p>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}