- Kediri Technopark
- 
-
+ {
+ if (typeof courseSectionRef === 'function') courseSectionRef(el);
+ if (ref) ref.current = el;
+ }}>
-
-
+ }}>Daftar
))}
diff --git a/src/components/AnimatedBackground.js b/src/components/AnimatedBackground.js
new file mode 100644
index 0000000..76e263c
--- /dev/null
+++ b/src/components/AnimatedBackground.js
@@ -0,0 +1,161 @@
+import React, { useRef, useEffect } from 'react';
+import styles from './AnimatedBackground.module.css';
+
+const AnimatedBackground = () => {
+ const canvasRef = useRef(null);
+
+ useEffect(() => {
+ const canvas = canvasRef.current;
+ const ctx = canvas.getContext('2d');
+ let animationFrameId;
+ let particles = [];
+
+ // Determine particle count based on screen size
+ const getParticleCount = () => {
+ const width = window.innerWidth;
+ if (width <= 400) return 30; // Very small screens
+ if (width <= 576) return 40; // Small screens
+ if (width <= 768) return 50; // Medium screens
+ return 70; // Large screens
+ };
+
+ function Particle(x, y, vx, vy) {
+ this.x = x; this.y = y; this.vx = vx; this.vy = vy;
+
+ // Adjust particle radius based on screen size
+ if (window.innerWidth <= 400) {
+ this.radius = 1.0; // Smaller radius for very small screens
+ } else if (window.innerWidth <= 576) {
+ this.radius = 1.2; // Medium radius for small screens
+ } else {
+ this.radius = 1.5; // Default radius for larger screens
+ }
+ }
+
+ const setupCanvas = () => {
+ const parent = canvas.parentElement;
+ if (!parent) return;
+
+ const dpr = window.devicePixelRatio || 1;
+ const rect = parent.getBoundingClientRect();
+ const cssWidth = parent.clientWidth;
+ const cssHeight = parent.clientHeight;
+
+ canvas.width = cssWidth * dpr;
+ canvas.height = cssHeight * dpr;
+ canvas.style.width = `${cssWidth}px`;
+ canvas.style.height = `${cssHeight}px`;
+
+ ctx.scale(dpr, dpr);
+
+ // Get particle count based on current screen size
+ const particleCount = getParticleCount();
+
+ particles = [];
+ for (let i = 0; i < particleCount; i++) {
+ particles.push(new Particle(Math.random() * cssWidth, Math.random() * cssHeight, (Math.random() - 0.5) * 0.5, (Math.random() - 0.5) * 0.5));
+ }
+ };
+
+ function connectParticles() {
+ const cssWidth = canvas.clientWidth;
+ const cssHeight = canvas.clientHeight;
+
+ // Adjust connection distance based on screen size
+ let connectionDistance = 90;
+ if (window.innerWidth <= 400) {
+ connectionDistance = 60; // Smaller connection distance for very small screens
+ } else if (window.innerWidth <= 576) {
+ connectionDistance = 70; // Medium connection distance for small screens
+ }
+
+ for (let i = 0; i < particles.length; i++) {
+ for (let j = i + 1; j < particles.length; j++) {
+ const p1 = particles[i];
+ const p2 = particles[j];
+
+ // Array posisi p2, termasuk "hantu" di 8 sisi lain
+ const p2Positions = [
+ { x: p2.x, y: p2.y }, // Posisi asli
+ { x: p2.x + cssWidth, y: p2.y }, // Kanan
+ { x: p2.x - cssWidth, y: p2.y }, // Kiri
+ { x: p2.x, y: p2.y + cssHeight }, // Bawah
+ { x: p2.x, y: p2.y - cssHeight }, // Atas
+ { x: p2.x + cssWidth, y: p2.y + cssHeight }, // Kanan-bawah
+ { x: p2.x - cssWidth, y: p2.y - cssHeight }, // Kiri-atas
+ { x: p2.x + cssWidth, y: p2.y - cssHeight }, // Kanan-atas
+ { x: p2.x - cssWidth, y: p2.y + cssHeight } // Kiri-bawah
+ ];
+
+ // Cari jarak terpendek ke p2 atau salah satu hantunya
+ for (const pos of p2Positions) {
+ const distance = Math.sqrt((p1.x - pos.x) ** 2 + (p1.y - pos.y) ** 2);
+
+ if (distance < connectionDistance) {
+ ctx.strokeStyle = `rgba(255, 255, 255, ${1 - distance / connectionDistance})`;
+ ctx.lineWidth = 0.5;
+ ctx.beginPath();
+ ctx.moveTo(p1.x, p1.y);
+ ctx.lineTo(pos.x, pos.y); // Gambar garis ke posisi terdekat (bisa jadi hantu)
+ ctx.stroke();
+ break; // Hanya gambar satu garis terpendek
+ }
+ }
+ }
+ }
+ }
+
+ function animate() {
+ const cssWidth = canvas.clientWidth;
+ const cssHeight = canvas.clientHeight;
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ // Adjust animation speed based on screen size
+ let speedFactor = 1.0;
+ if (window.innerWidth <= 400) {
+ speedFactor = 0.7; // Slower animation for very small screens
+ } else if (window.innerWidth <= 576) {
+ speedFactor = 0.8; // Slightly slower animation for small screens
+ }
+
+ for (const p of particles) {
+ // LOGIKA BARU: Partikel tembus (wrapping) bukan memantul (bounce)
+ if (p.x > cssWidth + p.radius) p.x = -p.radius;
+ else if (p.x < -p.radius) p.x = cssWidth + p.radius;
+
+ if (p.y > cssHeight + p.radius) p.y = -p.radius;
+ else if (p.y < -p.radius) p.y = cssHeight + p.radius;
+
+ p.x += p.vx * speedFactor;
+ p.y += p.vy * speedFactor;
+
+ ctx.beginPath();
+ ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
+ ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+ ctx.fill();
+ }
+
+ connectParticles();
+ animationFrameId = requestAnimationFrame(animate);
+ }
+
+ setupCanvas();
+ animate();
+
+ // Handle resize events to adjust particle count
+ const handleResize = () => {
+ setupCanvas();
+ };
+
+ window.addEventListener('resize', handleResize);
+
+ return () => {
+ cancelAnimationFrame(animationFrameId);
+ window.removeEventListener('resize', handleResize);
+ };
+ }, []);
+
+ return ;
+};
+
+export default AnimatedBackground;
diff --git a/src/components/AnimatedBackground.module.css b/src/components/AnimatedBackground.module.css
new file mode 100644
index 0000000..409091b
--- /dev/null
+++ b/src/components/AnimatedBackground.module.css
@@ -0,0 +1,7 @@
+.particleCanvas {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 0;
+ /* Ukuran akan diatur oleh JavaScript */
+}
\ No newline at end of file
diff --git a/src/components/ClientsSection.js b/src/components/ClientsSection.js
index 2e89379..dc5ec8f 100644
--- a/src/components/ClientsSection.js
+++ b/src/components/ClientsSection.js
@@ -1,6 +1,7 @@
import React from 'react';
import { Container, Row, Col, Image } from 'react-bootstrap';
import styles from './Styles.module.css';
+import useInView from '../hooks/useInView';
const ClientsSection = () => {
const logos = [
@@ -10,8 +11,9 @@ const ClientsSection = () => {
'psi.png',
];
+ const { ref, inView } = useInView();
return (
- ABOUT US
-
-
- Kediri Technopark: Katalis Inovasi dan Pusat Pertumbuhan Digital Lokal
- Kediri Technopark adalah inisiatif strategis yang bertujuan membangun ekosistem teknologi dan inovasi yang dinamis di Kediri, Jawa Timur. Kami menyediakan infrastruktur, sumber daya, dan komunitas pendukung yang dibutuhkan untuk mendorong pertumbuhan startup dan bisnis IT yang sudah ada.
- Dengan misi memberdayakan talenta lokal, menjembatani teknologi dan industri, serta mempercepat transformasi digital, Kediri Technopark berkomitmen menjadi penggerak kemajuan ekonomi dan teknologi, baik di tingkat lokal maupun nasional.
-
-
-
+
+
);
};
-export default AboutUsSection;
\ No newline at end of file
+export default AboutUsSection;
diff --git a/src/components/AboutUsSection.module.css b/src/components/AboutUsSection.module.css
new file mode 100644
index 0000000..571c33a
--- /dev/null
+++ b/src/components/AboutUsSection.module.css
@@ -0,0 +1,60 @@
+.aboutSection {
+ padding: 80px 0; /* Ditinggikan dari 60px */
+ position: relative;
+ background-color: #0f172a; /* Latar belakang biru gelap (slate-900) */
+}
+
+/* Menghapus .blueprintGrid */
+
+.contentWrapper {
+ position: relative;
+ z-index: 1;
+}
+
+.textContent {
+ text-align: center;
+}
+
+.sectionTitle {
+ font-family: 'Inter', sans-serif;
+ font-weight: 700;
+ font-size: clamp(1.8rem, 4vw, 2.2rem);
+ color: #ffffff; /* Warna teks putih */
+ letter-spacing: -0.02em;
+ margin-bottom: 16px;
+}
+
+.paragraph {
+ font-family: 'Inter', sans-serif;
+ font-size: 1.1rem;
+ line-height: 1.7;
+ color: #cbd5e1; /* Warna teks abu-abu terang (slate-300) */
+ margin-bottom: 24px;
+ max-width: 700px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.valueList {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ gap: 24px;
+ flex-wrap: wrap;
+}
+
+.valueList li {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ font-family: 'Inter', sans-serif;
+ font-size: 1.05rem;
+ color: #f1f5f9; /* Warna teks putih keabuan (slate-100) */
+}
+
+.listIcon {
+ color: #38bdf8; /* Warna ikon biru cerah (sky-400) */
+ flex-shrink: 0;
+}
diff --git a/src/components/AcademySection.js b/src/components/AcademySection.js
index 3980091..b60385a 100644
--- a/src/components/AcademySection.js
+++ b/src/components/AcademySection.js
@@ -1,32 +1,60 @@
import React, { useEffect, useState } from 'react';
import { Container } from 'react-bootstrap';
import styles from './Styles.module.css';
+import useInView from '../hooks/useInView';
const AcademySection = ({setSelectedProduct, setShowedModal, courseSectionRef, setWillDo}) => {
const [products, setProducts] = useState([]);
const [hoveredCard, setHoveredCard] = useState(null);
useEffect(() => {
+ // Fetch all items to compute module/sessions reliably, then filter courses client-side
fetch('https://bot.kediritechnopark.com/webhook/store-production/products', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
- body: JSON.stringify({ type: 'course' }),
+ body: JSON.stringify({}),
})
.then(res => res.json())
- .then(data => setProducts(data))
+ .then(data => {
+ const all = Array.isArray(data) ? data : [];
+ const moduleCountMap = {};
+ const sessionsCountMap = {};
+ all.forEach(item => {
+ const parentId = item?.sub_product_of;
+ if (parentId) {
+ moduleCountMap[parentId] = (moduleCountMap[parentId] || 0) + 1;
+ const s = Number(item?.sessions || item?.session_count || 0);
+ sessionsCountMap[parentId] = (sessionsCountMap[parentId] || 0) + (isNaN(s) ? 0 : s);
+ }
+ });
+ const coursesOnly = all.filter(p => (p?.type || '').toLowerCase() === 'course');
+ const enriched = coursesOnly.map(p => ({
+ ...p,
+ module_count: p?.module_count ?? p?.modules ?? moduleCountMap[p.id] ?? 0,
+ session_count: p?.session_count ?? p?.sessions ?? sessionsCountMap[p.id] ?? 0,
+ }));
+ setProducts(enriched);
+ })
.catch(err => console.error('Fetch error:', err));
}, []);
+ const { ref, inView } = useInView();
return (
-
+
+
+
-
-
+
- Tentang Kami
++ Kediri Technopark adalah ekosistem inovasi yang didedikasikan untuk mendorong pertumbuhan talenta digital dan akselerasi bisnis teknologi. Kami menyediakan fasilitas, program, dan jaringan yang dibutuhkan untuk mengubah ide brilian menjadi solusi nyata yang berdampak. +
+-
+
Inovasi Berkelanjutan
+ Kolaborasi Komunitas
+ Pemberdayaan Talenta
+
- 
-
-
-
-
+
+
+
+
-
-
-
@@ -69,12 +104,12 @@ const AcademySection = ({setSelectedProduct, setShowedModal, courseSectionRef, s
: `Rp ${product.price.toLocaleString('id-ID')}`}
OUR ACADEMY PROGRAM
-
- 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.
+
+
Academy
+ Our Academy Program
+ ++ 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. +
@@ -51,7 +79,14 @@ const AcademySection = ({setSelectedProduct, setShowedModal, courseSectionRef, s
)}
-
{product.name}
+
+
+
{product.name}
+
+ {Number(product?.module_count || 0)} Modul
+ {Number(product?.session_count || 0)} Sesi
+
+ {product.description}
Tidak ada produk tersedia
;
+ }
+
+ // Prefer 5-slot coverflow when data memadai; fallback ke jumlah ganjil saat produk < 5
+ let positions = [];
+ if (products.length >= 5) {
+ positions = [-2, -1, 0, 1, 2];
+ } else {
+ const visibleCountRaw = Math.min(5, products.length);
+ const visibleCount = visibleCountRaw % 2 === 0 ? Math.max(1, visibleCountRaw - 1) : visibleCountRaw;
+ const half = Math.floor(visibleCount / 2);
+ positions = Array.from({ length: visibleCount }, (_, i) => i - half);
+ }
+
+ return (
+
+
+ );
+};
+
+export default CoverflowCarousel;
diff --git a/src/components/CoverflowCarousel.module.css b/src/components/CoverflowCarousel.module.css
new file mode 100644
index 0000000..4e798ab
--- /dev/null
+++ b/src/components/CoverflowCarousel.module.css
@@ -0,0 +1,655 @@
+.container {
+ position: relative;
+ width: 100%;
+ height: 450px;
+ overflow: hidden;
+ touch-action: none;
+ margin: 40px 0 60px 0;
+ perspective: 1000px;
+ cursor: grab;
+ user-select: none;
+}
+
+/* Left and right fade out masks */
+.leftMask,
+.rightMask {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 100px;
+ z-index: 20;
+ pointer-events: none;
+}
+
+.leftMask {
+ left: 0;
+ background: linear-gradient(to right, #0b1220, transparent);
+}
+
+.rightMask {
+ right: 0;
+ background: linear-gradient(to left, #0b1220, transparent);
+}
+
+.container.dragging {
+ cursor: grabbing;
+}
+
+.carouselWrapper {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transform-style: preserve-3d;
+ perspective: 1500px;
+}
+
+/* Entering edge helpers to ensure ease-out even with <5 products */
+/* entering helpers removed (reverted) */
+
+/* Edge fade-out on shift for better intuition */
+.carouselWrapper.shiftingLeft .cardContainer.positionNeg2 {
+ opacity: 0;
+ transform: translateX(-420px) rotateY(62deg) scale(0.66);
+}
+
+.carouselWrapper.shiftingRight .cardContainer.position2 {
+ opacity: 0;
+ transform: translateX(420px) rotateY(-62deg) scale(0.66);
+}
+
+.cardContainer {
+ position: absolute;
+ width: 320px;
+ height: 370px;
+ cursor: pointer;
+ transform-style: preserve-3d;
+ will-change: transform;
+ backface-visibility: hidden;
+ transform-origin: center center;
+ transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
+ opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
+ transform: translateX(0) rotateY(0) scale(1);
+ opacity: 1;
+ z-index: 1;
+ box-sizing: border-box;
+ aspect-ratio: 320/370;
+}
+
+.cardWrapper {
+ width: 100%;
+ height: 100%;
+ padding: 0 15px;
+ transform-style: preserve-3d;
+ backface-visibility: hidden;
+ box-sizing: border-box;
+ position: relative;
+ z-index: 2; /* ensure content stacks above shadow */
+}
+
+/* Ground shadow to enhance 3D standing effect */
+.cardShadow {
+ position: absolute;
+ left: 50%;
+ bottom: 6px;
+ width: 92%;
+ height: 32px;
+ transform: translateX(-50%) scale(1);
+ background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.32) 45%, rgba(0,0,0,0) 78%);
+ filter: blur(8px);
+ opacity: 0.45;
+ pointer-events: none;
+ z-index: 1;
+}
+
+.cardContainer.position0 .cardShadow {
+ opacity: 0.8;
+ transform: translateX(-50%) scale(1.15);
+}
+
+.cardContainer.positionNeg1 .cardShadow,
+.cardContainer.position1 .cardShadow {
+ opacity: 0.55;
+ transform: translateX(-50%) scale(1.02);
+}
+
+.cardContainer.positionNeg2 .cardShadow,
+.cardContainer.position2 .cardShadow {
+ opacity: 0.42;
+ transform: translateX(-50%) scale(0.96);
+}
+
+/* Initial state: subtle pop-in */
+.cardContainer.initial {
+ transform: translateX(0) translateY(20px) rotateY(0) scale(0.92);
+ opacity: 0;
+ z-index: 1;
+}
+
+/* New load spread: compact fan-out from center */
+.cardContainer.spread.positionNeg2 {
+ transform: translateX(-320px) translateZ(-120px) rotateY(10deg) scale(0.9);
+ opacity: 0.8;
+}
+
+.cardContainer.spread.positionNeg1 {
+ transform: translateX(-160px) translateZ(-60px) rotateY(6deg) scale(0.97);
+ opacity: 0.9;
+}
+
+.cardContainer.spread.position0 {
+ transform: translateX(0) translateZ(0) rotateY(0) scale(1.06);
+ opacity: 1;
+}
+
+.cardContainer.spread.position1 {
+ transform: translateX(160px) translateZ(-60px) rotateY(-6deg) scale(0.97);
+ opacity: 0.9;
+}
+
+.cardContainer.spread.position2 {
+ transform: translateX(320px) translateZ(-120px) rotateY(-10deg) scale(0.9);
+ opacity: 0.8;
+}
+
+/* Position classes for coverflow effect (closer to center) */
+.cardContainer.positionNeg2 {
+ transform: translateX(-380px) rotateY(55deg) scale(0.7);
+ opacity: 1;
+ z-index: 5;
+}
+
+.cardContainer.positionNeg1 {
+ transform: translateX(-190px) rotateY(35deg) scale(0.8);
+ opacity: 1;
+ z-index: 10;
+}
+
+.cardContainer.position0 {
+ transform: translateX(0) rotateY(0deg) scale(1);
+ opacity: 1;
+ z-index: 15;
+}
+
+.cardContainer.position1 {
+ transform: translateX(190px) rotateY(-35deg) scale(0.8);
+ opacity: 1;
+ z-index: 10;
+}
+
+.cardContainer.position2 {
+ transform: translateX(380px) rotateY(-55deg) scale(0.7);
+ opacity: 1;
+ z-index: 5;
+}
+
+/* Edge-enter overrides (placed after position rules to win cascade) */
+.cardContainer.enterFromRight.position1,
+.cardContainer.enterFromRight.position2 {
+ opacity: 0;
+ transform: translateX(520px) rotateY(-62deg) scale(0.66);
+}
+
+.cardContainer.enterFromLeft.positionNeg1,
+.cardContainer.enterFromLeft.positionNeg2 {
+ opacity: 0;
+ transform: translateX(-520px) rotateY(62deg) scale(0.66);
+}
+
+.cardImage {
+ width: 100%;
+ height: 120px;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ transition: transform 0.4s ease;
+ position: relative;
+ background-color: #f1f5f9;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ object-fit: cover;
+ aspect-ratio: 4/3;
+ overflow: hidden;
+}
+
+.placeholderImage {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ background-color: #f1f5f9;
+ object-fit: cover;
+ aspect-ratio: 4/3;
+ overflow: hidden;
+}
+
+.placeholderImage span {
+ font-size: 2rem;
+ opacity: 0.3;
+}
+
+.cardContent {
+ padding: 1rem;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+}
+
+.cardTitle {
+ font-size: 1.1rem;
+ font-weight: 700;
+ color: #1e293b;
+ margin-bottom: 0.5rem;
+ line-height: 1.3;
+ flex: 1;
+}
+
+.cardDescription {
+ color: #64748b;
+ line-height: 1.5;
+ margin-bottom: 1rem;
+ font-size: 0.85rem;
+ flex: 1;
+}
+
+.cardFooter {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-top: 1px solid #e2e8f0;
+ padding-top: 1rem;
+ margin-top: auto;
+}
+
+.priceContainer {
+ flex: 1;
+}
+
+.price {
+ font-size: 1rem;
+ font-weight: 700;
+}
+
+.freePrice {
+ color: #059669;
+}
+
+.paidPrice {
+ color: #2563eb;
+}
+
+.enrollButton {
+ background: linear-gradient(135deg, #6a59ff 0%, #8261ee 100%);
+ color: white;
+ border: none;
+ padding: 0.5rem 1rem;
+ border-radius: 8px;
+ font-size: 0.8rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 15px rgba(106, 89, 255, 0.2);
+ flex-shrink: 0;
+}
+
+.enrollButton:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 20px rgba(106, 89, 255, 0.3);
+}
+
+.enrollButton:active {
+ transform: translateY(0);
+}
+
+.noCourses {
+ text-align: center;
+ grid-column: 1 / -1;
+ padding: 3rem;
+ color: #64748b;
+}
+
+.loadingCourses {
+ text-align: center;
+ grid-column: 1 / -1;
+ padding: 3rem;
+ color: #64748b;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 1rem;
+}
+
+.loadingSpinner {
+ width: 24px;
+ height: 24px;
+ border: 3px solid #e2e8f0;
+ border-top: 3px solid #6a59ff;
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+/* Navigation buttons */
+.navButton {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ background-color: white;
+ border: 2px solid #e2e8f0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ color: #475569;
+ z-index: 100;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.navButton:hover:not(:disabled) {
+ border-color: #6a59ff;
+ color: #6a59ff;
+ box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+}
+
+.navButton:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+.navButton:first-of-type {
+ left: 30px;
+}
+
+.navButton:last-of-type {
+ right: 30px;
+}
+
+/* Dots indicator */
+.dotsContainer {
+ position: absolute;
+ bottom: -40px;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ gap: 12px;
+ z-index: 100;
+}
+
+.dot {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ background-color: #cbd5e1;
+ border: none;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ transform: scale(1);
+}
+
+.dot.active {
+ background-color: #6a59ff;
+ transform: scale(1.2);
+}
+
+.dot:hover {
+ background-color: #94a3b8;
+}
+
+/* Responsive design */
+@media (max-width: 1200px) {
+ .container {
+ height: 430px;
+ margin: 35px 0 55px 0;
+ }
+
+ .cardContainer {
+ width: 300px;
+ height: 350px;
+ }
+
+ .navButton {
+ width: 45px;
+ height: 45px;
+ }
+
+ .navButton:first-of-type {
+ left: 25px;
+ }
+
+ .navButton:last-of-type {
+ right: 25px;
+ }
+
+ .dotsContainer {
+ bottom: -35px;
+ }
+
+ .leftMask,
+ .rightMask {
+ width: 80px;
+ }
+}
+
+@media (max-width: 992px) {
+ .container {
+ height: 410px;
+ margin: 30px 0 50px 0;
+ }
+
+ .cardContainer {
+ width: 280px;
+ height: 330px;
+ }
+
+ .cardWrapper {
+ padding: 0 12px;
+ }
+
+ .navButton {
+ width: 40px;
+ height: 40px;
+ }
+
+ .navButton:first-of-type {
+ left: 20px;
+ }
+
+ .navButton:last-of-type {
+ right: 20px;
+ }
+
+ .dotsContainer {
+ bottom: -30px;
+ }
+
+ .dot {
+ width: 10px;
+ height: 10px;
+ }
+
+ .leftMask,
+ .rightMask {
+ width: 70px;
+ }
+}
+
+@media (max-width: 768px) {
+ .container {
+ height: 380px;
+ margin: 25px 0 45px 0;
+ }
+
+ .cardContainer {
+ width: 250px;
+ height: 300px;
+ }
+
+ .cardWrapper {
+ padding: 0 10px;
+ }
+
+ .navButton {
+ width: 35px;
+ height: 35px;
+ }
+
+ .navButton:first-of-type {
+ left: 15px;
+ }
+
+ .navButton:last-of-type {
+ right: 15px;
+ }
+
+ .navButton svg {
+ width: 20px;
+ height: 20px;
+ }
+
+ .dotsContainer {
+ bottom: -25px;
+ gap: 10px;
+ }
+
+ .dot {
+ width: 9px;
+ height: 9px;
+ }
+
+ .leftMask,
+ .rightMask {
+ width: 60px;
+ }
+}
+
+@media (max-width: 576px) {
+ .container {
+ height: 320px;
+ margin: 20px 0 40px 0;
+ }
+
+ .cardContainer {
+ width: 200px;
+ height: 250px;
+ }
+
+ .cardWrapper {
+ padding: 0 6px;
+ }
+
+ .navButton {
+ width: 30px;
+ height: 30px;
+ }
+
+ .navButton:first-of-type {
+ left: 10px;
+ }
+
+ .navButton:last-of-type {
+ right: 10px;
+ }
+
+ .navButton svg {
+ width: 16px;
+ height: 16px;
+ }
+
+ .dotsContainer {
+ bottom: -20px;
+ gap: 8px;
+ }
+
+ .dot {
+ width: 8px;
+ height: 8px;
+ }
+
+ /* Adjust positions for smaller screens */
+ .cardContainer.positionNeg2 {
+ transform: translateX(-280px) rotateY(55deg) scale(0.6);
+ }
+
+ .cardContainer.positionNeg1 {
+ transform: translateX(-140px) rotateY(35deg) scale(0.75);
+ }
+
+ .cardContainer.position1 {
+ transform: translateX(140px) rotateY(-35deg) scale(0.75);
+ }
+
+ .cardContainer.position2 {
+ transform: translateX(280px) rotateY(-55deg) scale(0.6);
+ }
+
+ .leftMask,
+ .rightMask {
+ width: 50px;
+ }
+}
+
+@media (max-width: 400px) {
+ .container {
+ height: 280px;
+ margin: 15px 0 35px 0;
+ }
+
+ .cardContainer {
+ width: 180px;
+ height: 230px;
+ }
+
+ .navButton {
+ width: 28px;
+ height: 28px;
+ }
+
+ .navButton svg {
+ width: 14px;
+ height: 14px;
+ }
+
+ .dotsContainer {
+ bottom: -18px;
+ }
+
+ .dot {
+ width: 7px;
+ height: 7px;
+ }
+
+ /* Further adjust positions for very small screens */
+ .cardContainer.positionNeg2 {
+ transform: translateX(-240px) rotateY(55deg) scale(0.5);
+ }
+
+ .cardContainer.positionNeg1 {
+ transform: translateX(-120px) rotateY(35deg) scale(0.7);
+ }
+
+ .cardContainer.position1 {
+ transform: translateX(120px) rotateY(-35deg) scale(0.7);
+ }
+
+ .cardContainer.position2 {
+ transform: translateX(240px) rotateY(-55deg) scale(0.5);
+ }
+
+ .leftMask,
+ .rightMask {
+ width: 40px;
+ }
+}
diff --git a/src/components/FAQSection.js b/src/components/FAQSection.js
new file mode 100644
index 0000000..a5fd6ee
--- /dev/null
+++ b/src/components/FAQSection.js
@@ -0,0 +1,160 @@
+import React, { useState } from 'react';
+import { Container, Row, Col } from 'react-bootstrap';
+import styles from './FAQSection.module.css';
+
+const Accordion = ({ children, type = "single", collapsible = true, className = "" }) => {
+ return (
+
+ {positions.map((position) => {
+ const count = products.length;
+ const productIndex = (currentIndex + position + count) % count;
+ const product = products[productIndex];
+
+ // Determine position class (clamped to available classes)
+ let positionClass = '';
+ if (position <= -2) positionClass = styles.positionNeg2;
+ else if (position === -1) positionClass = styles.positionNeg1;
+ else if (position === 0) positionClass = styles.position0;
+ else if (position === 1) positionClass = styles.position1;
+ else if (position >= 2) positionClass = styles.position2;
+
+ // Determine entering class for edge items (works for 3 or 5 slots)
+ const maxEdge = positions.length > 0 ? Math.max(...positions) : 2; // 2 for 5 slots, 1 for 3 slots
+ const enteringClass = edgeEnter === 'right' && position === maxEdge
+ ? styles.enterFromRight
+ : edgeEnter === 'left' && position === -maxEdge
+ ? styles.enterFromLeft
+ : '';
+
+ return (
+
+
+ {/* Navigation buttons */}
+
+
+
+ {/* Dots indicator */}
+ {products.length > 1 && (
+ {
+ // Only trigger navigation if this is not the center card
+ // or if it's the center card but not in hover state (overlay not visible)
+ const isCenter = position === 0;
+ const canHover = isCenter && animationState === 'ready' && !shiftDirection && !isDragging;
+ if (position !== 0 || (position === 0 && (!canHover || animationState !== 'ready' || shiftDirection || isDragging))) {
+ goToProduct(productIndex, position > 0 ? 'right' : (position < 0 ? 'left' : null));
+ }
+ }}
+ >
+
+
+ );
+ })}
+
+ { onCardClick && onCardClick(p); }}
+ isCenter={position === 0}
+ canHover={position === 0 && animationState === 'ready' && !shiftDirection && !isDragging}
+ onCollapse={position === 0 ? collapseOverlay : undefined}
+ />
+
+
+ {products.map((_, index) => (
+
+ )}
+
+ {children}
+
+ );
+};
+
+const AccordionItem = ({ children, value, className = "" }) => {
+ return (
+
+ {children}
+
+ );
+};
+
+const AccordionTrigger = ({ children, className = "", onClick, isExpanded }) => {
+ return (
+
+ );
+};
+
+const AccordionContent = ({ children, className = "", isExpanded }) => {
+ return (
+
+
+ );
+};
+
+const FAQSection = () => {
+ const [activeItem, setActiveItem] = useState("item-1");
+
+ const handleToggle = (value) => {
+ if (activeItem === value) {
+ setActiveItem("");
+ } else {
+ setActiveItem(value);
+ }
+ };
+
+ const faqs = [
+ {
+ id: "item-1",
+ question: "Apa itu Kediri Technopark?",
+ answer: "Kediri Technopark adalah pusat pengembangan inovasi digital dan aplikasi untuk masyarakat dan pelaku usaha di Kediri. Kami menyediakan berbagai solusi teknologi untuk membantu bisnis berkembang di era digital."
+ },
+ {
+ id: "item-2",
+ question: "Produk apa saja yang ditawarkan oleh Kediri Technopark?",
+ answer: "Kami menawarkan berbagai produk digital seperti platform Point of Sale (Kedai Master), aplikasi manajemen bisnis, solusi e-commerce, serta layanan pengembangan website dan aplikasi custom sesuai kebutuhan bisnis Anda."
+ },
+ {
+ id: "item-3",
+ question: "Apakah ada program akademi untuk belajar teknologi?",
+ answer: "Ya, kami memiliki Academy Program yang dirancang untuk anak-anak dan remaja. Program ini mencakup berbagai bidang seperti pemrograman, robotika, desain grafis, pengembangan web, dan data science dengan pendekatan yang interaktif dan kreatif."
+ },
+ {
+ id: "item-4",
+ question: "Bagaimana cara mendaftar program akademi?",
+ answer: "Anda dapat mendaftar melalui website kami dengan mengklik tombol 'Daftar' pada program yang diminati. Setelah itu, tim kami akan menghubungi Anda untuk proses selanjutnya. Beberapa program bahkan tersedia secara gratis."
+ },
+ {
+ id: "item-5",
+ question: "Apakah ada biaya untuk menggunakan produk Kediri Technopark?",
+ answer: "Kami menawarkan berbagai paket dengan harga yang berbeda sesuai dengan kebutuhan bisnis Anda. Beberapa produk memiliki versi gratis dengan fitur dasar, dan paket berbayar dengan fitur yang lebih lengkap. Anda dapat melihat detail harga di halaman produk masing-masing."
+ },
+ {
+ id: "item-6",
+ question: "Berapa lama waktu implementasi produk Kediri Technopark?",
+ answer: "Waktu implementasi tergantung pada kompleksitas kebutuhan bisnis Anda. Untuk produk standar seperti Kedai Master, implementasi bisa dilakukan dalam 1-3 hari kerja. Untuk solusi custom, waktu implementasi akan disesuaikan dengan kebutuhan spesifik Anda."
+ },
+ {
+ id: "item-7",
+ question: "Apakah tersedia pelatihan penggunaan produk?",
+ answer: "Ya, kami menyediakan pelatihan gratis untuk penggunaan produk standar kami. Untuk paket berbayar, pelatihan akan disesuaikan dengan paket yang Anda pilih. Tim support kami juga selalu siap membantu jika Anda memiliki pertanyaan."
+ },
+ {
+ id: "item-8",
+ question: "Bagaimana jika saya memiliki pertanyaan teknis?",
+ answer: "Anda dapat menghubungi tim support kami melalui email marketing@kediritechnopark.com atau melalui nomor WhatsApp 0813 1889 4994. Tim kami akan dengan senang hati membantu menjawab pertanyaan teknis Anda."
+ }
+ ];
+
+ return (
+
+ {children}
+
+
+
+
+ + FREQUENTLY ASKED QUESTIONS +
++ Temukan jawaban untuk pertanyaan umum tentang layanan dan produk kami +
+
+ {faq.answer}
+
+