feat: make content data dynamic from cms and fix button and badge ui (#27)
* feat: integrate payload cms to landing page * feat: add payload configuration and update TypeScript target * fix: update TypeScript paths for payload configuration * refactor: update config import paths to use local payload.config * fix: update quotation marks for testimonials to use HTML entities * fix: include withPayload in Next.js plugins for proper configuration * feat: implement HeroSection global configuration and integrate with Hero component * feat: add FeaturesSection global configuration and integrate with Features component * feat: add revalidate constant to control page revalidation interval * refactor: optimize data fetching by using Promise.all * fix: update revalidation interval to 10 seconds * feat: add CommunitiesSection configuration and integrate with Community component * refactor: move global section functions to services directory * feat: add support for s3 bucket for media * feat: update Community component to use Iconify for icons and adjust CommunitiesSection configuration * feat: replace Link component with Button for improved button styling in Community component * feat: update FeaturesSection to use Iconify icons and adjust icon properties * feat: add heroImage field to HeroSection and implement image formatting utility * feat: add Learning Resources section with dynamic data fetching and UI integration * feat: enhance LearningResourcesSection with primary and secondary button links * refactor: reorganize layout structure by moving Header and Footer components to RootLayout * feat: implement Testimonials section with dynamic data fetching and UI integration * feat: simplify joinTitle rendering in Testimonials section * feat: implement CallToAction section with dynamic data fetching and UI integration * feat: update CallToActionSection label and wrap Discord button in link * feat: update button components to use onClick for external links and improve styling * feat: wrap logo image in a link to navigate to the homepage * fix: supress scss deps warning * fix: add placeholder to .env.example * chore: add environment placeholder variables for CMS configuration in test build workflow * fix: remove unused environment variables from test build workflow * fix: text color (#26) * chore: update action * feat: integrate payload cms to landing page * feat: add payload configuration and update TypeScript target * fix: update TypeScript paths for payload configuration * refactor: update config import paths to use local payload.config * fix: include withPayload in Next.js plugins for proper configuration * feat: implement HeroSection global configuration and integrate with Hero component * feat: add FeaturesSection global configuration and integrate with Features component * feat: add revalidate constant to control page revalidation interval * refactor: optimize data fetching by using Promise.all * fix: update revalidation interval to 10 seconds * feat: add CommunitiesSection configuration and integrate with Community component * refactor: move global section functions to services directory * feat: add support for s3 bucket for media * feat: update Community component to use Iconify for icons and adjust CommunitiesSection configuration * feat: replace Link component with Button for improved button styling in Community component * feat: update FeaturesSection to use Iconify icons and adjust icon properties * feat: add heroImage field to HeroSection and implement image formatting utility * feat: add Learning Resources section with dynamic data fetching and UI integration * feat: enhance LearningResourcesSection with primary and secondary button links * refactor: reorganize layout structure by moving Header and Footer components to RootLayout * feat: implement Testimonials section with dynamic data fetching and UI integration * feat: simplify joinTitle rendering in Testimonials section * feat: implement CallToAction section with dynamic data fetching and UI integration * feat: update CallToActionSection label and wrap Discord button in link * feat: update button components to use onClick for external links and improve styling * feat: wrap logo image in a link to navigate to the homepage * fix: supress scss deps warning * fix: add placeholder to .env.example * chore: add environment placeholder variables for CMS configuration in test build workflow * fix: remove unused environment variables from test build workflow * fix: remove mistakenly added env from test-build workflow --------- Co-authored-by: Fahim Ardani <fahimardani25@gmail.com> Co-authored-by: Maulana Sodiqin <53475078+maulanasdqn@users.noreply.github.com>
This commit is contained in:
Rasyid
co-authored by
Fahim Ardani
Maulana Sodiqin
Fahim Ardani
Maulana Sodiqin
parent
246adb57a1
commit
598bd22b5a
@@ -0,0 +1,51 @@
|
||||
import { GlobalConfig } from 'payload';
|
||||
|
||||
export const CallToActionSection: GlobalConfig = {
|
||||
slug: 'call-to-action-section',
|
||||
label: 'Call To Action Section',
|
||||
fields: [
|
||||
{
|
||||
name: 'title',
|
||||
type: 'text',
|
||||
required: true,
|
||||
defaultValue: 'Siap Menjadi',
|
||||
},
|
||||
{
|
||||
name: 'highlightedTitle',
|
||||
type: 'text',
|
||||
required: true,
|
||||
defaultValue: 'Programmer Handal?',
|
||||
},
|
||||
{
|
||||
name: 'subtitle',
|
||||
type: 'textarea',
|
||||
required: true,
|
||||
defaultValue:
|
||||
'Bergabunglah dengan komunitas IMPHNEN sekarang dan mulai perjalanan programming mu dengan cara yang menyenangkan!',
|
||||
},
|
||||
{
|
||||
name: 'primaryButtonLabel',
|
||||
type: 'text',
|
||||
required: true,
|
||||
defaultValue: 'Gabung Discord',
|
||||
},
|
||||
{
|
||||
name: 'primaryButtonLink',
|
||||
type: 'text',
|
||||
required: true,
|
||||
defaultValue: 'https://discord.gg/imphnen',
|
||||
},
|
||||
{
|
||||
name: 'secondaryButtonLabel',
|
||||
type: 'text',
|
||||
required: true,
|
||||
defaultValue: 'Join Facebook Group',
|
||||
},
|
||||
{
|
||||
name: 'secondaryButtonLink',
|
||||
type: 'text',
|
||||
required: true,
|
||||
defaultValue: 'https://facebook.com/groups/programmerhandal',
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -0,0 +1,65 @@
|
||||
import { GlobalConfig } from 'payload';
|
||||
|
||||
export const CommunitiesSection: GlobalConfig = {
|
||||
slug: 'communities-section',
|
||||
label: 'Communities Section',
|
||||
fields: [
|
||||
{
|
||||
name: 'items',
|
||||
type: 'array',
|
||||
required: true,
|
||||
defaultValue: [
|
||||
{
|
||||
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',
|
||||
},
|
||||
],
|
||||
fields: [
|
||||
{
|
||||
name: 'iconName',
|
||||
type: 'text',
|
||||
required: true,
|
||||
},
|
||||
{ name: 'title', type: 'text', required: true },
|
||||
{ name: 'description', type: 'textarea', required: true },
|
||||
{ name: 'buttonText', type: 'text', required: true },
|
||||
{ name: 'buttonLink', type: 'text', required: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'stats',
|
||||
type: 'array',
|
||||
required: true,
|
||||
defaultValue: [
|
||||
{ value: '100K+', label: 'Member Aktif' },
|
||||
{ value: '50+', label: 'Event Bulanan' },
|
||||
{ value: '100+', label: 'Mentor Profesional' },
|
||||
{ value: '5K+', label: 'Diskusi Mingguan' },
|
||||
],
|
||||
fields: [
|
||||
{ name: 'value', type: 'text', required: true },
|
||||
{ name: 'label', type: 'text', required: true },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -0,0 +1,65 @@
|
||||
import { GlobalConfig } from 'payload';
|
||||
|
||||
export const FeaturesSection: GlobalConfig = {
|
||||
slug: 'features-section',
|
||||
label: 'Features Section',
|
||||
fields: [
|
||||
{
|
||||
name: 'heading',
|
||||
type: 'text',
|
||||
defaultValue: 'Belajar programming dengan cara yang lebih baik',
|
||||
},
|
||||
{
|
||||
name: 'subheading',
|
||||
type: 'text',
|
||||
defaultValue:
|
||||
'IMPHNEN hadir dengan berbagai fitur untuk membantu kamu menjadi programmer handal tanpa harus pusing dengan coding.',
|
||||
},
|
||||
{
|
||||
name: 'features',
|
||||
type: 'array',
|
||||
defaultValue: [
|
||||
{
|
||||
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.',
|
||||
},
|
||||
],
|
||||
fields: [
|
||||
{
|
||||
name: 'iconName',
|
||||
type: 'text',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'title',
|
||||
type: 'text',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'description',
|
||||
type: 'textarea',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -0,0 +1,104 @@
|
||||
import type { GlobalConfig } from 'payload';
|
||||
|
||||
export const HeroSection: GlobalConfig = {
|
||||
slug: 'hero-section',
|
||||
label: 'Hero Section',
|
||||
fields: [
|
||||
{
|
||||
name: 'heroImage',
|
||||
label: 'Hero Image',
|
||||
type: 'upload',
|
||||
relationTo: 'media',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'badgeText',
|
||||
label: 'Badge Text',
|
||||
type: 'text',
|
||||
required: true,
|
||||
defaultValue: 'Komunitas Programmer Indonesia',
|
||||
},
|
||||
{
|
||||
name: 'title',
|
||||
label: 'Main Title',
|
||||
type: 'text',
|
||||
required: true,
|
||||
defaultValue: 'Programmer Handal,',
|
||||
},
|
||||
{
|
||||
name: 'highlight',
|
||||
label: 'Highlight Text',
|
||||
type: 'text',
|
||||
required: true,
|
||||
defaultValue: 'Tanpa Ribet',
|
||||
},
|
||||
{
|
||||
name: 'description',
|
||||
label: 'Description',
|
||||
type: 'textarea',
|
||||
required: true,
|
||||
defaultValue:
|
||||
'Temukan potensi programming Anda bersama komunitas yang mendukung, tutorial interaktif, dan sumber daya berkualitas tinggi.',
|
||||
},
|
||||
{
|
||||
type: 'group',
|
||||
name: 'buttons',
|
||||
label: 'Buttons',
|
||||
fields: [
|
||||
{
|
||||
name: 'primaryLabel',
|
||||
label: 'Primary Button Label',
|
||||
type: 'text',
|
||||
required: true,
|
||||
defaultValue: 'Mulai Belajar',
|
||||
},
|
||||
{
|
||||
name: 'primaryUrl',
|
||||
label: 'Primary Button URL',
|
||||
type: 'text',
|
||||
required: true,
|
||||
defaultValue: 'https://facebook.com/groups/programmerhandal',
|
||||
},
|
||||
{
|
||||
name: 'secondaryLabel',
|
||||
label: 'Secondary Button Label',
|
||||
type: 'text',
|
||||
required: true,
|
||||
defaultValue: 'Gabung Discord',
|
||||
},
|
||||
{
|
||||
name: 'secondaryUrl',
|
||||
label: 'Secondary Button URL',
|
||||
type: 'text',
|
||||
required: true,
|
||||
defaultValue: 'https://discord.com/invite/imphnen',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'stats',
|
||||
label: 'Statistics',
|
||||
type: 'array',
|
||||
minRows: 1,
|
||||
fields: [
|
||||
{
|
||||
name: 'value',
|
||||
label: 'Value',
|
||||
type: 'text',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'label',
|
||||
label: 'Label',
|
||||
type: 'text',
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
defaultValue: [
|
||||
{ value: '180K+', label: 'Member' },
|
||||
{ value: '500+', label: 'Tutorial' },
|
||||
{ value: '24/7', label: 'Yapping' },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -0,0 +1,117 @@
|
||||
// payload config
|
||||
import { GlobalConfig } from 'payload';
|
||||
|
||||
export const LearningResourcesSection: GlobalConfig = {
|
||||
slug: 'learning-resources-section',
|
||||
label: 'Learning Resources Section',
|
||||
fields: [
|
||||
{
|
||||
name: 'title',
|
||||
type: 'text',
|
||||
required: true,
|
||||
defaultValue: 'Sumber Belajar',
|
||||
},
|
||||
{
|
||||
name: 'description',
|
||||
type: 'textarea',
|
||||
required: true,
|
||||
defaultValue:
|
||||
'Akses berbagai materi belajar yang akan membantu kamu menguasai konsep programming dengan cara yang menyenangkan.',
|
||||
},
|
||||
{
|
||||
name: 'resources',
|
||||
type: 'array',
|
||||
required: true,
|
||||
fields: [
|
||||
{ name: 'icon', type: 'text', required: true },
|
||||
{ name: 'title', type: 'text', required: true },
|
||||
{ name: 'description', type: 'textarea', required: true },
|
||||
{ name: 'buttonText', type: 'text', required: true },
|
||||
{ name: 'buttonLink', type: 'text', required: true },
|
||||
],
|
||||
defaultValue: [
|
||||
{
|
||||
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: '#',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'featured',
|
||||
type: 'group',
|
||||
fields: [
|
||||
{
|
||||
name: 'label',
|
||||
type: 'text',
|
||||
required: true,
|
||||
defaultValue: 'Rekomendasi Terbaik',
|
||||
},
|
||||
{
|
||||
name: 'title',
|
||||
type: 'text',
|
||||
required: true,
|
||||
defaultValue: 'Kursus Lengkap Web Development',
|
||||
},
|
||||
{
|
||||
name: 'description',
|
||||
type: 'textarea',
|
||||
required: true,
|
||||
defaultValue:
|
||||
'Pelajari HTML, CSS, JavaScript, React, dan Node.js dalam satu kursus komprehensif yang dirancang untuk pemula hingga tingkat menengah.',
|
||||
},
|
||||
{
|
||||
name: 'primaryButtonText',
|
||||
type: 'text',
|
||||
required: true,
|
||||
defaultValue: 'Mulai Kursus',
|
||||
},
|
||||
{
|
||||
name: 'primaryButtonLink',
|
||||
type: 'text',
|
||||
required: true,
|
||||
defaultValue: '#',
|
||||
},
|
||||
{
|
||||
name: 'secondaryButtonText',
|
||||
type: 'text',
|
||||
required: true,
|
||||
defaultValue: 'Lihat Silabus',
|
||||
},
|
||||
{
|
||||
name: 'secondaryButtonLink',
|
||||
type: 'text',
|
||||
required: true,
|
||||
defaultValue: '#',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -0,0 +1,93 @@
|
||||
import { GlobalConfig } from 'payload';
|
||||
|
||||
export const TestimonialsSection: GlobalConfig = {
|
||||
slug: 'testimonials-section',
|
||||
label: 'Testimonials Section',
|
||||
fields: [
|
||||
{
|
||||
name: 'title',
|
||||
label: 'Section Title',
|
||||
type: 'text',
|
||||
defaultValue: 'Testimoni Member',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'subtitle',
|
||||
label: 'Section Subtitle',
|
||||
type: 'textarea',
|
||||
defaultValue:
|
||||
'Apa kata mereka yang telah bergabung dengan komunitas IMPHNEN?',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'items',
|
||||
label: 'Testimonials Items',
|
||||
type: 'array',
|
||||
fields: [
|
||||
{ name: 'quote', type: 'textarea', label: 'Quote', required: true },
|
||||
{ name: 'name', type: 'text', label: 'Name', required: true },
|
||||
{ name: 'role', type: 'text', label: 'Role', required: true },
|
||||
{
|
||||
name: 'avatar',
|
||||
type: 'upload',
|
||||
label: 'Avatar',
|
||||
relationTo: 'media',
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
defaultValue: [
|
||||
{
|
||||
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: { id: '', relationTo: 'media' },
|
||||
},
|
||||
{
|
||||
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: { id: '', relationTo: 'media' },
|
||||
},
|
||||
{
|
||||
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: { id: '', relationTo: 'media' },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'stats',
|
||||
label: 'Statistics',
|
||||
type: 'array',
|
||||
fields: [
|
||||
{ name: 'value', type: 'text', label: 'Value', required: true },
|
||||
{ name: 'label', type: 'text', label: 'Label', required: true },
|
||||
],
|
||||
defaultValue: [
|
||||
{ value: '98%', label: 'Tingkat Kemalasan' },
|
||||
{ value: '4.9/5', label: 'Rating Drama' },
|
||||
{ value: '85%', label: 'Mendapat Pekerjaan' },
|
||||
{ value: '24/7', label: 'Yapping' },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'joinTitle',
|
||||
label: 'Join Section Title',
|
||||
type: 'text',
|
||||
defaultValue: 'Bergabunglah dengan 10,000+ programmer Indonesia lainnya',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'joinText',
|
||||
label: 'Join Section Text',
|
||||
type: 'textarea',
|
||||
defaultValue:
|
||||
'Komunitas kami terus berkembang dengan programmer dari berbagai latar belakang dan tingkat keahlian. Bersama-sama, kita belajar, berbagi, dan tumbuh sebagai profesional.',
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
Reference in New Issue
Block a user