chore(bookoomoo): add .gitignore and untrack build artifacts and brief file

bookoomoo-app/README.md

@@ -0,0 +1,33 @@
+# Bookoomoo App
+
+Dev server setup (Vite + React + Tailwind).
+
+## Prerequisites
+- Node.js 18+
+- npm 9+
+
+## Local env
+- Copy `.env.example` to `.env` and set `VITE_N8N_BASE_URL` if you have an n8n backend.
+
+## Install dependencies
+```
+# From repo root (monorepo workspaces)
+npm install
+```
+
+## Run dev server
+```
+# From repo root
+npm run dev:bookoomoo
+# Or inside the app folder
+cd bookoomoo-app && npm run dev
+```
+
+## Build
+```
+# From repo root
+npm run build:bookoomoo
+# Or inside the app folder
+cd bookoomoo-app && npm run build
+```
+

bookoomoo-app/src/App.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Routes, Route, Navigate } from 'react-router-dom'
 import Layout from './components/Layout'
+import LandingPage from './pages/LandingPage'
 import DashboardPage from './pages/DashboardPage'
 import CreateStoryPage from './pages/CreateStoryPage'
 import UploadPage from './pages/UploadPage'
@@ -22,6 +23,7 @@ function ProtectedRoute({ children }){
 export default function App(){
   return (
     <Routes>
+      <Route path="/landing" element={<LandingPage/>} />
       <Route path="/login" element={<LoginPage/>} />
       <Route
         path="/"
@@ -41,8 +43,7 @@ export default function App(){
         <Route path="donations" element={<DonationsPage/>} />
         <Route path="topup" element={<TopUpPage/>} />
       </Route>
-      <Route path="*" element={<Navigate to="/" replace />} />
+      <Route path="*" element={<Navigate to="/landing" replace />} />
     </Routes>
   )
 }
-

bookoomoo-app/src/pages/LandingPage.jsx

@@ -0,0 +1,147 @@
+import React from 'react'
+import { BookOpen, Download, Gift, Printer, Sparkles, Users, Wand2 } from 'lucide-react'
+import { Link } from 'react-router-dom'
+
+function Section({ children, className='' }){
+  return <section className={`mx-auto w-full max-w-6xl px-4 ${className}`}>{children}</section>
+}
+
+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>
+          </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>
+        </div>
+      </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.
+              </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>
+            </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>
+              </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>
+              </div>
+            </div>
+          </div>
+        </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"/>
+              </Link>
+            </div>
+          </div>
+        </Section>
+      </main>
+
+      <footer className="border-t py-10 text-center text-xs text-neutral-500">© {new Date().getFullYear()} Bookoomoo — Be Different, Be You.</footer>
+    </div>
+  )
+}
+