ok

src/components/ServicesSection.js

@@ -1,9 +1,59 @@
 import React from 'react';
 import { Container, Row, Col, Card } from 'react-bootstrap';
+import styles from './Styles.module.css';
 
 const ServicesSection = () => {
   return (
-    <section id="services" className="services py-5">
+    
+    <section id="services" className="services pt-5">
+      <Container>
+        <div className="section-heading text-center mb-4">
+          <h4>OUR <em>PRODUCTS</em></h4>
+          <img src="/assets/images/heading-line-dec.png" alt="" />
+          <p>Kami menyediakan berbagai solusi teknologi untuk mendukung transformasi digital bisnis dan masyarakat.</p>
+        </div>
+        <div className={styles.coursesGrid}>
+          {products &&
+            products[0]?.name &&
+            products.map(product => (
+              <div
+                key={product.id}
+                className={`${styles.courseCard} ${hoveredCard === product.id ? styles.courseCardHover : ''}`}
+                onClick={() => {
+                  setSelectedProduct(product);
+                  setShowedModal('product');
+                }}
+                onMouseEnter={() => setHoveredCard(product.id)}
+                onMouseLeave={() => setHoveredCard(null)}
+              >
+                <div className={styles.courseImage} style={{ backgroundImage: `url(${product.image})` }}>
+                  {product.price === 0 && (
+                    <span className={styles.courseLabel}>Free</span>
+                  )}
+                </div>
+                <div className={styles.courseContent}>
+                  <h3 className={styles.courseTitle}>{product.name}</h3>
+                  <p className={styles.courseDesc}>{product.description}</p>
+                  <div className={styles.coursePrice}>
+                    <span
+                      className={
+                        product.price === 0
+                          ? styles.freePrice
+                          : styles.currentPrice
+                      }
+                    >
+                      {product.price == null
+                        ? 'Pay-As-You-Go'
+                        : `Rp ${product.price.toLocaleString('id-ID')}`}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            ))}
+        </div>
+      </Container>
+    </section>
+    <section id="services" className="services pt-5">
       <Container>
         <div className="section-heading text-center mb-4">
           <h4>OUR <em>SERVICES</em></h4>