init

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

@@ -0,0 +1,31 @@
+const badges = [
+  { name: "Quick Starter", icon: "⚡", earned: true },
+  { name: "Accuracy Master", icon: "🎯", earned: true },
+  { name: "Streak Champion", icon: "🔥", earned: true },
+  { name: "Top Performer", icon: "👑", earned: false },
+  { name: "Community Helper", icon: "🤝", earned: false },
+  { name: "Legendary Worker", icon: "⭐", earned: false },
+]
+
+export function BadgeShowcase() {
+  return (
+    <div>
+      <h3 className="font-semibold text-lg mb-4">Badges</h3>
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4">
+        {badges.map((badge, index) => (
+          <div
+            key={index}
+            className={`p-4  text-center transition-all ${
+              badge.earned
+                ? "bg-card/80 backdrop-blur-md border border-border  hover:bg-card/90 transition-colors duration-200"
+                : "bg-card/50 opacity-50"
+            }`}
+          >
+            <div className="text-3xl mb-2">{badge.icon}</div>
+            <p className="text-xs font-medium">{badge.name}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

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>
+  )
+}

dmtp/client/app/_sections/hero-section.tsx

@@ -0,0 +1,150 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { useAuth } from "@/hooks/useAuth";
+import { useCUSDBalance } from "@/hooks/useCUSDBalance";
+import { useWalletConnection } from "@/hooks/useWalletConnection";
+import { motion } from "framer-motion"
+import { ArrowRight, CheckCircle } from "lucide-react"
+import { useState } from "react";
+
+export function HeroSection() {
+  const { address, isConnected, isConnecting, connect, disconnect, chainId } = useWalletConnection();
+    const { authenticate, isAuthenticating, clearAuth, isAuthenticated } = useAuth();
+    const { data: balance } = useCUSDBalance(address);
+    const [showNetworkModal, setShowNetworkModal] = useState(false);
+  
+    const expectedChainId = parseInt(process.env.NEXT_PUBLIC_CHAIN_ID || '11142220');
+    const isWrongNetwork = isConnected && chainId !== expectedChainId;
+  
+    const handleConnect = async () => {
+      try {
+        // Step 1: Connect wallet
+        await connect();
+  
+        // Step 2: Authenticate
+        await authenticate();
+      } catch (error) {
+        console.error('Connection/Authentication error:', error);
+      }
+    };
+  
+  return (
+    <section className="relative min-h-[600px] flex items-center justify-center overflow-hidden px-4 sm:px-6 lg:px-8 py-20 pt-24 bg-white border-b-2 border-gray-200">
+      {/* Green accent border on top */}
+      <div className="absolute top-0 left-0 right-0 h-1 bg-primary" />
+
+      {/* Content */}
+      <div className="relative z-10 max-w-5xl mx-auto">
+        <div className="grid lg:grid-cols-2 gap-12 items-center">
+          {/* Left Column - Main Content */}
+          <div>
+            <motion.div
+              className="inline-flex items-center gap-2 mb-6 px-3 py-1.5 border-2 border-primary bg-green-50"
+              initial={{ opacity: 0, y: -20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5 }}
+            >
+              <CheckCircle className="w-4 h-4 text-primary" />
+              <span className="text-sm font-semibold text-primary">
+                AI-Powered Verification
+              </span>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 0.1 }}
+            >
+              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 leading-tight text-gray-900">
+                Complete tasks.{" "}
+                <span className="text-primary">
+                  Get verified by AI.
+                </span>{" "}
+                <span className="text-gray-900">Earn instantly.</span>
+              </h1>
+            </motion.div>
+
+            <motion.p
+              className="text-lg text-gray-600 mb-8 leading-relaxed"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 0.2 }}
+            >
+              Join the AI-powered microtask marketplace on Celo Sepolia. Complete data labeling, surveys, and content
+              moderation tasks. Get paid in cUSD instantly.
+            </motion.p>
+
+            <motion.div
+              className="flex flex-col sm:flex-row gap-4 mb-8"
+              initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.3 }}
+        >
+          <Button
+              onClick={handleConnect}
+              size="lg"
+              className="font-semibold"
+            >
+              Connect Wallet <ArrowRight className="w-4 h-4 ml-2" />
+            </Button>
+
+          <Button
+              size="lg"
+              variant="outline"
+            >
+              Try Demo
+            </Button>
+        </motion.div>
+
+            {/* Feature Pills */}
+            <motion.div
+          className="flex flex-wrap items-center gap-4 text-sm text-gray-600"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.5, delay: 0.4 }}
+        >
+          {[
+            { label: "Powered by Gemini AI" },
+            { label: "Built on Celo Sepolia" },
+            { label: "Instant Payments" },
+          ].map((item, i) => (
+            <div
+              key={i}
+              className="flex items-center gap-2 px-3 py-1.5 bg-gray-100 border border-gray-200"
+            >
+              <div className="w-1.5 h-1.5 bg-primary " />
+              {item.label}
+            </div>
+          ))}
+        </motion.div>
+          </div>
+
+          {/* Right Column - Stats Box */}
+          <motion.div
+            className="bg-gray-50 border-2 border-gray-200 p-8"
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+          >
+            <h3 className="text-lg font-bold text-gray-900 mb-6 pb-3 border-b-2 border-gray-200">Platform Statistics</h3>
+            <div className="space-y-6">
+              <div>
+                <div className="text-3xl font-bold text-primary mb-1">2,847</div>
+                <div className="text-sm text-gray-600">Active Tasks</div>
+              </div>
+              <div className="border-t border-gray-200 pt-6">
+                <div className="text-3xl font-bold text-primary mb-1">$24,392</div>
+                <div className="text-sm text-gray-600">Paid This Week</div>
+              </div>
+              <div className="border-t border-gray-200 pt-6">
+                <div className="text-3xl font-bold text-primary mb-1">15,234</div>
+                <div className="text-sm text-gray-600">Verified Workers</div>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  )
+}

