mirror of
https://github.com/arkorty/B.Tech-Project-III.git
synced 2026-04-19 12:41:48 +00:00
init
This commit is contained in:
229
dmtp/client/app/_sections/testimonials.tsx
Normal file
229
dmtp/client/app/_sections/testimonials.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user