Compare commits
4
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 arraysid
|
3930542182 | ||
|
arraysid
|
6f45ca295b | ||
|
arraysid
|
9c4ce1cca9 | ||
|
|
598bd22b5a |
+10
-5
@@ -1,9 +1,14 @@
|
||||
# API Endpoint
|
||||
VITE_API_URL=
|
||||
|
||||
CMS_SECRET=
|
||||
CMS_POSTGRES_URL=
|
||||
# Payload CMS Secret Key (minimum 32 characters)
|
||||
CMS_SECRET=your-very-long-secret-key
|
||||
|
||||
CMS_STORAGE_ENDPOINT=
|
||||
CMS_STORAGE_ACCESS_KEY_ID=
|
||||
CMS_STORAGE_SECRET_ACCESS_KEY=
|
||||
# PostgreSQL Connection String
|
||||
CMS_POSTGRES_URL=postgres://user:password@host:port/database
|
||||
|
||||
# S3 Storage Configuration
|
||||
CMS_STORAGE_ENDPOINT=https://your-s3-endpoint.com
|
||||
CMS_STORAGE_ACCESS_KEY_ID=your-access-key-id
|
||||
CMS_STORAGE_SECRET_ACCESS_KEY=your-secret-access-key
|
||||
CMS_STORAGE_REGION=ap-southeast-1
|
||||
|
||||
@@ -1,20 +1,15 @@
|
||||
//@ts-check
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||
const { composePlugins, withNx } = require('@nx/next');
|
||||
const { withPayload } = require('@payloadcms/next/withPayload');
|
||||
|
||||
/**
|
||||
* @type {import('@nx/next/plugins/with-nx').WithNxOptions}
|
||||
**/
|
||||
/** @type {import('@nx/next/plugins/with-nx').WithNxOptions} */
|
||||
const nextConfig = {
|
||||
nx: {
|
||||
// Set this to true if you would like to to use SVGR
|
||||
// See: https://github.com/gregberge/svgr
|
||||
svgr: false,
|
||||
nx: { svgr: false },
|
||||
sassOptions: {
|
||||
quietDeps: true,
|
||||
logger: {
|
||||
warn: () => {},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const plugins = [withNx, withPayload];
|
||||
|
||||
module.exports = composePlugins(...plugins)(nextConfig);
|
||||
module.exports = composePlugins(withNx, withPayload)(nextConfig);
|
||||
|
||||
@@ -1,10 +1,21 @@
|
||||
'use client';
|
||||
|
||||
import { Button } from '@imphnen-frontend-service/shadcn-ui/atoms';
|
||||
import { CallToActionSection } from 'apps/landing/src/payload-types';
|
||||
import { motion, useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
|
||||
export function CallToAction() {
|
||||
export function CallToAction(props: CallToActionSection) {
|
||||
const {
|
||||
title,
|
||||
highlightedTitle,
|
||||
subtitle,
|
||||
primaryButtonLabel,
|
||||
primaryButtonLink,
|
||||
secondaryButtonLabel,
|
||||
secondaryButtonLink,
|
||||
} = props;
|
||||
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, amount: 0.2 });
|
||||
|
||||
@@ -28,30 +39,30 @@ export function CallToAction() {
|
||||
|
||||
<div className="relative z-10 text-center">
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
|
||||
Siap Menjadi{' '}
|
||||
{title}{' '}
|
||||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
|
||||
Programmer Handal?
|
||||
{highlightedTitle}
|
||||
</span>
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
|
||||
Bergabunglah dengan komunitas IMPHNEN sekarang dan mulai
|
||||
perjalanan programming mu dengan cara yang menyenangkan!
|
||||
{subtitle}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90
|
||||
font-bold text-black hover:text-white cursor-pointer"
|
||||
className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 font-bold text-black hover:text-white cursor-pointer"
|
||||
onClick={() => window.open(primaryButtonLink, '_blank')}
|
||||
>
|
||||
Gabung Discord
|
||||
{primaryButtonLabel}
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-primary hover:bg-primary/10"
|
||||
onClick={() => window.open(secondaryButtonLink, '_blank')}
|
||||
>
|
||||
Join Facebook Group
|
||||
{secondaryButtonLabel}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -77,14 +77,13 @@ export function Community(props: CommunitiesSection) {
|
||||
</div>
|
||||
<h3 className="mb-2 text-xl font-bold">{c.title}</h3>
|
||||
<p className="mb-6 text-muted-foreground">{c.description}</p>
|
||||
<a href={c.buttonLink} target="_blank">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full group-hover:bg-primary group-hover:text-primary-foreground transition-colors duration-300"
|
||||
>
|
||||
{c.buttonText}
|
||||
</Button>
|
||||
</a>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full group-hover:bg-primary group-hover:text-primary-foreground transition-colors duration-300"
|
||||
onClick={() => window.open(c.buttonLink, '_blank')}
|
||||
>
|
||||
{c.buttonText}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="absolute -bottom-1 -right-1 w-20 h-20 bg-gradient-to-tl from-primary/20 to-transparent rounded-tl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
</motion.div>
|
||||
|
||||
@@ -35,13 +35,15 @@ export function Header() {
|
||||
<div className="container flex h-16 items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative overflow-hidden rounded">
|
||||
<Image
|
||||
src="/logo.png"
|
||||
alt="IMPHNEN Logo"
|
||||
width={64}
|
||||
height={64}
|
||||
className="object-cover cursor-pointer"
|
||||
/>
|
||||
<Link href="/">
|
||||
<Image
|
||||
src="/logo.png"
|
||||
alt="IMPHNEN"
|
||||
width={64}
|
||||
height={64}
|
||||
className="object-cover"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -82,7 +84,13 @@ export function Header() {
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<SimpleThemeToggle />
|
||||
<Button className="hidden md:flex bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300 font-bold text-black hover:text-white cursor-pointer">
|
||||
|
||||
<Button
|
||||
className="hidden md:flex bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300 font-bold text-black hover:text-white cursor-pointer"
|
||||
onClick={() =>
|
||||
window.open('https://discord.com/invite/imphnen', '_blank')
|
||||
}
|
||||
>
|
||||
Gabung Discord
|
||||
</Button>
|
||||
|
||||
|
||||
@@ -69,7 +69,7 @@ export function Hero(props: HeroSection) {
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl lg:text-7xl bg-clip-text text-transparent bg-gradient-to-r from-foreground via-foreground to-foreground/70">
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-foreground via-foreground to-foreground/70">
|
||||
{title} <br />
|
||||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
|
||||
{highlight}
|
||||
@@ -80,29 +80,26 @@ export function Hero(props: HeroSection) {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<a href={buttons.primaryUrl} target="_blank">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300
|
||||
font-bold text-black hover:text-white cursor-pointer"
|
||||
>
|
||||
{buttons.primaryLabel}
|
||||
</Button>
|
||||
</a>
|
||||
<a href={buttons.secondaryUrl} target="_blank">
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="group relative overflow-hidden border-primary"
|
||||
>
|
||||
<span className="absolute inset-0 bg-gradient-to-r from-primary/10 to-blue-400/10 translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
|
||||
<span className="relative">{buttons.secondaryLabel}</span>
|
||||
</Button>
|
||||
</a>
|
||||
<div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
|
||||
<Button
|
||||
size="lg"
|
||||
className="w-full sm:w-auto bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 transition-all duration-300 font-bold text-black hover:text-white cursor-pointer"
|
||||
onClick={() => window.open(buttons.primaryUrl, '_blank')}
|
||||
>
|
||||
{buttons.primaryLabel}
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="w-full sm:w-auto group relative overflow-hidden border-primary"
|
||||
onClick={() => window.open(buttons.secondaryUrl, '_blank')}
|
||||
>
|
||||
<span className="absolute inset-0 bg-gradient-to-r from-primary/10 to-blue-400/10 translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
|
||||
<span className="relative">{buttons.secondaryLabel}</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-8">
|
||||
<div className="flex flex-wrap justify-center gap-6 sm:gap-8">
|
||||
{stats?.map(({ value, label }, i) => (
|
||||
<Fragment key={i}>
|
||||
<div className="flex flex-col items-center">
|
||||
@@ -112,7 +109,7 @@ font-bold text-black hover:text-white cursor-pointer"
|
||||
<div className="text-xs text-muted-foreground">{label}</div>
|
||||
</div>
|
||||
{i < stats.length - 1 && (
|
||||
<div className="h-10 border-r border-border mx-4" />
|
||||
<div className="hidden sm:block h-10 border-r border-border mx-4" />
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
@@ -120,7 +117,7 @@ font-bold text-black hover:text-white cursor-pointer"
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="relative mx-auto lg:ml-auto"
|
||||
className="relative w-full lg:w-auto mx-auto lg:ml-auto"
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
|
||||
@@ -78,15 +78,15 @@ export function LearningResources(props: LearningResourcesSection) {
|
||||
</div>
|
||||
<h3 className="mb-2 text-xl font-bold">{r.title}</h3>
|
||||
<p className="mb-6 text-muted-foreground">{r.description}</p>
|
||||
<a href={r.buttonLink} target="_blank">
|
||||
<Button
|
||||
variant="link"
|
||||
className="p-0 h-auto font-medium text-primary hover:text-primary/80"
|
||||
>
|
||||
{r.buttonText}
|
||||
<Icon icon="tabler:arrow-right" className="h-6 w-6" />
|
||||
</Button>
|
||||
</a>
|
||||
|
||||
<Button
|
||||
variant="link"
|
||||
className="p-0 h-auto font-medium text-primary hover:text-primary/80"
|
||||
onClick={() => window.open(r.buttonLink, '_blank')}
|
||||
>
|
||||
{r.buttonText}
|
||||
<Icon icon="tabler:arrow-right" className="h-6 w-6" />
|
||||
</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>
|
||||
@@ -110,16 +110,22 @@ export function LearningResources(props: LearningResourcesSection) {
|
||||
{featured.description}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<a href={featured.primaryButtonLink} target="_blank">
|
||||
<Button className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 font-bold text-black hover:text-white cursor-pointer">
|
||||
{featured.primaryButtonText}
|
||||
</Button>
|
||||
</a>
|
||||
<a href={featured.secondaryButtonLink} target="_blank">
|
||||
<Button variant="outline">
|
||||
{featured.secondaryButtonText}
|
||||
</Button>
|
||||
</a>
|
||||
<Button
|
||||
className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90 font-bold text-black hover:text-white cursor-pointer"
|
||||
onClick={() =>
|
||||
window.open(featured.primaryButtonLink, '_blank')
|
||||
}
|
||||
>
|
||||
{featured.primaryButtonText}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() =>
|
||||
window.open(featured.secondaryButtonLink, '_blank')
|
||||
}
|
||||
>
|
||||
{featured.secondaryButtonText}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative h-64 md:h-auto">
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { getGlobalsCallToActionSection } from '../../services/get-globals-call-to-action-section';
|
||||
import { getGlobalsCommunitiesSection } from '../../services/get-globals-communitues-section';
|
||||
import { getGlobalsFeaturesSection } from '../../services/get-globals-features-section';
|
||||
import { getGlobalsHeroSection } from '../../services/get-globals-hero-section';
|
||||
@@ -19,12 +20,14 @@ export default async function Page() {
|
||||
communitiesData,
|
||||
learningResourcesData,
|
||||
testimonialsData,
|
||||
callToActionData,
|
||||
] = await Promise.all([
|
||||
getGlobalsHeroSection(),
|
||||
getGlobalsFeaturesSection(),
|
||||
getGlobalsCommunitiesSection(),
|
||||
getGlobalsLearningResourcesSection(),
|
||||
getGlobalsTestimonialsSection(),
|
||||
getGlobalsCallToActionSection(),
|
||||
]);
|
||||
|
||||
return (
|
||||
@@ -34,7 +37,7 @@ export default async function Page() {
|
||||
<Community {...communitiesData} />
|
||||
<LearningResources {...learningResourcesData} />
|
||||
<Testimonials {...testimonialsData} />
|
||||
<CallToAction />
|
||||
<CallToAction {...callToActionData} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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',
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -15,7 +15,7 @@ export const CommunitiesSection: GlobalConfig = {
|
||||
description:
|
||||
'Bergabunglah dengan grup Facebook kami untuk diskusi santai dan berbagi artikel menarik.',
|
||||
buttonText: 'Gabung Sekarang',
|
||||
buttonLink: 'https://facebook.com/groups/1032515944638255',
|
||||
buttonLink: 'https://facebook.com/groups/programmerhandal',
|
||||
},
|
||||
{
|
||||
iconName: 'tabler:brand-instagram',
|
||||
|
||||
@@ -57,7 +57,7 @@ export const HeroSection: GlobalConfig = {
|
||||
label: 'Primary Button URL',
|
||||
type: 'text',
|
||||
required: true,
|
||||
defaultValue: 'https://web.facebook.com/groups/1032515944638255',
|
||||
defaultValue: 'https://facebook.com/groups/programmerhandal',
|
||||
},
|
||||
{
|
||||
name: 'secondaryLabel',
|
||||
|
||||
@@ -90,6 +90,7 @@ export interface Config {
|
||||
'communities-section': CommunitiesSection;
|
||||
'learning-resources-section': LearningResourcesSection;
|
||||
'testimonials-section': TestimonialsSection;
|
||||
'call-to-action-section': CallToActionSection;
|
||||
};
|
||||
globalsSelect: {
|
||||
'hero-section': HeroSectionSelect<false> | HeroSectionSelect<true>;
|
||||
@@ -97,6 +98,7 @@ export interface Config {
|
||||
'communities-section': CommunitiesSectionSelect<false> | CommunitiesSectionSelect<true>;
|
||||
'learning-resources-section': LearningResourcesSectionSelect<false> | LearningResourcesSectionSelect<true>;
|
||||
'testimonials-section': TestimonialsSectionSelect<false> | TestimonialsSectionSelect<true>;
|
||||
'call-to-action-section': CallToActionSectionSelect<false> | CallToActionSectionSelect<true>;
|
||||
};
|
||||
locale: null;
|
||||
user: User & {
|
||||
@@ -408,6 +410,22 @@ export interface TestimonialsSection {
|
||||
updatedAt?: string | null;
|
||||
createdAt?: string | null;
|
||||
}
|
||||
/**
|
||||
* This interface was referenced by `Config`'s JSON-Schema
|
||||
* via the `definition` "call-to-action-section".
|
||||
*/
|
||||
export interface CallToActionSection {
|
||||
id: number;
|
||||
title: string;
|
||||
highlightedTitle: string;
|
||||
subtitle: string;
|
||||
primaryButtonLabel: string;
|
||||
primaryButtonLink: string;
|
||||
secondaryButtonLabel: string;
|
||||
secondaryButtonLink: string;
|
||||
updatedAt?: string | null;
|
||||
createdAt?: string | null;
|
||||
}
|
||||
/**
|
||||
* This interface was referenced by `Config`'s JSON-Schema
|
||||
* via the `definition` "hero-section_select".
|
||||
@@ -543,6 +561,22 @@ export interface TestimonialsSectionSelect<T extends boolean = true> {
|
||||
createdAt?: T;
|
||||
globalType?: T;
|
||||
}
|
||||
/**
|
||||
* This interface was referenced by `Config`'s JSON-Schema
|
||||
* via the `definition` "call-to-action-section_select".
|
||||
*/
|
||||
export interface CallToActionSectionSelect<T extends boolean = true> {
|
||||
title?: T;
|
||||
highlightedTitle?: T;
|
||||
subtitle?: T;
|
||||
primaryButtonLabel?: T;
|
||||
primaryButtonLink?: T;
|
||||
secondaryButtonLabel?: T;
|
||||
secondaryButtonLink?: T;
|
||||
updatedAt?: T;
|
||||
createdAt?: T;
|
||||
globalType?: T;
|
||||
}
|
||||
/**
|
||||
* This interface was referenced by `Config`'s JSON-Schema
|
||||
* via the `definition` "auth".
|
||||
|
||||
@@ -8,6 +8,7 @@ import { buildConfig } from 'payload';
|
||||
import sharp from 'sharp';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
import { CallToActionSection } from './collections/CallToActionSection';
|
||||
import { CommunitiesSection } from './collections/CommunitiesSection';
|
||||
import { FeaturesSection } from './collections/FeaturesSection';
|
||||
import { HeroSection } from './collections/HeroSection';
|
||||
@@ -39,6 +40,7 @@ export default buildConfig({
|
||||
CommunitiesSection,
|
||||
LearningResourcesSection,
|
||||
TestimonialsSection,
|
||||
CallToActionSection,
|
||||
],
|
||||
editor: lexicalEditor(),
|
||||
secret: process.env.CMS_SECRET || '',
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
import { payload } from '../lib/payload';
|
||||
|
||||
export async function getGlobalsCallToActionSection() {
|
||||
return await payload.findGlobal({
|
||||
slug: 'call-to-action-section',
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user