feat: add TestimonialSection component and update testimonials data
This commit is contained in:
arraysid
@@ -0,0 +1,102 @@
|
||||
'use client';
|
||||
|
||||
import TESTIMONIALS from '@/data/testimonials.json';
|
||||
import { buttonVariants } from '@components';
|
||||
import { motion, useInView } from 'framer-motion';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { useRef } from 'react';
|
||||
import { FaQuoteLeft } from 'react-icons/fa';
|
||||
|
||||
export function TestimonialSection() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, amount: 0.1 });
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.1,
|
||||
delayChildren: 0.2,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { y: 20, opacity: 0 },
|
||||
visible: {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
transition: {
|
||||
duration: 0.4,
|
||||
ease: [0.25, 0.46, 0.45, 0.94],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="w-full py-20 md:py-28 bg-gray-50">
|
||||
<div className="container" ref={ref}>
|
||||
<div className="flex flex-col items-center justify-center space-y-4 text-center mb-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.4 }}
|
||||
>
|
||||
<h2 className="text-3xl font-semibold tracking-tight md:text-4xl">
|
||||
Apa Kata Mereka Tentang
|
||||
<span className="block mt-2 text-primary-500">
|
||||
Komunitas Kami?
|
||||
</span>
|
||||
</h2>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="grid gap-8 md:gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mb-16"
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate={isInView ? 'visible' : 'hidden'}
|
||||
>
|
||||
{TESTIMONIALS.map((testimonial) => (
|
||||
<motion.div
|
||||
key={testimonial.id}
|
||||
variants={itemVariants}
|
||||
className="p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300"
|
||||
>
|
||||
<div className="flex flex-col space-y-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<Image
|
||||
src={testimonial.image}
|
||||
alt={testimonial.name}
|
||||
width={48}
|
||||
height={48}
|
||||
className="w-12 h-12 rounded-full object-cover"
|
||||
unoptimized
|
||||
/>
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900">
|
||||
{testimonial.name}
|
||||
</h4>
|
||||
<p className="text-sm text-gray-600">{testimonial.role}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-gray-600 relative">
|
||||
<FaQuoteLeft className="text-primary-500/30 w-6 h-6 mb-2" />
|
||||
<p className="text-sm/relaxed">{testimonial.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<Link href="/testimonials" className={buttonVariants({ size: 'lg' })}>
|
||||
Tulis Testimonimu
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +1,44 @@
|
||||
[
|
||||
{
|
||||
"quote": "Sebagai seseorang yang awalnya buta sama sekali tentang programming, kini saya bisa membuat website sendiri dengan percaya diri. IMPHNEN benar-benar jadi pintu gerbang saya ke dunia web development!",
|
||||
"name": "Ega",
|
||||
"role": "Web Developer",
|
||||
"avatar": "https://avatars.githubusercontent.com/u/97678571?v=4"
|
||||
"id": 1,
|
||||
"name": "Andi Pratama",
|
||||
"role": "Backend Developer",
|
||||
"text": "Komunitas ini sangat membantu perkembangan karir saya. Saya bisa belajar teknologi terbaru dan berkolaborasi dengan developer lain.",
|
||||
"image": "https://picsum.photos/100/100?random=1"
|
||||
},
|
||||
{
|
||||
"quote": "IMPHNEN bukan cuma komunitas, tapi juga jadi tempat saya berkembang sebagai backend engineer. Diskusi teknisnya berbobot, dan respon dari komunitas selalu cepat dan tepat sasaran.",
|
||||
"name": "Maulana",
|
||||
"role": "Backend Engineer",
|
||||
"avatar": "https://avatars.githubusercontent.com/u/53475078?v=4"
|
||||
"id": 2,
|
||||
"name": "Sarah Wijaya",
|
||||
"role": "Frontend Engineer",
|
||||
"text": "Acara sharing session-nya sangat inspiratif. Saya jadi termotivasi untuk terus mengembangkan skill di bidang frontend development.",
|
||||
"image": "https://picsum.photos/100/100?random=2"
|
||||
},
|
||||
{
|
||||
"quote": "Sebagai fullstack engineer pemula, saya merasa sangat terbantu dengan komunitas Discord IMPHNEN. Materinya praktikal, pembahasannya jelas, dan member-nya selalu siap membantu.",
|
||||
"name": "Rasyid",
|
||||
"role": "Fullstack Engineer",
|
||||
"avatar": "https://avatars.githubusercontent.com/u/49753444?v=4"
|
||||
"id": 3,
|
||||
"name": "Rizal Fauzi",
|
||||
"role": "Fullstack Developer",
|
||||
"text": "Bergabung di komunitas ini membuka banyak kesempatan networking dan project menarik. Sangat recommended untuk developer semua level!",
|
||||
"image": "https://picsum.photos/100/100?random=5"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"name": "Dewi Lestari",
|
||||
"role": "Mobile Developer",
|
||||
"text": "Materi workshop-nya praktis dan langsung applicable. Mentor-mentornya juga berpengalaman di industri.",
|
||||
"image": "https://picsum.photos/100/100?random=9"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"name": "Fajar Setiawan",
|
||||
"role": "DevOps Engineer",
|
||||
"text": "Komunitas yang solid dan saling support. Tidak pernah ragu untuk bertanya karena semua anggota sangat responsif.",
|
||||
"image": "https://picsum.photos/100/100?random=10"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"name": "Budi Santoso",
|
||||
"role": "UI/UX Designer",
|
||||
"text": "Kolaborasi antara designer dan developer di komunitas ini sangat smooth. Banyak belajar best practices untuk workflow yang lebih baik.",
|
||||
"image": "https://picsum.photos/100/100?random=6"
|
||||
}
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user