From 82c1d553ce7362e39cb53109c811a1bcf8f91512 Mon Sep 17 00:00:00 2001
From: everythingonblack <zaditgans671555@gmail.com>
Date: Thu, 31 Jul 2025 12:07:39 +0700
Subject: [PATCH] ok

---
 src/components/AboutUsSection.js        |  2 +-
 src/components/AcademySection.js        |  2 +-
 src/components/ClientsSection.js        |  2 +-
 src/components/HeroSection.js           |  4 +-
 src/components/KnowledgeBaseSection.js  |  2 +-
 src/components/ProductDetail.module.css |  4 ++
 src/components/ProductDetailPage.js     |  2 +-
 src/components/ProductSection.js        |  2 +-
 src/components/ServicesSection.js       | 52 ++++++++++++++++++++++++-
 src/components/Styles.module.css        |  2 +-
 10 files changed, 64 insertions(+), 10 deletions(-)

diff --git a/src/components/AboutUsSection.js b/src/components/AboutUsSection.js
index 8c57757..527b75f 100644
--- a/src/components/AboutUsSection.js
+++ b/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}>
diff --git a/src/components/AcademySection.js b/src/components/AcademySection.js
index 6bc9166..2160e7e 100644
--- a/src/components/AcademySection.js
+++ b/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>
diff --git a/src/components/ClientsSection.js b/src/components/ClientsSection.js
index 28838eb..fea48c2 100644
--- a/src/components/ClientsSection.js
+++ b/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 }}>
diff --git a/src/components/HeroSection.js b/src/components/HeroSection.js
index a9f231d..9796198 100644
--- a/src/components/HeroSection.js
+++ b/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>
diff --git a/src/components/KnowledgeBaseSection.js b/src/components/KnowledgeBaseSection.js
index 604817b..850aff1 100644
--- a/src/components/KnowledgeBaseSection.js
+++ b/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 }}>
diff --git a/src/components/ProductDetail.module.css b/src/components/ProductDetail.module.css
index c48ab22..04616b5 100644
--- a/src/components/ProductDetail.module.css
+++ b/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 {
diff --git a/src/components/ProductDetailPage.js b/src/components/ProductDetailPage.js
index 4f27524..fc8bd3d 100644
--- a/src/components/ProductDetailPage.js
+++ b/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>
diff --git a/src/components/ProductSection.js b/src/components/ProductSection.js
index deec58d..1d862d7 100644
--- a/src/components/ProductSection.js
+++ b/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>
diff --git a/src/components/ServicesSection.js b/src/components/ServicesSection.js
index a4ba497..01d47bd 100644
--- a/src/components/ServicesSection.js
+++ b/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>
diff --git a/src/components/Styles.module.css b/src/components/Styles.module.css
index 13e823a..388d74b 100644
--- a/src/components/Styles.module.css
+++ b/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;
     }