ok

src/components/AcademySection.js

@@ -1,7 +1,22 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Container, Row, Col, Card, Button } from 'react-bootstrap';
 
 const AcademySection = () => {
+  const [products, setProducts] = useState([]);
+
+  useEffect(() => {
+    fetch('https://bot.kediritechnopark.com/webhook/store-dev/products', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ type: 'course' }),
+    })
+      .then(res => res.json())
+      .then(data => setProducts(data))
+      .catch(err => console.error('Fetch error:', err));
+  }, []);
+
   return (
     <section id="academy" className="academy-tables py-5">
       <Container>
@@ -11,27 +26,27 @@ const AcademySection = () => {
           <p>Academy Program adalah wadah belajar digital untuk anak-anak dan remaja. Didesain interaktif, kreatif, dan gratis — setiap modul membekali peserta dengan keterampilan masa depan, dari teknologi dasar hingga coding dan proyek nyata.</p>
         </div>
         <Row>
-          {[
-            { title: 'Digital Funstart', items: ['Pengenalan teknologi', 'Interaktif & menyenangkan', 'Untuk anak-anak usia dini'] },
-            { title: 'KidCode', items: ['Belajar coding visual', 'Kreatif & edukatif', 'Untuk anak SD & SMP'] },
-            { title: 'Tech for Teens', items: ['Pengembangan skill digital', 'Remaja & pelajar', 'Berbasis proyek'] },
-            { title: 'IT Training Camp', items: ['Pelatihan intensif IT', 'Untuk semua usia', 'Instruktur profesional'] },
-            { title: 'Smart Teacher', items: ['Pelatihan guru', 'Integrasi teknologi', 'Media ajar digital'] },
-            { title: 'Smart Staff', items: ['Pelatihan digital untuk staf', 'Administrasi dan operasional', 'Penguatan sistem kerja'] },
-            { title: 'UMKM Go Digital', items: ['Digitalisasi bisnis kecil', 'Platform online', 'Pelatihan marketplace'] },
-            { title: 'Creative Spark', items: ['Inkubasi ide kreatif', 'Coaching & mentoring', 'Kompetisi & showcase'] },
-          ].map((program, idx) => (
-            <Col lg={3} key={idx} className="mb-4">
+          {products.map((product, idx) => (
+            <Col lg={3} md={4} sm={6} xs={12} key={idx} className="mb-4">
               <Card className="academy-item-regular h-100">
                 <Card.Body>
-                  <Card.Title>{program.title}</Card.Title>
+                  <Card.Title>{product.name}</Card.Title>
                   <div className="icon mb-3">
-                    <img src="/assets/images/pricing-table-01.png" alt="" />
+                    <img src={product.image || '/assets/images/pricing-table-01.png'} alt={product.name} className="img-fluid" />
                   </div>
                   <ul>
-                    {program.items.map((item, i) => (
-                      <li key={i}>{item}</li>
-                    ))}</ul>
+                    {product.duration && (
+                      <li>
+                        Durasi:{" "}
+                        {product.duration.hours
+                          ? `${product.duration.hours} jam`
+                          : product.duration.days
+                          ? `${product.duration.days} hari`
+                          : "-"}
+                      </li>
+                    )}
+                    <li>Harga: {product.currency} {product.price.toLocaleString()}</li>
+                  </ul>
                   <div className="border-button mt-3">
                     <Button variant="outline-primary" href="#program">Lihat Detail</Button>
                   </div>
@@ -45,4 +60,4 @@ const AcademySection = () => {
   );
 };
 
-export default AcademySection;
+export default AcademySection;