Menambahkan semua halaman yang diperlukan untuk Bookoomoo dan memperbarui routing
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
@@ -12,6 +12,14 @@ import StoriesPage from './pages/StoriesPage'
|
||||
import DonationsPage from './pages/DonationsPage'
|
||||
import TopUpPage from './pages/TopUpPage'
|
||||
import LoginPage from './pages/LoginPage'
|
||||
import AboutPage from './pages/AboutPage'
|
||||
import ContactPage from './pages/ContactPage'
|
||||
import DonationProgramPage from './pages/DonationProgramPage'
|
||||
import PrivacyPolicyPage from './pages/PrivacyPolicyPage'
|
||||
import TermsAndConditionsPage from './pages/TermsAndConditionsPage'
|
||||
import FAQPage from './pages/FAQPage'
|
||||
import OrderConfirmationPage from './pages/OrderConfirmationPage'
|
||||
import DonationTrackingPage from './pages/DonationTrackingPage'
|
||||
import { useAuth } from './lib/auth'
|
||||
|
||||
function ProtectedRoute({ children }){
|
||||
@@ -23,10 +31,17 @@ function ProtectedRoute({ children }){
|
||||
export default function App(){
|
||||
return (
|
||||
<Routes>
|
||||
<Route path="/landing" element={<LandingPage/>} />
|
||||
<Route path="/" element={<LandingPage/>} />
|
||||
<Route path="/about" element={<AboutPage/>} />
|
||||
<Route path="/contact" element={<ContactPage/>} />
|
||||
<Route path="/donation-program" element={<DonationProgramPage/>} />
|
||||
<Route path="/privacy" element={<PrivacyPolicyPage/>} />
|
||||
<Route path="/terms" element={<TermsAndConditionsPage/>} />
|
||||
<Route path="/faq" element={<FAQPage/>} />
|
||||
<Route path="/donation-tracking" element={<DonationTrackingPage/>} />
|
||||
<Route path="/login" element={<LoginPage/>} />
|
||||
<Route
|
||||
path="/"
|
||||
path="/dashboard"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<Layout />
|
||||
@@ -43,7 +58,8 @@ export default function App(){
|
||||
<Route path="donations" element={<DonationsPage/>} />
|
||||
<Route path="topup" element={<TopUpPage/>} />
|
||||
</Route>
|
||||
<Route path="*" element={<Navigate to="/landing" replace />} />
|
||||
<Route path="/order-confirmation" element={<OrderConfirmationPage/>} />
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
)
|
||||
}
|
||||
|
||||
165
bookoomoo-app/src/pages/AboutPage.jsx
Normal file
165
bookoomoo-app/src/pages/AboutPage.jsx
Normal file
@@ -0,0 +1,165 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowLeft, Heart, BookHeart, Users, Target } from 'lucide-react';
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow-sm">
|
||||
<div className="container mx-auto px-6 py-4">
|
||||
<Link to="/" className="flex items-center text-teal-600 hover:text-teal-700 transition-colors">
|
||||
<ArrowLeft className="w-5 h-5 mr-2" />
|
||||
<span className="font-medium">Kembali ke Beranda</span>
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="py-16">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="text-center max-w-3xl mx-auto mb-16">
|
||||
<motion.h1
|
||||
className="text-4xl font-bold text-slate-900 mb-6"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
Tentang Bookoomoo
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
className="text-xl text-slate-600"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
Bukan sekadar buku. Ini cerita yang menyatukan hati.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
{/* Visi & Misi */}
|
||||
<div className="grid md:grid-cols-2 gap-12 mb-20">
|
||||
<motion.div
|
||||
className="bg-white p-8 rounded-2xl border border-teal-100 shadow-sm"
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7 }}
|
||||
>
|
||||
<div className="flex items-center mb-6">
|
||||
<div className="w-12 h-12 bg-teal-500 rounded-full flex items-center justify-center text-white mr-4">
|
||||
<Target className="w-6 h-6" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-slate-800">Visi</h2>
|
||||
</div>
|
||||
<p className="text-slate-600 mb-4">
|
||||
Menjadi platform yang membangun jembatan antara kebahagiaan anak kota dengan anak di pelosok melalui kekuatan cerita dan literasi.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="bg-white p-8 rounded-2xl border border-teal-100 shadow-sm"
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: 0.2 }}
|
||||
>
|
||||
<div className="flex items-center mb-6">
|
||||
<div className="w-12 h-12 bg-orange-500 rounded-full flex items-center justify-center text-white mr-4">
|
||||
<Heart className="w-6 h-6" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-slate-800">Misi</h2>
|
||||
</div>
|
||||
<ul className="text-slate-600 space-y-2">
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Menghadirkan pengalaman literasi yang menyenangkan dan personal bagi setiap anak.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Menyebarkan akses terhadap buku berkualitas ke anak-anak di pelosok Indonesia.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Membangun kesadaran sosial anak kota melalui program donasi berkelanjutan.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Cerita di Balik Bookoomoo */}
|
||||
<motion.div
|
||||
className="bg-gradient-to-r from-teal-500 to-teal-600 rounded-2xl p-8 md:p-12 text-white mb-20"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7 }}
|
||||
>
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold mb-6 text-center">Cerita di Balik Bookoomoo</h2>
|
||||
<div className="prose prose-lg prose-invert max-w-none">
|
||||
<p className="mb-4">
|
||||
Bookoomoo lahir dari sebuah pertanyaan sederhana: "Bagaimana jika setiap buku yang dibeli anak kota bisa menjadi hadiah untuk anak di pelosok?"
|
||||
</p>
|
||||
<p className="mb-4">
|
||||
Kami percaya bahwa setiap anak berhak memiliki akses terhadap buku berkualitas. Tapi lebih dari itu, kami percaya bahwa kebahagiaan menjadi lebih bermakna saat dibagi.
|
||||
</p>
|
||||
<p>
|
||||
Dengan menggabungkan teknologi, kreativitas, dan kepedulian sosial, Bookoomoo menciptakan pengalaman literasi yang tidak hanya menyenangkan bagi anak Anda, tetapi juga berdampak nyata bagi anak-anak di pelosok Indonesia.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Tim & Partner */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7 }}
|
||||
>
|
||||
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">Tim & Partner</h2>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-16">
|
||||
<div className="bg-white p-6 rounded-2xl border border-teal-100 shadow-sm text-center">
|
||||
<div className="w-20 h-20 bg-teal-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Users className="w-10 h-10 text-teal-500" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-2">Tim Kreatif</h3>
|
||||
<p className="text-slate-600">
|
||||
Penulis, ilustrator, dan desainer yang berdedikasi menciptakan cerita berkualitas tinggi.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-6 rounded-2xl border border-teal-100 shadow-sm text-center">
|
||||
<div className="w-20 h-20 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<BookHeart className="w-10 h-10 text-orange-500" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-2">Tim Teknologi</h3>
|
||||
<p className="text-slate-600">
|
||||
Pengembang yang membangun platform personalisasi dan sistem tracking donasi.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-6 rounded-2xl border border-teal-100 shadow-sm text-center">
|
||||
<div className="w-20 h-20 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Heart className="w-10 h-10 text-yellow-500" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-2">Tim Sosial</h3>
|
||||
<p className="text-slate-600">
|
||||
Koordinator distribusi dan mitra lokal yang memastikan donasi sampai ke tangan yang tepat.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-100 rounded-2xl p-8 text-center">
|
||||
<h3 className="text-2xl font-bold text-slate-800 mb-4">Partner Distribusi</h3>
|
||||
<p className="text-slate-600 max-w-2xl mx-auto">
|
||||
Kami bekerja sama dengan berbagai organisasi pendidikan, yayasan, dan relawan di seluruh Indonesia untuk memastikan setiap buku donasi sampai ke anak yang membutuhkan.
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
201
bookoomoo-app/src/pages/ContactPage.jsx
Normal file
201
bookoomoo-app/src/pages/ContactPage.jsx
Normal file
@@ -0,0 +1,201 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowLeft, Mail, Phone, MapPin, Send } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function ContactPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
subject: '',
|
||||
message: ''
|
||||
});
|
||||
|
||||
const handleChange = (e) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
// Di sini nanti akan diintegrasikan dengan backend
|
||||
console.log('Form submitted:', formData);
|
||||
alert('Terima kasih atas pesan Anda! Kami akan segera menghubungi Anda.');
|
||||
setFormData({ name: '', email: '', subject: '', message: '' });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow-sm">
|
||||
<div className="container mx-auto px-6 py-4">
|
||||
<Link to="/" className="flex items-center text-teal-600 hover:text-teal-700 transition-colors">
|
||||
<ArrowLeft className="w-5 h-5 mr-2" />
|
||||
<span className="font-medium">Kembali ke Beranda</span>
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="py-16">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="text-center max-w-3xl mx-auto mb-16">
|
||||
<motion.h1
|
||||
className="text-4xl font-bold text-slate-900 mb-6"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
Hubungi Kami
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
className="text-xl text-slate-600"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
Punya pertanyaan atau ingin berbicara dengan kami? Kami senang mendengar Anda!
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-12">
|
||||
{/* Informasi Kontak */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7 }}
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-slate-900 mb-6">Informasi Kontak</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-start">
|
||||
<div className="w-12 h-12 bg-teal-100 rounded-full flex items-center justify-center text-teal-600 mr-4 flex-shrink-0">
|
||||
<Mail className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-slate-900 mb-1">Email</h3>
|
||||
<p className="text-slate-600">hello@bookoomoo.com</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center text-orange-600 mr-4 flex-shrink-0">
|
||||
<Phone className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-slate-900 mb-1">Telepon</h3>
|
||||
<p className="text-slate-600">+62 21 1234 5678</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start">
|
||||
<div className="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600 mr-4 flex-shrink-0">
|
||||
<MapPin className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-slate-900 mb-1">Alamat</h3>
|
||||
<p className="text-slate-600">Jl. Literasi No. 123<br />Jakarta, Indonesia 12345</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-12">
|
||||
<h3 className="text-xl font-bold text-slate-900 mb-4">Media Sosial</h3>
|
||||
<div className="flex space-x-4">
|
||||
<a href="#" className="w-12 h-12 bg-teal-500 rounded-full flex items-center justify-center text-white hover:bg-teal-600 transition-colors">
|
||||
<span className="font-bold">f</span>
|
||||
</a>
|
||||
<a href="#" className="w-12 h-12 bg-teal-500 rounded-full flex items-center justify-center text-white hover:bg-teal-600 transition-colors">
|
||||
<span className="font-bold">ig</span>
|
||||
</a>
|
||||
<a href="#" className="w-12 h-12 bg-teal-500 rounded-full flex items-center justify-center text-white hover:bg-teal-600 transition-colors">
|
||||
<span className="font-bold">t</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Form Kontak */}
|
||||
<motion.div
|
||||
className="bg-white p-8 rounded-2xl border border-teal-100 shadow-sm"
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: 0.2 }}
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-slate-900 mb-6">Kirim Pesan</h2>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-slate-700 mb-1">Nama Lengkap</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-colors"
|
||||
placeholder="Nama Anda"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-slate-700 mb-1">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-colors"
|
||||
placeholder="email@anda.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="subject" className="block text-sm font-medium text-slate-700 mb-1">Subjek</label>
|
||||
<input
|
||||
type="text"
|
||||
id="subject"
|
||||
name="subject"
|
||||
value={formData.subject}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-colors"
|
||||
placeholder="Subjek pesan"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-medium text-slate-700 mb-1">Pesan</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
required
|
||||
rows={5}
|
||||
className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-colors"
|
||||
placeholder="Tulis pesan Anda di sini..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-teal-500 hover:bg-teal-600 text-white font-bold py-3 px-6 rounded-lg transition-colors flex items-center justify-center"
|
||||
>
|
||||
<Send className="w-5 h-5 mr-2" />
|
||||
<span>Kirim Pesan</span>
|
||||
</button>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
192
bookoomoo-app/src/pages/DonationProgramPage.jsx
Normal file
192
bookoomoo-app/src/pages/DonationProgramPage.jsx
Normal file
@@ -0,0 +1,192 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowLeft, Heart, Gift, TrendingUp, Award } from 'lucide-react';
|
||||
|
||||
export default function DonationProgramPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow-sm">
|
||||
<div className="container mx-auto px-6 py-4">
|
||||
<Link to="/" className="flex items-center text-teal-600 hover:text-teal-700 transition-colors">
|
||||
<ArrowLeft className="w-5 h-5 mr-2" />
|
||||
<span className="font-medium">Kembali ke Beranda</span>
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="py-16">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="text-center max-w-3xl mx-auto mb-16">
|
||||
<motion.h1
|
||||
className="text-4xl font-bold text-slate-900 mb-6"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
Program Donasi Bookoomoo
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
className="text-xl text-slate-600"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
Setiap buku yang Anda pesan membawa kebahagiaan ganda
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
{/* Program Explanation */}
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-20">
|
||||
<motion.div
|
||||
className="bg-white p-8 rounded-2xl border border-teal-100 shadow-sm"
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7 }}
|
||||
>
|
||||
<div className="flex items-center mb-6">
|
||||
<div className="w-12 h-12 bg-teal-500 rounded-full flex items-center justify-center text-white mr-4">
|
||||
<Gift className="w-6 h-6" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-slate-800">Buy 1 Donate 1</h2>
|
||||
</div>
|
||||
<p className="text-slate-600 mb-4">
|
||||
Untuk setiap buku yang Anda pesan, kami secara otomatis mendonasikan satu buku yang sama ke anak di pelosok Indonesia.
|
||||
</p>
|
||||
<ul className="text-slate-600 space-y-2">
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Nama anak Anda sebagai tokoh utama di kedua buku</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Wajah anak Anda muncul di halaman donasi sebagai penanda kasih</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Anda bisa melacak perjalanan buku donasi melalui QR code</span>
|
||||
</li>
|
||||
</ul>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="bg-white p-8 rounded-2xl border border-teal-100 shadow-sm"
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: 0.2 }}
|
||||
>
|
||||
<div className="flex items-center mb-6">
|
||||
<div className="w-12 h-12 bg-orange-500 rounded-full flex items-center justify-center text-white mr-4">
|
||||
<Heart className="w-6 h-6" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-slate-800">Full Donation</h2>
|
||||
</div>
|
||||
<p className="text-slate-600 mb-4">
|
||||
Anda bisa membeli buku khusus donasi tanpa perlu buku untuk diri sendiri.
|
||||
</p>
|
||||
<ul className="text-slate-600 space-y-2">
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Buku donasi dengan nama dan wajah anak penerima</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Dapat dilacak melalui QR code</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Harga lebih terjangkau karena tidak termasuk buku cetak untuk Anda</span>
|
||||
</li>
|
||||
</ul>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Impact Statistics */}
|
||||
<motion.div
|
||||
className="bg-gradient-to-r from-teal-500 to-teal-600 rounded-2xl p-8 md:p-12 text-white mb-20"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7 }}
|
||||
>
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Dampak Sosial Kami</h2>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<div className="text-center">
|
||||
<div className="w-20 h-20 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<TrendingUp className="w-10 h-10" />
|
||||
</div>
|
||||
<div className="text-4xl font-bold mb-2">15,000+</div>
|
||||
<p className="text-teal-100">Buku Didonasikan</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="w-20 h-20 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Award className="w-10 h-10" />
|
||||
</div>
|
||||
<div className="text-4xl font-bold mb-2">250+</div>
|
||||
<p className="text-teal-100">Desa Terjangkau</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="w-20 h-20 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Heart className="w-10 h-10" />
|
||||
</div>
|
||||
<div className="text-4xl font-bold mb-2">50,000+</div>
|
||||
<p className="text-teal-100">Senyuman Dibagikan</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Documentation */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7 }}
|
||||
>
|
||||
<h2 className="text-3xl font-bold text-slate-900 text-center mb-12">Dokumentasi Donasi</h2>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6 mb-12">
|
||||
<div className="bg-white rounded-xl overflow-hidden shadow-md">
|
||||
<div className="bg-gray-200 border-2 border-dashed rounded-xl w-full h-48" />
|
||||
<div className="p-4">
|
||||
<h3 className="font-bold text-slate-800 mb-2">Distribusi Buku di Papua</h3>
|
||||
<p className="text-slate-600 text-sm">Buku didistribusikan ke sekolah-sekolah di pedalaman Papua.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl overflow-hidden shadow-md">
|
||||
<div className="bg-gray-200 border-2 border-dashed rounded-xl w-full h-48" />
|
||||
<div className="p-4">
|
||||
<h3 className="font-bold text-slate-800 mb-2">Anak-anak di NTT</h3>
|
||||
<p className="text-slate-600 text-sm">Kegembiraan anak-anak saat menerima buku pertama mereka.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl overflow-hidden shadow-md">
|
||||
<div className="bg-gray-200 border-2 border-dashed rounded-xl w-full h-48" />
|
||||
<div className="p-4">
|
||||
<h3 className="font-bold text-slate-800 mb-2">Laporan Donatur</h3>
|
||||
<p className="text-slate-600 text-sm">Kami menjaga privasi penerima dengan baik.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<Link
|
||||
to="/create-story"
|
||||
className="bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-8 rounded-full transition-colors inline-flex items-center"
|
||||
>
|
||||
<Gift className="w-5 h-5 mr-2" />
|
||||
<span>Mulai Donasi Sekarang</span>
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
352
bookoomoo-app/src/pages/DonationTrackingPage.jsx
Normal file
352
bookoomoo-app/src/pages/DonationTrackingPage.jsx
Normal file
@@ -0,0 +1,352 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowLeft, MapPin, Clock, CheckCircle, Truck, BookHeart, Users } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function DonationTrackingPage() {
|
||||
const [trackingId, setTrackingId] = useState("");
|
||||
const [searchResult, setSearchResult] = useState(null);
|
||||
|
||||
// Mock data for donation tracking
|
||||
const mockDonationData = {
|
||||
donationId: "DON-2023-005678",
|
||||
bookTitle: "Petualangan Budi di Negeri Ajaib",
|
||||
donorChild: "Budi",
|
||||
recipientChild: "Siti",
|
||||
recipientLocation: "Desa Sukamaju, Kabupaten Flores Timur, NTT",
|
||||
status: "Delivered",
|
||||
statusHistory: [
|
||||
{
|
||||
id: 1,
|
||||
status: "Pesanan Dikonfirmasi",
|
||||
date: "10 Mei 2023",
|
||||
time: "09:30",
|
||||
description: "Pesanan donasi telah dikonfirmasi dan sedang diproses.",
|
||||
icon: <CheckCircle className="w-5 h-5" />
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
status: "Buku Dicetak",
|
||||
date: "12 Mei 2023",
|
||||
time: "14:15",
|
||||
description: "Buku donasi sedang dalam proses pencetakan.",
|
||||
icon: <BookHeart className="w-5 h-5" />
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
status: "Dikirim ke Distributor",
|
||||
date: "15 Mei 2023",
|
||||
time: "11:00",
|
||||
description: "Buku donasi telah dikirim ke distributor regional.",
|
||||
icon: <Truck className="w-5 h-5" />
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
status: "Tiba di Lokasi",
|
||||
date: "20 Mei 2023",
|
||||
time: "16:45",
|
||||
description: "Buku donasi telah tiba di sekolah penerima di Desa Sukamaju.",
|
||||
icon: <MapPin className="w-5 h-5" />
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
status: "Telah Diserahkan",
|
||||
date: "22 Mei 2023",
|
||||
time: "10:30",
|
||||
description: "Buku donasi telah diserahkan kepada Siti di Sekolah Dasar Negeri 1 Sukamaju.",
|
||||
icon: <Users className="w-5 h-5" />
|
||||
}
|
||||
],
|
||||
photos: [
|
||||
{
|
||||
id: 1,
|
||||
title: "Pencetakan Buku",
|
||||
url: "/placeholder-photo-1.jpg"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Pengemasan Donasi",
|
||||
url: "/placeholder-photo-2.jpg"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Siti Menerima Buku",
|
||||
url: "/placeholder-photo-3.jpg"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const handleSearch = (e) => {
|
||||
e.preventDefault();
|
||||
// In a real application, this would be an API call
|
||||
if (trackingId) {
|
||||
setSearchResult(mockDonationData);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow-sm">
|
||||
<div className="container mx-auto px-6 py-4">
|
||||
<Link to="/" className="flex items-center text-teal-600 hover:text-teal-700 transition-colors">
|
||||
<ArrowLeft className="w-5 h-5 mr-2" />
|
||||
<span className="font-medium">Kembali ke Beranda</span>
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="py-16">
|
||||
<div className="container mx-auto px-6 max-w-4xl">
|
||||
<div className="text-center mb-16">
|
||||
<motion.h1
|
||||
className="text-4xl font-bold text-slate-900 mb-6"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
Lacak Donasi Buku
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
className="text-xl text-slate-600 max-w-2xl mx-auto"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
Lihat perjalanan buku donasi Anda dan bagikan kebahagiaan dengan anak di pelosok Indonesia
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
{/* Search Section */}
|
||||
<motion.div
|
||||
className="bg-white rounded-2xl shadow-sm border border-teal-100 p-8 mb-12"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-slate-800 mb-6 text-center">Masukkan ID Donasi</h2>
|
||||
|
||||
<form onSubmit={handleSearch} className="max-w-md mx-auto">
|
||||
<div className="flex">
|
||||
<input
|
||||
type="text"
|
||||
value={trackingId}
|
||||
onChange={(e) => setTrackingId(e.target.value)}
|
||||
placeholder="Contoh: DON-2023-005678"
|
||||
className="flex-grow px-4 py-3 border border-slate-300 rounded-l-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-colors"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-teal-500 hover:bg-teal-600 text-white font-bold py-3 px-6 rounded-r-lg transition-colors"
|
||||
>
|
||||
Lacak
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-slate-500 text-sm mt-2 text-center">
|
||||
ID Donasi dapat ditemukan di email konfirmasi atau dashboard Anda
|
||||
</p>
|
||||
</form>
|
||||
</motion.div>
|
||||
|
||||
{/* Tracking Result */}
|
||||
{searchResult && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<div className="bg-white rounded-2xl shadow-sm border border-teal-100 overflow-hidden mb-8">
|
||||
<div className="bg-teal-500 text-white p-6">
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">Detail Donasi</h2>
|
||||
<p className="text-teal-100">ID Donasi: {searchResult.donationId}</p>
|
||||
</div>
|
||||
<div className="mt-4 md:mt-0">
|
||||
<span className="bg-white/20 py-1 px-3 rounded-full text-sm font-medium">
|
||||
{searchResult.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
<div className="grid md:grid-cols-2 gap-6 mb-8">
|
||||
<div>
|
||||
<h3 className="font-bold text-slate-800 mb-3">Informasi Buku</h3>
|
||||
<ul className="text-slate-600 space-y-2">
|
||||
<li className="flex justify-between">
|
||||
<span>Judul Buku:</span>
|
||||
<span className="font-medium">{searchResult.bookTitle}</span>
|
||||
</li>
|
||||
<li className="flex justify-between">
|
||||
<span>Anak Donatur:</span>
|
||||
<span className="font-medium">{searchResult.donorChild}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-bold text-slate-800 mb-3">Informasi Penerima</h3>
|
||||
<ul className="text-slate-600 space-y-2">
|
||||
<li className="flex justify-between">
|
||||
<span>Nama Penerima:</span>
|
||||
<span className="font-medium">{searchResult.recipientChild}</span>
|
||||
</li>
|
||||
<li className="flex justify-between">
|
||||
<span>Lokasi:</span>
|
||||
<span className="font-medium text-right">{searchResult.recipientLocation}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Timeline */}
|
||||
<div className="mb-8">
|
||||
<h3 className="font-bold text-slate-800 mb-6">Perjalanan Donasi</h3>
|
||||
|
||||
<div className="relative">
|
||||
{/* Timeline line */}
|
||||
<div className="absolute left-4 top-0 bottom-0 w-0.5 bg-teal-200 transform translate-x-1/2"></div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{searchResult.statusHistory.map((status, index) => (
|
||||
<div key={status.id} className="relative flex items-start">
|
||||
<div className={`absolute left-0 w-8 h-8 rounded-full flex items-center justify-center z-10 ${
|
||||
index === searchResult.statusHistory.length - 1
|
||||
? 'bg-teal-500 text-white'
|
||||
: 'bg-teal-100 text-teal-500'
|
||||
}`}>
|
||||
{status.icon}
|
||||
</div>
|
||||
<div className="ml-12">
|
||||
<div className="flex flex-wrap items-center gap-2 mb-1">
|
||||
<h4 className="font-bold text-slate-800">{status.status}</h4>
|
||||
<div className="flex items-center text-slate-500 text-sm">
|
||||
<Clock className="w-4 h-4 mr-1" />
|
||||
<span>{status.date} pukul {status.time}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-slate-600">{status.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Photos */}
|
||||
<div>
|
||||
<h3 className="font-bold text-slate-800 mb-6">Dokumentasi</h3>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
{searchResult.photos.map((photo) => (
|
||||
<div key={photo.id} className="bg-slate-50 rounded-xl overflow-hidden">
|
||||
<div className="bg-gray-200 border-2 border-dashed rounded-xl w-full h-40" />
|
||||
<div className="p-3">
|
||||
<p className="text-slate-700 font-medium text-sm">{photo.title}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-slate-600 mb-4">
|
||||
Untuk menjaga privasi anak, wajah penerima donasi tidak ditampilkan secara langsung.
|
||||
</p>
|
||||
<Link to="/donation-program" className="text-teal-600 hover:text-teal-700 font-medium flex items-center justify-center">
|
||||
Pelajari lebih lanjut tentang program donasi
|
||||
<svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="bg-gradient-to-r from-teal-500 to-teal-600 rounded-2xl p-8 text-white text-center"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h3 className="text-2xl font-bold mb-4">Bagikan Kebahagiaan</h3>
|
||||
<p className="mb-6 max-w-2xl mx-auto">
|
||||
Ceritakan pengalaman donasi Anda dan bantu kami menjangkau lebih banyak keluarga untuk menyebarkan kebahagiaan literasi.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-4">
|
||||
<button className="bg-white text-teal-600 hover:bg-slate-100 font-bold py-3 px-6 rounded-full transition-colors">
|
||||
Bagikan di Media Sosial
|
||||
</button>
|
||||
<Link
|
||||
to="/create-story"
|
||||
className="bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-full transition-colors"
|
||||
>
|
||||
Buat Donasi Lagi
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Info Section (when no search result) */}
|
||||
{!searchResult && (
|
||||
<motion.div
|
||||
className="grid md:grid-cols-2 gap-8"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
>
|
||||
<div className="bg-white p-8 rounded-2xl border border-teal-100 shadow-sm">
|
||||
<div className="w-12 h-12 bg-teal-100 rounded-full flex items-center justify-center text-teal-600 mb-6">
|
||||
<BookHeart className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-4">Cara Melacak Donasi</h3>
|
||||
<ul className="text-slate-600 space-y-3">
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">1.</span>
|
||||
<span>Temukan ID Donasi di email konfirmasi atau dashboard Anda</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">2.</span>
|
||||
<span>Masukkan ID Donasi di kolom pencarian di atas</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">3.</span>
|
||||
<span>Lihat detail perjalanan buku donasi</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-8 rounded-2xl border border-teal-100 shadow-sm">
|
||||
<div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center text-orange-600 mb-6">
|
||||
<Shield className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-4">Privasi Terjaga</h3>
|
||||
<p className="text-slate-600 mb-4">
|
||||
Kami menjaga privasi penerima donasi dengan:
|
||||
</p>
|
||||
<ul className="text-slate-600 space-y-2">
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Tidak menampilkan wajah penerima secara langsung</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Mengaburkan lokasi spesifik dalam dokumentasi</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Mematuhi semua regulasi perlindungan data</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
240
bookoomoo-app/src/pages/FAQPage.jsx
Normal file
240
bookoomoo-app/src/pages/FAQPage.jsx
Normal file
@@ -0,0 +1,240 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowLeft, HelpCircle, BookHeart, CreditCard, Truck, Shield } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function FAQPage() {
|
||||
const [openIndex, setOpenIndex] = useState(null);
|
||||
|
||||
const toggleAccordion = (index) => {
|
||||
setOpenIndex(openIndex === index ? null : index);
|
||||
};
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
category: "Umum",
|
||||
icon: <HelpCircle className="w-5 h-5" />,
|
||||
questions: [
|
||||
{
|
||||
question: "Apa itu Bookoomoo?",
|
||||
answer: "Bookoomoo adalah platform yang memungkinkan Anda membuat buku cerita personal untuk anak Anda, sekaligus berdonasi buku yang sama untuk anak di pelosok Indonesia melalui program 'Buy 1 Donate 1'."
|
||||
},
|
||||
{
|
||||
question: "Bagaimana cara kerja Bookoomoo?",
|
||||
answer: "Anda memesan buku personal untuk anak Anda dengan nama mereka sebagai tokoh utama. Kami secara otomatis mendonasikan buku yang sama ke anak di pelosok, dengan wajah anak Anda muncul di halaman donasi sebagai penanda kasih."
|
||||
},
|
||||
{
|
||||
question: "Apakah buku donasi benar-benar sampai ke anak yang membutuhkan?",
|
||||
answer: "Ya, kami bekerja sama dengan berbagai organisasi pendidikan dan relawan di seluruh Indonesia untuk memastikan setiap buku donasi sampai ke tangan anak yang membutuhkan. Anda juga bisa melacak perjalanan buku donasi melalui QR code."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "Pemesanan & Pembayaran",
|
||||
icon: <CreditCard className="w-5 h-5" />,
|
||||
questions: [
|
||||
{
|
||||
question: "Bagaimana cara memesan buku di Bookoomoo?",
|
||||
answer: "Anda bisa memesan buku dengan mengklik tombol 'Mulai Bercerita' di beranda kami. Ikuti langkah-langkah untuk memasukkan nama anak, memilih tema, dan menyelesaikan pembayaran."
|
||||
},
|
||||
{
|
||||
question: "Metode pembayaran apa yang tersedia?",
|
||||
answer: "Kami menerima pembayaran melalui transfer bank, kartu kredit/debit, dan berbagai platform pembayaran digital seperti GoPay, OVO, dan DANA."
|
||||
},
|
||||
{
|
||||
question: "Apakah bisa memesan lebih dari satu buku sekaligus?",
|
||||
answer: "Tentu! Anda bisa memesan buku untuk beberapa anak sekaligus. Setiap buku akan dipersonalisasi sesuai dengan nama dan informasi anak yang bersangkutan."
|
||||
},
|
||||
{
|
||||
question: "Apakah ada kebijakan pengembalian dana?",
|
||||
answer: "Karena setiap buku dipersonalisasi secara khusus, kami tidak menerima pengembalian dana untuk pembelian yang sudah diproses. Namun, jika ada kesalahan dalam konten buku, kami akan dengan senang hati memperbaikinya atau mencetak ulang."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "Donasi",
|
||||
icon: <Heart className="w-5 h-5" />,
|
||||
questions: [
|
||||
{
|
||||
question: "Bagaimana program donasi bekerja?",
|
||||
answer: "Untuk setiap buku yang Anda pesan, kami secara otomatis mendonasikan satu buku yang sama ke anak di pelosok Indonesia. Wajah anak Anda akan muncul di halaman donasi sebagai penanda kasih."
|
||||
},
|
||||
{
|
||||
question: "Bisakah saya memilih lokasi donasi?",
|
||||
answer: "Saat ini Anda belum bisa memilih lokasi spesifik untuk donasi. Buku donasi akan dikirim ke lokasi yang membutuhkan berdasarkan kerjasama kami dengan mitra distribusi."
|
||||
},
|
||||
{
|
||||
question: "Apakah saya bisa melihat foto penerima donasi?",
|
||||
answer: "Untuk menjaga privasi penerima donasi, kami tidak menampilkan foto wajah mereka secara langsung. Namun, kami menyediakan laporan umum tentang distribusi donasi dan dokumentasi kegiatan secara berkala."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "Buku & Konten",
|
||||
icon: <BookHeart className="w-5 h-5" />,
|
||||
questions: [
|
||||
{
|
||||
question: "Bahasa apa saja yang tersedia untuk buku?",
|
||||
answer: "Buku tersedia dalam versi bilingual Bahasa Indonesia dan Bahasa Inggris untuk memperkaya pengalaman literasi anak."
|
||||
},
|
||||
{
|
||||
question: "Berapa jumlah halaman dalam setiap buku?",
|
||||
answer: "Setiap buku memiliki 20-24 halaman yang penuh dengan ilustrasi menarik dan cerita edukatif yang disesuaikan dengan usia anak."
|
||||
},
|
||||
{
|
||||
question: "Apakah bisa mengedit cerita setelah memesan?",
|
||||
answer: "Setelah pesanan diproses, pengeditan cerita tidak dapat dilakukan. Namun, jika pesanan belum diproses, Anda bisa menghubungi layanan pelanggan kami untuk melakukan perubahan."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "Pengiriman",
|
||||
icon: <Truck className="w-5 h-5" />,
|
||||
questions: [
|
||||
{
|
||||
question: "Berapa lama waktu pengiriman buku?",
|
||||
answer: "Waktu pengiriman buku biasanya 7-14 hari kerja setelah pesanan diproses. Waktu pengiriman buku donasi bisa lebih lama tergantung lokasi tujuan."
|
||||
},
|
||||
{
|
||||
question: "Apakah bisa mengirim ke alamat berbeda?",
|
||||
answer: "Ya, Anda bisa menentukan alamat pengiriman yang berbeda saat checkout. Pastikan alamat yang dimasukkan sudah benar untuk menghindari kendala pengiriman."
|
||||
},
|
||||
{
|
||||
question: "Bagaimana cara melacak pengiriman buku?",
|
||||
answer: "Anda akan menerima email dengan nomor tracking setelah buku dikirim. Untuk buku donasi, Anda bisa melacak perjalanan buku melalui QR code yang tersedia di buku Anda."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
category: "Privasi & Keamanan",
|
||||
icon: <Shield className="w-5 h-5" />,
|
||||
questions: [
|
||||
{
|
||||
question: "Bagaimana Bookoomoo melindungi data pribadi saya?",
|
||||
answer: "Kami menerapkan berbagai langkah keamanan untuk melindungi informasi pribadi Anda, termasuk enkripsi data dan akses terbatas ke server kami. Silakan baca Kebijakan Privasi kami untuk informasi lebih lanjut."
|
||||
},
|
||||
{
|
||||
question: "Apakah foto anak saya akan dipublikasikan?",
|
||||
answer: "Foto anak Anda hanya digunakan untuk personalisasi buku dan donasi. Kami tidak akan mempublikasikan foto anak Anda tanpa izin eksplisit dari Anda."
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow-sm">
|
||||
<div className="container mx-auto px-6 py-4">
|
||||
<Link to="/" className="flex items-center text-teal-600 hover:text-teal-700 transition-colors">
|
||||
<ArrowLeft className="w-5 h-5 mr-2" />
|
||||
<span className="font-medium">Kembali ke Beranda</span>
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="py-16">
|
||||
<div className="container mx-auto px-6 max-w-4xl">
|
||||
<div className="text-center mb-16">
|
||||
<motion.h1
|
||||
className="text-4xl font-bold text-slate-900 mb-6"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
Pertanyaan yang Sering Diajukan
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
className="text-xl text-slate-600"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
Temukan jawaban untuk pertanyaan Anda tentang Bookoomoo
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
{faqs.map((category, categoryIndex) => (
|
||||
<motion.div
|
||||
key={categoryIndex}
|
||||
className="bg-white rounded-2xl shadow-sm border border-teal-100 overflow-hidden"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: categoryIndex * 0.1 }}
|
||||
>
|
||||
<div className="bg-teal-500 text-white p-6">
|
||||
<h2 className="text-2xl font-bold flex items-center">
|
||||
<span className="mr-3 p-2 bg-white/20 rounded-lg">
|
||||
{category.icon}
|
||||
</span>
|
||||
{category.category}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
{category.questions.map((faq, index) => (
|
||||
<div key={index} className="border-b border-slate-100 last:border-b-0">
|
||||
<button
|
||||
className="flex justify-between items-center w-full py-4 text-left font-medium text-slate-800 hover:text-teal-600 transition-colors"
|
||||
onClick={() => toggleAccordion(`${categoryIndex}-${index}`)}
|
||||
>
|
||||
<span>{faq.question}</span>
|
||||
<svg
|
||||
className={`w-5 h-5 transform transition-transform ${openIndex === `${categoryIndex}-${index}` ? 'rotate-180' : ''}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div
|
||||
className={`overflow-hidden transition-all duration-300 ${
|
||||
openIndex === `${categoryIndex}-${index}` ? 'max-h-96 pb-4' : 'max-h-0'
|
||||
}`}
|
||||
>
|
||||
<p className="text-slate-600 pl-2">
|
||||
{faq.answer}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="bg-gradient-to-r from-teal-500 to-teal-600 rounded-2xl p-8 text-white text-center mt-16"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7 }}
|
||||
>
|
||||
<h3 className="text-2xl font-bold mb-4">Masih ada pertanyaan?</h3>
|
||||
<p className="mb-6 max-w-2xl mx-auto">
|
||||
Tim kami siap membantu Anda dengan pertanyaan apa pun tentang Bookoomoo, pemesanan, atau program donasi.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-4">
|
||||
<Link
|
||||
to="/contact"
|
||||
className="bg-white text-teal-600 hover:bg-slate-100 font-bold py-3 px-6 rounded-full transition-colors"
|
||||
>
|
||||
Hubungi Kami
|
||||
</Link>
|
||||
<Link
|
||||
to="/create-story"
|
||||
className="bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-full transition-colors"
|
||||
>
|
||||
Mulai Bercerita
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,147 +1,847 @@
|
||||
import React from 'react'
|
||||
import { BookOpen, Download, Gift, Printer, Sparkles, Users, Wand2 } from 'lucide-react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { useState } from 'react';
|
||||
import { Star, BookHeart, Gift, Truck, Smile, Users, ArrowRight, Menu, X, Heart, Rocket, Sparkles } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
function Section({ children, className='' }){
|
||||
return <section className={`mx-auto w-full max-w-6xl px-4 ${className}`}>{children}</section>
|
||||
}
|
||||
// Helper component for Bento Grid items
|
||||
const FeatureCard = ({ icon, title, children }) => (
|
||||
<motion.div
|
||||
className="bg-white/60 backdrop-blur-sm p-6 rounded-2xl border border-teal-100 shadow-sm hover:shadow-lg transition-shadow duration-300 h-full"
|
||||
whileHover={{ y: -5 }}
|
||||
transition={{ type: "spring", stiffness: 300 }}
|
||||
>
|
||||
<div className="flex items-center justify-center w-12 h-12 bg-teal-500 text-white rounded-full mb-4">
|
||||
{icon}
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-2">{title}</h3>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
// Helper component for Testimonial cards
|
||||
const TestimonialCard = ({ quote, author, location }) => (
|
||||
<motion.div
|
||||
className="bg-white p-6 rounded-xl shadow-md border border-gray-100 h-full flex flex-col justify-between"
|
||||
whileHover={{ y: -5 }}
|
||||
transition={{ type: "spring", stiffness: 300 }}
|
||||
>
|
||||
<p className="text-slate-700 italic">"{quote}"</p>
|
||||
<p className="text-right font-bold text-teal-600 mt-4">- {author}, {location}</p>
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
export default function LandingPage() {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
|
||||
export default function LandingPage(){
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-white to-neutral-50 text-neutral-900">
|
||||
<header className="sticky top-0 z-20 bg-white/70 backdrop-blur border-b">
|
||||
<div className="mx-auto flex max-w-6xl items-center gap-3 px-4 py-3">
|
||||
<Link to="/landing" className="flex items-center gap-2">
|
||||
<div className="grid h-9 w-9 place-items-center rounded-xl bg-gradient-to-br from-amber-500 to-orange-600 text-white shadow">📚</div>
|
||||
<div className="text-lg font-semibold tracking-tight">Bookoomoo</div>
|
||||
</Link>
|
||||
<nav className="ml-auto hidden gap-5 md:flex">
|
||||
<a href="#fitur" className="text-sm text-neutral-700 hover:text-neutral-900">Fitur</a>
|
||||
<a href="#cara" className="text-sm text-neutral-700 hover:text-neutral-900">Cara Kerja</a>
|
||||
<a href="#donasi" className="text-sm text-neutral-700 hover:text-neutral-900">Donasi</a>
|
||||
<div className="bg-slate-50 text-slate-800">
|
||||
{/* Header */}
|
||||
<motion.header
|
||||
className="sticky top-0 bg-gradient-to-r from-teal-500 to-teal-600 shadow-lg z-50"
|
||||
initial={{ y: -100 }}
|
||||
animate={{ y: 0 }}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 30 }}
|
||||
>
|
||||
<div className="container mx-auto px-4 sm:px-6 py-3 flex justify-between items-center">
|
||||
<motion.div
|
||||
className="flex items-center"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
>
|
||||
<div className="bg-white text-teal-600 w-10 h-10 rounded-full flex items-center justify-center font-bold text-xl mr-2">
|
||||
B
|
||||
</div>
|
||||
<Link to="/" className="text-white text-2xl font-bold tracking-tight">
|
||||
Bookoomoo
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:flex items-center space-x-1">
|
||||
<motion.a
|
||||
href="#features"
|
||||
className="text-white/90 hover:text-white px-4 py-2 rounded-full hover:bg-white/10 transition-all duration-300 font-medium"
|
||||
whileHover={{ y: -2 }}
|
||||
>
|
||||
Fitur
|
||||
</motion.a>
|
||||
<motion.a
|
||||
href="#impact"
|
||||
className="text-white/90 hover:text-white px-4 py-2 rounded-full hover:bg-white/10 transition-all duration-300 font-medium"
|
||||
whileHover={{ y: -2 }}
|
||||
>
|
||||
Dampak
|
||||
</motion.a>
|
||||
<motion.div whileHover={{ y: -2 }}>
|
||||
<Link to="/login" className="text-white/90 hover:text-white px-4 py-2 rounded-full hover:bg-white/10 transition-all duration-300 font-medium">Login</Link>
|
||||
</motion.div>
|
||||
<motion.div whileHover={{ scale: 1.05 }}>
|
||||
<Link to="/create-story" className="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-6 rounded-full transition-all duration-300 shadow-md hover:shadow-lg flex items-center">
|
||||
<span>Mulai Bercerita</span>
|
||||
<Sparkles className="ml-2 w-4 h-4" />
|
||||
</Link>
|
||||
</motion.div>
|
||||
</nav>
|
||||
<Link to="/login" className="ml-auto md:ml-4 inline-flex items-center rounded-xl bg-neutral-900 px-4 py-2 text-sm text-white shadow hover:bg-neutral-800">Masuk</Link>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<motion.button
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
className="md:hidden text-white z-50 p-2 rounded-full hover:bg-white/10"
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
{isMenuOpen ? <X size={24} /> : <Menu size={24} />}
|
||||
</motion.button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
<motion.div
|
||||
className={`absolute top-0 left-0 w-full bg-gradient-to-b from-teal-500 to-teal-600 shadow-xl md:hidden ${isMenuOpen ? 'block' : 'hidden'}`}
|
||||
initial={false}
|
||||
animate={{ height: isMenuOpen ? '100vh' : 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<div className="container mx-auto px-6 pt-24 pb-8 flex flex-col h-full">
|
||||
<nav className="flex flex-col items-center text-center space-y-6 flex-grow">
|
||||
<motion.a
|
||||
href="#features"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
className="text-white text-2xl hover:text-teal-100 transition-colors font-medium py-3 w-full"
|
||||
whileHover={{ x: 5 }}
|
||||
>
|
||||
Fitur
|
||||
</motion.a>
|
||||
<motion.a
|
||||
href="#impact"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
className="text-white text-2xl hover:text-teal-100 transition-colors font-medium py-3 w-full"
|
||||
whileHover={{ x: 5 }}
|
||||
>
|
||||
Dampak
|
||||
</motion.a>
|
||||
<motion.div whileHover={{ x: 5 }}>
|
||||
<Link to="/login" onClick={() => setIsMenuOpen(false)} className="text-white text-2xl hover:text-teal-100 transition-colors font-medium py-3 w-full">
|
||||
Login
|
||||
</Link>
|
||||
</motion.div>
|
||||
</nav>
|
||||
|
||||
<motion.div
|
||||
className="mt-auto pt-8"
|
||||
whileHover={{ scale: 1.03 }}
|
||||
>
|
||||
<Link
|
||||
to="/create-story"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
className="bg-orange-500 hover:bg-orange-600 w-full text-white font-bold py-4 px-6 rounded-full transition-all duration-300 shadow-lg hover:shadow-xl flex items-center justify-center text-lg"
|
||||
>
|
||||
<span>Mulai Bercerita</span>
|
||||
<Sparkles className="ml-2" />
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.header>
|
||||
|
||||
<main>
|
||||
{/* Hero */}
|
||||
<Section className="pt-14 pb-10">
|
||||
<div className="grid items-center gap-8 md:grid-cols-2">
|
||||
<div>
|
||||
<h1 className="text-3xl font-extrabold leading-tight md:text-5xl">
|
||||
Buku Cerita Personal untuk Momen Berharga
|
||||
</h1>
|
||||
<p className="mt-3 text-neutral-600 md:text-lg">
|
||||
Ciptakan buku cerita unik untuk anak: tulis nama, pilih tema, tambahkan foto, lalu unduh PDF atau cetak fisik. Setiap pembelian, kami salurkan donasi buku ke anak yang membutuhkan.
|
||||
{/* Hero Section */}
|
||||
<section
|
||||
className="relative bg-cover bg-center text-white overflow-hidden"
|
||||
style={{ backgroundImage: "url('/hero-bg.png')" }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-black/40"></div>
|
||||
<div className="container mx-auto px-6 py-20 md:py-28 relative z-10">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<motion.div
|
||||
className="text-center lg:text-left"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<motion.h1
|
||||
className="text-3xl sm:text-4xl md:text-5xl font-extrabold leading-tight mb-4"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
Saatnya Menyulap <span className="text-teal-300">Impian Jadi Kenyataan</span>
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
className="max-w-xl mx-auto lg:mx-0 text-base sm:text-lg text-gray-200 mb-8"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
Bayangkan betapa senangnya anakmu membaca cerita tentang dirinya sendiri.
|
||||
Dan bayangkan lagi, ada anak lain yang juga tersenyum melihat wajah teman barunya di halaman buku.
|
||||
</motion.p>
|
||||
<motion.div
|
||||
className="flex flex-col sm:flex-row gap-3 justify-center lg:justify-start"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
>
|
||||
<Link to="/create-story" className="bg-orange-500 text-white font-bold py-3 px-6 text-sm sm:text-base rounded-full hover:bg-orange-600 transition-transform transform hover:scale-105 shadow-lg inline-block whitespace-nowrap">
|
||||
Ciptakan Kebahagiaan <ArrowRight className="inline ml-1" />
|
||||
</Link>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
{/* The right column is empty, creating space on larger screens */}
|
||||
<div className="hidden lg:block"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating animation elements */}
|
||||
<motion.div
|
||||
className="absolute top-1/4 left-1/4 w-16 h-16 rounded-full bg-teal-300/20 blur-xl"
|
||||
animate={{
|
||||
y: [0, -20, 0],
|
||||
x: [0, 10, 0]
|
||||
}}
|
||||
transition={{
|
||||
duration: 4,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse"
|
||||
}}
|
||||
></motion.div>
|
||||
|
||||
<motion.div
|
||||
className="absolute bottom-1/3 right-1/4 w-12 h-12 rounded-full bg-orange-500/20 blur-xl"
|
||||
animate={{
|
||||
y: [0, 20, 0],
|
||||
x: [0, -10, 0]
|
||||
}}
|
||||
transition={{
|
||||
duration: 3,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse"
|
||||
}}
|
||||
></motion.div>
|
||||
</section>
|
||||
|
||||
{/* Story Section */}
|
||||
<section className="py-20 bg-white">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="text-center max-w-3xl mx-auto mb-16">
|
||||
<motion.h2
|
||||
className="text-sm font-bold uppercase text-teal-600 tracking-widest mb-2"
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
Sebuah Cerita
|
||||
</motion.h2>
|
||||
<motion.h3
|
||||
className="text-3xl md:text-4xl font-bold text-slate-800 mb-6"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
Tentang Dua Senyuman
|
||||
</motion.h3>
|
||||
<motion.p
|
||||
className="text-lg text-slate-600"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
>
|
||||
Di sebuah desa terpencil, ada Adi yang belum pernah punya buku cerita.
|
||||
Di kota besar, ada Bima yang punya banyak buku tapi belum tahu arti berbagi.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-12 items-center mb-20">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7 }}
|
||||
>
|
||||
<div className="bg-slate-50 p-8 rounded-2xl border border-teal-100 shadow-sm">
|
||||
<div className="flex items-center mb-6">
|
||||
<div className="w-12 h-12 bg-orange-500 rounded-full flex items-center justify-center text-white mr-4">
|
||||
<span className="text-xl font-bold">1</span>
|
||||
</div>
|
||||
<h4 className="text-2xl font-bold text-slate-800">Kisah Bima</h4>
|
||||
</div>
|
||||
<p className="text-slate-600 mb-4">
|
||||
Ibu Bima memesan buku cerita khusus untuk anaknya. Di buku itu, Bima adalah pahlawan kecil yang berpetualang ke berbagai negeri.
|
||||
</p>
|
||||
<p className="text-slate-600">
|
||||
Bima tertawa terbahak-bahak membaca cerita tentang dirinya. Tapi yang membuatnya lebih bahagia adalah tahu bahwa buku ini juga akan diberikan kepada teman baru.
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: 0.2 }}
|
||||
>
|
||||
<div className="bg-slate-50 p-8 rounded-2xl border border-teal-100 shadow-sm">
|
||||
<div className="flex items-center mb-6">
|
||||
<div className="w-12 h-12 bg-teal-500 rounded-full flex items-center justify-center text-white mr-4">
|
||||
<span className="text-xl font-bold">2</span>
|
||||
</div>
|
||||
<h4 className="text-2xl font-bold text-slate-800">Kisah Adi</h4>
|
||||
</div>
|
||||
<p className="text-slate-600 mb-4">
|
||||
Di desa terpencil, Adi menerima buku cerita pertamanya. Di halaman depan, ia melihat wajah seorang anak yang tersenyum.
|
||||
</p>
|
||||
<p className="text-slate-600">
|
||||
"Itu temanku dari kota," kata Bu Guru sambil menunjuk nama Bima di halaman. Adi tersenyum, merasa punya teman baru meski belum pernah bertemu.
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="text-center max-w-2xl mx-auto"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: 0.3 }}
|
||||
>
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 bg-teal-500 text-white rounded-full mb-6">
|
||||
<Heart className="w-8 h-8" />
|
||||
</div>
|
||||
<h4 className="text-2xl font-bold text-slate-800 mb-4">Satu Buku, Dua Senyuman</h4>
|
||||
<p className="text-lg text-slate-600">
|
||||
Setiap buku yang Anda pesan untuk anak tercinta akan menjadi hadiah untuk anak lain yang belum pernah punya buku cerita.
|
||||
Karena kebahagiaan terasa lebih lengkap saat dibagi.
|
||||
</p>
|
||||
<div className="mt-6 flex flex-wrap gap-2">
|
||||
<Link to="/login" className="inline-flex items-center gap-2 rounded-2xl bg-neutral-900 px-5 py-2.5 text-white shadow hover:bg-neutral-800">
|
||||
Coba Sekarang <Wand2 className="h-4 w-4"/>
|
||||
</Link>
|
||||
<a href="#fitur" className="inline-flex items-center gap-2 rounded-2xl border px-5 py-2.5 hover:bg-neutral-50">
|
||||
Lihat Fitur
|
||||
</a>
|
||||
</div>
|
||||
<div className="mt-4 flex items-center gap-4 text-sm text-neutral-600">
|
||||
<div className="inline-flex items-center gap-2"><Users className="h-4 w-4"/>Dipercaya orang tua kreatif</div>
|
||||
<div className="inline-flex items-center gap-2"><Sparkles className="h-4 w-4"/>Desain bersih & menyenangkan</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section id="features" className="py-20 bg-slate-50">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="text-center max-w-3xl mx-auto mb-16">
|
||||
<motion.h2
|
||||
className="text-3xl md:text-4xl font-bold text-slate-900 mb-4"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
Pengalaman Istimewa untuk Setiap Halaman
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
className="text-lg text-slate-600"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
Kami membuat setiap buku menjadi pengalaman magis yang tidak akan pernah dilupakan
|
||||
</motion.p>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<div className="aspect-[4/3] w-full rounded-2xl border bg-white shadow-sm grid place-items-center">
|
||||
<div className="text-center p-6">
|
||||
<div className="mx-auto grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br from-amber-500 to-orange-600 text-white shadow">📖</div>
|
||||
<p className="mt-3 text-sm text-neutral-600">Contoh tampilan buku cerita personal Bookoomoo</p>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.1 }}
|
||||
>
|
||||
<FeatureCard icon={<BookHeart />} title="Cerita Personal Berganda">
|
||||
<p className="text-slate-600">
|
||||
Cerita unik dengan nama anak Anda sebagai bintang utama. Tersedia dalam Bahasa Indonesia dan Inggris untuk pengalaman bilingual.
|
||||
</p>
|
||||
</FeatureCard>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
>
|
||||
<FeatureCard icon={<Smile />} title="Sentuhan Personal">
|
||||
<p className="text-slate-600">
|
||||
Wajah anak Anda muncul di halaman donasi sebagai penanda kasih sayang, membuat hubungan antara dua anak dari jarak jauh.
|
||||
</p>
|
||||
</FeatureCard>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.3 }}
|
||||
>
|
||||
<FeatureCard icon={<Gift />} title="Dua Versi, Satu Cerita">
|
||||
<p className="text-slate-600">
|
||||
Buku cetak premium untuk koleksi keluarga dan versi digital untuk dibaca kapan saja, di mana saja.
|
||||
</p>
|
||||
</FeatureCard>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.4 }}
|
||||
>
|
||||
<FeatureCard icon={<Truck />} title="Jejak Perjalanan">
|
||||
<p className="text-slate-600">
|
||||
Lacak perjalanan buku donasi melalui kode QR dan lihat betapa senangnya anak penerima saat menerima buku.
|
||||
</p>
|
||||
</FeatureCard>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.5 }}
|
||||
>
|
||||
<FeatureCard icon={<Users />} title="Dampak Nyata">
|
||||
<p className="text-slate-600">
|
||||
Setiap pembelian secara otomatis membantu meningkatkan literasi anak di pelosok Indonesia.
|
||||
</p>
|
||||
</FeatureCard>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.6 }}
|
||||
>
|
||||
<FeatureCard icon={<Star />} title="Kualitas Premium">
|
||||
<p className="text-slate-600">
|
||||
Buku dicetak dengan kertas dan tinta berkualitas tinggi agar tahan lama dan disukai anak-anak.
|
||||
</p>
|
||||
</FeatureCard>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Journey Section */}
|
||||
<section className="py-16 bg-white">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="text-center max-w-3xl mx-auto mb-12">
|
||||
<motion.h2
|
||||
className="text-3xl font-bold text-slate-900 mb-4"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
Perjalanan Penuh Kebahagiaan
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
className="text-lg text-slate-600"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
Dari ide cerita hingga senyuman di wajah dua anak
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
|
||||
{/* Step 1 */}
|
||||
<motion.div
|
||||
className="bg-white p-5 rounded-2xl border border-teal-100 shadow-sm text-center"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.1 }}
|
||||
>
|
||||
<div className="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<BookHeart className="w-8 h-8 text-orange-500" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Features */}
|
||||
<Section id="fitur" className="py-12">
|
||||
<h2 className="text-center text-2xl font-bold">Semua yang Kamu Butuhkan</h2>
|
||||
<p className="mx-auto mt-2 max-w-2xl text-center text-neutral-600">Dari ide hingga buku jadi — cepat, mudah, dan penuh makna.</p>
|
||||
<div className="mt-8 grid gap-4 md:grid-cols-3">
|
||||
{[{
|
||||
icon: <Wand2 className="h-5 w-5"/>,
|
||||
title: 'Buat Cerita Personal',
|
||||
desc: 'Tulis nama anak, pilih tema favorit, dan biarkan imajinasi bekerja.'
|
||||
},{
|
||||
icon: <Download className="h-5 w-5"/>,
|
||||
title: 'Unduh PDF',
|
||||
desc: 'Dapatkan versi digital berkualitas untuk dibaca di mana saja.'
|
||||
},{
|
||||
icon: <Printer className="h-5 w-5"/>,
|
||||
title: 'Cetak Fisik',
|
||||
desc: 'Pilihan cetak elegan untuk hadiah spesial dan kenang-kenangan.'
|
||||
}].map((f,i)=> (
|
||||
<div key={i} className="rounded-2xl border bg-white p-5 shadow-sm">
|
||||
<div className="mb-2 inline-grid h-10 w-10 place-items-center rounded-xl bg-neutral-900 text-white">{f.icon}</div>
|
||||
<div className="font-medium">{f.title}</div>
|
||||
<div className="mt-1 text-sm text-neutral-600">{f.desc}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* How it works */}
|
||||
<Section id="cara" className="py-12">
|
||||
<h2 className="text-center text-2xl font-bold">Cara Kerja</h2>
|
||||
<div className="mx-auto mt-6 grid max-w-4xl gap-4 md:grid-cols-3">
|
||||
{[
|
||||
{ step: '1', title: 'Tentukan Cerita', desc: 'Isi nama anak & pilih tema favorit.' },
|
||||
{ step: '2', title: 'Personalisasi', desc: 'Tambahkan foto atau detail lain sesuai keinginan.' },
|
||||
{ step: '3', title: 'Unduh / Cetak', desc: 'Simpan sebagai PDF atau pesan versi cetak.' },
|
||||
].map((s)=> (
|
||||
<div key={s.step} className="rounded-2xl border bg-white p-5 shadow-sm">
|
||||
<div className="mb-2 inline-flex h-8 w-8 items-center justify-center rounded-xl bg-neutral-900 text-white">{s.step}</div>
|
||||
<div className="font-medium">{s.title}</div>
|
||||
<div className="mt-1 text-sm text-neutral-600">{s.desc}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Donation */}
|
||||
<Section id="donasi" className="py-12">
|
||||
<div className="grid items-center gap-6 md:grid-cols-2">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold">Buy 1 Donate 1</h3>
|
||||
<p className="mt-2 text-neutral-600">Setiap pembelian cetak, kamu ikut berbagi buku untuk anak lain. Membaca menyebarkan kebaikan.</p>
|
||||
<div className="mt-4 inline-flex items-center gap-2 rounded-xl border bg-white px-3 py-2 text-sm shadow-sm">
|
||||
<Gift className="h-4 w-4"/> Donasi transparan & berdampak
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border bg-white p-5 shadow-sm">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="grid h-10 w-10 place-items-center rounded-xl bg-gradient-to-br from-fuchsia-500 to-purple-600 text-white">💝</div>
|
||||
<div>
|
||||
<div className="font-medium">Ratusan buku tersalurkan</div>
|
||||
<div className="text-sm text-neutral-600">Bersama komunitas & mitra pendidikan</div>
|
||||
<div className="w-8 h-8 bg-orange-500 rounded-full flex items-center justify-center text-white mx-auto mb-3 -mt-10 relative z-10">
|
||||
<span className="font-bold text-sm">1</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-slate-800 mb-2">Ciptakan Cerita</h3>
|
||||
<p className="text-slate-600 text-sm">
|
||||
Ceritakan petualangan unik anak Anda menjadi buku personal dengan ilustrasi indah.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Step 2 */}
|
||||
<motion.div
|
||||
className="bg-white p-5 rounded-2xl border border-teal-100 shadow-sm text-center"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
>
|
||||
<div className="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Smile className="w-8 h-8 text-teal-500" />
|
||||
</div>
|
||||
<div className="w-8 h-8 bg-teal-500 rounded-full flex items-center justify-center text-white mx-auto mb-3 -mt-10 relative z-10">
|
||||
<span className="font-bold text-sm">2</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-slate-800 mb-2">Personal Touch</h3>
|
||||
<p className="text-slate-600 text-sm">
|
||||
Wajah anak Anda diilustrasikan dengan AI canggih dan ditempatkan di halaman donasi.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Step 3 */}
|
||||
<motion.div
|
||||
className="bg-white p-5 rounded-2xl border border-teal-100 shadow-sm text-center"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: 0.3 }}
|
||||
>
|
||||
<div className="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Gift className="w-8 h-8 text-yellow-500" />
|
||||
</div>
|
||||
<div className="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center text-white mx-auto mb-3 -mt-10 relative z-10">
|
||||
<span className="font-bold text-sm">3</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-slate-800 mb-2">Kirim Kebahagiaan</h3>
|
||||
<p className="text-slate-600 text-sm">
|
||||
Buku dikirim ke rumah Anda dan ke anak di pelosok dengan jejak perjalanan yang bisa dilacak.
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<Section className="py-14">
|
||||
<div className="rounded-2xl border bg-white p-7 shadow-sm text-center">
|
||||
<h3 className="text-xl font-semibold">Mulai petualangan ceritamu hari ini</h3>
|
||||
<p className="mt-2 text-neutral-600">Bangun kebiasaan membaca yang menyenangkan dan penuh kenangan.</p>
|
||||
<div className="mt-5">
|
||||
<Link to="/login" className="inline-flex items-center gap-2 rounded-2xl bg-neutral-900 px-6 py-2.5 text-white shadow hover:bg-neutral-800">
|
||||
Buat Cerita Sekarang <BookOpen className="h-4 w-4"/>
|
||||
{/* Testimonials Section */}
|
||||
<section className="py-20 bg-slate-50">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="text-center max-w-3xl mx-auto mb-16">
|
||||
<motion.h2
|
||||
className="text-3xl md:text-4xl font-bold text-slate-900 mb-4"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
Cerita dari Hati
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
className="text-lg text-slate-600"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
Dengarkan pengalaman nyata dari keluarga yang telah bergabung dengan perjalanan Bookoomoo
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7 }}
|
||||
>
|
||||
<TestimonialCard
|
||||
quote="Waktu saya lihat foto anak penerima buku dengan wajah anak saya di halaman depan, rasanya haru banget. Anak saya jadi punya teman baru dari jauh."
|
||||
author="Rina"
|
||||
location="Jakarta"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: 0.2 }}
|
||||
>
|
||||
<TestimonialCard
|
||||
quote="Anak saya senang bukunya, tapi dia malah lebih bangga karena bisa memberi ke anak lain. Dia bilang, 'Aku punya teman baru di desa!'"
|
||||
author="Bima"
|
||||
location="Surabaya"
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Final CTA Section */}
|
||||
<section className="py-24 bg-gradient-to-r from-teal-500 to-teal-600 text-white overflow-hidden">
|
||||
<div className="container mx-auto px-6 text-center relative">
|
||||
{/* Floating animation elements */}
|
||||
<motion.div
|
||||
className="absolute top-10 left-10 w-16 h-16 rounded-full bg-white/10 blur-xl"
|
||||
animate={{
|
||||
y: [0, -20, 0],
|
||||
x: [0, 15, 0]
|
||||
}}
|
||||
transition={{
|
||||
duration: 5,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse"
|
||||
}}
|
||||
></motion.div>
|
||||
|
||||
<motion.div
|
||||
className="absolute bottom-10 right-10 w-12 h-12 rounded-full bg-white/10 blur-xl"
|
||||
animate={{
|
||||
y: [0, 20, 0],
|
||||
x: [0, -15, 0]
|
||||
}}
|
||||
transition={{
|
||||
duration: 4,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse"
|
||||
}}
|
||||
></motion.div>
|
||||
|
||||
<motion.div
|
||||
className="absolute top-1/3 right-1/4 w-8 h-8 rounded-full bg-white/10 blur-xl"
|
||||
animate={{
|
||||
scale: [1, 1.5, 1],
|
||||
}}
|
||||
transition={{
|
||||
duration: 3,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse"
|
||||
}}
|
||||
></motion.div>
|
||||
|
||||
<motion.h2
|
||||
className="text-3xl md:text-4xl font-bold mb-6"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
Siap Menjadi Bagian dari Cerita Ini?
|
||||
</motion.h2>
|
||||
|
||||
<motion.p
|
||||
className="text-lg text-teal-100 mb-10 max-w-2xl mx-auto"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
Ciptakan buku personal untuk anak Anda dan sebarkan kebahagiaan ke anak lain.
|
||||
Karena setiap halaman yang ditulis adalah langkah menuju dunia yang lebih berwarna.
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
<Link to="/create-story" className="bg-orange-500 text-white font-bold py-4 px-8 rounded-full text-lg hover:bg-orange-600 transition-transform transform hover:scale-105 shadow-lg inline-block whitespace-nowrap">
|
||||
Ciptakan Kebahagiaan Sekarang <ArrowRight className="inline ml-2" />
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</Section>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer className="border-t py-10 text-center text-xs text-neutral-500">© {new Date().getFullYear()} Bookoomoo — Be Different, Be You.</footer>
|
||||
{/* Footer */}
|
||||
<footer className="bg-gradient-to-r from-slate-800 to-slate-900 text-slate-300 pt-16 pb-8">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
|
||||
<div className="md:col-span-1">
|
||||
<motion.div
|
||||
className="flex items-center mb-4"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<div className="bg-teal-500 text-white w-10 h-10 rounded-full flex items-center justify-center font-bold text-xl mr-3">
|
||||
B
|
||||
</div>
|
||||
<h3 className="text-white text-2xl font-bold">Bookoomoo</h3>
|
||||
</motion.div>
|
||||
<motion.p
|
||||
className="mb-4 text-slate-400"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
Bukan sekadar buku. Ini cerita yang menyatukan hati.
|
||||
</motion.p>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
>
|
||||
<Link to="/create-story" className="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded-full text-sm transition-all duration-300 shadow-md hover:shadow-lg inline-flex items-center">
|
||||
<span>Mulai Bercerita</span>
|
||||
<Sparkles className="ml-1 w-4 h-4" />
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-1">
|
||||
<motion.h4
|
||||
className="text-white text-lg font-bold mb-4"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
Navigasi
|
||||
</motion.h4>
|
||||
<motion.ul
|
||||
className="space-y-2"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
<li>
|
||||
<motion.div whileHover={{ x: 5 }}>
|
||||
<Link to="/" className="text-slate-400 hover:text-white transition-colors">Beranda</Link>
|
||||
</motion.div>
|
||||
</li>
|
||||
<li>
|
||||
<motion.div whileHover={{ x: 5 }}>
|
||||
<a href="#features" className="text-slate-400 hover:text-white transition-colors">Fitur</a>
|
||||
</motion.div>
|
||||
</li>
|
||||
<li>
|
||||
<motion.div whileHover={{ x: 5 }}>
|
||||
<a href="#impact" className="text-slate-400 hover:text-white transition-colors">Dampak</a>
|
||||
</motion.div>
|
||||
</li>
|
||||
</motion.ul>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-1">
|
||||
<motion.h4
|
||||
className="text-white text-lg font-bold mb-4"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
Program
|
||||
</motion.h4>
|
||||
<motion.ul
|
||||
className="space-y-2"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
<li>
|
||||
<motion.div whileHover={{ x: 5 }}>
|
||||
<Link to="/donation-program" className="text-slate-400 hover:text-white transition-colors">Program Donasi</Link>
|
||||
</motion.div>
|
||||
</li>
|
||||
</motion.ul>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-1">
|
||||
<motion.h4
|
||||
className="text-white text-lg font-bold mb-4"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
Informasi
|
||||
</motion.h4>
|
||||
<motion.ul
|
||||
className="space-y-2"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
<li>
|
||||
<motion.div whileHover={{ x: 5 }}>
|
||||
<Link to="/about" className="text-slate-400 hover:text-white transition-colors">Tentang Kami</Link>
|
||||
</motion.div>
|
||||
</li>
|
||||
<li>
|
||||
<motion.div whileHover={{ x: 5 }}>
|
||||
<Link to="/contact" className="text-slate-400 hover:text-white transition-colors">Kontak</Link>
|
||||
</motion.div>
|
||||
</li>
|
||||
<li>
|
||||
<motion.div whileHover={{ x: 5 }}>
|
||||
<Link to="/faq" className="text-slate-400 hover:text-white transition-colors">FAQ</Link>
|
||||
</motion.div>
|
||||
</li>
|
||||
</motion.ul>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-1">
|
||||
<motion.h4
|
||||
className="text-white text-lg font-bold mb-4"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
Legal
|
||||
</motion.h4>
|
||||
<motion.ul
|
||||
className="space-y-2"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
<li>
|
||||
<motion.div whileHover={{ x: 5 }}>
|
||||
<Link to="/privacy" className="text-slate-400 hover:text-white transition-colors">Privasi</Link>
|
||||
</motion.div>
|
||||
</li>
|
||||
<li>
|
||||
<motion.div whileHover={{ x: 5 }}>
|
||||
<Link to="/terms" className="text-slate-400 hover:text-white transition-colors">Syarat & Ketentuan</Link>
|
||||
</motion.div>
|
||||
</li>
|
||||
</motion.ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="border-t border-slate-700 pt-8 mt-8 text-center"
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<div className="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-6 mb-4">
|
||||
<motion.div whileHover={{ y: -3 }}>
|
||||
<Link to="/facebook" className="text-slate-400 hover:text-white transition-colors">
|
||||
<Heart className="w-6 h-6" />
|
||||
</Link>
|
||||
</motion.div>
|
||||
<motion.div whileHover={{ y: -3 }}>
|
||||
<Link to="/instagram" className="text-slate-400 hover:text-white transition-colors">
|
||||
<Sparkles className="w-6 h-6" />
|
||||
</Link>
|
||||
</motion.div>
|
||||
<motion.div whileHover={{ y: -3 }}>
|
||||
<Link to="/twitter" className="text-slate-400 hover:text-white transition-colors">
|
||||
<BookHeart className="w-6 h-6" />
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
<motion.p
|
||||
className="text-sm text-slate-500"
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
© {new Date().getFullYear()} Bookoomoo. All rights reserved.
|
||||
</motion.p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
218
bookoomoo-app/src/pages/OrderConfirmationPage.jsx
Normal file
218
bookoomoo-app/src/pages/OrderConfirmationPage.jsx
Normal file
@@ -0,0 +1,218 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { motion } from 'framer-motion';
|
||||
import { CheckCircle, BookHeart, Gift, Truck, Download, QrCode } from 'lucide-react';
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
export default function OrderConfirmationPage() {
|
||||
const [orderData] = useState({
|
||||
orderId: "BOO-2023-001234",
|
||||
orderDate: new Date().toLocaleDateString('id-ID', { year: 'numeric', month: 'long', day: 'numeric' }),
|
||||
childName: "Budi",
|
||||
bookTitle: "Petualangan Budi di Negeri Ajaib",
|
||||
totalPrice: "Rp 185.000",
|
||||
deliveryAddress: "Jl. Melati No. 15, Jakarta Selatan",
|
||||
_estimatedDelivery: "7-10 hari kerja",
|
||||
donationTracking: "DON-2023-005678"
|
||||
});
|
||||
|
||||
const [countdown, setCountdown] = useState(5);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setCountdown(prev => {
|
||||
if (prev <= 1) {
|
||||
clearInterval(timer);
|
||||
return 0;
|
||||
}
|
||||
return prev - 1;
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50">
|
||||
<main className="py-16">
|
||||
<div className="container mx-auto px-6 max-w-4xl">
|
||||
<motion.div
|
||||
className="text-center mb-12"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<div className="w-20 h-20 bg-teal-500 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<CheckCircle className="w-12 h-12 text-white" />
|
||||
</div>
|
||||
<h1 className="text-4xl font-bold text-slate-900 mb-4">Pesanan Berhasil!</h1>
|
||||
<p className="text-xl text-slate-600">
|
||||
Terima kasih atas pesanan Anda. Kami akan segera memproses buku untuk {orderData.childName}.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="bg-white rounded-2xl shadow-sm border border-teal-100 overflow-hidden mb-8"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
<div className="bg-teal-500 text-white p-6">
|
||||
<h2 className="text-2xl font-bold">Detail Pesanan</h2>
|
||||
<p className="text-teal-100">ID Pesanan: {orderData.orderId}</p>
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
<div className="grid md:grid-cols-2 gap-6 mb-8">
|
||||
<div>
|
||||
<h3 className="font-bold text-slate-800 mb-3 flex items-center">
|
||||
<BookHeart className="w-5 h-5 mr-2 text-teal-500" />
|
||||
Buku Personal
|
||||
</h3>
|
||||
<ul className="text-slate-600 space-y-2">
|
||||
<li className="flex justify-between">
|
||||
<span>Judul Buku:</span>
|
||||
<span className="font-medium">{orderData.bookTitle}</span>
|
||||
</li>
|
||||
<li className="flex justify-between">
|
||||
<span>Nama Anak:</span>
|
||||
<span className="font-medium">{orderData.childName}</span>
|
||||
</li>
|
||||
<li className="flex justify-between">
|
||||
<span>Tanggal Pemesanan:</span>
|
||||
<span className="font-medium">{orderData.orderDate}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-bold text-slate-800 mb-3 flex items-center">
|
||||
<Gift className="w-5 h-5 mr-2 text-orange-500" />
|
||||
Donasi Buku
|
||||
</h3>
|
||||
<ul className="text-slate-600 space-y-2">
|
||||
<li className="flex justify-between">
|
||||
<span>ID Donasi:</span>
|
||||
<span className="font-medium">{orderData.donationTracking}</span>
|
||||
</li>
|
||||
<li className="flex justify-between">
|
||||
<span>Status:</span>
|
||||
<span className="font-medium text-green-600">Dikonfirmasi</span>
|
||||
</li>
|
||||
<li className="flex justify-between">
|
||||
<span>Estimasi Pengiriman:</span>
|
||||
<span className="font-medium">{orderData._estimatedDelivery}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-slate-100 pt-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-lg font-bold text-slate-800">Total Pembayaran:</span>
|
||||
<span className="text-2xl font-bold text-teal-600">{orderData.totalPrice}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="bg-white rounded-2xl shadow-sm border border-teal-100 overflow-hidden mb-8"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
>
|
||||
<div className="bg-slate-800 text-white p-6">
|
||||
<h2 className="text-2xl font-bold">Informasi Pengiriman</h2>
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
<div className="flex items-start mb-6">
|
||||
<div className="w-12 h-12 bg-teal-100 rounded-full flex items-center justify-center text-teal-600 mr-4 flex-shrink-0">
|
||||
<Truck className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-slate-800 mb-1">Alamat Pengiriman</h3>
|
||||
<p className="text-slate-600">{orderData.deliveryAddress}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-50 rounded-xl p-6">
|
||||
<h3 className="font-bold text-slate-800 mb-4">Tracking Donasi</h3>
|
||||
<div className="flex flex-col md:flex-row items-center">
|
||||
<div className="bg-white p-4 rounded-lg mb-4 md:mb-0 md:mr-6">
|
||||
<QrCode className="w-24 h-24 text-slate-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-slate-600 mb-4">
|
||||
Gunakan QR code di atas untuk melacak perjalanan buku donasi. Anda juga bisa mengakses tracking melalui dashboard Anda.
|
||||
</p>
|
||||
<Link to="/dashboard/donations" className="text-teal-600 hover:text-teal-700 font-medium flex items-center">
|
||||
Lihat Detail Tracking
|
||||
<svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="bg-gradient-to-r from-teal-500 to-teal-600 rounded-2xl p-8 text-white text-center"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.6 }}
|
||||
>
|
||||
<h3 className="text-2xl font-bold mb-4">Apa yang Harus Anda Lakukan Selanjutnya?</h3>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6 mb-8">
|
||||
<div className="bg-white/10 p-4 rounded-xl">
|
||||
<Download className="w-8 h-8 mx-auto mb-3" />
|
||||
<h4 className="font-bold mb-2">Unduh PDF</h4>
|
||||
<p className="text-teal-100 text-sm">
|
||||
Anda akan menerima email dengan tautan unduh versi digital buku dalam 24 jam.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/10 p-4 rounded-xl">
|
||||
<BookHeart className="w-8 h-8 mx-auto mb-3" />
|
||||
<h4 className="font-bold mb-2">Bagikan Kebahagiaan</h4>
|
||||
<p className="text-teal-100 text-sm">
|
||||
Ceritakan pengalaman Anda dan bantu kami menjangkau lebih banyak keluarga.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/10 p-4 rounded-xl">
|
||||
<Gift className="w-8 h-8 mx-auto mb-3" />
|
||||
<h4 className="font-bold mb-2">Ikuti Perjalanan</h4>
|
||||
<p className="text-teal-100 text-sm">
|
||||
Pantau perjalanan buku donasi melalui dashboard Anda.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mb-6">
|
||||
Anda akan dialihkan ke dashboard dalam {countdown} detik...
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-4">
|
||||
<Link
|
||||
to="/dashboard"
|
||||
className="bg-white text-teal-600 hover:bg-slate-100 font-bold py-3 px-6 rounded-full transition-colors"
|
||||
>
|
||||
Lihat Dashboard
|
||||
</Link>
|
||||
<Link
|
||||
to="/dashboard/orders"
|
||||
className="bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-full transition-colors"
|
||||
>
|
||||
Lihat Detail Pesanan
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
196
bookoomoo-app/src/pages/PrivacyPolicyPage.jsx
Normal file
196
bookoomoo-app/src/pages/PrivacyPolicyPage.jsx
Normal file
@@ -0,0 +1,196 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowLeft, Shield, Lock, Eye, User } from 'lucide-react';
|
||||
|
||||
export default function PrivacyPolicyPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow-sm">
|
||||
<div className="container mx-auto px-6 py-4">
|
||||
<Link to="/" className="flex items-center text-teal-600 hover:text-teal-700 transition-colors">
|
||||
<ArrowLeft className="w-5 h-5 mr-2" />
|
||||
<span className="font-medium">Kembali ke Beranda</span>
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="py-16">
|
||||
<div className="container mx-auto px-6 max-w-4xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h1 className="text-4xl font-bold text-slate-900 mb-6 text-center">Kebijakan Privasi</h1>
|
||||
<p className="text-lg text-slate-600 text-center mb-12">
|
||||
Terakhir diperbarui: {new Date().toLocaleDateString('id-ID', { year: 'numeric', month: 'long', day: 'numeric' })}
|
||||
</p>
|
||||
|
||||
<div className="bg-white rounded-2xl p-8 shadow-sm border border-teal-100">
|
||||
<div className="flex items-center mb-6">
|
||||
<div className="w-12 h-12 bg-teal-100 rounded-full flex items-center justify-center text-teal-600 mr-4">
|
||||
<Shield className="w-6 h-6" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-slate-800">Komitmen Kami terhadap Privasi Anda</h2>
|
||||
</div>
|
||||
|
||||
<p className="text-slate-600 mb-6">
|
||||
Di Bookoomoo, kami sangat menghargai privasi Anda. Kebijakan Privasi ini menjelaskan bagaimana kami mengumpulkan, menggunakan, dan melindungi informasi pribadi Anda saat menggunakan layanan kami.
|
||||
</p>
|
||||
|
||||
<div className="space-y-8">
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-4 flex items-center">
|
||||
<Lock className="w-5 h-5 mr-2 text-teal-500" />
|
||||
Informasi yang Kami Kumpulkan
|
||||
</h3>
|
||||
<ul className="text-slate-600 space-y-2">
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span><strong>Informasi Pribadi:</strong> Nama, alamat email, nomor telepon, dan alamat pengiriman saat Anda membuat akun atau melakukan pembelian.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span><strong>Informasi Anak:</strong> Nama anak, tanggal lahir, dan foto anak untuk keperluan personalisasi buku dan donasi.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span><strong>Informasi Transaksi:</strong> Detail pembelian, metode pembayaran, dan riwayat pesanan.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span><strong>Informasi Teknis:</strong> Alamat IP, jenis browser, dan data penggunaan untuk meningkatkan layanan kami.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-4 flex items-center">
|
||||
<Eye className="w-5 h-5 mr-2 text-teal-500" />
|
||||
Bagaimana Kami Gunakan Informasi Anda
|
||||
</h3>
|
||||
<ul className="text-slate-600 space-y-2">
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Untuk membuat dan mempersonalisasi buku cerita untuk anak Anda.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Untuk memproses pesanan dan pengiriman buku.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Untuk memfasilitasi program donasi dengan menjaga privasi penerima.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Untuk menghubungi Anda tentang pesanan dan layanan kami.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Untuk meningkatkan pengalaman pengguna dan mengembangkan layanan kami.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-4 flex items-center">
|
||||
<User className="w-5 h-5 mr-2 text-teal-500" />
|
||||
Perlindungan Privasi Anak
|
||||
</h3>
|
||||
<p className="text-slate-600 mb-4">
|
||||
Kami sangat peduli dengan privasi anak-anak:
|
||||
</p>
|
||||
<ul className="text-slate-600 space-y-2">
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Foto anak hanya digunakan untuk personalisasi buku dan donasi, tidak untuk tujuan lain.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Informasi pribadi anak tidak akan kami bagikan kepada pihak ketiga tanpa izin.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Data anak akan kami hapus sesuai dengan ketentuan hukum yang berlaku.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-4">Pengungkapan Informasi</h3>
|
||||
<p className="text-slate-600 mb-4">
|
||||
Kami tidak menjual, memperdagangkan, atau menyewakan informasi pribadi Anda kepada pihak ketiga. Namun, kami dapat membagikan informasi dalam situasi berikut:
|
||||
</p>
|
||||
<ul className="text-slate-600 space-y-2">
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Dengan mitra pengiriman untuk memfasilitasi pengiriman buku.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Dengan penyedia pembayaran untuk memproses transaksi.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Jika diwajibkan oleh hukum atau untuk melindungi hak-hak kami.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-4">Keamanan Data</h3>
|
||||
<p className="text-slate-600">
|
||||
Kami menerapkan berbagai langkah keamanan untuk melindungi informasi pribadi Anda, termasuk enkripsi data dan akses terbatas ke server kami.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-4">Hak Anda</h3>
|
||||
<p className="text-slate-600 mb-4">
|
||||
Anda memiliki hak untuk:
|
||||
</p>
|
||||
<ul className="text-slate-600 space-y-2">
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Mengakses dan memperbarui informasi pribadi Anda.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Meminta penghapusan data pribadi Anda.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Menarik persetujuan penggunaan data kapan saja.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-4">Perubahan pada Kebijakan Ini</h3>
|
||||
<p className="text-slate-600">
|
||||
Kami dapat memperbarui Kebijakan Privasi ini dari waktu ke waktu. Kami akan memberi tahu Anda tentang perubahan dengan memposting kebijakan baru di halaman ini.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-4">Hubungi Kami</h3>
|
||||
<p className="text-slate-600">
|
||||
Jika Anda memiliki pertanyaan tentang Kebijakan Privasi ini, silakan hubungi kami di:
|
||||
</p>
|
||||
<div className="mt-4 bg-slate-50 p-4 rounded-lg">
|
||||
<p className="text-slate-600">
|
||||
<strong>Email:</strong> privacy@bookoomoo.com<br />
|
||||
<strong>Alamat:</strong> Jl. Literasi No. 123, Jakarta, Indonesia 12345
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
187
bookoomoo-app/src/pages/TermsAndConditionsPage.jsx
Normal file
187
bookoomoo-app/src/pages/TermsAndConditionsPage.jsx
Normal file
@@ -0,0 +1,187 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowLeft, FileText, CheckCircle, AlertCircle } from 'lucide-react';
|
||||
|
||||
export default function TermsAndConditionsPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow-sm">
|
||||
<div className="container mx-auto px-6 py-4">
|
||||
<Link to="/" className="flex items-center text-teal-600 hover:text-teal-700 transition-colors">
|
||||
<ArrowLeft className="w-5 h-5 mr-2" />
|
||||
<span className="font-medium">Kembali ke Beranda</span>
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="py-16">
|
||||
<div className="container mx-auto px-6 max-w-4xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h1 className="text-4xl font-bold text-slate-900 mb-6 text-center">Syarat dan Ketentuan</h1>
|
||||
<p className="text-lg text-slate-600 text-center mb-12">
|
||||
Terakhir diperbarui: {new Date().toLocaleDateString('id-ID', { year: 'numeric', month: 'long', day: 'numeric' })}
|
||||
</p>
|
||||
|
||||
<div className="bg-white rounded-2xl p-8 shadow-sm border border-teal-100">
|
||||
<p className="text-slate-600 mb-8">
|
||||
Selamat datang di Bookoomoo. Dengan mengakses atau menggunakan layanan kami, Anda menyetujui syarat dan ketentuan berikut. Mohon baca dengan seksama sebelum menggunakan layanan kami.
|
||||
</p>
|
||||
|
||||
<div className="space-y-8">
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-4 flex items-center">
|
||||
<CheckCircle className="w-5 h-5 mr-2 text-teal-500" />
|
||||
1. Penerimaan Syarat
|
||||
</h3>
|
||||
<p className="text-slate-600 mb-4">
|
||||
Dengan mengakses atau menggunakan layanan Bookoomoo, Anda menyetujui untuk terikat oleh Syarat dan Ketentuan ini, semua hukum dan peraturan yang berlaku, dan menyetujui bahwa Anda bertanggung jawab atas kepatuhan terhadap hukum setempat.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-4 flex items-center">
|
||||
<CheckCircle className="w-5 h-5 mr-2 text-teal-500" />
|
||||
2. Penggunaan Layanan
|
||||
</h3>
|
||||
<ul className="text-slate-600 space-y-2">
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Layanan Bookoomoo hanya boleh digunakan untuk tujuan yang sah dan sesuai dengan hukum.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Anda tidak boleh menggunakan layanan kami untuk tujuan ilegal atau tidak sah.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Anda bertanggung jawab penuh atas konten yang Anda unggah dan informasi yang Anda berikan.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-4 flex items-center">
|
||||
<CheckCircle className="w-5 h-5 mr-2 text-teal-500" />
|
||||
3. Hak Kekayaan Intelektual
|
||||
</h3>
|
||||
<ul className="text-slate-600 space-y-2">
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Seluruh konten, fitur, dan fungsionalitas di Bookoomoo adalah milik kami atau pemberi lisensi kami.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Buku yang dihasilkan adalah karya orisinal kami, namun Anda diberikan lisensi terbatas untuk penggunaan pribadi.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Foto anak yang Anda unggah tetap menjadi hak Anda, namun kami diberi izin untuk menggunakannya dalam konteks layanan kami.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-4 flex items-center">
|
||||
<CheckCircle className="w-5 h-5 mr-2 text-teal-500" />
|
||||
4. Pembelian dan Pembayaran
|
||||
</h3>
|
||||
<ul className="text-slate-600 space-y-2">
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Semua pembelian bersifat final dan tidak dapat dikembalikan, kecuali dalam kasus tertentu yang dijelaskan dalam kebijakan pengembalian kami.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Kami berhak menolak pesanan atau membatalkan pesanan dalam keadaan tertentu.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Harga dapat berubah sewaktu-waktu tanpa pemberitahuan terlebih dahulu.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-4 flex items-center">
|
||||
<CheckCircle className="w-5 h-5 mr-2 text-teal-500" />
|
||||
5. Program Donasi
|
||||
</h3>
|
||||
<ul className="text-slate-600 space-y-2">
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Program "Buy 1 Donate 1" dan "Full Donation" tunduk pada ketersediaan dan dapat diubah atau dihentikan kapan saja.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Kami berusaha menjaga privasi penerima donasi sesuai dengan kebijakan privasi kami.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Status pengiriman donasi dapat dilihat melalui fitur tracking yang tersedia.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-4 flex items-center">
|
||||
<CheckCircle className="w-5 h-5 mr-2 text-teal-500" />
|
||||
6. Batasan Tanggung Jawab
|
||||
</h3>
|
||||
<ul className="text-slate-600 space-y-2">
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Bookoomoo tidak bertanggung jawab atas kerusakan tidak langsung, insidental, khusus, konsekuensial atau hukuman yang timbul dari penggunaan layanan kami.</span>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<span className="mr-2">•</span>
|
||||
<span>Kami tidak menjamin bahwa layanan kami akan berjalan tanpa gangguan atau bebas dari kesalahan.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-4 flex items-center">
|
||||
<CheckCircle className="w-5 h-5 mr-2 text-teal-500" />
|
||||
7. Perubahan Syarat
|
||||
</h3>
|
||||
<p className="text-slate-600">
|
||||
Kami berhak untuk memperbarui atau mengubah Syarat dan Ketentuan ini kapan saja. Perubahan akan berlaku segera setelah diposting di situs web kami. Penggunaan layanan yang berkelanjutan setelah perubahan tersebut merupakan penerimaan atas perubahan tersebut.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-4 flex items-center">
|
||||
<AlertCircle className="w-5 h-5 mr-2 text-orange-500" />
|
||||
8. Hukum yang Mengatur
|
||||
</h3>
|
||||
<p className="text-slate-600">
|
||||
Syarat dan Ketentuan ini diatur oleh dan ditafsirkan sesuai dengan hukum Indonesia. Setiap sengketa yang timbul dari penggunaan layanan kami akan diselesaikan secara eksklusif di pengadilan Indonesia.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-slate-800 mb-4">9. Kontak</h3>
|
||||
<p className="text-slate-600 mb-4">
|
||||
Jika Anda memiliki pertanyaan tentang Syarat dan Ketentuan ini, silakan hubungi kami:
|
||||
</p>
|
||||
<div className="bg-slate-50 p-4 rounded-lg">
|
||||
<p className="text-slate-600">
|
||||
<strong>Email:</strong> legal@bookoomoo.com<br />
|
||||
<strong>Telepon:</strong> +62 21 1234 5678<br />
|
||||
<strong>Alamat:</strong> Jl. Literasi No. 123, Jakarta, Indonesia 12345
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user