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
@@ -1,65 +1,17 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
BookOpenIcon,
|
||||
Button,
|
||||
CodeIcon,
|
||||
Share2Icon,
|
||||
VideoIcon,
|
||||
} from '@imphnen-frontend-service/shadcn-ui/atoms';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { Button } from '@imphnen-frontend-service/shadcn-ui/atoms';
|
||||
import { LearningResourcesSection } from 'apps/landing/src/payload-types';
|
||||
import { motion, useInView } from 'framer-motion';
|
||||
|
||||
import { useRef } from 'react';
|
||||
|
||||
export function LearningResources() {
|
||||
export function LearningResources(props: LearningResourcesSection) {
|
||||
const { resources, featured, title, description } = props;
|
||||
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, amount: 0.2 });
|
||||
|
||||
const resources = [
|
||||
{
|
||||
icon: <VideoIcon className="h-6 w-6 text-blue-600 dark:text-blue-400" />,
|
||||
iconBg: 'bg-blue-100 dark:bg-blue-900',
|
||||
title: 'Video Tutorial',
|
||||
description:
|
||||
'Belajar melalui tutorial video dari langkah awal hingga mahir.',
|
||||
buttonText: 'Lihat Semua Video',
|
||||
buttonLink: '#',
|
||||
color: 'from-blue-500 to-blue-700',
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<BookOpenIcon className="h-6 w-6 text-blue-600 dark:text-blue-400" />
|
||||
),
|
||||
iconBg: 'bg-blue-100 dark:bg-blue-900',
|
||||
title: 'Artikel & Tutorial',
|
||||
description:
|
||||
'Pelajari konsep programming melalui artikel yang disusun secara terstruktur.',
|
||||
buttonText: 'Baca Artikel',
|
||||
buttonLink: '#',
|
||||
color: 'from-blue-500 to-blue-700',
|
||||
},
|
||||
{
|
||||
icon: <CodeIcon className="h-6 w-6 text-blue-600 dark:text-blue-400" />,
|
||||
iconBg: 'bg-blue-100 dark:bg-blue-900',
|
||||
title: 'Tantangan Koding',
|
||||
description:
|
||||
'Uji kemampuan koding kamu dengan tantangan yang menyenangkan dan menantang.',
|
||||
buttonText: 'Mulai Tantangan',
|
||||
buttonLink: '#',
|
||||
color: 'from-blue-500 to-blue-700',
|
||||
},
|
||||
{
|
||||
icon: <Share2Icon className="h-6 w-6 text-blue-600 dark:text-blue-400" />,
|
||||
iconBg: 'bg-blue-100 dark:bg-blue-900',
|
||||
title: 'Sharing Session',
|
||||
description:
|
||||
'Ikuti sesi berbagi pengalaman dari programmer berpengalaman dan belajar dari pengalaman mereka.',
|
||||
buttonText: 'Jadwal Session',
|
||||
buttonLink: '#',
|
||||
color: 'from-blue-500 to-blue-700',
|
||||
},
|
||||
];
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
@@ -84,97 +36,96 @@ export function LearningResources() {
|
||||
id="sumber-belajar"
|
||||
className="w-full py-20 md:py-32 relative overflow-hidden"
|
||||
>
|
||||
{/* Background Elements */}
|
||||
<div className="absolute inset-0 -z-10">
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-background via-background to-background" />
|
||||
<div className="absolute top-0 right-0 w-1/2 h-1/2 bg-gradient-to-bl from-primary/5 to-transparent blur-3xl" />
|
||||
<div className="absolute bottom-0 left-0 w-1/2 h-1/2 bg-gradient-to-tr from-blue-400/5 to-transparent blur-3xl" />
|
||||
</div>
|
||||
|
||||
<div className="container px-4 md:px-6" ref={ref}>
|
||||
<div className="flex flex-col items-center justify-center space-y-4 text-center mb-16">
|
||||
<motion.div
|
||||
className="space-y-2"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<h2 className="text-3xl font-bold tracking-tighter md:text-4xl/tight lg:text-5xl">
|
||||
Sumber{' '}
|
||||
<span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
|
||||
Belajar
|
||||
</span>
|
||||
{title}
|
||||
</h2>
|
||||
<p className="max-w-[800px] mx-auto text-muted-foreground md:text-lg">
|
||||
Akses berbagai materi belajar yang akan membantu kamu menguasai
|
||||
konsep programming dengan cara yang menyenangkan.
|
||||
{description}
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="grid gap-8 md:grid-cols-2 lg:grid-cols-4"
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate={isInView ? 'visible' : 'hidden'}
|
||||
>
|
||||
{resources.map((resource, index) => (
|
||||
{resources.map((r, i) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
className="group relative overflow-hidden rounded-xl border bg-background p-6 transition-all hover:shadow-lg"
|
||||
key={i}
|
||||
className="group relative overflow-hidden rounded-xl border bg-background p-6 hover:shadow-lg"
|
||||
variants={itemVariants}
|
||||
>
|
||||
<div className="absolute top-0 left-0 h-1 w-full bg-gradient-to-r from-primary/50 to-blue-400/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div
|
||||
className={`mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full ${resource.iconBg}`}
|
||||
>
|
||||
{resource.icon}
|
||||
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
|
||||
<Icon
|
||||
icon={r.icon}
|
||||
className="h-6 w-6 text-blue-600 dark:text-blue-400"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="mb-2 text-xl font-bold">{resource.title}</h3>
|
||||
<p className="mb-6 text-muted-foreground">
|
||||
{resource.description}
|
||||
</p>
|
||||
<h3 className="mb-2 text-xl font-bold">{r.title}</h3>
|
||||
<p className="mb-6 text-muted-foreground">{r.description}</p>
|
||||
|
||||
<Button
|
||||
variant="link"
|
||||
className="p-0 h-auto font-medium text-primary hover:text-primary/80"
|
||||
onClick={() => window.open(r.buttonLink, '_blank')}
|
||||
>
|
||||
{resource.buttonText} →
|
||||
{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>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* Featured Resource */}
|
||||
<motion.div
|
||||
className="mt-20 rounded-xl overflow-hidden border bg-background/50 backdrop-blur-sm"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.3 }}
|
||||
>
|
||||
<div className="grid md:grid-cols-2 gap-0">
|
||||
<div className="p-8 md:p-12 flex flex-col justify-center">
|
||||
<div className="inline-block rounded-full bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary mb-4">
|
||||
Rekomendasi Terbaik
|
||||
<div className="inline-block rounded-full bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary mb-4 w-fit">
|
||||
{featured.label}
|
||||
</div>
|
||||
<h3 className="text-2xl md:text-3xl font-bold mb-4">
|
||||
Kursus Lengkap Web Development
|
||||
{featured.title}
|
||||
</h3>
|
||||
<p className="text-muted-foreground mb-6">
|
||||
Pelajari HTML, CSS, JavaScript, React, dan Node.js dalam satu
|
||||
kursus komprehensif yang dirancang untuk pemula hingga tingkat
|
||||
menengah.
|
||||
{featured.description}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<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">
|
||||
Mulai Kursus
|
||||
<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>
|
||||
<Button variant="outline">Lihat Silabus</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative h-64 md:h-auto">
|
||||
|
||||
Reference in New Issue
Block a user