dmtp/client/app/_sections/how-it-works.tsx

@@ -0,0 +1,79 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { CheckSquare, TrendingUp, Wallet, Zap } from "lucide-react"
+
+const steps = [
+  {
+    icon: Wallet,
+    title: "Connect Wallet",
+    description: "Link your Celo wallet to get started in seconds",
+  },
+  {
+    icon: CheckSquare,
+    title: "Complete Tasks",
+    description: "Choose from available tasks and complete them",
+  },
+  {
+    icon: Zap,
+    title: "AI Verification",
+    description: "Gemini AI verifies your work instantly",
+  },
+  {
+    icon: TrendingUp,
+    title: "Earn & Withdraw",
+    description: "Get paid in cUSD directly to your wallet",
+  },
+]
+
+export function HowItWorks() {
+  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">
+            How it{" "}
+            <span className="text-primary">works</span>
+          </h2>
+          <p className="text-base text-gray-600">Get started in 4 simple steps</p>
+        </motion.div>
+
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
+          {steps.map((step, index) => (
+            <motion.div
+              key={index}
+              className="relative"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: index * 0.1 }}
+              viewport={{ once: true }}
+            >
+              {index < steps.length - 1 && (
+                <div className="hidden md:block absolute top-12 left-[60%] w-[calc(100%-60px)] h-0.5 bg-gray-300" />
+              )}
+
+              <div className="relative bg-white border-2 border-gray-200 hover:border-primary p-6 text-center transition-colors">
+                <div className="w-16 h-16 bg-primary flex items-center justify-center mx-auto mb-4 border-2 border-primary">
+                  <step.icon className="w-8 h-8 text-white" />
+                </div>
+
+                <div className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-primary text-white text-sm font-bold w-7 h-7  flex items-center justify-center border-2 border-white">
+                  {index + 1}
+                </div>
+
+                <h3 className="font-bold text-base mb-2 text-gray-900">{step.title}</h3>
+                <p className="text-gray-600 text-sm leading-relaxed">{step.description}</p>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

dmtp/client/app/_sections/integrations-section.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { Code2, Database, MessageSquare, Zap } from "lucide-react"
+
+export function IntegrationsSection() {
+  const integrations = [
+    {
+      icon: Code2,
+      title: "API Integration",
+      description: "Connect with your favorite tools to streamline workflows",
+    },
+    {
+      icon: Database,
+      title: "Data Sync",
+      description: "Seamless data synchronization across platforms",
+    },
+    {
+      icon: Zap,
+      title: "Automation",
+      description: "Automate repetitive tasks with intelligent workflows",
+    },
+    {
+      icon: MessageSquare,
+      title: "Communication",
+      description: "Real-time notifications and updates",
+    },
+  ]
+
+  return (
+    <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white border-b-2 border-gray-200">
+      <div className="max-w-6xl mx-auto">
+        {/* Header */}
+        <motion.div
+          className="text-center mb-12"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: true }}
+        >
+          <div className="inline-block mb-4 px-3 py-1.5 border-2 border-primary bg-green-50">
+            <span className="text-sm font-bold text-primary">INTEGRATIONS</span>
+          </div>
+          <h2 className="text-3xl sm:text-4xl font-bold mb-4 text-gray-900">
+            Seamless{" "}
+            <span className="text-primary">
+              Integrations
+            </span>
+          </h2>
+          <p className="text-base text-gray-600">Connect with your favorite tools to streamline workflows</p>
+        </motion.div>
+
+        {/* Integration Grid */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+          {integrations.map((integration, index) => {
+            const Icon = integration.icon
+            return (
+              <motion.div
+                key={index}
+                className="flex flex-col items-center text-center"
+                initial={{ opacity: 0, scale: 0.8 }}
+                whileInView={{ opacity: 1, scale: 1 }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                viewport={{ once: true }}
+              >
+                <div className="w-20 h-20 bg-primary border-2 border-primary flex items-center justify-center mb-4">
+                  <Icon className="w-10 h-10 text-white" />
+                </div>
+                <h3 className="font-bold text-base mb-2 text-gray-900">{integration.title}</h3>
+                <p className="text-sm text-gray-600 leading-relaxed">{integration.description}</p>
+              </motion.div>
+            )
+          })}
+        </div>
+      </div>
+    </section>
+  )
+}

dmtp/client/app/_sections/reputation-meter.tsx

@@ -0,0 +1,26 @@
+export function ReputationMeter() {
+  const reputation = 78
+  const nextLevel = 85
+
+  return (
+    <div className="mb-8">
+      <div className="flex items-center justify-between mb-3">
+        <div>
+          <p className="text-sm text-foreground/60 mb-1">Reputation Score</p>
+          <p className="text-3xl font-bold">{reputation}</p>
+        </div>
+        <div className="text-right">
+          <p className="text-sm text-foreground/60 mb-1">Next Level</p>
+          <p className="text-lg font-semibold text-green-400">{nextLevel}</p>
+        </div>
+      </div>
+      <div className="w-full bg-black/50  h-3 overflow-hidden border border-green-500/20">
+        <div
+          className="h-full bg-linear-to-r from-green-500 to-green-600 transition-all duration-500"
+          style={{ width: `${(reputation / nextLevel) * 100}%` }}
+        />
+      </div>
+      <p className="text-sm text-foreground/60 mt-2">{nextLevel - reputation} points until next level</p>
+    </div>
+  )
+}

dmtp/client/app/_sections/stats-section.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { motion } from "framer-motion"
+
+const stats = [
+  { label: "Active Workers", value: "12,450", suffix: "+" },
+  { label: "Tasks Completed", value: "2.3M", suffix: "" },
+  { label: "Total Earnings", value: "$450K", suffix: "" },
+  { label: "Avg Task Pay", value: "$2.50", suffix: "" },
+]
+
+export function StatsSection() {
+  return (
+    <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white border-y-2 border-gray-200">
+      <div className="max-w-6xl mx-auto">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
+          {stats.map((stat, index) => (
+            <motion.div
+              key={index}
+              className="text-center py-4 border-r-2 border-gray-200 last:border-r-0"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: index * 0.1 }}
+              viewport={{ once: true }}
+            >
+              <div className="text-3xl sm:text-4xl font-bold mb-2 text-primary">
+                {stat.value}
+                <span className="text-primary">{stat.suffix}</span>
+              </div>
+              <p className="text-sm sm:text-base text-gray-600 font-medium">{stat.label}</p>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

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>
+  )
+}

dmtp/client/app/_sections/testimonials.tsx

@@ -0,0 +1,229 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { Star } from "lucide-react"
+import { useEffect, useState } from "react"
+
+const testimonials = [
+  {
+    name: "Sarah Chen",
+    role: "Student",
+    content: "I earn $200-300 per week doing tasks in my spare time. The AI verification is super fast!",
+    rating: 5,
+    avatar: "SC",
+  },
+  {
+    name: "Marcus Johnson",
+    role: "Freelancer",
+    content: "Finally a platform where I get paid instantly. No more waiting for payments. Love it!",
+    rating: 5,
+    avatar: "MJ",
+  },
+  {
+    name: "Elena Rodriguez",
+    role: "Remote Worker",
+    content: "The variety of tasks keeps things interesting. I've earned over $2000 in 3 months.",
+    rating: 5,
+    avatar: "ER",
+  },
+  {
+    name: "James Park",
+    role: "Side Hustler",
+    content: "Best platform I've used. Transparent, fair, and the Celo integration is seamless.",
+    rating: 5,
+    avatar: "JP",
+  },
+  {
+    name: "Sarah Chen",
+    role: "Student",
+    content: "I earn $200-300 per week doing tasks in my spare time. The AI verification is super fast!",
+    rating: 5,
+    avatar: "SC",
+  },
+  {
+    name: "Marcus Johnson",
+    role: "Freelancer",
+    content: "Finally a platform where I get paid instantly. No more waiting for payments. Love it!",
+    rating: 5,
+    avatar: "MJ",
+  },
+  {
+    name: "Elena Rodriguez",
+    role: "Remote Worker",
+    content: "The variety of tasks keeps things interesting. I've earned over $2000 in 3 months.",
+    rating: 5,
+    avatar: "ER",
+  },
+  {
+    name: "James Park",
+    role: "Side Hustler",
+    content: "Best platform I've used. Transparent, fair, and the Celo integration is seamless.",
+    rating: 5,
+    avatar: "JP",
+  },
+  {
+    name: "Sarah Chen",
+    role: "Student",
+    content: "I earn $200-300 per week doing tasks in my spare time. The AI verification is super fast!",
+    rating: 5,
+    avatar: "SC",
+  },
+  {
+    name: "Marcus Johnson",
+    role: "Freelancer",
+    content: "Finally a platform where I get paid instantly. No more waiting for payments. Love it!",
+    rating: 5,
+    avatar: "MJ",
+  },
+  {
+    name: "Elena Rodriguez",
+    role: "Remote Worker",
+    content: "The variety of tasks keeps things interesting. I've earned over $2000 in 3 months.",
+    rating: 5,
+    avatar: "ER",
+  },
+  {
+    name: "James Park",
+    role: "Side Hustler",
+    content: "Best platform I've used. Transparent, fair, and the Celo integration is seamless.",
+    rating: 5,
+    avatar: "JP",
+  },
+  {
+    name: "Sarah Chen",
+    role: "Student",
+    content: "I earn $200-300 per week doing tasks in my spare time. The AI verification is super fast!",
+    rating: 5,
+    avatar: "SC",
+  },
+  {
+    name: "Marcus Johnson",
+    role: "Freelancer",
+    content: "Finally a platform where I get paid instantly. No more waiting for payments. Love it!",
+    rating: 5,
+    avatar: "MJ",
+  },
+  {
+    name: "Elena Rodriguez",
+    role: "Remote Worker",
+    content: "The variety of tasks keeps things interesting. I've earned over $2000 in 3 months.",
+    rating: 5,
+    avatar: "ER",
+  },
+  {
+    name: "James Park",
+    role: "Side Hustler",
+    content: "Best platform I've used. Transparent, fair, and the Celo integration is seamless.",
+    rating: 5,
+    avatar: "JP",
+  },
+  {
+    name: "Sarah Chen",
+    role: "Student",
+    content: "I earn $200-300 per week doing tasks in my spare time. The AI verification is super fast!",
+    rating: 5,
+    avatar: "SC",
+  },
+  {
+    name: "Marcus Johnson",
+    role: "Freelancer",
+    content: "Finally a platform where I get paid instantly. No more waiting for payments. Love it!",
+    rating: 5,
+    avatar: "MJ",
+  },
+  {
+    name: "Elena Rodriguez",
+    role: "Remote Worker",
+    content: "The variety of tasks keeps things interesting. I've earned over $2000 in 3 months.",
+    rating: 5,
+    avatar: "ER",
+  },
+  {
+    name: "James Park",
+    role: "Side Hustler",
+    content: "Best platform I've used. Transparent, fair, and the Celo integration is seamless.",
+    rating: 5,
+    avatar: "JP",
+  },
+  {
+    name: "Sarah Chen",
+    role: "Student",
+    content: "I earn $200-300 per week doing tasks in my spare time. The AI verification is super fast!",
+    rating: 5,
+    avatar: "SC",
+  },
+  {
+    name: "Marcus Johnson",
+    role: "Freelancer",
+    content: "Finally a platform where I get paid instantly. No more waiting for payments. Love it!",
+    rating: 5,
+    avatar: "MJ",
+  },
+  {
+    name: "Elena Rodriguez",
+    role: "Remote Worker",
+    content: "The variety of tasks keeps things interesting. I've earned over $2000 in 3 months.",
+    rating: 5,
+    avatar: "ER",
+  },
+  {
+    name: "James Park",
+    role: "Side Hustler",
+    content: "Best platform I've used. Transparent, fair, and the Celo integration is seamless.",
+    rating: 5,
+    avatar: "JP",
+  },
+]
+
+export function Testimonials() {
+  const [currentIndex, setCurrentIndex] = useState(0)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % testimonials.length)
+    }, 5000)
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50 border-y-2 border-gray-200">
+      <div className="max-w-6xl mx-auto">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl sm:text-4xl font-bold mb-4 text-gray-900">Loved by workers worldwide</h2>
+          <p className="text-base text-gray-600">Join thousands earning on D.M.T.P</p>
+        </div>
+
+        <div className="relative overflow-hidden">
+          <motion.div
+            className="flex gap-6"
+            animate={{ x: -currentIndex * (100 + 24) + "%" }}
+            transition={{ duration: 0.8, ease: "easeInOut" }}
+          >
+            {testimonials.map((testimonial, index) => (
+              <motion.div key={index} className="flex-shrink-0 w-full md:w-1/2 lg:w-1/3">
+                <div className="bg-white border-2 border-gray-200 p-6 hover:border-primary transition-colors h-full flex flex-col">
+                  <div className="flex items-center gap-4 mb-4">
+                    <div className="w-12 h-12 bg-primary flex items-center justify-center text-white font-bold border-2 border-primary">
+                      {testimonial.avatar}
+                    </div>
+                    <div>
+                      <p className="font-bold text-gray-900">{testimonial.name}</p>
+                      <p className="text-sm text-gray-600">{testimonial.role}</p>
+                    </div>
+                  </div>
+                  <div className="flex gap-1 mb-3">
+                    {Array.from({ length: testimonial.rating }).map((_, i) => (
+                      <Star key={i} className="w-4 h-4 fill-primary text-primary" />
+                    ))}
+                  </div>
+                  <p className="text-gray-700 text-sm leading-relaxed flex-grow">{testimonial.content}</p>
+                </div>
+              </motion.div>
+            ))}
+          </motion.div>
+          
+        </div>
+      </div>
+    </section>
+  )
+}