feat: enhance LearningResourcesSection with primary and secondary button links

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}
+              key={i}
-              className="group relative overflow-hidden rounded-xl border bg-background p-6 transition-all hover:shadow-lg"
+              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>
+                <h3 className="mb-2 text-xl font-bold">{r.title}</h3>
-                <p className="mb-6 text-muted-foreground">
+                <p className="mb-6 text-muted-foreground">{r.description}</p>
-                  {resource.description}
+                <a href={r.buttonLink} target="_blank">
-                </p>
-                <a href={resource.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,11 +110,19 @@ 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 
+                <a href={featured.primaryButtonLink} target="_blank">
-font-bold text-black hover:text-white cursor-pointer">
+                  <Button
-                  Mulai Kursus
+                    className="bg-gradient-to-r from-primary to-blue-400 hover:from-primary/90 hover:to-blue-400/90
-                </Button>
+font-bold text-black hover:text-white cursor-pointer"
-                <Button variant="outline">Lihat Silabus</Button>
+                  >
+                    {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">

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: 'icon',
+        { name: 'title', type: 'text', required: true },
-          type: 'text',
+        { name: 'description', type: 'textarea', required: true },
-          required: true,
+        { name: 'buttonText', type: 'text', required: true },
-        },
+        { name: 'buttonLink', 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: '#',
+        },
       ],
     },
   ],

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;