init

dmtp/client/app/_sections/task-examples.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { CheckCircle2 } from "lucide-react"
+
+const taskExamples = [
+  {
+    category: "Data Labeling",
+    tasks: ["Image classification", "Object detection", "Text annotation"],
+    earning: "$1.50 - $5.00",
+    time: "5-15 min",
+  },
+  {
+    category: "Content Moderation",
+    tasks: ["Review flagged content", "Verify guidelines compliance", "Quality assurance"],
+    earning: "$2.00 - $6.00",
+    time: "10-20 min",
+  },
+  {
+    category: "Surveys & Research",
+    tasks: ["Market research", "User feedback", "Opinion surveys"],
+    earning: "$1.00 - $4.00",
+    time: "5-10 min",
+  },
+  {
+    category: "Transcription",
+    tasks: ["Audio transcription", "Video captioning", "Translation"],
+    earning: "$3.00 - $8.00",
+    time: "15-30 min",
+  },
+]
+
+export function TaskExamples() {
+  return (
+    <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
+      <div className="max-w-6xl mx-auto">
+        <motion.div
+          className="text-center mb-12"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: true }}
+        >
+          <h2 className="text-3xl sm:text-4xl font-bold mb-4 text-gray-900">
+            Available{" "}
+            <span className="text-primary">
+              Task Types
+            </span>
+          </h2>
+          <p className="text-base text-gray-600">Choose from diverse tasks that match your skills and schedule</p>
+        </motion.div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {taskExamples.map((task, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: index * 0.1 }}
+              viewport={{ once: true }}
+            >
+              <div className="bg-white border-2 border-gray-200 hover:border-primary p-6 transition-colors h-full">
+                <h3 className="text-lg font-bold mb-4 text-primary">
+                  {task.category}
+                </h3>
+                <ul className="space-y-2 mb-6">
+                  {task.tasks.map((item, i) => (
+                    <li
+                      key={i}
+                      className="flex items-center gap-2 text-gray-700 text-sm"
+                    >
+                      <CheckCircle2 className="w-4 h-4 text-primary shrink-0" />
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+                <div className="grid grid-cols-2 gap-4 pt-4 border-t-2 border-gray-200">
+                  <div>
+                    <p className="text-xs text-gray-500 mb-1">Earning</p>
+                    <p className="font-bold text-primary text-sm">{task.earning}</p>
+                  </div>
+                  <div className="text-right">
+                    <p className="text-xs text-gray-500 mb-1">Time</p>
+                    <p className="font-bold text-gray-900 text-sm">{task.time}</p>
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}