feat: enhance communities component with improved layout and updated content
This commit is contained in:
arraysid
@@ -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',
|
||||
buttonText: 'Join Sekarang',
|
||||
buttonLink: 'https://web.facebook.com/groups/programmerhandal',
|
||||
'Komunitas aktif dengan 180K+ anggota berdiskusi seputar programming dan sharing meme',
|
||||
buttonText: 'Gabung Sekarang',
|
||||
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: '10K+', label: 'Followers TikTok' },
|
||||
{ value: '10K+', label: 'Followers Instagram' },
|
||||
{ value: '99%', label: 'Kepuasan Anggota' },
|
||||
{ value: '180K+', label: 'Komunitas Aktif' },
|
||||
{ value: '25K+', label: 'Postingan/Bulan' },
|
||||
{ value: '95%', label: 'Respon Cepat' },
|
||||
{ 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">
|
||||
Komunitas{' '}
|
||||
<h2 className="text-4xl font-bold tracking-tighter md:text-5xl/tight lg:text-6xl text-center mb-6">
|
||||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/80">
|
||||
Kami
|
||||
</span>
|
||||
Komunitas Programmer
|
||||
</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">
|
||||
Bergabunglah dengan jaringan developer terbesar di Indonesia untuk
|
||||
belajar, berbagi, dan berkembang bersama.
|
||||
<p className="max-w-4xl mx-auto text-muted-foreground text-center md:text-xl text-balance">
|
||||
Bergabung dengan jaringan developer profesional untuk berkolaborasi,
|
||||
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) => {
|
||||
const Icon = community.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={index}
|
||||
variants={cardVariants}
|
||||
whileHover={{
|
||||
y: -5,
|
||||
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 w-full bg-gradient-to-r from-primary/50 to-primary/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
||||
{communities.slice(0, 2).map((community, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
variants={cardVariants}
|
||||
className="group relative overflow-hidden rounded-2xl border bg-background p-8 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 to-primary/50 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-full bg-primary/10">
|
||||
<Icon className="h-6 w-6 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 className="relative z-10">
|
||||
<div className="mb-6 inline-flex h-14 w-14 items-center justify-center rounded-xl bg-primary/10">
|
||||
<community.icon className="h-7 w-7 text-primary" />
|
||||
</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>
|
||||
);
|
||||
})}
|
||||
<h3 className="mb-4 text-2xl font-bold">{community.title}</h3>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user