diff --git a/public/assets/images/ekosistem/bhumi-anindha/01-BhumiAnindha.jpg b/public/assets/images/ekosistem/bhumi-anindha/01-BhumiAnindha.jpg new file mode 100644 index 0000000..236dc1e Binary files /dev/null and b/public/assets/images/ekosistem/bhumi-anindha/01-BhumiAnindha.jpg differ diff --git a/public/assets/images/ekosistem/bhumi-anindha/02-BhumiAnindha.jpg b/public/assets/images/ekosistem/bhumi-anindha/02-BhumiAnindha.jpg new file mode 100644 index 0000000..bd9af00 Binary files /dev/null and b/public/assets/images/ekosistem/bhumi-anindha/02-BhumiAnindha.jpg differ diff --git a/public/assets/images/ekosistem/bhumi-anindha/03-BhumiAnindha.jpg b/public/assets/images/ekosistem/bhumi-anindha/03-BhumiAnindha.jpg new file mode 100644 index 0000000..0d654f2 Binary files /dev/null and b/public/assets/images/ekosistem/bhumi-anindha/03-BhumiAnindha.jpg differ diff --git a/public/assets/images/ekosistem/citta-rahayu/01-CittaRahayu.JPG b/public/assets/images/ekosistem/citta-rahayu/01-CittaRahayu.JPG new file mode 100644 index 0000000..2a0d7fb Binary files /dev/null and b/public/assets/images/ekosistem/citta-rahayu/01-CittaRahayu.JPG differ diff --git a/public/assets/images/ekosistem/kaind/01-Kaind.jpg b/public/assets/images/ekosistem/kaind/01-Kaind.jpg new file mode 100644 index 0000000..49e8dcb Binary files /dev/null and b/public/assets/images/ekosistem/kaind/01-Kaind.jpg differ diff --git a/public/assets/images/ekosistem/learnin/01-Learnnin.JPG b/public/assets/images/ekosistem/learnin/01-Learnnin.JPG new file mode 100644 index 0000000..90e999a Binary files /dev/null and b/public/assets/images/ekosistem/learnin/01-Learnnin.JPG differ diff --git a/public/assets/images/ekosistem/learnin/02-Learnnin.jpg b/public/assets/images/ekosistem/learnin/02-Learnnin.jpg new file mode 100644 index 0000000..a465c6f Binary files /dev/null and b/public/assets/images/ekosistem/learnin/02-Learnnin.jpg differ diff --git a/public/assets/images/ekosistem/lokanin/01-Lokanin.JPG b/public/assets/images/ekosistem/lokanin/01-Lokanin.JPG new file mode 100644 index 0000000..938b204 Binary files /dev/null and b/public/assets/images/ekosistem/lokanin/01-Lokanin.JPG differ diff --git a/public/assets/images/ekosistem/lokanin/02-Lokanin.JPG b/public/assets/images/ekosistem/lokanin/02-Lokanin.JPG new file mode 100644 index 0000000..aa35492 Binary files /dev/null and b/public/assets/images/ekosistem/lokanin/02-Lokanin.JPG differ diff --git a/public/assets/images/ekosistem/lokanin/03-Lokanin.JPG b/public/assets/images/ekosistem/lokanin/03-Lokanin.JPG new file mode 100644 index 0000000..8cefaf5 Binary files /dev/null and b/public/assets/images/ekosistem/lokanin/03-Lokanin.JPG differ diff --git a/public/assets/images/ekosistem/paon/01-Paon.JPG b/public/assets/images/ekosistem/paon/01-Paon.JPG new file mode 100644 index 0000000..c55c4bb Binary files /dev/null and b/public/assets/images/ekosistem/paon/01-Paon.JPG differ diff --git a/public/assets/images/ekosistem/pasar-bahagia/01-PasarBahagia.JPG b/public/assets/images/ekosistem/pasar-bahagia/01-PasarBahagia.JPG new file mode 100644 index 0000000..82802cc Binary files /dev/null and b/public/assets/images/ekosistem/pasar-bahagia/01-PasarBahagia.JPG differ diff --git a/public/assets/images/ekosistem/pasar-bahagia/02-PasarBahagia.JPG b/public/assets/images/ekosistem/pasar-bahagia/02-PasarBahagia.JPG new file mode 100644 index 0000000..00d254f Binary files /dev/null and b/public/assets/images/ekosistem/pasar-bahagia/02-PasarBahagia.JPG differ diff --git a/public/assets/images/ekosistem/pasar-bahagia/03-PasarBahagia.jpg b/public/assets/images/ekosistem/pasar-bahagia/03-PasarBahagia.jpg new file mode 100644 index 0000000..9860c93 Binary files /dev/null and b/public/assets/images/ekosistem/pasar-bahagia/03-PasarBahagia.jpg differ diff --git a/src/components/CoverSlideshow.tsx b/src/components/CoverSlideshow.tsx new file mode 100644 index 0000000..7f3aedf --- /dev/null +++ b/src/components/CoverSlideshow.tsx @@ -0,0 +1,40 @@ +import { useEffect, useState } from 'react'; +import { AnimatePresence, motion, useReducedMotion } from 'framer-motion'; + +interface CoverSlideshowProps { + images: string[]; + intervalMs?: number; +} + +/** Foto latar kartu ekosistem — kalau lebih dari satu, bergantian dengan crossfade + blur. */ +export default function CoverSlideshow({ images, intervalMs = 4200 }: CoverSlideshowProps) { + const [index, setIndex] = useState(0); + const prefersReduced = useReducedMotion(); + + useEffect(() => { + if (images.length <= 1) return; + const t = setInterval(() => setIndex(i => (i + 1) % images.length), intervalMs); + return () => clearInterval(t); + }, [images.length, intervalMs]); + + return ( +
+ + + +
+ ); +} diff --git a/src/data/modules.ts b/src/data/modules.ts index a553c51..de35995 100644 --- a/src/data/modules.ts +++ b/src/data/modules.ts @@ -14,6 +14,8 @@ export interface Module { contact?: string[]; /** Logo resmi modul (jika sudah tersedia) — dipakai di kartu ekosistem menggantikan ikon custom. */ logoImage?: string; + /** Foto dokumentasi modul (jika sudah tersedia) — mengisi latar kartu ekosistem, bergantian dengan efek blur bila lebih dari satu. */ + coverImages?: string[]; } const modules: Module[] = [ @@ -38,6 +40,11 @@ const modules: Module[] = [ ], contact: ['IG @bhumi.anindha', '+123-456-7890 (kontak sedang diperbarui)'], logoImage: '/assets/logo/ekosistem/bhumi-anindha/mark.png', + coverImages: [ + '/assets/images/ekosistem/bhumi-anindha/01-BhumiAnindha.jpg', + '/assets/images/ekosistem/bhumi-anindha/02-BhumiAnindha.jpg', + '/assets/images/ekosistem/bhumi-anindha/03-BhumiAnindha.jpg', + ], }, { id: 'paon', @@ -60,6 +67,7 @@ const modules: Module[] = [ { icon: '🍷', title: 'Cerita Rasa', desc: 'Thematic dinner 5–7 course, maksimal 20 tamu, sebulan sekali.' }, ], logoImage: '/assets/logo/ekosistem/paon/mark.png', + coverImages: ['/assets/images/ekosistem/paon/01-Paon.JPG'], }, { id: 'kaind', @@ -81,6 +89,7 @@ const modules: Module[] = [ { icon: '✂️', title: 'Made to Order', desc: 'Pesan pakaian yang dibuat khusus sesuai ukuran dan pilihan kain Anda.' }, { icon: '🎨', title: 'Warna dari Bumi', desc: 'Pewarna alami dari indigo, mengkudu, kulit kayu, dan rempah lokal.' }, ], + coverImages: ['/assets/images/ekosistem/kaind/01-Kaind.jpg'], }, { id: 'citta-rahayu', @@ -101,6 +110,7 @@ const modules: Module[] = [ { icon: '👥', title: 'Kumpul', desc: 'Pertemuan komunitas untuk berbagi dan tumbuh bersama.' }, { icon: '🏔️', title: 'Pulang', desc: 'Retreat mendalam untuk pemulihan dan penyatuan diri yang utuh.' }, ], + coverImages: ['/assets/images/ekosistem/citta-rahayu/01-CittaRahayu.JPG'], }, { id: 'pasar-bahagia', @@ -125,6 +135,11 @@ const modules: Module[] = [ ], contact: ['+62 815 7330 5808 (Welin Cakra)', '@anindhaloka_id', '@kreasi.nin'], logoImage: '/assets/logo/ekosistem/pasar-bahagia/mark.png', + coverImages: [ + '/assets/images/ekosistem/pasar-bahagia/01-PasarBahagia.JPG', + '/assets/images/ekosistem/pasar-bahagia/02-PasarBahagia.JPG', + '/assets/images/ekosistem/pasar-bahagia/03-PasarBahagia.jpg', + ], }, { id: 'learnnin', @@ -142,6 +157,10 @@ const modules: Module[] = [ { icon: '🌱', title: 'Ruang yang Sedang Tumbuh', desc: 'Daftar program LearnNIN sedang kami tumbuhkan bersama komunitas. Hubungi kami untuk info terbaru atau mengusulkan kolaborasi program.' }, ], logoImage: '/assets/logo/ekosistem/learnin/mark.png', + coverImages: [ + '/assets/images/ekosistem/learnin/01-Learnnin.JPG', + '/assets/images/ekosistem/learnin/02-Learnnin.jpg', + ], }, { id: 'lokanin', @@ -162,6 +181,11 @@ const modules: Module[] = [ { icon: '📸', title: 'Ruang yang Sedang Tumbuh', desc: 'Nama ruang, foto, dan contoh kegiatan sedang kami lengkapi bersama komunitas. Hubungi kami untuk info dan ketersediaan terkini.' }, ], contact: ['+62 815 7330 5808 (Welin Cakra)', '@anindhaloka_id', '@kreasi.nin'], + coverImages: [ + '/assets/images/ekosistem/lokanin/01-Lokanin.JPG', + '/assets/images/ekosistem/lokanin/02-Lokanin.JPG', + '/assets/images/ekosistem/lokanin/03-Lokanin.JPG', + ], }, { id: 'temannin', diff --git a/src/index.css b/src/index.css index 3ee4f9c..6780c81 100644 --- a/src/index.css +++ b/src/index.css @@ -400,6 +400,7 @@ h4 { font-size: 1.15rem; font-weight: 600; } display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; + grid-auto-flow: row dense; gap: 24px; } .ecosystem-mosaic__item--featured { grid-column: span 2; } @@ -442,21 +443,17 @@ h4 { font-size: 1.15rem; font-weight: 600; } } .card:hover .card__cover-emoji { transform: scale(1.08); } -/* Badge putih untuk logo resmi modul (kontras terjaga di atas cover gelap apa pun warnanya) */ +/* Logo resmi modul, kecil di pojok — tanpa frame putih, drop-shadow saja untuk kontras */ .card__cover-logo-badge { - position: relative; + position: absolute; + top: 14px; left: 16px; z-index: 3; - background: #fff; - border-radius: var(--r-lg); - padding: 12px 18px; display: flex; align-items: center; justify-content: center; - box-shadow: 0 8px 24px rgba(0,0,0,.22); - max-width: 76%; - max-height: 68%; transition: transform .3s var(--ease); } +.card__cover-logo-badge img { display: block; max-width: 100%; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); } .card__cover-logo-badge img { display: block; max-width: 100%; object-fit: contain; } .card:hover .card__cover-logo-badge { transform: scale(1.06); } diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index a13a098..e3ae90b 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -8,6 +8,7 @@ import ArcDivider from '../components/ArcDivider'; import Reveal from '../components/Reveal'; import TiltCard from '../components/TiltCard'; import CountUp from '../components/CountUp'; +import CoverSlideshow from '../components/CoverSlideshow'; const EASE_ORGANIC = [0.22, 1, 0.36, 1] as const; @@ -52,7 +53,7 @@ const jalurList = [ }, ]; -const FEATURED_IDX = [0, 4]; +const FEATURED_IDX = [0, 1, 2, 4]; const heroContainer = { hidden: {}, @@ -267,15 +268,27 @@ export default function Home() { {/* ── Cover ── */}
-
-
-
+ {m.coverImages && } + + {!m.coverImages && ( + <> +
+
+
+
+ + )} {m.logoImage ? (
- {m.name} + {m.name}
) : (