ok

src/components/AboutUsSection.js

@@ -3,7 +3,7 @@ import { Container, Row, Col, Button } from 'react-bootstrap';
 
 const AboutUsSection = () => {
   return (
-    <section id="about" className="about-us section py-5">
+    <section id="about" className="about-us section pt-5">
       <Container>
         <Row className="align-items-center">
           <Col lg={6}>

src/components/AcademySection.js

@@ -20,7 +20,7 @@ const AcademySection = ({hoveredCard, setHoveredCard, setSelectedProduct, setSho
 
   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>ACADEMY PROGRAM</em></h4>

src/components/ClientsSection.js

@@ -3,7 +3,7 @@ import { Container, Row, Col, Image } from 'react-bootstrap';
 
 const ClientsSection = () => {
   return (
-    <section id="clients" className="the-clients section py-5">
+    <section id="clients" className="the-clients section pt-5">
       <Container>
         <Row>
           <Col lg={{ span: 8, offset: 2 }}>

src/components/HeroSection.js

@@ -3,7 +3,7 @@ import { Container, Row, Col, Button } from 'react-bootstrap';
 
 const HeroSection = () => {
   return (
-    <section className="hero-section py-5 bg-light">
+    <section className="hero-section pt-5 bg-light">
       <Container>
         <Row className="align-items-center">
           <Col lg={6}>
@@ -15,7 +15,7 @@ const HeroSection = () => {
             </div>
           </Col>
           <Col lg={6}>
-            <img src="/assets/images/gambar1.png" alt="Hero Image" className="img-fluid" />
+            <img src="https://kediritechnopark.com/assets/images/gambar1.png" alt="Hero Image" className="img-fluid" />
           </Col>
         </Row>
       </Container>

src/components/KnowledgeBaseSection.js

@@ -3,7 +3,7 @@ import { Container, Row, Col } from 'react-bootstrap';
 
 const KnowledgeBaseSection = () => {
   return (
-    <section id="knowledge" className="knowledge section py-5">
+    <section id="knowledge" className="knowledge section pt-5">
       <Container>
         <Row>
           <Col lg={{ span: 8, offset: 2 }}>

src/components/ProductDetail.module.css

@@ -20,6 +20,10 @@
   color: #64748b;
   font-size: 1rem;
   margin-bottom: 1.5rem;
+  
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
 }
 
 .headerRow {

src/components/ProductDetailPage.js

@@ -95,7 +95,7 @@ const ProductDetail = ({ product, setPostLoginAction, setShowedModal }) => {
 
   return (
     <div className={styles.container}>
-      <div className={styles.image}>📦</div>
+      <div className={styles.image} style={{ backgroundImage: `url(${product.image})` }}></div>
 
       <div className={styles.headerRow}>
         <h2 className={styles.title}>{product.name}</h2>

src/components/ProductSection.js

@@ -21,7 +21,7 @@ const ProductSection = ({ hoveredCard, setHoveredCard, setSelectedProduct, setSh
 
   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>

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>

src/components/Styles.module.css

@@ -513,7 +513,7 @@
 
     .ctaContainer,
     .coursesGrid {
-        grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(173px, 1fr));
         gap: 0.8rem;
     }