feat: enhance LearningResourcesSection with primary and secondary button links

2025-05-11 05:26:07 +07:00
parent 4a7135dd17
commit 6d29c81dad
3 changed files with 46 additions and 50 deletions
@@ -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,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 
-font-bold text-black hover:text-white cursor-pointer">
-                  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
+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>
              </div>
            </div>
            <div className="relative h-64 md:h-auto">
@@ -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: '#',
+        },
      ],
    },
  ],
@@ -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;