Adjusted the Marquee Speed
This commit is contained in:
296
app/(pages)/faq/page.tsx
Normal file
296
app/(pages)/faq/page.tsx
Normal file
@@ -0,0 +1,296 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import {
|
||||
ChevronDown,
|
||||
HelpCircle,
|
||||
Users,
|
||||
Vote,
|
||||
Upload,
|
||||
Award,
|
||||
Shield,
|
||||
Clock,
|
||||
Mail
|
||||
} from "lucide-react";
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
category: "General",
|
||||
icon: HelpCircle,
|
||||
questions: [
|
||||
{
|
||||
q: "What is ArtSplash?",
|
||||
a: "ArtSplash is SJEC's premier art competition organized by Sceptix. It's a platform for students to showcase their artistic talents across three categories: Digital Art, Paintings, and Poster Making. The competition features public voting and exciting prizes for winners.",
|
||||
},
|
||||
{
|
||||
q: "When does the competition take place?",
|
||||
a: "The competition runs from February 15 to March 7, 2026. This includes the registration period, submission window, and voting phase. Make sure to check the Rules page for specific deadlines for each phase.",
|
||||
},
|
||||
{
|
||||
q: "Who can participate in ArtSplash?",
|
||||
a: "ArtSplash is open to all students of St Joseph Engineering College (SJEC), Mangalore. You must have a valid SJEC email address (@sjec.ac.in) to register and submit artwork.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: "Registration & Submission",
|
||||
icon: Upload,
|
||||
questions: [
|
||||
{
|
||||
q: "How do I register for the competition?",
|
||||
a: "Click on the 'Register' button and sign in using your SJEC Google account (@sjec.ac.in). Fill in your details including department, year, and phone number. Once registered, you can submit your artwork through the Submit page.",
|
||||
},
|
||||
{
|
||||
q: "What file formats are accepted?",
|
||||
a: "We accept JPG, PNG, and PDF formats. For Digital Art and Paintings, JPG or PNG is recommended. For Poster Making, PDF format is preferred. Maximum file size is 10MB.",
|
||||
},
|
||||
{
|
||||
q: "Can I submit multiple artworks?",
|
||||
a: "You can submit one artwork per category, meaning you can have up to 3 submissions total (one Digital Art, one Painting, and one Poster). Each submission must be original work.",
|
||||
},
|
||||
{
|
||||
q: "Can I edit my submission after uploading?",
|
||||
a: "You can edit your submission during the submission window. Once the voting phase begins, no changes can be made to ensure fairness. Make sure your submission is final before the deadline.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: "Voting",
|
||||
icon: Vote,
|
||||
questions: [
|
||||
{
|
||||
q: "Who can vote?",
|
||||
a: "Anyone can vote! Unlike submissions which require an SJEC email, voting is open to everyone. Each person can cast one vote per email address, verified through our CAPTCHA system.",
|
||||
},
|
||||
{
|
||||
q: "Can I see how many votes an artwork has?",
|
||||
a: "To maintain fairness and prevent bandwagon voting, vote counts are hidden during the voting period. Results will be announced after the voting phase ends.",
|
||||
},
|
||||
{
|
||||
q: "How is the winner decided?",
|
||||
a: "Winners are determined by a combination of public votes (70%) and judge scores (30%). Our panel of judges evaluates artworks based on creativity, technique, and adherence to theme.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: "Rules & Guidelines",
|
||||
icon: Shield,
|
||||
questions: [
|
||||
{
|
||||
q: "What are the content guidelines?",
|
||||
a: "All submissions must be original work created by the participant. AI-generated content is strictly prohibited and will be detected through our verification system. Content must be appropriate and not contain any offensive, violent, or copyrighted material.",
|
||||
},
|
||||
{
|
||||
q: "What happens if I'm caught using AI-generated art?",
|
||||
a: "All submissions go through our AI detection system. If AI-generated content is detected, your submission will be disqualified immediately, and you may be banned from future competitions.",
|
||||
},
|
||||
{
|
||||
q: "Can I use references for my artwork?",
|
||||
a: "Yes, you can use references for inspiration, but your final artwork must be substantially original. Direct copies or heavy traces of existing artwork are not allowed.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: "Prizes & Awards",
|
||||
icon: Award,
|
||||
questions: [
|
||||
{
|
||||
q: "What are the prizes?",
|
||||
a: "Each category has three prize tiers: 1st Place, 2nd Place, and 3rd Place. Prizes include certificates, merchandise, and exciting rewards. Details will be announced on our social media channels.",
|
||||
},
|
||||
{
|
||||
q: "When will winners be announced?",
|
||||
a: "Winners will be announced within 3 days after the voting phase ends. All participants will be notified via email, and results will be posted on our website and social media.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: "Technical Issues",
|
||||
icon: Clock,
|
||||
questions: [
|
||||
{
|
||||
q: "My submission failed to upload. What should I do?",
|
||||
a: "First, check if your file meets the requirements (JPG/PNG/PDF, under 10MB). Try using a different browser or clearing your cache. If the issue persists, contact us at artsplash@sjec.ac.in with details of the error.",
|
||||
},
|
||||
{
|
||||
q: "I didn't receive a confirmation email after registering.",
|
||||
a: "Check your spam/junk folder first. If you still can't find it, try logging in to verify your registration status. Contact us if you're still having issues.",
|
||||
},
|
||||
{
|
||||
q: "Can I participate if I'm not currently on campus?",
|
||||
a: "Absolutely! ArtSplash is entirely online. You can register, submit, and vote from anywhere as long as you have internet access and (for submissions) a valid SJEC email.",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function FAQPage() {
|
||||
const [openItems, setOpenItems] = useState<Set<string>>(new Set(["general-0"]));
|
||||
const [activeCategory, setActiveCategory] = useState("General");
|
||||
|
||||
const toggleItem = (id: string) => {
|
||||
setOpenItems((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(id)) {
|
||||
next.delete(id);
|
||||
} else {
|
||||
next.add(id);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const filteredFaqs = activeCategory === "All"
|
||||
? faqs
|
||||
: faqs.filter(cat => cat.category === activeCategory);
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-black pt-32 pb-20">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center mb-12"
|
||||
>
|
||||
<span className="inline-block bg-lime-400 text-black px-4 py-1.5 text-xs font-bold tracking-wider rounded-full mb-6">
|
||||
FAQ
|
||||
</span>
|
||||
<h1 className="text-4xl sm:text-5xl font-black tracking-tight text-white mb-4">
|
||||
Frequently Asked <span className="text-lime-400">Questions</span>
|
||||
</h1>
|
||||
<p className="text-zinc-400 text-lg max-w-2xl mx-auto">
|
||||
Got questions? We've got answers. Find everything you need to know about ArtSplash below.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Category Tabs */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
className="mb-8 overflow-x-auto scrollbar-hide"
|
||||
>
|
||||
<div className="flex gap-2 min-w-max pb-2">
|
||||
<button
|
||||
onClick={() => setActiveCategory("All")}
|
||||
className={`px-4 py-2 rounded-full text-sm font-medium transition-all whitespace-nowrap ${
|
||||
activeCategory === "All"
|
||||
? "bg-lime-400 text-black"
|
||||
: "bg-zinc-900 text-zinc-400 hover:text-white border border-zinc-800"
|
||||
}`}
|
||||
>
|
||||
All Topics
|
||||
</button>
|
||||
{faqs.map((cat) => (
|
||||
<button
|
||||
key={cat.category}
|
||||
onClick={() => setActiveCategory(cat.category)}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all whitespace-nowrap ${
|
||||
activeCategory === cat.category
|
||||
? "bg-lime-400 text-black"
|
||||
: "bg-zinc-900 text-zinc-400 hover:text-white border border-zinc-800"
|
||||
}`}
|
||||
>
|
||||
<cat.icon className="w-4 h-4" />
|
||||
{cat.category}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* FAQ Accordion */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="space-y-8"
|
||||
>
|
||||
{filteredFaqs.map((category, catIndex) => (
|
||||
<div key={category.category}>
|
||||
{/* Category Header */}
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="p-2 bg-lime-400/10 rounded-lg">
|
||||
<category.icon className="w-5 h-5 text-lime-400" />
|
||||
</div>
|
||||
<h2 className="text-xl font-bold text-white">{category.category}</h2>
|
||||
</div>
|
||||
|
||||
{/* Questions */}
|
||||
<div className="space-y-3">
|
||||
{category.questions.map((item, qIndex) => {
|
||||
const itemId = `${category.category.toLowerCase().replace(/\s+/g, "-")}-${qIndex}`;
|
||||
const isOpen = openItems.has(itemId);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={qIndex}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3, delay: qIndex * 0.05 }}
|
||||
className="bg-zinc-900 border border-zinc-800 rounded-xl overflow-hidden"
|
||||
>
|
||||
<button
|
||||
onClick={() => toggleItem(itemId)}
|
||||
className="w-full flex items-center justify-between p-5 text-left"
|
||||
>
|
||||
<span className="text-white font-semibold pr-4">{item.q}</span>
|
||||
<ChevronDown
|
||||
className={`w-5 h-5 text-zinc-400 flex-shrink-0 transition-transform duration-300 ${
|
||||
isOpen ? "rotate-180" : ""
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
initial={{ height: 0, opacity: 0 }}
|
||||
animate={{ height: "auto", opacity: 1 }}
|
||||
exit={{ height: 0, opacity: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="px-5 pb-5">
|
||||
<div className="h-px bg-zinc-800 mb-4" />
|
||||
<p className="text-zinc-400 leading-relaxed">{item.a}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* Contact CTA */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="mt-16 text-center"
|
||||
>
|
||||
<div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-8">
|
||||
<div className="w-14 h-14 rounded-full bg-lime-400/10 flex items-center justify-center mx-auto mb-4">
|
||||
<Mail className="w-7 h-7 text-lime-400" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-2">Still have questions?</h3>
|
||||
<p className="text-zinc-400 mb-6">
|
||||
Can't find what you're looking for? We're here to help!
|
||||
</p>
|
||||
<a
|
||||
href="/contact"
|
||||
className="inline-flex items-center justify-center gap-2 bg-lime-400 text-black px-6 py-3 rounded-xl font-bold hover:bg-lime-300 transition-colors"
|
||||
>
|
||||
Contact Us
|
||||
</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user