MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refactor community, features, hero, learning resources, and testimonials components to use external JSON data

Browse Source
This commit is contained in:
arraysid
2025-05-25 14:28:08 +07:00
parent 738b0b5728
commit 3d69d34a7e
12 changed files with 128 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/landing/src/app/(frontend)/_components/community.tsx
+4 -36
View File
@@ -1,45 +1,13 @@
'use client';
import COMMUNITIES_STATS from '@/data/communities-stats.json';
import COMMUNITIES from '@/data/communities.json';
import { Button } from '@components';
import { Icon } from '@iconify/react';
import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';
export function Community() {
const items = [
{
iconName: 'tabler:brand-facebook',
title: 'Facebook Group',
description:
'Bergabunglah dengan grup Facebook kami untuk diskusi santai dan berbagi artikel menarik.',
buttonText: 'Gabung Sekarang',
buttonLink: 'https://facebook.com/groups/programmerhandal',
},
{
iconName: 'tabler:brand-instagram',
title: 'Instagram',
description:
'Ikuti kami di Instagram untuk tips programming, konten inspiratif, dan info event terbaru.',
buttonText: 'Follow Kami',
buttonLink: 'https://www.instagram.com/imphnen.dev',
},
{
iconName: 'tabler:brand-discord-filled',
title: 'Discord Server',
description:
'Diskusikan langsung dengan sesama programmer dan dapatkan bantuan langsung dari para ahli.',
buttonText: 'Join Server',
buttonLink: 'https://discord.com/invite/imphnen',
},
];
const stats = [
{ value: '100K+', label: 'Member Aktif' },
{ value: '50+', label: 'Event Bulanan' },
{ value: '100+', label: 'Mentor Profesional' },
{ value: '5K+', label: 'Diskusi Mingguan' },
];
const ref = useRef(null);
const isInView = useInView(ref, { once: true, amount: 0.2 });
@@ -93,7 +61,7 @@ export function Community() {
initial="hidden"
animate={isInView ? 'visible' : 'hidden'}
>
{items.map((c, i) => (
{COMMUNITIES.map((c, i) => (
<motion.div
key={i}
className="group relative overflow-hidden rounded-xl border bg-background p-6 transition-all hover:shadow-xl"
@@ -127,7 +95,7 @@ export function Community() {
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.5, delay: 0.3 }}
>
{stats.map((s, i) => (
{COMMUNITIES_STATS.map((s, i) => (
<div key={i} className="space-y-2">
<div className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
{s.value}
apps/landing/src/app/(frontend)/_components/features.tsx
+2 -28
View File
@@ -1,37 +1,11 @@
'use client';
import FEATURES from '@/data/features.json';
import { Icon } from '@iconify/react';
import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';
export function Features() {
const features = [
{
iconName: 'tabler:device-laptop',
title: 'Belajar Tanpa Koding',
description:
'Pelajari konsep programming dengan cara yang mudah dipahami tanpa harus menulis kode yang rumit.',
},
{
iconName: 'tabler:users',
title: 'Komunitas Supportif',
description:
'Bergabunglah dengan komunitas programmer Indonesia yang siap membantu dan berbagi pengalaman.',
},
{
iconName: 'tabler:book',
title: 'Tutorial Interaktif',
description:
'Akses tutorial interaktif yang membuat konsep programming lebih mudah untuk dipahami.',
},
{
iconName: 'tabler:code',
title: 'Proyek Praktis',
description:
'Terapkan pengetahuan Anda dalam proyek nyata dengan panduan langkah demi langkah.',
},
];
const ref = useRef(null);
const isInView = useInView(ref, { once: true, amount: 0.2 });
@@ -91,7 +65,7 @@ export function Features() {
initial="hidden"
animate={isInView ? 'visible' : 'hidden'}
>
{features.map((feature, index) => (
{FEATURES.map((feature, index) => (
<motion.div
key={index}
className="group relative overflow-hidden rounded-xl border bg-background/50 backdrop-blur-sm p-6 transition-all hover:shadow-md hover:shadow-primary/5 hover:border-primary/50"
apps/landing/src/app/(frontend)/_components/hero.tsx
+3 -8
View File
@@ -1,17 +1,12 @@
'use client';
import HERO_STATS from '@/data/hero-stats.json';
import { Button, CodeIcon, SparklesIcon, UsersIcon } from '@components';
import { motion } from 'framer-motion';
import Image from 'next/image';
import { Fragment, useEffect, useState } from 'react';
export function Hero() {
const stats = [
{ value: '180K+', label: 'Member' },
{ value: '500+', label: 'Tutorial' },
{ value: '24/7', label: 'Yapping' },
];
const [scrollY, setScrollY] = useState(0);
useEffect(() => {
@@ -98,7 +93,7 @@ export function Hero() {
</div>
<div className="flex flex-wrap justify-center gap-6 sm:gap-8">
{stats.map(({ value, label }, i) => (
{HERO_STATS.map(({ value, label }, i) => (
<Fragment key={i}>
<div className="flex flex-col items-center">
<div className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
@@ -106,7 +101,7 @@ export function Hero() {
</div>
<div className="text-xs text-muted-foreground">{label}</div>
</div>
{i < stats.length - 1 && (
{i < HERO_STATS.length - 1 && (
<div className="hidden sm:block h-10 border-r border-border mx-4" />
)}
</Fragment>
apps/landing/src/app/(frontend)/_components/learning-resources.tsx
+2 -36
View File
@@ -1,46 +1,12 @@
'use client';
import LEARNING_RESOURCES from '@/data/learning-resources.json';
import { Button } from '@components';
import { Icon } from '@iconify/react';
import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';
export function LearningResources() {
const resources = [
{
icon: 'tabler:video',
title: 'Video Tutorial',
description:
'Belajar melalui tutorial video dari langkah awal hingga mahir.',
buttonText: 'Lihat Semua Video',
buttonLink: '#',
},
{
icon: 'tabler:article',
title: 'Artikel & Tutorial',
description:
'Pelajari konsep programming melalui artikel yang disusun secara terstruktur.',
buttonText: 'Baca Artikel',
buttonLink: '#',
},
{
icon: 'tabler:brand-vscode',
title: 'Tantangan Koding',
description:
'Uji kemampuan koding kamu dengan tantangan yang menyenangkan dan menantang.',
buttonText: 'Mulai Tantangan',
buttonLink: '#',
},
{
icon: 'tabler:device-desktop-share',
title: 'Sharing Session',
description:
'Ikuti sesi berbagi pengalaman dari programmer berpengalaman dan belajar dari pengalaman mereka.',
buttonText: 'Jadwal Session',
buttonLink: '#',
},
];
const ref = useRef(null);
const isInView = useInView(ref, { once: true, amount: 0.2 });
@@ -95,7 +61,7 @@ export function LearningResources() {
initial="hidden"
animate={isInView ? 'visible' : 'hidden'}
>
{resources.map((r, i) => (
{LEARNING_RESOURCES.map((r, i) => (
<motion.div
key={i}
className="group relative overflow-hidden rounded-xl border bg-background p-6 hover:shadow-lg"
apps/landing/src/app/(frontend)/_components/testimonials.tsx
+5 -33
View File
@@ -1,42 +1,13 @@
'use client';
import TESTIMONIAL_STATS from '@/data/testimonial-stats.json';
import TESTIMONIALS from '@/data/testimonials.json';
import { QuoteIcon } from '@components';
import { motion, useInView } from 'framer-motion';
import Image from 'next/image';
import { useRef } from 'react';
export function Testimonials() {
const items = [
{
quote:
'Saya yang tadinya tidak mengerti apa-apa tentang programming, sekarang bisa membuat website sendiri dengan mudah. Terima kasih IMPHNEN!',
name: 'Budi Santoso',
role: 'Web Developer Pemula',
avatar: '',
},
{
quote:
'Komunitas yang sangat supportif! Setiap pertanyaan selalu dijawab dengan cepat dan jelas. Diskusi programnya mudah dipahami.',
name: 'Anita Ratna',
role: 'Mobile App Developer',
avatar: '',
},
{
quote:
'Server Discord IMPHNEN adalah tempat belajar terbaik untuk programmer pemula seperti saya. Materinya lengkap dan komunitasnya sangat membantu!',
name: 'Dedi Permana',
role: 'Data Scientist',
avatar: '',
},
];
const stats = [
{ value: '98%', label: 'Tingkat Kemalasan' },
{ value: '4.9/5', label: 'Rating Drama' },
{ value: '85%', label: 'Mendapat Pekerjaan' },
{ value: '24/7', label: 'Yapping' },
];
const ref = useRef<HTMLDivElement>(null);
const isInView = useInView(ref, { once: true, amount: 0.2 });
@@ -85,7 +56,7 @@ export function Testimonials() {
initial="hidden"
animate={isInView ? 'visible' : 'hidden'}
>
{items.map((t, idx) => (
{TESTIMONIALS.map((t, idx) => (
<motion.div
key={idx}
className="group relative overflow-hidden rounded-xl border bg-background p-6 transition-all hover:shadow-lg"
@@ -106,6 +77,7 @@ export function Testimonials() {
width={600}
height={500}
className="object-cover"
unoptimized
/>
</div>
<div>
@@ -137,7 +109,7 @@ export function Testimonials() {
</p>
</div>
<div className="grid grid-cols-2 gap-4">
{stats.map((s, idx) => (
{TESTIMONIAL_STATS.map((s, idx) => (
<div key={idx} className="rounded-lg border p-4 text-center">
<div className="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
{s.value}