import React, { useMemo, useState } from "react"; import { BookOpen, Library, LogIn, Upload, ShoppingCart, Search, Star, Shield, CreditCard, User, ChevronLeft, ChevronRight, Menu, X, Sparkles } from "lucide-react"; import { motion, AnimatePresence } from "framer-motion"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Badge } from "@/components/ui/badge"; const sampleBooks = [ { id: 1, title: "The Lantern of Courage", author: "Jay Umboh", price: 6.99, age: "4–8", category: "Courage", cover: "https://images.unsplash.com/photo-1516979187457-637abb4f9353?q=80&w=1200&auto=format&fit=crop", description: "A heartfelt journey through the night where a child learns to see beauty in the dark.", featured: true, rating: 4.9, pages: [ { title: "Cover", text: "The Lantern of Courage\nBy Jay Umboh", }, { title: "Page 1", text: "Once upon a time, in a cozy town, there lived a little boy who loved adventure but feared the dark.", }, { title: "Page 2", text: "One magical evening, Grandma invited him on a journey to discover the beauty hidden in the night.", }, { title: "Page 3", text: "With each step, the darkness felt less scary and more like a world full of wonder.", }, { title: "Page 4", text: "At the end of the journey, he found the Lantern of Courage glowing softly in the moonlight.", }, ], }, { id: 2, title: "Milo and the Moon Kite", author: "Ava Rowan", price: 4.99, age: "3–7", category: "Imagination", cover: "https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?q=80&w=1200&auto=format&fit=crop", description: "A dreamy bedtime adventure about a kite that sails across the moon.", featured: false, rating: 4.8, pages: [ { title: "Cover", text: "Milo and the Moon Kite" }, { title: "Page 1", text: "Milo built a kite that shimmered like starlight." }, { title: "Page 2", text: "One windy night, it pulled him into a silver sky." }, { title: "Page 3", text: "He learned that bravery often feels like wonder first." }, ], }, { id: 3, title: "Penny's Tiny Garden", author: "Lena Hart", price: 3.99, age: "2–6", category: "Nature", cover: "https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?q=80&w=1200&auto=format&fit=crop", description: "A gentle story about patience, planting, and little miracles.", featured: false, rating: 4.7, pages: [ { title: "Cover", text: "Penny's Tiny Garden" }, { title: "Page 1", text: "Penny planted seeds in the tiniest patch of dirt." }, { title: "Page 2", text: "Every day she watered them and waited." }, { title: "Page 3", text: "Soon, color bloomed where hope had been planted." }, ], }, ]; const initialLibrary = [1, 2]; const publisherUploads = [ { title: "The Lantern of Courage", status: "Published", sales: 142, revenue: "$993" }, { title: "Milo and the Moon Kite", status: "Draft", sales: 0, revenue: "$0" }, ]; function Reader({ book, onBack }) { const [page, setPage] = useState(0); const current = book.pages[page]; return (

Digital Reader

{book.title}

by {book.author}

Back to Library

Reading Progress

Page {page + 1} of {book.pages.length}

{book.pages.map((p, index) => ( setPage(index)} className={`w-full rounded-2xl border px-3 py-2 text-left transition ${ index === page ? "border-stone-50 bg-stone-800 text-stone-50" : "border-stone-800 bg-stone-950 text-stone-400 hover:bg-stone-900" }`} > {p.title} ))}

Page-turn reader preview Tap arrows to turn pages

{current.title}

{current.text}

{book.title}

Interactive Illustration Space

In production, this area can render uploaded illustrated spreads, animated page turns, zoom, read-aloud, and mobile swipe gestures.

setPage((p) => Math.max(0, p - 1))} disabled={page === 0} > Previous

Designed for desktop, tablet, and mobile swipe reading

