369 lines
17 KiB
TypeScript
369 lines
17 KiB
TypeScript
import { Link } from 'react-router-dom';
|
|
import { ArrowRight, ArrowDown } from 'lucide-react';
|
|
import { motion } from 'framer-motion';
|
|
import modules from '../data/modules';
|
|
import IDGWheel from '../components/IDGWheel';
|
|
import EcosystemIcon from '../components/EcosystemIcons';
|
|
import ArcDivider from '../components/ArcDivider';
|
|
import Reveal from '../components/Reveal';
|
|
import TiltCard from '../components/TiltCard';
|
|
import CountUp from '../components/CountUp';
|
|
|
|
const EASE_ORGANIC = [0.22, 1, 0.36, 1] as const;
|
|
|
|
const values = [
|
|
{ icon: '🧠', title: 'Kesadaran', desc: 'Setiap tindakan dilandasi kehadiran penuh dan niat yang jernih.' },
|
|
{ icon: '🌿', title: 'Hubungan dengan Alam', desc: 'Menghormati dan memulihkan hubungan kita dengan dunia alami.' },
|
|
{ icon: '🤲', title: 'Gotong Royong', desc: 'Kekuatan komunitas adalah fondasi dari setiap perubahan nyata.' },
|
|
{ icon: '♻️', title: 'Keberlanjutan', desc: 'Memilih jalan yang merawat, bukan menguras, sumber daya bumi.' },
|
|
{ icon: '🌱', title: 'Regeneratif', desc: 'Melampaui keberlanjutan—memulihkan dan menghidupkan kembali.' },
|
|
{ icon: '⚖️', title: 'Keadilan Sosial', desc: 'Ekonomi dan ekologi yang adil bagi semua makhluk hidup.' },
|
|
{ icon: '💚', title: 'Komunitas', desc: 'Bersama kita tumbuh lebih kuat, lebih bijak, lebih utuh.' },
|
|
{ icon: '✨', title: 'Keindahan', desc: 'Merayakan keindahan dalam kesederhanaan dan keaslian.' },
|
|
];
|
|
|
|
const jalurList = [
|
|
{
|
|
id: 'pangan',
|
|
icon: '🌾',
|
|
title: 'Pangan Berkesadaran',
|
|
subtitle: 'Merawat Tanah, Menumbuhkan Kehidupan',
|
|
color: '#4F6B3A',
|
|
steps: ['Budidaya', 'Panen & Pasca Panen', 'Gastronomi & Kuliner', 'Destinasi & Pengalaman'],
|
|
quote: 'Merawat tanah adalah merawat diri.',
|
|
},
|
|
{
|
|
id: 'sandang',
|
|
icon: '🧵',
|
|
title: 'Sandang Berkesadaran',
|
|
subtitle: 'Menghidupkan Serat, Menenun Masa Depan',
|
|
color: '#D4552B',
|
|
steps: ['Serat', 'Benang & Kain', 'Pewarnaan', 'Produk Jadi'],
|
|
quote: 'Menenun masa depan adalah memilih dunia seperti apa yang ingin kita wariskan.',
|
|
},
|
|
{
|
|
id: 'olah-diri',
|
|
icon: '🧘',
|
|
title: 'Olah-Diri Berkesadaran',
|
|
subtitle: 'Merawat Diri, Merawat Dunia',
|
|
color: '#93583A',
|
|
steps: ['Badan Kasar', 'Badan Halus', 'Badan Penyebab'],
|
|
quote: 'Manusia yang utuh adalah manusia yang mampu merawat dunia di sekitarnya.',
|
|
},
|
|
];
|
|
|
|
const FEATURED_IDX = [0, 4];
|
|
|
|
const heroContainer = {
|
|
hidden: {},
|
|
show: { transition: { staggerChildren: 0.14, delayChildren: 0.1 } },
|
|
};
|
|
const heroItem = {
|
|
hidden: { opacity: 0, y: 26 },
|
|
show: { opacity: 1, y: 0, transition: { duration: 0.75, ease: EASE_ORGANIC } },
|
|
};
|
|
|
|
export default function Home() {
|
|
return (
|
|
<>
|
|
{/* Hero */}
|
|
<section className="hero">
|
|
<div className="hero__decor" />
|
|
<motion.div
|
|
className="container hero__content"
|
|
initial="hidden"
|
|
animate="show"
|
|
variants={heroContainer}
|
|
>
|
|
<motion.p className="eyebrow eyebrow--amber" style={{ marginBottom: 20 }} variants={heroItem}>
|
|
Rumah Gotong Royong
|
|
</motion.p>
|
|
<motion.h1 className="hero__title" variants={heroItem}>
|
|
Anindha. Loka.<br />
|
|
<em>Dua kata, satu niat.</em>
|
|
</motion.h1>
|
|
<motion.p className="hero__subtitle" variants={heroItem}>
|
|
Ruang hidup gotong royong untuk menghadirkan kerahayuan dalam kehidupan sehari-hari — melalui pangan, sandang, dan olah diri yang berkesadaran.
|
|
</motion.p>
|
|
<motion.div className="hero__actions" variants={heroItem}>
|
|
<a href="#ekosistem" className="btn btn--amber btn--lg">
|
|
Jelajahi Ekosistem <ArrowDown size={16} />
|
|
</a>
|
|
<Link to="/tentang" className="btn btn--outline-light btn--lg">
|
|
Kenali Anindhaloka
|
|
</Link>
|
|
</motion.div>
|
|
</motion.div>
|
|
<div className="hero__scroll">
|
|
<div className="hero__scroll-line" />
|
|
<span>Gulir</span>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Definisi clip-path lengkung halus (bezier) untuk foto About — objectBoundingBox supaya tetap responsif */}
|
|
<svg width="0" height="0" style={{ position: 'absolute' }} aria-hidden="true">
|
|
<defs>
|
|
<clipPath id="about-wave-clip" clipPathUnits="objectBoundingBox">
|
|
<path d="M0,0.032 C0.1667,0.072 0.3333,0 0.5,0.024 C0.6667,0.048 0.8333,0.008 1,0.036 L1,1 L0,1 Z" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
|
|
{/* About — foto sendiri yang bergelombang di atas, bukan divider warna terpisah */}
|
|
<section
|
|
className="section about-section"
|
|
style={{
|
|
position: 'relative',
|
|
marginTop: -70,
|
|
paddingTop: 150,
|
|
backgroundImage: 'linear-gradient(180deg, rgba(58,36,48,.92) 0%, rgba(47,29,36,.88) 20%, rgba(30,18,22,.85) 55%, rgba(30,18,22,.9) 100%), url(/assets/images/Anindhaloka.jpg)',
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
clipPath: 'url(#about-wave-clip)',
|
|
}}
|
|
>
|
|
<div className="container">
|
|
<div className="about-split">
|
|
<Reveal className="about-split__text">
|
|
<p className="eyebrow eyebrow--amber" style={{ marginBottom: 16 }}>Tentang Anindhaloka</p>
|
|
<h2 style={{ marginBottom: 20, color: '#fff' }}>Ruang yang mulia, dibangun dengan kesadaran</h2>
|
|
<p style={{ color: 'rgba(255,255,255,.75)' }}>
|
|
Anindhaloka adalah ruang yang mulia — bukan karena megah, tapi karena setiap sudutnya dibangun dengan kesadaran: bahwa cara kita hidup menentukan dunia yang kita wariskan. Lahir di jantung Jakarta, kami mengajak siapa saja untuk menjalani hidup dengan cara yang lebih selaras.
|
|
</p>
|
|
<p style={{ color: 'rgba(255,255,255,.75)' }}>
|
|
Kami menghadirkan cara hidup yang menyatukan kembali manusia dengan alam, dengan sesama, dan dengan dirinya sendiri — di mana makanan tumbuh dari tanah yang dirawat, pakaian dibuat dengan tangan yang sadar, dan ketenangan batin menjadi hak setiap orang.
|
|
</p>
|
|
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 28 }}>
|
|
<Link to="/tentang" className="btn btn--outline-light">
|
|
Kenali Kami <ArrowRight size={16} />
|
|
</Link>
|
|
<Link to="/bergabung" className="btn btn--amber">
|
|
Bergabung
|
|
</Link>
|
|
</div>
|
|
</Reveal>
|
|
<Reveal delay={0.15} className="about-split__visual" style={{ justifyContent: 'center', alignItems: 'center' }}>
|
|
<IDGWheel light />
|
|
</Reveal>
|
|
</div>
|
|
<div className="about-stats">
|
|
<div className="about-stat">
|
|
<CountUp to={60} suffix="+" className="about-stat__num" />
|
|
<span className="about-stat__label">Jenama Lokal Bergabung</span>
|
|
</div>
|
|
<div className="about-stat">
|
|
<CountUp to={50} suffix="+" className="about-stat__num" />
|
|
<span className="about-stat__label">Kegiatan Edukasi Terselenggara</span>
|
|
</div>
|
|
<div className="about-stat">
|
|
<CountUp to={2000} suffix="+" className="about-stat__num" />
|
|
<span className="about-stat__label">Kunjungan TemanNIN</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<ArcDivider fill="var(--cream)" />
|
|
|
|
{/* Tiga Jalan Bertumbuh Bersama */}
|
|
<section className="section" style={{ background: 'var(--cream)' }}>
|
|
<div className="container">
|
|
<div className="section__header">
|
|
<p className="eyebrow">Tiga Jalan Bertumbuh Bersama</p>
|
|
<h2>Satu perjalanan, tiga laku berkesadaran</h2>
|
|
<p>Pangan, sandang, dan olah diri — tiga jalur praktik yang saling menopang dalam kehidupan sehari-hari.</p>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 64 }}>
|
|
{jalurList.map((j, i) => (
|
|
<Reveal key={j.id} delay={i * 0.08}>
|
|
<div
|
|
id={j.id}
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: i % 2 === 1 ? 'row-reverse' : 'row',
|
|
alignItems: 'center',
|
|
gap: 40,
|
|
flexWrap: 'wrap',
|
|
scrollMarginTop: 100,
|
|
}}
|
|
>
|
|
<div style={{ flex: '0 0 auto', position: 'relative', width: 148, height: 148 }}>
|
|
<span
|
|
style={{
|
|
position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
fontFamily: 'var(--font-mono)', fontSize: '5.5rem', fontWeight: 700, color: j.color, opacity: 0.13,
|
|
lineHeight: 1,
|
|
}}
|
|
>
|
|
0{i + 1}
|
|
</span>
|
|
<span style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '3.2rem' }}>
|
|
{j.icon}
|
|
</span>
|
|
</div>
|
|
|
|
<div style={{ flex: '1 1 380px', minWidth: 280, textAlign: i % 2 === 1 ? 'right' : 'left' }}>
|
|
<p className="eyebrow" style={{ color: j.color, marginBottom: 8 }}>{j.subtitle}</p>
|
|
<h3 style={{ marginBottom: 16 }}>{j.title}</h3>
|
|
<div style={{
|
|
display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 20,
|
|
justifyContent: i % 2 === 1 ? 'flex-end' : 'flex-start',
|
|
}}>
|
|
{j.steps.map((s, k) => (
|
|
<span key={k} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
<span
|
|
className="badge"
|
|
style={{ background: `${j.color}18`, color: j.color, fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: '.72rem' }}
|
|
>
|
|
{s}
|
|
</span>
|
|
{k < j.steps.length - 1 && <ArrowRight size={12} style={{ color: 'var(--text-100)' }} />}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<blockquote
|
|
style={{
|
|
fontFamily: 'var(--font-heading)', fontSize: '1.2rem', fontStyle: 'italic',
|
|
color: 'var(--text-700)', margin: 0,
|
|
borderLeft: i % 2 === 1 ? 'none' : `3px solid ${j.color}`,
|
|
borderRight: i % 2 === 1 ? `3px solid ${j.color}` : 'none',
|
|
paddingLeft: i % 2 === 1 ? 0 : 16,
|
|
paddingRight: i % 2 === 1 ? 16 : 0,
|
|
}}
|
|
>
|
|
“{j.quote}”
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</Reveal>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<ArcDivider fill="var(--warm-white)" />
|
|
|
|
{/* Ecosystem Modules */}
|
|
<section className="section ecosystem-section" id="ekosistem">
|
|
<div className="container">
|
|
<div className="section__header">
|
|
<p className="eyebrow">Ekosistem Kami</p>
|
|
<h2>Delapan wahana, satu perjalanan</h2>
|
|
<p>Setiap modul adalah dunia tersendiri, namun saling terjalin dalam satu visi: kehidupan yang lebih sadar, adil, dan indah.</p>
|
|
</div>
|
|
<div className="ecosystem-mosaic">
|
|
{modules.map((m, i) => {
|
|
const featured = FEATURED_IDX.includes(i);
|
|
return (
|
|
<Reveal
|
|
key={m.id}
|
|
delay={(i % 4) * 0.06}
|
|
className={featured ? 'ecosystem-mosaic__item--featured' : undefined}
|
|
style={{ height: '100%' }}
|
|
>
|
|
<TiltCard style={{ height: '100%' }}>
|
|
<Link to={m.path} style={{ textDecoration: 'none', display: 'block', height: '100%' }}>
|
|
<div className="card card--module" style={{ height: '100%' }}>
|
|
|
|
{/* ── Cover ── */}
|
|
<div
|
|
className={`card__cover${featured ? ' card__cover--tall' : ''}`}
|
|
style={{ background: `linear-gradient(140deg, ${m.gradientFrom} 0%, ${m.gradientTo} 55%, ${m.color} 100%)` }}
|
|
>
|
|
<div className="card__cover-blob" style={{ width: 140, height: 140, top: -40, right: -30, background: m.color, opacity: .28 }} />
|
|
<div className="card__cover-blob" style={{ width: 90, height: 90, bottom: -20, left: 16, background: 'rgba(255,255,255,.08)' }} />
|
|
<div className="card__cover-blob" style={{ width: 60, height: 60, top: 20, left: 20, background: 'rgba(255,255,255,.06)' }} />
|
|
|
|
{m.logoImage ? (
|
|
<div className="card__cover-logo-badge">
|
|
<img src={m.logoImage} alt={m.name} style={{ height: featured ? 68 : 50 }} />
|
|
</div>
|
|
) : (
|
|
<span className="card__cover-emoji">
|
|
<EcosystemIcon id={m.id} size={featured ? 60 : 46} withBackdrop={false} />
|
|
</span>
|
|
)}
|
|
|
|
<div className="card__cover-tag">{m.tagline}</div>
|
|
</div>
|
|
|
|
{/* ── Content ── */}
|
|
<div className="card__body">
|
|
<h3 className="card__title">{m.name}</h3>
|
|
<p className="card__desc">{m.description}</p>
|
|
</div>
|
|
<div className="card__footer">
|
|
<span className="card__link" style={{ color: m.color }}>
|
|
Pelajari lebih <ArrowRight size={14} />
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
</Link>
|
|
</TiltCard>
|
|
</Reveal>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<ArcDivider fill="var(--maroon-900)" />
|
|
|
|
{/* Values */}
|
|
<section className="section values-section">
|
|
<div className="container">
|
|
<div className="section__header">
|
|
<p className="eyebrow eyebrow--light">Nilai-nilai Kami</p>
|
|
<h2 style={{ color: 'rgba(255,255,255,.95)' }}>Yang menghidupkan setiap langkah</h2>
|
|
<p>Nilai bukan sekadar kata-kata. Ini adalah cara kami berpikir, berkarya, dan berhubungan dengan dunia.</p>
|
|
</div>
|
|
<div className="grid-4">
|
|
{values.map((v, i) => (
|
|
<Reveal key={i} delay={(i % 4) * 0.06}>
|
|
<div className="value-card">
|
|
<div className="value-card__icon">{v.icon}</div>
|
|
<h4 className="value-card__title">{v.title}</h4>
|
|
<p className="value-card__desc">{v.desc}</p>
|
|
</div>
|
|
</Reveal>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<ArcDivider fill="var(--cream)" />
|
|
|
|
{/* Community Quote */}
|
|
<section className="section" style={{ background: 'var(--cream)' }}>
|
|
<Reveal className="container" style={{ maxWidth: 720, textAlign: 'center' }}>
|
|
<span style={{ fontSize: '3rem', display: 'block', marginBottom: 24 }}>🌾</span>
|
|
<blockquote style={{ fontFamily: 'var(--font-heading)', fontSize: 'clamp(1.4rem, 3vw, 2rem)', fontStyle: 'italic', color: 'var(--text-900)', lineHeight: 1.5, marginBottom: 24 }}>
|
|
"Kita tidak mewarisi bumi dari nenek moyang kita, kita meminjamnya dari anak cucu kita."
|
|
</blockquote>
|
|
<p style={{ color: 'var(--text-300)', fontSize: '.9rem' }}>— Pepatah bijak yang menginspirasi gerakan kami</p>
|
|
</Reveal>
|
|
</section>
|
|
<ArcDivider fill="var(--maroon-900)" />
|
|
|
|
{/* CTA */}
|
|
<section className="section cta-section">
|
|
<div className="container">
|
|
<div className="cta-section__content">
|
|
<p className="eyebrow eyebrow--light" style={{ marginBottom: 16 }}>Mulai Perjalananmu</p>
|
|
<h2 className="cta-section__title">Jadilah bagian dari komunitas perubahan</h2>
|
|
<p className="cta-section__desc">
|
|
Bergabunglah dengan ratusan individu, pengrajin, dan pelaku perubahan yang bersama-sama membangun ekosistem hidup yang lebih bermakna.
|
|
</p>
|
|
<div className="cta-section__actions">
|
|
<Link to="/bergabung" className="btn btn--amber btn--lg">
|
|
Daftar Sekarang <ArrowRight size={16} />
|
|
</Link>
|
|
<Link to="/tentang" className="btn btn--outline-light btn--lg">
|
|
Pelajari Lebih
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|