From da0e599b9a476f44f80489217a2524061dbd227c Mon Sep 17 00:00:00 2001
From: ArraysID <arraysdotid@gmail.com>
Date: Sat, 10 May 2025 12:55:05 +0700
Subject: [PATCH] feat: enhance LearningResourcesSection with primary and
 secondary button links

---
 .../_components/learning-resources.tsx        | 45 +++++++++----------
 .../collections/LearningResourcesSection.ts   | 43 ++++++++----------
 apps/landing/src/payload-types.ts             |  4 ++
 3 files changed, 43 insertions(+), 49 deletions(-)

diff --git a/apps/landing/src/app/(frontend)/_components/learning-resources.tsx b/apps/landing/src/app/(frontend)/_components/learning-resources.tsx
index 2af7ae8..b64e945 100644
--- a/apps/landing/src/app/(frontend)/_components/learning-resources.tsx
+++ b/apps/landing/src/app/(frontend)/_components/learning-resources.tsx
@@ -36,19 +36,16 @@ export function LearningResources(props: LearningResourcesSection) {
       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">
@@ -59,52 +56,46 @@ export function LearningResources(props: LearningResourcesSection) {
             </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 bg-blue-100 dark:bg-blue-900">
                   <Icon
-                    icon={resource.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>
-                <a href={resource.buttonLink} target="_blank">
+                <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"
                   >
-                    {resource.buttonText} →
+                    {r.buttonText}
+                    <Icon icon="tabler:arrow-right" className="h-6 w-6" />
                   </Button>
                 </a>
               </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">
@@ -119,10 +110,16 @@ export function LearningResources(props: LearningResourcesSection) {
                 {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">
-                  Mulai Kursus
-                </Button>
-                <Button variant="outline">Lihat Silabus</Button>
+                <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">
+                    {featured.primaryButtonText}
+                  </Button>
+                </a>
+                <a href={featured.secondaryButtonLink} target="_blank">
+                  <Button variant="outline">
+                    {featured.secondaryButtonText}
+                  </Button>
+                </a>
               </div>
             </div>
             <div className="relative h-64 md:h-auto">
diff --git a/apps/landing/src/collections/LearningResourcesSection.ts b/apps/landing/src/collections/LearningResourcesSection.ts
index 2689245..ddc8505 100644
--- a/apps/landing/src/collections/LearningResourcesSection.ts
+++ b/apps/landing/src/collections/LearningResourcesSection.ts
@@ -1,3 +1,4 @@
+// payload config
 import { GlobalConfig } from 'payload';
 
 export const LearningResourcesSection: GlobalConfig = {
@@ -22,31 +23,11 @@ export const LearningResourcesSection: GlobalConfig = {
       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,
-        },
+        { 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: [
         {
@@ -112,12 +93,24 @@ export const LearningResourcesSection: GlobalConfig = {
           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: '#',
+        },
       ],
     },
   ],
diff --git a/apps/landing/src/payload-types.ts b/apps/landing/src/payload-types.ts
index e172913..c96a803 100644
--- a/apps/landing/src/payload-types.ts
+++ b/apps/landing/src/payload-types.ts
@@ -370,7 +370,9 @@ export interface LearningResourcesSection {
     title: string;
     description: string;
     primaryButtonText: string;
+    primaryButtonLink: string;
     secondaryButtonText: string;
+    secondaryButtonLink: string;
   };
   updatedAt?: string | null;
   createdAt?: string | null;
@@ -473,7 +475,9 @@ export interface LearningResourcesSectionSelect<T extends boolean = true> {
         title?: T;
         description?: T;
         primaryButtonText?: T;
+        primaryButtonLink?: T;
         secondaryButtonText?: T;
+        secondaryButtonLink?: T;
       };
   updatedAt?: T;
   createdAt?: T;