chore: remove cms and fix some styles (#29)

* chore: remove all references to PayloadCMS * fix: nextjs landing utils * feat: refactor community, features, hero, learning resources, and testimonials components to use external JSON data * fix:remove hero logo box * fix: remove unused image in public * fix: change logo.png to logo.webp * fix: update button styles for improved visibility * chore: restructure component organization * fix: update import path for global styles in layout component * fix: adjust alignment of hero stats section for better layout * fix: update testimonials placeholder sample data * fix: update header component to use router for navigation and add signin page
2025-05-25 15:13:44 +07:00
parent 9a0fee65a5
commit dd03b3da85
61 changed files with 491 additions and 7494 deletions
@@ -0,0 +1,126 @@
+'use client';
+
+import TESTIMONIAL_STATS from '@/data/testimonial-stats.json';
+import TESTIMONIALS from '@/data/testimonials.json';
+import { QuoteIcon } from '@components';
+import { motion, useInView } from 'framer-motion';
+import Image from 'next/image';
+import { useRef } from 'react';
+
+export function Testimonials() {
+  const ref = useRef<HTMLDivElement>(null);
+  const isInView = useInView(ref, { once: true, amount: 0.2 });
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1, transition: { staggerChildren: 0.1 } },
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: { y: 0, opacity: 1, transition: { duration: 0.5 } },
+  };
+
+  return (
+    <section
+      id="testimoni"
+      className="w-full py-20 md:py-32 bg-muted relative overflow-hidden"
+      ref={ref}
+    >
+      <div className="absolute inset-0 -z-10">
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(59,130,246,0.1),transparent_50%)]" />
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom,rgba(96,165,250,0.1),transparent_50%)]" />
+      </div>
+
+      <div className="container px-4 md:px-6">
+        <motion.div
+          className="flex flex-col items-center justify-center space-y-4 text-center mb-16"
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.5 }}
+        >
+          <h2 className="text-3xl font-bold tracking-tighter md:text-4xl lg:text-5xl">
+            <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+              Testimoni
+            </span>
+            <span> Member</span>
+          </h2>
+          <p className="max-w-[800px] mx-auto text-muted-foreground md:text-lg">
+            Apa kata mereka yang telah bergabung dengan komunitas IMPHNEN?
+          </p>
+        </motion.div>
+
+        <motion.div
+          className="grid gap-8 md:grid-cols-3"
+          variants={containerVariants}
+          initial="hidden"
+          animate={isInView ? 'visible' : 'hidden'}
+        >
+          {TESTIMONIALS.map((t, idx) => (
+            <motion.div
+              key={idx}
+              className="group relative overflow-hidden rounded-xl border bg-background p-6 transition-all hover:shadow-lg"
+              variants={itemVariants}
+            >
+              <div className="absolute top-6 right-6 text-primary/20 group-hover:text-primary/40 transition-colors">
+                <QuoteIcon className="h-8 w-8" />
+              </div>
+              <div className="relative z-10">
+                <p className="mb-6 text-muted-foreground italic">
+                  &ldquo;{t.quote}&rdquo;
+                </p>
+                <div className="flex items-center gap-4">
+                  <div className="relative h-12 w-12 overflow-hidden rounded-full border-2 border-primary/20">
+                    <Image
+                      src={t.avatar}
+                      alt={t.name}
+                      width={600}
+                      height={500}
+                      className="object-cover"
+                      unoptimized
+                    />
+                  </div>
+                  <div>
+                    <h4 className="font-bold">{t.name}</h4>
+                    <p className="text-sm text-muted-foreground">{t.role}</p>
+                  </div>
+                </div>
+              </div>
+              <div className="absolute -bottom-1 -left-1 w-20 h-20 bg-gradient-to-tr from-primary/10 to-transparent rounded-tr-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+            </motion.div>
+          ))}
+        </motion.div>
+
+        <motion.div
+          className="mt-20 rounded-xl overflow-hidden border bg-background/50 backdrop-blur-sm p-8 md:p-12"
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.5, delay: 0.3 }}
+        >
+          <div className="grid md:grid-cols-2 gap-8 items-center">
+            <div>
+              <h3 className="text-2xl md:text-3xl font-bold mb-4">
+                Bergabunglah dengan 10,000+ programmer Indonesia lainnya
+              </h3>
+              <p className="text-muted-foreground">
+                Komunitas kami terus berkembang dengan programmer dari berbagai
+                latar belakang dan tingkat keahlian. Bersama-sama, kita belajar,
+                berbagi, dan tumbuh sebagai profesional.
+              </p>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              {TESTIMONIAL_STATS.map((s, idx) => (
+                <div key={idx} className="rounded-lg border p-4 text-center">
+                  <div className="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+                    {s.value}
+                  </div>
+                  <div className="text-sm text-muted-foreground">{s.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}