init

dmtp/client/app/_sections/feature-showcase.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { Brain, Wallet, Zap } from "lucide-react"
+
+export function FeatureShowcase() {
+  const features = [
+    {
+      title: "Seamless Task Marketplace",
+      description: "Browse thousands of AI-verified tasks. Filter by category, difficulty, and earning potential.",
+      icon: Zap,
+      delay: 0,
+    },
+    {
+      title: "AI-Powered Verification",
+      description: "Advanced AI models verify your work instantly. Get paid only for quality submissions.",
+      icon: Brain,
+      delay: 0.1,
+    },
+    {
+      title: "Instant Payments",
+      description: "Earn cUSD instantly on Celo Sepolia. Withdraw anytime with zero fees.",
+      icon: Wallet,
+      delay: 0.2,
+    },
+  ]
+
+  return (
+    <section className="relative py-16 px-4 sm:px-6 lg:px-8 bg-gray-50 border-y-2 border-gray-200">
+      <div className="max-w-7xl 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">
+            Why Choose{" "}
+            <span className="text-primary">D.M.T.P</span>
+          </h2>
+          <p className="text-gray-600 text-base max-w-2xl mx-auto">
+            The most advanced AI-powered microtask platform with instant payments and transparent verification.
+          </p>
+        </motion.div>
+
+        <div className="grid md:grid-cols-3 gap-6">
+          {features.map((feature, i) => {
+            const Icon = feature.icon
+            return (
+              <motion.div
+                key={i}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: feature.delay }}
+                viewport={{ once: true }}
+              >
+                <div className="bg-white border-2 border-gray-200 p-6 h-full hover:border-primary transition-colors">
+                  {/* Icon */}
+                  <div className="w-12 h-12 bg-primary flex items-center justify-center mb-4 border-2 border-primary">
+                    <Icon className="w-6 h-6 text-white" />
+                  </div>
+
+                  <h3 className="text-lg font-bold mb-2 text-gray-900">{feature.title}</h3>
+                  <p className="text-gray-600 text-sm leading-relaxed">{feature.description}</p>
+                </div>
+              </motion.div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}