maulanasdqnandClaude Opus 4.6
0ade3c3e50
Performance improvements: - Replaced framer-motion animations with CSS @keyframes in hero, testimonial, and community sections (saves ~130KB bundle) - Switched from local Poppins/BaiJamjuree font files (750KB) to next/font/google with auto-subsetting - Deleted 10 local .ttf font files - Community section is now a server component (no 'use client') - Removed scroll parallax effect from hero (was causing repaints) - Hero image marked as priority for LCP optimization Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
74 lines
2.8 KiB
TypeScript
74 lines
2.8 KiB
TypeScript
import SOCIALS from '@/data/socials.json';
|
|
import {
|
|
FaArrowRight,
|
|
FaDiscord,
|
|
FaGithub,
|
|
FaFacebook,
|
|
FaInstagram,
|
|
FaLinkedin,
|
|
FaTiktok,
|
|
} from 'react-icons/fa';
|
|
|
|
const ICON_MAP: Record<string, typeof FaArrowRight> = {
|
|
FaFacebook, FaDiscord, FaGithub, FaInstagram, FaTiktok, FaLinkedin,
|
|
};
|
|
|
|
const COLOR_MAP: Record<string, string> = {
|
|
FaFacebook: 'text-[#1877F2]',
|
|
FaDiscord: 'text-[#5865F2]',
|
|
FaGithub: 'text-[#000000]',
|
|
FaInstagram: 'text-[#E4405F]',
|
|
FaTiktok: 'text-[#000000]',
|
|
FaLinkedin: 'text-[#0A66C2]',
|
|
};
|
|
|
|
export function CommunitySection() {
|
|
return (
|
|
<section id="community" className="w-full py-20 md:py-28">
|
|
<div className="container">
|
|
<div className="flex flex-col items-center justify-center space-y-4 text-center mb-16">
|
|
<h2 className="text-3xl font-semibold tracking-tight md:text-4xl">
|
|
Bergabung dengan Komunitas Kami di
|
|
<span className="block mt-2 text-primary-500">Berbagai Platform</span>
|
|
</h2>
|
|
<p className="max-w-[600px] mx-auto text-gray-600 md:text-lg/relaxed mt-4">
|
|
Terhubung dengan sesama developer di komunitas kami
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
|
|
{SOCIALS.map((community, index) => {
|
|
const IconComponent = ICON_MAP[community.icon] || FaArrowRight;
|
|
const iconColor = COLOR_MAP[community.icon] || 'text-primary-500';
|
|
|
|
return (
|
|
<div
|
|
key={index}
|
|
className="group relative p-8 bg-white border border-gray-200 rounded-xl hover:border-gray-300 transition-all duration-300 animate-[fadeInUp_0.4s_ease-out]"
|
|
style={{ animationDelay: `${index * 80}ms`, animationFillMode: 'both' }}
|
|
>
|
|
<div className="flex flex-col items-start gap-5">
|
|
<div className="flex items-center gap-4">
|
|
<IconComponent className={`w-8 h-8 ${iconColor} transition-colors`} />
|
|
<h3 className="text-xl font-semibold text-gray-900">{community.name}</h3>
|
|
</div>
|
|
<p className="text-gray-600 text-sm/relaxed">{community.description}</p>
|
|
<a
|
|
href={community.link}
|
|
className="inline-flex items-center gap-2 mt-2 text-sm font-medium transition-colors"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<span>Jelajahi Komunitas</span>
|
|
<FaArrowRight className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|