diff --git a/apps/landing/src/app/(frontend)/_components/hero.tsx b/apps/landing/src/app/(frontend)/_components/hero.tsx index 28d8ca3..a1cc87b 100644 --- a/apps/landing/src/app/(frontend)/_components/hero.tsx +++ b/apps/landing/src/app/(frontend)/_components/hero.tsx @@ -6,11 +6,14 @@ import { SparklesIcon, UsersIcon, } from '@imphnen-frontend-service/shadcn-ui/atoms'; +import { HeroSection } from 'apps/landing/src/payload-types'; import { motion } from 'framer-motion'; import Image from 'next/image'; -import { useEffect, useState } from 'react'; +import { Fragment, useEffect, useState } from 'react'; + +export function Hero(props: HeroSection) { + const { badgeText, buttons, description, highlight, title, stats } = props; -export function Hero() { const [scrollY, setScrollY] = useState(0); useEffect(() => { @@ -24,11 +27,8 @@ export function Hero() { return (
- {/* Background Elements */}
- - {/* Animated Gradient Orbs */}
- - {/* Grid Pattern */}
@@ -58,64 +56,57 @@ export function Hero() { >
- Komunitas Programmer Indonesia + {badgeText}

- Programmer Handal,
+ {title}
- Tanpa Ribet + {highlight}

- Temukan potensi programming Anda bersama komunitas yang - mendukung, tutorial interaktif, dan sumber daya berkualitas - tinggi. + {description}

- + + + + -
-
-
- 100K+ -
-
Member
-
-
-
-
- 500+ -
-
Tutorial
-
-
-
-
- 24/7 -
-
Yapping
-
+ {stats?.map(({ value, label }, i) => ( + +
+
+ {value} +
+
{label}
+
+ {i < stats.length - 1 && ( +
+ )} + + ))}
@@ -126,15 +117,12 @@ font-bold text-black hover:text-white cursor-pointer" transition={{ duration: 0.5, delay: 0.2 }} >
- {/* Decorative Elements */}
- - {/* Main Image */}
- + diff --git a/apps/landing/src/collections/HeroSection.ts b/apps/landing/src/collections/HeroSection.ts new file mode 100644 index 0000000..38e5a1e --- /dev/null +++ b/apps/landing/src/collections/HeroSection.ts @@ -0,0 +1,101 @@ +import type { GlobalConfig } from 'payload'; + +export const HeroSection: GlobalConfig = { + slug: 'hero-section', + label: 'Hero Section', + access: { + read: () => true, + update: () => true, + }, + fields: [ + { + 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://web.facebook.com/groups/1032515944638255', + }, + { + 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' }, + ], + }, + ], +}; diff --git a/apps/landing/src/payload-types.ts b/apps/landing/src/payload-types.ts index d3cacc9..865e21d 100644 --- a/apps/landing/src/payload-types.ts +++ b/apps/landing/src/payload-types.ts @@ -84,8 +84,12 @@ export interface Config { db: { defaultIDType: number; }; - globals: {}; - globalsSelect: {}; + globals: { + 'hero-section': HeroSection; + }; + globalsSelect: { + 'hero-section': HeroSectionSelect | HeroSectionSelect; + }; locale: null; user: User & { collection: 'users'; @@ -271,6 +275,60 @@ export interface PayloadMigrationsSelect { updatedAt?: T; createdAt?: T; } +/** + * This interface was referenced by `Config`'s JSON-Schema + * via the `definition` "hero-section". + */ +export interface HeroSection { + id: number; + badgeText: string; + title: string; + highlight: string; + description: string; + buttons: { + primaryLabel: string; + primaryUrl: string; + secondaryLabel: string; + secondaryUrl: string; + }; + stats?: + | { + value: string; + label: string; + id?: string | null; + }[] + | null; + updatedAt?: string | null; + createdAt?: string | null; +} +/** + * This interface was referenced by `Config`'s JSON-Schema + * via the `definition` "hero-section_select". + */ +export interface HeroSectionSelect { + badgeText?: T; + title?: T; + highlight?: T; + description?: T; + buttons?: + | T + | { + primaryLabel?: T; + primaryUrl?: T; + secondaryLabel?: T; + secondaryUrl?: T; + }; + stats?: + | T + | { + value?: T; + label?: T; + id?: T; + }; + updatedAt?: T; + createdAt?: T; + globalType?: T; +} /** * This interface was referenced by `Config`'s JSON-Schema * via the `definition` "auth". diff --git a/apps/landing/src/payload.config.ts b/apps/landing/src/payload.config.ts index de076a1..48bc574 100644 --- a/apps/landing/src/payload.config.ts +++ b/apps/landing/src/payload.config.ts @@ -5,6 +5,7 @@ import { buildConfig } from 'payload'; import sharp from 'sharp'; import { fileURLToPath } from 'url'; +import { HeroSection } from './collections/HeroSection'; import { Media } from './collections/Media'; import { Users } from './collections/Users'; @@ -25,6 +26,7 @@ export default buildConfig({ }, }, collections: [Users, Media], + globals: [HeroSection], editor: lexicalEditor(), secret: process.env.CMS_SECRET || '', typescript: { diff --git a/apps/landing/src/repositories/get-globals-hero-section.ts b/apps/landing/src/repositories/get-globals-hero-section.ts new file mode 100644 index 0000000..cd8e3c0 --- /dev/null +++ b/apps/landing/src/repositories/get-globals-hero-section.ts @@ -0,0 +1,7 @@ +import { payload } from '../lib/payload'; + +export async function getGlobalsHeroSection() { + return await payload.findGlobal({ + slug: 'hero-section', + }); +}