setPage((p) => Math.min(book.pages.length - 1, p + 1))} disabled={page === book.pages.length - 1} > Next

); } function BookCard({ book, owned, onBuy, onRead }) { return (

{book.title}

by {book.author}

{book.age}

{book.description}

{book.rating} • {book.category}

${book.price.toFixed(2)} {owned ? ( onRead(book)}> Read Now ) : ( onBuy(book.id)}> Buy Ebook )}

); } export default function ChildrensBookMarketplaceMVP() { const [mobileMenu, setMobileMenu] = useState(false); const [view, setView] = useState("home"); const [search, setSearch] = useState(""); const [libraryIds, setLibraryIds] = useState(initialLibrary); const [activeReaderBook, setActiveReaderBook] = useState(null); const books = useMemo(() => { return sampleBooks.filter((book) => { const haystack = `${book.title} ${book.author} ${book.category}`.toLowerCase(); return haystack.includes(search.toLowerCase()); }); }, [search]); const featured = sampleBooks.find((b) => b.featured) || sampleBooks[0]; const libraryBooks = sampleBooks.filter((b) => libraryIds.includes(b.id)); const nav = [ { key: "home", label: "Store" }, { key: "library", label: "My Library" }, { key: "publish", label: "For Authors" }, { key: "account", label: "Account" }, ]; const handleBuy = (bookId) => { if (!libraryIds.includes(bookId)) { setLibraryIds((prev) => [...prev, bookId]); } setView("library"); }; if (activeReaderBook) { return setActiveReaderBook(null)} />; } return (

setView("home")}>

StoryLantern

Digital children's book marketplace

Log In setView("publish")}> Upload Book

setMobileMenu((v) => !v)}> {mobileMenu ? : }

{mobileMenu && (

{nav.map((item) => ( { setView(item.key); setMobileMenu(false); }} > {item.label} ))}

)}

{view === "home" && ( <>

Launch-ready MVP concept

Sell digital children’s books with a bookstore, reader, and family library.

This concept includes author uploads, customer accounts, ebook checkout, a personal library, and a page-turn reading experience built specifically for illustrated books.

setView("publish")}>Start as an Author setView("library")}>See Customer Library

For readers

Instant ebook purchases

For authors

Upload and manage books

For families

Shelf of purchased stories

Featured book

{featured.title}

Bestseller

by {featured.author}

${featured.price.toFixed(2)}

handleBuy(featured.id)}> Buy & Add to Library

Browse the bookstore

Search by title, author, or theme.

setSearch(e.target.value)} className="rounded-2xl border-stone-200 bg-white pl-10" placeholder="Search books" />

{books.map((book) => ( setActiveReaderBook(b)} /> ))}

{[ { icon: Shield, title: "Secure accounts", text: "Customer login, purchase history, and protected library access." }, { icon: CreditCard, title: "Ebook checkout", text: "Stripe-style payments, instant delivery, and order confirmation." }, { icon: Library, title: "Personal shelf", text: "Every purchase appears inside the reader’s private library." }, ].map((item, idx) => (

{item.title}

{item.text}

))}

)} {view === "library" && (

Customer account

My Library

Purchased ebooks live here permanently for the customer.

setView("home")}>Shop More Books

{libraryBooks.map((book) => (

{book.title}

{book.author}

Owned

setActiveReaderBook(book)}>Open Reader Download EPUB

))}

)} {view === "publish" && (

Author Portal

Upload illustrated books, set pricing, manage metadata, and publish to your storefront.

Upload ebook files and cover art

Production version would support PDF-to-reader conversion, EPUB upload, covers, previews, and thumbnail generation.

Choose Files

Save Draft Preview Reader Submit for Publishing

Uploaded Books

{publisherUploads.map((item, idx) => (

{item.title}

{item.status}

Sales

{item.sales}

Revenue

{item.revenue}

))}

{[ "Royalty tracking dashboard", "Author profiles and bios", "Preview sample pages before purchase", ].map((text, i) => ( {text} ))}

)} {view === "account" && (

Reader Account

Parent / guardian profile

{[ ["Total Purchases", `${libraryIds.length} ebooks`], ["Saved Payment Method", "Visa ending in 4242"], ["Recent Activity", "Opened The Lantern of Courage"], ["Membership", "Standard"], ].map(([label, value]) => (

{label}

{value}

))}

)}

); }