From 6850313fe344bdea90d90834cc1acf674e3d4997 Mon Sep 17 00:00:00 2001
From: arraysid <arraysdotid@gmail.com>
Date: Tue, 27 May 2025 09:11:42 +0700
Subject: [PATCH] feat: add TestimonialSection component and update
 testimonials data

---
 .../_components/testimonial-section.tsx       | 102 ++++++++++++++++++
 apps/landing/src/data/testimonials.json       |  48 ++++++---
 2 files changed, 138 insertions(+), 12 deletions(-)
 create mode 100644 apps/landing/src/app/(public)/(home)/_components/testimonial-section.tsx

diff --git a/apps/landing/src/app/(public)/(home)/_components/testimonial-section.tsx b/apps/landing/src/app/(public)/(home)/_components/testimonial-section.tsx
new file mode 100644
index 0000000..bc4d169
--- /dev/null
+++ b/apps/landing/src/app/(public)/(home)/_components/testimonial-section.tsx
@@ -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>
+  );
+}
diff --git a/apps/landing/src/data/testimonials.json b/apps/landing/src/data/testimonials.json
index 2c8ef6b..a587c16 100644
--- a/apps/landing/src/data/testimonials.json
+++ b/apps/landing/src/data/testimonials.json
@@ -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"
   }
 ]