313 lines
12 KiB
TypeScript
313 lines
12 KiB
TypeScript
"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>
|
|
);
|
|
}
|