kediritechnopark/kediritechnopark.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
Vassshhh
2025-08-11 16:38:35 +07:00
parent 7d3655236e
commit 82518c96aa
18 changed files with 636 additions and 417 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/AcademySection.js
View File

@@ -6,7 +6,7 @@ const AcademySection = ({hoveredCard, setHoveredCard, setSelectedProduct, setSho
const [products, setProducts] = useState([]);
useEffect(() => {
fetch('https://bot.kediritechnopark.com/webhook/store-dev/products', {
fetch('https://bot.kediritechnopark.com/webhook/store-production/products', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
@@ -20,56 +20,57 @@ const AcademySection = ({hoveredCard, setHoveredCard, setSelectedProduct, setSho
return (
<section id="services" className="services pt-5">
<section id="services" className="services pt-5" ref={courseSectionRef}>
<Container>
<div className="section-heading text-center mb-4">
<div className="section-heading mb-4">
<h4>OUR <em>ACADEMY PROGRAM</em></h4>
<img src="/assets/images/heading-line-dec.png" alt="" />
<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>
<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>
<div className={styles.courseImage} style={{ backgroundImage: `url(${product.image})` }}>
{product.price === 0 && (
<span className={styles.courseLabel}>Free</span>
)}
</div>
<div className={styles.courseContentTop}>
<h3 className={styles.courseTitle}>{product.name}</h3>
<p className={styles.courseDesc}>{product.description}</p>
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>
<div className={styles.courseImage} style={{ backgroundImage: `url(${product.image})` }}>
{product.price === 0 && (
<span className={styles.courseLabel}>Free</span>
)}
</div>
<div className={styles.courseContentTop}>
<h3 className={styles.courseTitle}>{product.name}</h3>
<p className={styles.courseDesc}>{product.description}</p>
</div>
</div>
<div className={styles.courseContentBottom}>
<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 className={styles.courseContentBottom}>
<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>
</div>
))}
))}
</div>
</Container>
</section>