Adjusted the Marquee Speed

app/(pages)/rules/page.tsx

@@ -0,0 +1,312 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { 
+  CheckCircle, 
+  XCircle, 
+  AlertTriangle, 
+  FileImage, 
+  Users, 
+  Vote, 
+  Award,
+  Clock,
+  Mail
+} from "lucide-react";
+
+const eligibilityRules = [
+  { text: "Must be a current student of St. Joseph Engineering College (SJEC)", allowed: true },
+  { text: "Must have a valid SJEC email address (@sjec.ac.in) to submit artwork", allowed: true },
+  { text: "One submission per category per participant", allowed: true },
+  { text: "Participants can enter multiple categories", allowed: true },
+  { text: "Alumni and faculty are not eligible to participate", allowed: false },
+  { text: "Group submissions are not allowed", allowed: false },
+];
+
+const submissionRules = [
+  {
+    icon: FileImage,
+    title: "File Requirements",
+    rules: [
+      "Accepted formats: JPG, PNG, PDF",
+      "Maximum file size: 10MB",
+      "Minimum resolution: 1920x1080 pixels",
+      "Digital art must be in RGB color mode",
+    ],
+  },
+  {
+    icon: CheckCircle,
+    title: "Content Guidelines",
+    rules: [
+      "All artwork must be original and created by the participant",
+      "No AI-generated artwork will be accepted",
+      "Artwork must not contain offensive, inappropriate, or copyrighted content",
+      "Previously published work may be submitted if you own the rights",
+    ],
+  },
+  {
+    icon: Clock,
+    title: "Submission Details",
+    rules: [
+      "Include a title (max 100 characters)",
+      "Provide a description of your artwork (max 500 characters)",
+      "Select the appropriate category",
+      "Fill in accurate artist details",
+    ],
+  },
+];
+
+const categoryRules = [
+  {
+    title: "Digital Art",
+    description: "Artwork created using digital tools and software",
+    requirements: [
+      "Created using software like Photoshop, Illustrator, Procreate, etc.",
+      "Digital paintings, illustrations, and photo manipulations accepted",
+      "Must be entirely digitally created (no scanned traditional art)",
+      "3D renders and digital sculptures are accepted",
+    ],
+  },
+  {
+    title: "Paintings",
+    description: "Traditional paintings in any medium",
+    requirements: [
+      "Oil, acrylic, watercolor, or any traditional painting medium",
+      "Submit high-quality photographs or scans of your work",
+      "Physical artwork must be completed before submission deadline",
+      "Mixed media paintings are accepted",
+    ],
+  },
+  {
+    title: "Poster Making",
+    description: "Creative posters with impactful messages",
+    requirements: [
+      "Can be digital or traditional",
+      "Must have a clear theme or message",
+      "Text and typography should be legible",
+      "Theme: Open (artist's choice)",
+    ],
+  },
+];
+
+const votingRules = [
+  { text: "Voting is open to the general public", icon: Users },
+  { text: "One vote per email address per artwork", icon: Vote },
+  { text: "CAPTCHA verification required to prevent spam", icon: AlertTriangle },
+  { text: "Vote counts will be hidden during the voting period", icon: Award },
+  { text: "Voting period: March 1-5, 2026", icon: Clock },
+  { text: "Results will be announced via email", icon: Mail },
+];
+
+const disqualificationReasons = [
+  "Submission of AI-generated artwork",
+  "Plagiarism or copyright infringement",
+  "Submitting work created by someone else",
+  "Multiple submissions in the same category",
+  "Inappropriate or offensive content",
+  "Vote manipulation or fraudulent voting",
+  "Missing or false participant information",
+];
+
+export default function RulesPage() {
+  return (
+    <main className="min-h-screen bg-black pt-32 pb-20">
+      {/* Hero Section */}
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="text-center"
+        >
+          <span className="inline-block bg-lime-400 text-black px-4 py-1.5 text-xs font-bold tracking-wider rounded-full mb-6">
+            COMPETITION RULES
+          </span>
+          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-black tracking-tight text-white mb-6">
+            Rules & <span className="text-lime-400">Guidelines</span>
+          </h1>
+          <p className="text-zinc-400 text-lg max-w-2xl mx-auto">
+            Please read all rules carefully before participating. Violation of any 
+            rules may result in disqualification.
+          </p>
+        </motion.div>
+      </section>
+
+      {/* Eligibility Section */}
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+        >
+          <h2 className="text-2xl sm:text-3xl font-black text-white mb-8 flex items-center gap-3">
+            <Users className="w-8 h-8 text-lime-400" />
+            Eligibility
+          </h2>
+          <div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6 md:p-8">
+            <div className="grid gap-4">
+              {eligibilityRules.map((rule, index) => (
+                <div
+                  key={index}
+                  className="flex items-start gap-3 p-3 rounded-xl bg-zinc-800/50"
+                >
+                  {rule.allowed ? (
+                    <CheckCircle className="w-5 h-5 text-lime-400 flex-shrink-0 mt-0.5" />
+                  ) : (
+                    <XCircle className="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" />
+                  )}
+                  <span className="text-zinc-300">{rule.text}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </motion.div>
+      </section>
+
+      {/* Submission Rules Section */}
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+        >
+          <h2 className="text-2xl sm:text-3xl font-black text-white mb-8 flex items-center gap-3">
+            <FileImage className="w-8 h-8 text-lime-400" />
+            Submission Rules
+          </h2>
+          <div className="grid md:grid-cols-3 gap-6">
+            {submissionRules.map((section, index) => (
+              <div
+                key={index}
+                className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6"
+              >
+                <div className="w-12 h-12 rounded-xl bg-lime-400/10 flex items-center justify-center mb-4">
+                  <section.icon className="w-6 h-6 text-lime-400" />
+                </div>
+                <h3 className="text-white font-bold text-lg mb-4">{section.title}</h3>
+                <ul className="space-y-3">
+                  {section.rules.map((rule, ruleIndex) => (
+                    <li key={ruleIndex} className="flex items-start gap-2 text-zinc-400 text-sm">
+                      <span className="text-lime-400 mt-1">•</span>
+                      {rule}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </motion.div>
+      </section>
+
+      {/* Category Rules Section */}
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+        >
+          <h2 className="text-2xl sm:text-3xl font-black text-white mb-8 flex items-center gap-3">
+            <Award className="w-8 h-8 text-lime-400" />
+            Category Guidelines
+          </h2>
+          <div className="space-y-6">
+            {categoryRules.map((category, index) => (
+              <div
+                key={index}
+                className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6 md:p-8"
+              >
+                <div className="flex flex-col md:flex-row md:items-start gap-6">
+                  <div className="flex-1">
+                    <h3 className="text-xl font-bold text-lime-400 mb-2">
+                      {category.title}
+                    </h3>
+                    <p className="text-zinc-400 mb-4">{category.description}</p>
+                  </div>
+                  <div className="flex-1">
+                    <h4 className="text-white font-semibold mb-3">Requirements:</h4>
+                    <ul className="space-y-2">
+                      {category.requirements.map((req, reqIndex) => (
+                        <li key={reqIndex} className="flex items-start gap-2 text-zinc-400 text-sm">
+                          <CheckCircle className="w-4 h-4 text-lime-400 flex-shrink-0 mt-0.5" />
+                          {req}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </motion.div>
+      </section>
+
+      {/* Voting Rules Section */}
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+        >
+          <h2 className="text-2xl sm:text-3xl font-black text-white mb-8 flex items-center gap-3">
+            <Vote className="w-8 h-8 text-lime-400" />
+            Voting Rules
+          </h2>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {votingRules.map((rule, index) => (
+              <div
+                key={index}
+                className="bg-zinc-900 border border-zinc-800 rounded-xl p-4 flex items-center gap-4"
+              >
+                <div className="w-10 h-10 rounded-lg bg-lime-400/10 flex items-center justify-center flex-shrink-0">
+                  <rule.icon className="w-5 h-5 text-lime-400" />
+                </div>
+                <span className="text-zinc-300 text-sm">{rule.text}</span>
+              </div>
+            ))}
+          </div>
+        </motion.div>
+      </section>
+
+      {/* Disqualification Section */}
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+        >
+          <h2 className="text-2xl sm:text-3xl font-black text-white mb-8 flex items-center gap-3">
+            <AlertTriangle className="w-8 h-8 text-red-500" />
+            Disqualification Criteria
+          </h2>
+          <div className="bg-red-500/10 border border-red-500/30 rounded-2xl p-6 md:p-8">
+            <p className="text-zinc-300 mb-6">
+              Participants may be disqualified for any of the following reasons:
+            </p>
+            <div className="grid sm:grid-cols-2 gap-3">
+              {disqualificationReasons.map((reason, index) => (
+                <div
+                  key={index}
+                  className="flex items-start gap-3 p-3 rounded-xl bg-zinc-900/50"
+                >
+                  <XCircle className="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" />
+                  <span className="text-zinc-400 text-sm">{reason}</span>
+                </div>
+              ))}
+            </div>
+            <div className="mt-6 p-4 bg-zinc-900 rounded-xl">
+              <p className="text-zinc-400 text-sm">
+                <strong className="text-white">Note:</strong> All submissions will be 
+                reviewed by moderators using AI detection tools and manual inspection. 
+                Decisions made by the organizing committee are final.
+              </p>
+            </div>
+          </div>
+        </motion.div>
+      </section>
+    </main>
+  );
+}