feat: enhance communities component with improved layout and updated content

apps/landing/src/app/(frontend)/(home)/_components/communites/index.tsx

@@ -3,7 +3,13 @@
 import { Button } from '@components/atoms';
 import { motion, useInView } from 'framer-motion';
 import { useRef } from 'react';
-import { FaFacebook, FaInstagram, FaLinkedin, FaTiktok } from 'react-icons/fa';
+import {
+  FaDiscord,
+  FaFacebook,
+  FaInstagram,
+  FaLinkedin,
+  FaTiktok,
+} from 'react-icons/fa';
 
 export function Communities() {
   const ref = useRef(null);
@@ -14,15 +20,23 @@ export function Communities() {
       icon: FaFacebook,
       title: 'Facebook Group',
       description:
-        'Bergabung dengan 180.000+ anggota dalam diskusi harian seputar karir IT dan code review',
+        'Komunitas aktif dengan 180K+ anggota berdiskusi seputar programming dan sharing meme',
-      buttonText: 'Join Sekarang',
+      buttonText: 'Gabung Sekarang',
-      buttonLink: 'https://web.facebook.com/groups/programmerhandal',
+      buttonLink: 'https://facebook.com/groups/programmerhandal',
+    },
+    {
+      icon: FaDiscord,
+      title: 'Discord Server',
+      description:
+        'Diskusi real-time dengan  developer berbagai level, mulai dari pemula sampai expert!',
+      buttonText: 'Join Server',
+      buttonLink: 'https://discord.com/invite/imphnen',
     },
     {
       icon: FaInstagram,
       title: 'Instagram',
       description:
-        'Temukan tutorial visual menarik untuk 10.000+ followers setiap minggunya',
+        'Temukan visual tutorial coding & tech trends terkini setiap harinya',
       buttonText: 'Follow Kami',
       buttonLink: 'https://www.instagram.com/imphnen.dev',
     },
@@ -30,7 +44,7 @@ export function Communities() {
       icon: FaTiktok,
       title: 'TikTok',
       description:
-        'Tonton video pendek berisi tips coding untuk 10.000+ viewers harian',
+        'Tips coding singkat & trik development praktis dalam 60 detik',
       buttonText: 'Follow Sekarang',
       buttonLink: 'https://www.tiktok.com/@imphnen',
     },
@@ -38,17 +52,17 @@ export function Communities() {
       icon: FaLinkedin,
       title: 'LinkedIn',
       description:
-        'Bangun jaringan profesional dengan perusahaan teknologi terkemuka',
+        'Bangun jaringan profesional dengan perusahaan teknologi ternama & recruiter IT',
       buttonText: 'Segera Hadir',
       buttonLink: '#',
     },
   ];
 
   const stats = [
-    { value: '180K+', label: 'Anggota Facebook' },
+    { value: '180K+', label: 'Komunitas Aktif' },
-    { value: '10K+', label: 'Followers TikTok' },
+    { value: '25K+', label: 'Postingan/Bulan' },
-    { value: '10K+', label: 'Followers Instagram' },
+    { value: '95%', label: 'Respon Cepat' },
-    { value: '99%', label: 'Kepuasan Anggota' },
+    { value: '10K+', label: 'Problem Solved' },
   ];
 
   const containerVariants = {
@@ -91,7 +105,7 @@ export function Communities() {
   return (
     <section
       id="community"
-      className="w-full py-20 md:py-32 relative overflow-hidden"
+      className="w-full py-20 md:py-32 relative overflow-hidden container"
     >
       <div className="absolute inset-0 -z-10">
         <div className="absolute inset-0 bg-gradient-to-b from-background via-background to-background" />
@@ -99,70 +113,113 @@ export function Communities() {
         <div className="absolute bottom-0 left-0 w-1/2 h-1/2 bg-gradient-to-tr from-primary/5 to-transparent blur-3xl" />
       </div>
 
-      <div className="container px-4 md:px-6" ref={ref}>
+      <div className="w-full px-4 md:px-6 lg:px-0" ref={ref}>
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={isInView ? { opacity: 1, y: 0 } : {}}
           transition={{ duration: 0.8 }}
         >
-          <h2 className="text-3xl font-bold tracking-tighter md:text-4xl/tight lg:text-5xl text-center mb-4">
+          <h2 className="text-4xl font-bold tracking-tighter md:text-5xl/tight lg:text-6xl text-center mb-6">
-            Komunitas{' '}
             <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/80">
-              Kami
+              Komunitas Programmer
-            </span>
+            </span>{' '}
+            <br className="hidden md:block" />
+            Terbesar di Indonesia
           </h2>
-          <p className="max-w-[800px] mx-auto text-muted-foreground text-center md:text-lg">
+          <p className="max-w-4xl mx-auto text-muted-foreground text-center md:text-xl text-balance">
-            Bergabunglah dengan jaringan developer terbesar di Indonesia untuk
+            Bergabung dengan jaringan developer profesional untuk berkolaborasi,
-            belajar, berbagi, dan berkembang bersama.
+            belajar, dan berkembang bersama komunitas yang aktif dan suportif
           </p>
         </motion.div>
 
+        {/* First Row - Facebook & Discord */}
         <motion.div
-          className="grid gap-8 md:grid-cols-3 lg:grid-cols-4 mt-12"
+          className="grid gap-4 grid-cols-1 md:grid-cols-2 w-full mt-16"
           variants={containerVariants}
           initial="hidden"
           animate={isInView ? 'visible' : 'hidden'}
         >
-          {communities.map((community, index) => {
+          {communities.slice(0, 2).map((community, index) => (
-            const Icon = community.icon;
+            <motion.div
-            return (
+              key={index}
-              <motion.div
+              variants={cardVariants}
-                key={index}
+              className="group relative overflow-hidden rounded-2xl border bg-background p-8 hover:shadow-xl transition-shadow h-full"
-                variants={cardVariants}
+              whileHover={{
-                whileHover={{
+                y: -5,
-                  y: -5,
+                transition: { duration: 0.2 },
-                  transition: { duration: 0.2 },
+              }}
-                }}
+            >
-                className="group relative overflow-hidden rounded-xl border bg-background p-6 hover:shadow-lg transition-shadow"
+              <div className="absolute top-0 left-0 h-1.5 w-full bg-gradient-to-r from-primary to-primary/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-              >
-                <div className="absolute top-0 left-0 h-1 w-full bg-gradient-to-r from-primary/50 to-primary/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
 
-                <div className="relative z-10">
+              <div className="relative z-10">
-                  <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
+                <div className="mb-6 inline-flex h-14 w-14 items-center justify-center rounded-xl bg-primary/10">
-                    <Icon className="h-6 w-6 text-primary" />
+                  <community.icon className="h-7 w-7 text-primary" />
-                  </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/10 group-hover:border-primary/20 group-hover:text-foreground transition-all duration-300 hover:scale-[1.02] border-primary/10"
-                    onClick={() => window.open(community.buttonLink, '_blank')}
-                    disabled={community.title === 'LinkedIn'}
-                  >
-                    {community.buttonText}
-                  </Button>
                 </div>
 
-                <div className="absolute -bottom-32 -right-32 w-64 h-64 bg-gradient-to-tl from-primary/10 to-transparent rounded-full opacity-0 group-hover:opacity-100 transition-all duration-500 group-hover:-translate-y-10 group-hover:-translate-x-10" />
+                <h3 className="mb-4 text-2xl font-bold">{community.title}</h3>
-              </motion.div>
+                <p className="mb-8 text-muted-foreground text-lg">
-            );
+                  {community.description}
-          })}
+                </p>
+
+                <Button
+                  variant="outline"
+                  className="w-full group-hover:bg-primary/10 group-hover:border-primary/20 group-hover:text-foreground transition-all duration-300 hover:scale-[1.02] border-primary/10 text-base h-12"
+                  onClick={() => window.open(community.buttonLink, '_blank')}
+                >
+                  {community.buttonText}
+                </Button>
+              </div>
+
+              <div className="absolute -bottom-40 -right-40 w-80 h-80 bg-gradient-to-tl from-primary/10 to-transparent rounded-full opacity-0 group-hover:opacity-100 transition-all duration-500 group-hover:-translate-y-20 group-hover:-translate-x-20" />
+            </motion.div>
+          ))}
         </motion.div>
 
+        {/* Second Row - Instagram, TikTok, LinkedIn */}
+        <motion.div
+          className="grid gap-4 grid-cols-1 md:grid-cols-3 w-full mt-8"
+          variants={containerVariants}
+          initial="hidden"
+          animate={isInView ? 'visible' : 'hidden'}
+        >
+          {communities.slice(2).map((community, index) => (
+            <motion.div
+              key={index + 2}
+              variants={cardVariants}
+              className="group relative overflow-hidden rounded-2xl border bg-background p-6 hover:shadow-xl transition-shadow h-full"
+              whileHover={{
+                y: -5,
+                transition: { duration: 0.2 },
+              }}
+            >
+              <div className="absolute top-0 left-0 h-1.5 w-full bg-gradient-to-r from-primary/50 to-primary/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+
+              <div className="relative z-10">
+                <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10">
+                  <community.icon className="h-6 w-6 text-primary" />
+                </div>
+
+                <h3 className="mb-3 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/10 group-hover:border-primary/20 group-hover:text-foreground transition-all duration-300 hover:scale-[1.02] border-primary/10 h-11"
+                  onClick={() => window.open(community.buttonLink, '_blank')}
+                  disabled={community.title === 'LinkedIn'}
+                >
+                  {community.buttonText}
+                </Button>
+              </div>
+
+              <div className="absolute -bottom-32 -right-32 w-64 h-64 bg-gradient-to-tl from-primary/10 to-transparent rounded-full opacity-0 group-hover:opacity-100 transition-all duration-500 group-hover:-translate-y-10 group-hover:-translate-x-10" />
+            </motion.div>
+          ))}
+        </motion.div>
+
+        {/* Stats Section */}
         <motion.div
           className="mt-20 grid grid-cols-2 md:grid-cols-4 gap-8 text-center"
           initial="hidden"
@@ -173,12 +230,14 @@ export function Communities() {
               key={index}
               variants={statVariants}
               custom={index}
-              className="space-y-2"
+              className="space-y-3 p-6 rounded-xl bg-background border"
             >
-              <div className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/80">
+              <div className="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/80">
                 {stat.value}
               </div>
-              <div className="text-sm text-muted-foreground">{stat.label}</div>
+              <div className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
+                {stat.label}
+              </div>
             </motion.div>
           ))}
         </motion.div>