From 522f28314000deb8bd5e03340d5c2faa1f06f20d Mon Sep 17 00:00:00 2001
From: arraysid <arraysdotid@gmail.com>
Date: Sun, 1 Jun 2025 04:53:46 +0700
Subject: [PATCH] feat: add feature request and projects voting components

---
 .../_components/feature-request-cta.tsx       |  51 ++++
 .../roadmap/_components/projects-vote.tsx     | 233 ++++++++++++++++++
 .../landing/src/app/(public)/roadmap/page.tsx |  11 +
 .../src/app/(public)/roadmaps/page.tsx        |   3 -
 4 files changed, 295 insertions(+), 3 deletions(-)
 create mode 100644 apps/landing/src/app/(public)/roadmap/_components/feature-request-cta.tsx
 create mode 100644 apps/landing/src/app/(public)/roadmap/_components/projects-vote.tsx
 create mode 100644 apps/landing/src/app/(public)/roadmap/page.tsx
 delete mode 100644 apps/landing/src/app/(public)/roadmaps/page.tsx

diff --git a/apps/landing/src/app/(public)/roadmap/_components/feature-request-cta.tsx b/apps/landing/src/app/(public)/roadmap/_components/feature-request-cta.tsx
new file mode 100644
index 0000000..eb19a56
--- /dev/null
+++ b/apps/landing/src/app/(public)/roadmap/_components/feature-request-cta.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { FiPlus } from 'react-icons/fi';
+
+export function FeatureRequestCTA() {
+  const handleSubmitFeature = () => {
+    alert('Feature submission form would appear here!');
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: -20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4 }}
+      className="bg-primary-500 rounded-xl px-4 py-8 md:p-8 mb-8 text-center mx-auto max-w-7xl"
+    >
+      <div className="max-w-3xl mx-auto">
+        <motion.h1
+          className="text-2xl md:text-3xl font-bold text-white mb-3"
+          initial={{ scale: 0.95 }}
+          animate={{ scale: 1 }}
+          transition={{ delay: 0.2, type: 'spring' }}
+        >
+          Punya Ide Bagus untuk IMPHNEN?
+        </motion.h1>
+        <motion.p
+          className="text-white/90 mb-6 text-lg text-balance"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.4 }}
+        >
+          Bagikan ide fitur atau layanan yang ingin Anda lihat di komunitas. Ide
+          terbaik dengan vote tertinggi akan kami prioritaskan!
+        </motion.p>
+        <motion.button
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+          onClick={handleSubmitFeature}
+          className="bg-white text-primary-500 font-semibold py-3 px-8 rounded-full flex items-center justify-center gap-2 mx-auto shadow-lg hover:shadow-xl transition-all"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.6 }}
+        >
+          <FiPlus className="w-5 h-5" />
+          <span>Ajukan Fitur</span>
+        </motion.button>
+      </div>
+    </motion.div>
+  );
+}
diff --git a/apps/landing/src/app/(public)/roadmap/_components/projects-vote.tsx b/apps/landing/src/app/(public)/roadmap/_components/projects-vote.tsx
new file mode 100644
index 0000000..b68daba
--- /dev/null
+++ b/apps/landing/src/app/(public)/roadmap/_components/projects-vote.tsx
@@ -0,0 +1,233 @@
+'use client';
+
+import { Button, Card, CardContent, CardHeader, CardTitle } from '@components';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useState } from 'react';
+import { BiUpvote } from 'react-icons/bi';
+import { FiCheckCircle } from 'react-icons/fi';
+import { MdOutlineOpenInNew } from 'react-icons/md';
+
+export default function ProjectsVote() {
+  const [upcomingItems, setUpcomingItems] = useState([
+    {
+      title: 'IMPHNEN Meme Generator',
+      description: 'Bikin meme kocak kapanpun dengan mudah',
+      votes: 42,
+      voted: false,
+    },
+  ]);
+
+  const inProgressItems = [
+    {
+      title: 'IMPHNEN Twibbon',
+      description: 'Buat Twibbon kece untuk profile media sosialmu',
+    },
+    {
+      title: 'IMPHNEN Cerficate',
+      description: 'Cetak sertifikat keren secara instan untuk anggota IMPHNEN',
+    },
+  ];
+
+  const completedItems = [
+    {
+      title: 'IMPHNEN List Event',
+      description:
+        'Koleksi daftar event dan kolaborasi seru yang bisa kamu ikuti',
+    },
+    {
+      title: 'IMPHNEN Testimoni',
+      description: 'Berikan testimonial gokil buat komunitas IMPHNEN',
+    },
+    {
+      title: 'IMPHNEN Roadmap by Vote',
+      description: 'Usulkan ide fitur seru dan ajak anggota lain buat voting',
+    },
+  ];
+
+  const handleVote = (index: number) => {
+    const newItems = [...upcomingItems];
+    newItems[index] = {
+      ...newItems[index],
+      votes: newItems[index].voted
+        ? newItems[index].votes - 1
+        : newItems[index].votes + 1,
+      voted: !newItems[index].voted,
+    };
+    setUpcomingItems(newItems);
+  };
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.05,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 10 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.2 } },
+  };
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
+      {/* Vote Now Column */}
+      <div className="space-y-6">
+        <div className="flex items-center gap-3 px-2">
+          <div className="flex items-center justify-center w-10 h-10 bg-amber-100 text-amber-600 rounded-lg">
+            🔥
+          </div>
+          <h2 className="text-xl font-semibold text-gray-900">Vote Now</h2>
+        </div>
+
+        <AnimatePresence>
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            animate="visible"
+            className="space-y-5"
+          >
+            {upcomingItems.map((item, index) => (
+              <motion.div key={index} variants={itemVariants} layout>
+                <Card className="bg-white border border-gray-200 hover:border-primary-200 shadow-sm hover:shadow-md transition-all h-full flex flex-col">
+                  <CardHeader className="pb-3">
+                    <CardTitle className="text-lg font-semibold text-gray-900 flex items-start">
+                      {item.title}
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className="flex-grow">
+                    <p className="text-gray-600 text-sm mb-4">
+                      {item.description}
+                    </p>
+                    <div className="flex items-center justify-between border-t border-gray-100 pt-3">
+                      <motion.button
+                        whileTap={{ scale: 0.95 }}
+                        onClick={() => handleVote(index)}
+                        className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+                          item.voted
+                            ? 'bg-primary-500 text-white hover:bg-primary-600'
+                            : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                        }`}
+                      >
+                        <motion.span
+                          animate={{ scale: item.voted ? [1, 1.2, 1] : 1 }}
+                          transition={{ duration: 0.2 }}
+                        >
+                          <BiUpvote
+                            className={`w-4 h-4 ${
+                              item.voted ? 'text-white' : 'text-gray-600'
+                            }`}
+                          />
+                        </motion.span>
+                        <span>{item.voted ? 'Voted' : 'Vote'}</span>
+                      </motion.button>
+                      <div className="flex items-center gap-2 bg-gray-50 px-3 py-1.5 rounded-lg">
+                        <BiUpvote className="w-4 h-4 text-gray-500" />
+                        <span className="text-sm font-medium text-gray-700">
+                          {item.votes}
+                        </span>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+          </motion.div>
+        </AnimatePresence>
+      </div>
+
+      {/* In Progress Column */}
+      <div className="space-y-6">
+        <div className="flex items-center gap-3 px-2">
+          <div className="flex items-center justify-center w-10 h-10 bg-primary-100 text-primary-600 rounded-lg">
+            🧑‍🔧
+          </div>
+          <h2 className="text-xl font-semibold text-gray-900">In Progress</h2>
+        </div>
+
+        <AnimatePresence>
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            animate="visible"
+            className="space-y-5"
+          >
+            {inProgressItems.map((item, index) => (
+              <motion.div key={index} variants={itemVariants} layout>
+                <Card className="bg-white border border-gray-200 hover:border-primary-200 shadow-sm hover:shadow-md transition-all h-full">
+                  <CardHeader className="pb-3">
+                    <CardTitle className="text-lg font-semibold text-gray-900 flex items-start">
+                      {item.title}
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <p className="text-gray-600 text-sm">{item.description}</p>
+                    <div className="mt-4 pt-3 border-t border-gray-100">
+                      <div className="w-full bg-gray-200 rounded-full h-1.5">
+                        <div
+                          className="bg-primary-500 h-1.5 rounded-full"
+                          style={{ width: `${(index + 1) * 33}%` }}
+                        ></div>
+                      </div>
+                      <p className="text-xs text-gray-500 mt-2">
+                        {index === 0 ? 'Development started' : 'In development'}
+                      </p>
+                    </div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+          </motion.div>
+        </AnimatePresence>
+      </div>
+
+      {/* Completed Column */}
+      <div className="space-y-6">
+        <div className="flex items-center gap-3 px-2">
+          <div className="flex items-center justify-center w-10 h-10 bg-green-100 text-green-600 rounded-lg">
+            🤓
+          </div>
+          <h2 className="text-xl font-semibold text-gray-900">Completed</h2>
+        </div>
+
+        <AnimatePresence>
+          <motion.div
+            variants={containerVariants}
+            initial="hidden"
+            animate="visible"
+            className="space-y-5"
+          >
+            {completedItems.map((item, index) => (
+              <motion.div key={index} variants={itemVariants} layout>
+                <Card className="bg-white border border-gray-200 hover:border-green-200 shadow-sm hover:shadow-md transition-all h-full">
+                  <CardHeader className="pb-3">
+                    <CardTitle className="text-lg font-semibold text-gray-900 flex items-start">
+                      {item.title}
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <p className="text-gray-600 text-sm mb-3">
+                      {item.description}
+                    </p>
+                    <div className="flex justify-between">
+                      <div className="flex items-center gap-2 text-green-600">
+                        <FiCheckCircle className="w-4 h-4" />
+                        <span className="text-sm font-medium">Implemented</span>
+                      </div>
+                      <Button size="sm" className="flex gap-x-2">
+                        Coba sekarang
+                        <MdOutlineOpenInNew className="size-4" />
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            ))}
+          </motion.div>
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/landing/src/app/(public)/roadmap/page.tsx b/apps/landing/src/app/(public)/roadmap/page.tsx
new file mode 100644
index 0000000..b7f979d
--- /dev/null
+++ b/apps/landing/src/app/(public)/roadmap/page.tsx
@@ -0,0 +1,11 @@
+import { FeatureRequestCTA } from './_components/feature-request-cta';
+import ProjectsVote from './_components/projects-vote';
+
+export default function Page() {
+  return (
+    <div className="p-4 md:p-6 bg-gray-50 min-h-screen">
+      <FeatureRequestCTA />
+      <ProjectsVote />
+    </div>
+  );
+}
diff --git a/apps/landing/src/app/(public)/roadmaps/page.tsx b/apps/landing/src/app/(public)/roadmaps/page.tsx
deleted file mode 100644
index 7d1e0b7..0000000
--- a/apps/landing/src/app/(public)/roadmaps/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Page() {
-  return <></>;
-}