Adjusted the Marquee Speed

app/(pages)/submit/page.tsx

@@ -0,0 +1,380 @@
+"use client";
+
+import { useState, useRef } from "react";
+import { motion } from "framer-motion";
+import { 
+  Upload, 
+  Image as ImageIcon, 
+  FileText, 
+  X, 
+  CheckCircle, 
+  AlertCircle,
+  Monitor,
+  Palette,
+  FileImage,
+  ArrowRight,
+  Info
+} from "lucide-react";
+import Link from "next/link";
+
+const categories = [
+  {
+    id: "digital-art",
+    title: "Digital Art",
+    icon: Monitor,
+    description: "Artwork created using digital tools and software",
+  },
+  {
+    id: "paintings",
+    title: "Paintings",
+    icon: Palette,
+    description: "Traditional paintings in any medium",
+  },
+  {
+    id: "poster-making",
+    title: "Poster Making",
+    icon: FileImage,
+    description: "Creative posters with impactful messages",
+  },
+];
+
+export default function SubmitPage() {
+  const [formData, setFormData] = useState({
+    title: "",
+    description: "",
+    category: "",
+  });
+  const [file, setFile] = useState<File | null>(null);
+  const [preview, setPreview] = useState<string | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitSuccess, setSubmitSuccess] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileSelect = (selectedFile: File) => {
+    const validTypes = ["image/jpeg", "image/png", "application/pdf"];
+    const maxSize = 10 * 1024 * 1024; // 10MB
+
+    if (!validTypes.includes(selectedFile.type)) {
+      alert("Please upload a JPG, PNG, or PDF file.");
+      return;
+    }
+
+    if (selectedFile.size > maxSize) {
+      alert("File size must be less than 10MB.");
+      return;
+    }
+
+    setFile(selectedFile);
+
+    if (selectedFile.type.startsWith("image/")) {
+      const reader = new FileReader();
+      reader.onload = (e) => setPreview(e.target?.result as string);
+      reader.readAsDataURL(selectedFile);
+    } else {
+      setPreview(null);
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    const droppedFile = e.dataTransfer.files[0];
+    if (droppedFile) handleFileSelect(droppedFile);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!file || !formData.category) return;
+
+    setIsSubmitting(true);
+    // TODO: Implement actual submission logic
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    setIsSubmitting(false);
+    setSubmitSuccess(true);
+  };
+
+  const removeFile = () => {
+    setFile(null);
+    setPreview(null);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+
+  if (submitSuccess) {
+    return (
+      <main className="min-h-screen bg-black pt-32 pb-20 flex items-center justify-center">
+        <motion.div
+          initial={{ opacity: 0, scale: 0.9 }}
+          animate={{ opacity: 1, scale: 1 }}
+          className="text-center px-4"
+        >
+          <div className="w-20 h-20 rounded-full bg-lime-400/20 flex items-center justify-center mx-auto mb-6">
+            <CheckCircle className="w-10 h-10 text-lime-400" />
+          </div>
+          <h1 className="text-3xl sm:text-4xl font-black text-white mb-4">
+            Submission Successful!
+          </h1>
+          <p className="text-zinc-400 mb-8 max-w-md mx-auto">
+            Your artwork has been submitted for review. You'll receive an email 
+            notification once it's approved by our moderators.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <button
+              onClick={() => {
+                setSubmitSuccess(false);
+                setFormData({ title: "", description: "", category: "" });
+                setFile(null);
+                setPreview(null);
+              }}
+              className="inline-flex items-center justify-center gap-2 bg-lime-400 text-black px-8 py-4 rounded-full font-bold hover:bg-lime-300 transition-all"
+            >
+              Submit Another
+            </button>
+            <Link
+              href="/gallery"
+              className="inline-flex items-center justify-center gap-2 bg-transparent text-white px-8 py-4 rounded-full font-bold border border-zinc-700 hover:border-zinc-500 transition-all"
+            >
+              View Gallery
+            </Link>
+          </div>
+        </motion.div>
+      </main>
+    );
+  }
+
+  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">
+            SUBMIT ARTWORK
+          </span>
+          <h1 className="text-4xl sm:text-5xl font-black tracking-tight text-white mb-4">
+            Share Your <span className="text-lime-400">Masterpiece</span>
+          </h1>
+          <p className="text-zinc-400 text-lg max-w-2xl mx-auto">
+            Upload your artwork and let the world see your creativity. 
+            Make sure to read the rules before submitting.
+          </p>
+        </motion.div>
+
+        {/* Info Banner */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.1 }}
+          className="bg-zinc-900 border border-zinc-800 rounded-2xl p-4 mb-8 flex items-start gap-3"
+        >
+          <Info className="w-5 h-5 text-lime-400 flex-shrink-0 mt-0.5" />
+          <div className="text-sm text-zinc-400">
+            <strong className="text-white">Submission Requirements:</strong> JPG, PNG, or PDF files up to 10MB. 
+            Minimum resolution 1920x1080. AI-generated artwork will be detected and rejected.
+          </div>
+        </motion.div>
+
+        <form onSubmit={handleSubmit} className="space-y-8">
+          {/* Category Selection */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+          >
+            <label className="block text-white text-lg font-bold mb-4">
+              Select Category
+            </label>
+            <div className="grid sm:grid-cols-3 gap-4">
+              {categories.map((category) => (
+                <button
+                  key={category.id}
+                  type="button"
+                  onClick={() => setFormData({ ...formData, category: category.id })}
+                  className={`p-6 rounded-2xl border-2 transition-all text-left ${
+                    formData.category === category.id
+                      ? "bg-lime-400/10 border-lime-400"
+                      : "bg-zinc-900 border-zinc-800 hover:border-zinc-700"
+                  }`}
+                >
+                  <category.icon 
+                    className={`w-8 h-8 mb-3 ${
+                      formData.category === category.id ? "text-lime-400" : "text-zinc-500"
+                    }`} 
+                  />
+                  <h3 className={`font-bold mb-1 ${
+                    formData.category === category.id ? "text-lime-400" : "text-white"
+                  }`}>
+                    {category.title}
+                  </h3>
+                  <p className="text-zinc-500 text-sm">{category.description}</p>
+                </button>
+              ))}
+            </div>
+          </motion.div>
+
+          {/* File Upload */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.3 }}
+          >
+            <label className="block text-white text-lg font-bold mb-4">
+              Upload Artwork
+            </label>
+            <div
+              onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
+              onDragLeave={() => setIsDragging(false)}
+              onDrop={handleDrop}
+              className={`relative border-2 border-dashed rounded-2xl transition-all ${
+                isDragging
+                  ? "border-lime-400 bg-lime-400/5"
+                  : file
+                  ? "border-lime-400/50 bg-zinc-900"
+                  : "border-zinc-700 bg-zinc-900 hover:border-zinc-600"
+              }`}
+            >
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept=".jpg,.jpeg,.png,.pdf"
+                onChange={(e) => e.target.files?.[0] && handleFileSelect(e.target.files[0])}
+                className="hidden"
+              />
+
+              {file ? (
+                <div className="p-6">
+                  <div className="flex items-start gap-4">
+                    {preview ? (
+                      <img
+                        src={preview}
+                        alt="Preview"
+                        className="w-32 h-32 object-cover rounded-xl"
+                      />
+                    ) : (
+                      <div className="w-32 h-32 bg-zinc-800 rounded-xl flex items-center justify-center">
+                        <FileText className="w-12 h-12 text-zinc-600" />
+                      </div>
+                    )}
+                    <div className="flex-1">
+                      <div className="flex items-start justify-between">
+                        <div>
+                          <p className="text-white font-semibold mb-1">{file.name}</p>
+                          <p className="text-zinc-500 text-sm">
+                            {(file.size / 1024 / 1024).toFixed(2)} MB
+                          </p>
+                        </div>
+                        <button
+                          type="button"
+                          onClick={removeFile}
+                          className="p-2 hover:bg-zinc-800 rounded-lg transition-colors"
+                        >
+                          <X className="w-5 h-5 text-zinc-400" />
+                        </button>
+                      </div>
+                      <div className="flex items-center gap-2 mt-3 text-lime-400 text-sm">
+                        <CheckCircle className="w-4 h-4" />
+                        File ready for upload
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <button
+                  type="button"
+                  onClick={() => fileInputRef.current?.click()}
+                  className="w-full p-12 text-center"
+                >
+                  <div className="w-16 h-16 rounded-full bg-zinc-800 flex items-center justify-center mx-auto mb-4">
+                    <Upload className="w-8 h-8 text-zinc-500" />
+                  </div>
+                  <p className="text-white font-semibold mb-2">
+                    Drop your artwork here or click to browse
+                  </p>
+                  <p className="text-zinc-500 text-sm">
+                    Supports JPG, PNG, PDF up to 10MB
+                  </p>
+                </button>
+              )}
+            </div>
+          </motion.div>
+
+          {/* Title & Description */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.4 }}
+            className="space-y-6"
+          >
+            <div>
+              <label className="block text-white text-lg font-bold mb-4">
+                Artwork Title
+              </label>
+              <input
+                type="text"
+                required
+                maxLength={100}
+                value={formData.title}
+                onChange={(e) => setFormData({ ...formData, title: e.target.value })}
+                className="w-full bg-zinc-900 border border-zinc-800 rounded-xl px-4 py-4 text-white placeholder-zinc-500 focus:outline-none focus:border-lime-400 transition-colors"
+                placeholder="Give your artwork a memorable title"
+              />
+              <p className="text-zinc-500 text-sm mt-2">{formData.title.length}/100 characters</p>
+            </div>
+
+            <div>
+              <label className="block text-white text-lg font-bold mb-4">
+                Description
+              </label>
+              <textarea
+                required
+                maxLength={500}
+                rows={4}
+                value={formData.description}
+                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                className="w-full bg-zinc-900 border border-zinc-800 rounded-xl px-4 py-4 text-white placeholder-zinc-500 focus:outline-none focus:border-lime-400 transition-colors resize-none"
+                placeholder="Tell us about your artwork, the inspiration behind it, and the techniques used..."
+              />
+              <p className="text-zinc-500 text-sm mt-2">{formData.description.length}/500 characters</p>
+            </div>
+          </motion.div>
+
+          {/* Submit Button */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.5 }}
+            className="flex flex-col sm:flex-row gap-4"
+          >
+            <button
+              type="submit"
+              disabled={isSubmitting || !file || !formData.category || !formData.title || !formData.description}
+              className="flex-1 flex items-center justify-center gap-2 bg-lime-400 text-black px-8 py-4 rounded-full font-bold tracking-wider hover:bg-lime-300 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isSubmitting ? (
+                <>
+                  <div className="w-5 h-5 border-2 border-black/30 border-t-black rounded-full animate-spin" />
+                  SUBMITTING...
+                </>
+              ) : (
+                <>
+                  SUBMIT ARTWORK
+                  <ArrowRight className="w-5 h-5" />
+                </>
+              )}
+            </button>
+            <Link
+              href="/rules"
+              className="flex items-center justify-center gap-2 bg-transparent text-white px-8 py-4 rounded-full font-bold border border-zinc-700 hover:border-zinc-500 transition-all"
+            >
+              View Rules
+            </Link>
+          </motion.div>
+        </form>
+      </div>
+    </main>
+  );
+}