feat: migrate community component

apps/landing/src/app/_components/community.tsx

@@ -0,0 +1,179 @@
+'use client';
+
+import {
+  Button,
+  FacebookIcon,
+  InstagramIcon,
+  MessageCircleIcon,
+} from '@imphnen-frontend-service/shadcn-ui/atoms';
+import { motion, useInView } from 'framer-motion';
+import { useRef } from 'react';
+
+export function Community() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, amount: 0.2 });
+
+  const communities = [
+    {
+      icon: (
+        <FacebookIcon className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+      ),
+      iconBg: 'bg-blue-100 dark:bg-blue-900',
+      title: 'Facebook Group',
+      description:
+        'Bergabunglah dengan grup Facebook kami untuk diskusi santai dan berbagi artikel menarik.',
+      buttonText: 'Gabung Sekarang',
+      buttonLink: '#',
+    },
+    {
+      icon: (
+        <InstagramIcon className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+      ),
+      iconBg: 'bg-blue-100 dark:bg-blue-900',
+      title: 'Instagram',
+      description:
+        'Ikuti kami di Instagram untuk tips programming, konten inspiratif, dan info event terbaru.',
+      buttonText: 'Follow Kami',
+      buttonLink: '#',
+    },
+    {
+      icon: (
+        <MessageCircleIcon className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+      ),
+      iconBg: 'bg-blue-100 dark:bg-blue-900',
+      title: 'Discord Server',
+      description:
+        'Diskusikan langsung dengan sesama programmer dan dapatkan bantuan langsung dari para ahli.',
+      buttonText: 'Join Server',
+      buttonLink: '#',
+    },
+  ];
+
+  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="komunitas"
+      className="w-full py-20 md:py-32 bg-muted relative overflow-hidden"
+    >
+      {/* Background Elements */}
+      <div className="absolute inset-0 -z-10">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(59,130,246,0.1),transparent_70%)]" />
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(59,130,246,0.01)_1px,transparent_1px),linear-gradient(to_bottom,rgba(59,130,246,0.01)_1px,transparent_1px)] bg-[size:14px_14px]" />
+      </div>
+
+      <div className="container px-4 md:px-6" ref={ref}>
+        <div className="flex flex-col items-center justify-center space-y-4 text-center mb-16">
+          <motion.div
+            className="space-y-2"
+            initial={{ opacity: 0, y: 20 }}
+            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+            transition={{ duration: 0.5 }}
+          >
+            <h2 className="text-3xl font-bold tracking-tighter md:text-4xl/tight lg:text-5xl">
+              Komunitas{' '}
+              <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+                Kami
+              </span>
+            </h2>
+            <p className="max-w-[800px] mx-auto text-muted-foreground md:text-lg">
+              Bergabunglah dengan ribuan programmer Indonesia yang saling
+              membantu dan berbagi pengalaman.
+            </p>
+          </motion.div>
+        </div>
+
+        <motion.div
+          className="grid gap-8 md:grid-cols-3"
+          variants={containerVariants}
+          initial="hidden"
+          animate={isInView ? 'visible' : 'hidden'}
+        >
+          {communities.map((community, index) => (
+            <motion.div
+              key={index}
+              className="group relative overflow-hidden rounded-xl border bg-background p-6 transition-all hover:shadow-xl"
+              variants={itemVariants}
+            >
+              <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-blue-400/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+
+              <div className="relative z-10">
+                <div
+                  className={`mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full ${community.iconBg}`}
+                >
+                  {community.icon}
+                </div>
+                <h3 className="mb-2 text-xl font-bold">{community.title}</h3>
+                <p className="mb-6 text-muted-foreground">
+                  {community.description}
+                </p>
+                <Button
+                  variant="outline"
+                  className="w-full group-hover:bg-primary group-hover:text-primary-foreground transition-colors duration-300"
+                >
+                  {community.buttonText}
+                </Button>
+              </div>
+
+              <div className="absolute -bottom-1 -right-1 w-20 h-20 bg-gradient-to-tl from-primary/20 to-transparent rounded-tl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+            </motion.div>
+          ))}
+        </motion.div>
+
+        {/* Community Stats */}
+        <motion.div
+          className="mt-20 grid grid-cols-2 md:grid-cols-4 gap-8 text-center"
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+          transition={{ duration: 0.5, delay: 0.3 }}
+        >
+          <div className="space-y-2">
+            <div className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+              10K+
+            </div>
+            <div className="text-sm text-muted-foreground">Member Aktif</div>
+          </div>
+          <div className="space-y-2">
+            <div className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+              50+
+            </div>
+            <div className="text-sm text-muted-foreground">Event Bulanan</div>
+          </div>
+          <div className="space-y-2">
+            <div className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+              100+
+            </div>
+            <div className="text-sm text-muted-foreground">
+              Mentor Profesional
+            </div>
+          </div>
+          <div className="space-y-2">
+            <div className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
+              5K+
+            </div>
+            <div className="text-sm text-muted-foreground">
+              Diskusi Mingguan
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}

apps/landing/src/app/page.tsx

@@ -1,3 +1,4 @@
+import { Community } from './_components/community';
 import { Features } from './_components/features';
 import { Header } from './_components/header';
 import { Hero } from './_components/hero';
@@ -9,6 +10,7 @@ export default function Page() {
       <main className="flex-1">
         <Hero />
         <Features />
+        <Community />
       </main>
     </div>
   );

libs/shadcn-ui/src/atoms/icons.tsx

@@ -2,8 +2,11 @@ import {
   LuArrowDown as ArrowDownIcon,
   LuBookOpen as BookOpenIcon,
   LuCode as CodeIcon,
+  LuFacebook as FacebookIcon,
+  LuInstagram as InstagramIcon,
   LuLaptop as LaptopIcon,
   LuMenu as MenuIcon,
+  LuMessageCircle as MessageCircleIcon,
   LuSparkles as SparklesIcon,
   LuUsers as UsersIcon,
   LuX as XIcon,
@@ -13,8 +16,11 @@ export {
   ArrowDownIcon,
   BookOpenIcon,
   CodeIcon,
+  FacebookIcon,
+  InstagramIcon,
   LaptopIcon,
   MenuIcon,
+  MessageCircleIcon,
   SparklesIcon,
   UsersIcon,
   XIcon,