feat: add FeaturesSection global configuration and integrate with Features component

apps/landing/src/app/(frontend)/_components/features.tsx

@@ -6,40 +6,22 @@ import {
   LaptopIcon,
   UsersIcon,
 } from '@imphnen-frontend-service/shadcn-ui/atoms';
+import { FeaturesSection } from 'apps/landing/src/payload-types';
 import { motion, useInView } from 'framer-motion';
 import { useRef } from 'react';
 
-export function Features() {
+export function Features(props: FeaturesSection) {
+  const { heading, subheading, features } = props;
+
+  const featuresFormatted = features?.map((f) => ({
+    icon: IconMapper(String(f.icon)),
+    title: f.title,
+    description: f.description,
+  }));
+
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, amount: 0.2 });
 
-  const features = [
-    {
-      icon: <LaptopIcon className="h-6 w-6 text-primary" />,
-      title: 'Belajar Tanpa Koding',
-      description:
-        'Pelajari konsep programming dengan cara yang mudah dipahami tanpa harus menulis kode yang rumit.',
-    },
-    {
-      icon: <UsersIcon className="h-6 w-6 text-primary" />,
-      title: 'Komunitas Supportif',
-      description:
-        'Bergabunglah dengan komunitas programmer Indonesia yang siap membantu dan berbagi pengalaman.',
-    },
-    {
-      icon: <BookOpenIcon className="h-6 w-6 text-primary" />,
-      title: 'Tutorial Interaktif',
-      description:
-        'Akses tutorial interaktif yang membuat konsep programming lebih mudah untuk dipahami.',
-    },
-    {
-      icon: <CodeIcon className="h-6 w-6 text-primary" />,
-      title: 'Proyek Praktis',
-      description:
-        'Terapkan pengetahuan Anda dalam proyek nyata dengan panduan langkah demi langkah.',
-    },
-  ];
-
   const containerVariants = {
     hidden: { opacity: 0 },
     visible: {
@@ -64,7 +46,6 @@ export function Features() {
       id="fitur"
       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-muted/50" />
         <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] rounded-full bg-gradient-to-tr from-primary/5 to-blue-400/5 blur-3xl" />
@@ -82,14 +63,10 @@ export function Features() {
               Fitur Unggulan
             </div>
             <h2 className="text-3xl font-bold tracking-tighter md:text-4xl/tight lg:text-5xl">
-              Belajar programming dengan{' '}
-              <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400">
-                cara yang lebih baik
-              </span>
+              {heading}
             </h2>
             <p className="max-w-[800px] mx-auto text-muted-foreground md:text-lg">
-              IMPHNEN hadir dengan berbagai fitur untuk membantu kamu menjadi
-              programmer handal tanpa harus pusing dengan coding.
+              {subheading}
             </p>
           </motion.div>
         </div>
@@ -100,7 +77,7 @@ export function Features() {
           initial="hidden"
           animate={isInView ? 'visible' : 'hidden'}
         >
-          {features.map((feature, index) => (
+          {featuresFormatted?.map((feature, index) => (
             <motion.div
               key={index}
               className="group relative overflow-hidden rounded-xl border bg-background/50 backdrop-blur-sm p-6 transition-all hover:shadow-md hover:shadow-primary/5 hover:border-primary/50"
@@ -124,3 +101,18 @@ export function Features() {
     </section>
   );
 }
+
+function IconMapper(name: string) {
+  switch (name) {
+    case 'LaptopIcon':
+      return <LaptopIcon className="h-6 w-6 text-primary" />;
+    case 'UsersIcon':
+      return <UsersIcon className="h-6 w-6 text-primary" />;
+    case 'BookOpenIcon':
+      return <BookOpenIcon className="h-6 w-6 text-primary" />;
+    case 'CodeIcon':
+      return <CodeIcon className="h-6 w-6 text-primary" />;
+    default:
+      return null;
+  }
+}