Tisha-Nom's E-Commerce<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Permanent+Marker&family=Quicksand:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n \r\n <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/framer-motion@10.16.4\/dist\/framer-motion.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n \r\n <style>\r\n \/* Isolasi style agar tidak merusak Elementor *\/\r\n #tishanoms-root { \r\n display: block; \r\n font-family: 'Quicksand', sans-serif; \r\n background: #f9fafb;\r\n color: #111827;\r\n width: 100%;\r\n overflow-x: hidden;\r\n }\r\n .font-zuume { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.05em; }\r\n .font-marker { font-family: 'Permanent Marker', cursive; }\r\n \r\n \/* Scrollbar kustom *\/\r\n .custom-scrollbar::-webkit-scrollbar { width: 5px; }\r\n .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }\r\n .custom-scrollbar::-webkit-scrollbar-thumb { background: #fec021; border-radius: 10px; }\r\n\r\n \/* Animasi Marquee *\/\r\n .marquee-container { overflow: hidden; white-space: nowrap; position: relative; }\r\n .marquee-content { display: inline-flex; animation: marquee 35s linear infinite; }\r\n @keyframes marquee {\r\n 0% { transform: translateX(0); }\r\n 100% { transform: translateX(-50%); }\r\n }\r\n\r\n \/* Perbaikan Modal & Z-Index *\/\r\n .modal-overlay { z-index: 999999 !important; }\r\n .modal-content { max-width: 850px; width: 95%; max-height: 85vh; z-index: 1000000 !important; }\r\n .cart-drawer { z-index: 2000000 !important; width: 100%; max-width: 420px; }\r\n\r\n \/* Memastikan logo terlihat proporsional *\/\r\n .main-logo {\r\n filter: drop-shadow(0 15px 25px rgba(0,0,0,0.4));\r\n max-width: 90%;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"tishanoms-root\"><\/div>\r\n\r\n <script type=\"text\/babel\">\r\n const { useState, useEffect, useRef } = React;\r\n const { motion, AnimatePresence } = window.Motion;\r\n\r\n const LOGO_URL = \"https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/STANDING-BENNER.png\";\r\n\r\n const MENU_ITEMS = [\r\n { id: 'dimsum-mentai', name: 'Dimsum Mentai', price: 15000, desc: '3pcs\/porsi - Saus Mentai Gurih', img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/DIMSU.png', category: 'snack' },\r\n { id: 'kebab', name: 'Kebab Special', price: 12000, desc: 'Isian daging melimpah', img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/KEBAB.png', category: 'snack' },\r\n { id: 'mix-platter', name: 'Mix Platter', price: 15000, desc: 'Kombinasi cemilan favorit', img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/MIX-PLATTER.png', category: 'snack' },\r\n { id: 'kentang-mentai', name: 'Kentang Sans Mentai', price: 10000, desc: 'Saus mentai premium', img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/KENTANG-GORENG-SAUS-MENTAI.png', category: 'snack' },\r\n { id: 'kentang-original', name: 'Kentang Original', price: 10000, desc: 'Kentang goreng renyah', img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/KENTANG-GORENG-ORIGINAL.png', category: 'snack' },\r\n { id: 'roti-bakar', name: 'Roti Bakar Coklat\/Keju', price: 10000, desc: 'Manis & Gurih menggoda', img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/ROTI-BAKAR-COKLAT.png', category: 'snack' },\r\n { id: 'pisang-goroho', name: 'Pisang Goroho Goreng', price: 10000, desc: 'Khas Gorontalo', img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/PISANG-GOROHO-GORENG.png', category: 'snack' },\r\n { id: 'pisang-goreng', name: 'Pisang Goreng', price: 10000, desc: 'Manis alami pilihan', img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/PISANG-GORENG.png', category: 'snack' },\r\n { id: 'cireng-isi', name: 'Cireng Isi Ayam Keju', price: 10000, desc: '3pcs\/porsi - Lumer', img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/CIRENG-ISI.png', category: 'snack' },\r\n { id: 'dimsum-bakar', name: 'Dimsum Bakar Mentai', price: 15000, desc: 'Aroma smokey mantap', img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/DIMSUM-BAKAR.png', category: 'snack' },\r\n { id: 'bakso-bakar', name: 'Bakso Bakar Pedas\/Manis', price: 10000, desc: '3 tusuk per porsi', img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/BAKSO-BAKAR.png', category: 'snack' },\r\n { id: 'mie-instan', name: 'Mie Indomie\/Sedap', price: 8000, desc: 'Goreng atau Kuah', img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/MIE-INSTAN.png', category: 'mie', hasTopping: true },\r\n ];\r\n\r\n const TOPPINGS = [\r\n { id: 'bakso-ikan', name: 'Bakso Ikan Tuna', price: 3000, img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/BAKSO-IKAN.png' },\r\n { id: 'bakso-sapi', name: 'Bakso Daging Sapi', price: 3000, img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/BAKSO-DAGING-SAPI.png' },\r\n { id: 'chikuwa', name: 'Chikuwa Mini', price: 3000, img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/CHIKUWA-MINI.png' },\r\n { id: 'sosis', name: 'Sosis Ayam', price: 3000, img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/SOSIS-AYAM.png' },\r\n { id: 'dumpling', name: 'Dumpling Keju', price: 3000, img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/DUMPLING-KEJU.png' },\r\n { id: 'crabstick', name: 'Crab Stick', price: 4000, img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/CRAB-STICK.png' },\r\n { id: 'nugget', name: 'Nugget', price: 3000, img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/NUGGET.png' },\r\n { id: 'dimsum-top', name: 'Dimsum Extra', price: 3000, img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/DIMSUM.png' },\r\n { id: 'telur', name: 'Telur', price: 3000, img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/STANDING-BENNER-1.png' },\r\n { id: 'pangsit', name: 'Kerupuk Pangsit', price: 0, img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/STANDINKERUPU-PANGSIT.png' },\r\n { id: 'sawi', name: 'Sayur Sawi', price: 0, img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/sayur-sawi.png' },\r\n ];\r\n\r\n function App() {\r\n const [cart, setCart] = useState([]);\r\n const [isCartOpen, setIsCartOpen] = useState(false);\r\n const [toppingModal, setToppingModal] = useState(null);\r\n const [selectedToppings, setSelectedToppings] = useState([]);\r\n const [activeCategory, setActiveCategory] = useState('all');\r\n const [isMusicPlaying, setIsMusicPlaying] = useState(false);\r\n const audioRef = useRef(null);\r\n\r\n \/\/ Re-render ikon saat komponen muncul\r\n useEffect(() => {\r\n if (window.lucide) window.lucide.createIcons();\r\n }, [isCartOpen, toppingModal, cart, activeCategory]);\r\n\r\n useEffect(() => {\r\n if (isMusicPlaying) audioRef.current?.play().catch(() => setIsMusicPlaying(false));\r\n else audioRef.current?.pause();\r\n }, [isMusicPlaying]);\r\n\r\n const addToCart = (item) => {\r\n if (item.hasTopping) setToppingModal(item);\r\n else setCart([...cart, { ...item, cartId: Date.now(), totalPrice: item.price }]);\r\n };\r\n\r\n const finalizeMieOrder = () => {\r\n const total = toppingModal.price + selectedToppings.reduce((acc, t) => acc + t.price, 0);\r\n setCart([...cart, { ...toppingModal, cartId: Date.now(), selectedToppings, totalPrice: total }]);\r\n setToppingModal(null);\r\n setSelectedToppings([]);\r\n };\r\n\r\n const sendToWA = () => {\r\n const phone = \"6282245988969\";\r\n let msg = \"Halo Tisha-Nom's! Saya mau pesan:\\n\\n\";\r\n cart.forEach((i, idx) => {\r\n msg += `${idx + 1}. *${i.name}* (Rp${i.totalPrice.toLocaleString()})\\n`;\r\n if (i.selectedToppings?.length) msg += ` _Topping: ${i.selectedToppings.map(t => t.name).join(', ')}_\\n`;\r\n });\r\n msg += `\\n*Total: Rp${cart.reduce((a, b) => a + b.totalPrice, 0).toLocaleString()}*`;\r\n window.open(`https:\/\/wa.me\/${phone}?text=${encodeURIComponent(msg)}`, '_blank');\r\n };\r\n\r\n return (\r\n <div className=\"tishanoms-app min-h-screen bg-neutral-50 pb-10\">\r\n <audio ref={audioRef} src=\"https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/Jingle-Tisha-Noms-.mp3\" loop \/>\r\n \r\n {\/* Kontrol Musik *\/}\r\n <button onClick={() => setIsMusicPlaying(!isMusicPlaying)} className=\"fixed left-4 bottom-6 z-[2000001] bg-[#0d3a16] text-white p-3 rounded-full shadow-2xl flex items-center gap-2 hover:scale-110 transition-all border-2 border-[#fec021]\">\r\n {isMusicPlaying ? <i data-lucide=\"volume-2\" className=\"w-5 h-5 text-yellow-400\"><\/i> : <i data-lucide=\"volume-x\" className=\"w-5 h-5\"><\/i>}\r\n <span className=\"font-zuume hidden md:inline text-sm tracking-widest\">JINGLE<\/span>\r\n <\/button>\r\n\r\n {\/* Header - Logo & Branding (Revisi Ukuran Logo) *\/}\r\n <header className=\"bg-[#0d3a16] h-[280px] md:h-[350px] flex flex-col items-center justify-center relative border-b-[10px] border-[#fec021] overflow-hidden\">\r\n <div className=\"absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-white via-transparent to-transparent\"><\/div>\r\n \r\n <div className=\"relative z-[20] flex flex-col items-center px-4\">\r\n <motion.img \r\n animate={{ y: [0, -10, 0] }} \r\n transition={{ repeat: Infinity, duration: 4, ease: \"easeInOut\" }}\r\n src={LOGO_URL} \r\n alt=\"Logo Tisha-Nom's\" \r\n className=\"main-logo h-24 md:h-40 object-contain\"\r\n \/>\r\n \r\n <motion.div \r\n initial={{ opacity: 0, y: 15 }}\r\n animate={{ opacity: 1, y: 0 }}\r\n transition={{ delay: 0.5 }}\r\n className=\"mt-6 bg-[#fec021] px-10 py-2 rounded-full shadow-[0_10px_20px_rgba(0,0,0,0.3)] border-2 border-white\/20\"\r\n >\r\n <h2 className=\"text-[#0d3a16] font-zuume text-xl md:text-3xl tracking-widest uppercase\">ANEKA CEMILAN<\/h2>\r\n <\/motion.div>\r\n <\/div>\r\n <\/header>\r\n\r\n {\/* Menu Navigasi *\/}\r\n <nav className=\"max-w-7xl mx-auto px-6 py-12\">\r\n <div className=\"flex flex-col lg:flex-row justify-between items-center gap-10 mb-16\">\r\n <div className=\"flex bg-white p-1.5 rounded-full border-2 border-[#0d3a16]\/5 shadow-sm overflow-x-auto max-w-full no-scrollbar\">\r\n {['all', 'snack', 'mie'].map(cat => (\r\n <button key={cat} onClick={() => setActiveCategory(cat)} className={`whitespace-nowrap px-8 py-3 md:px-12 md:py-3.5 rounded-full font-zuume text-2xl transition-all duration-300 ${activeCategory === cat ? 'bg-[#0d3a16] text-white shadow-xl' : 'text-[#0d3a16] hover:bg-black\/5'}`}>\r\n {cat.toUpperCase()}\r\n <\/button>\r\n ))}\r\n <\/div>\r\n <div className=\"flex items-center gap-3 bg-[#fec021] px-10 py-4 rounded-3xl font-zuume text-[#0d3a16] border-2 border-[#0d3a16] shadow-xl\">\r\n <i data-lucide=\"shield-check\" className=\"w-7 h-7 stroke-[3px]\"><\/i> <span className=\"text-2xl\">100% HALAL & HIGIENIS<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Menu Grid *\/}\r\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-12\">\r\n {MENU_ITEMS.filter(i => activeCategory === 'all' || i.category === activeCategory).map(item => (\r\n <motion.div layout key={item.id} className=\"bg-white rounded-[3rem] overflow-hidden shadow-2xl border border-neutral-100 flex flex-col group hover:-translate-y-2 transition-all duration-500\">\r\n <div className=\"h-80 bg-gradient-to-tr from-[#0d3a16] via-[#1b5e20] to-[#2e7d32] p-8 relative overflow-hidden\">\r\n <img src={item.img} className=\"w-full h-full object-contain group-hover:scale-110 transition-transform duration-700 drop-shadow-2xl\" \/>\r\n <div className=\"absolute top-6 right-6 bg-[#c52416] text-white font-zuume px-6 py-2 rounded-2xl text-2xl shadow-2xl border-2 border-white\/20\">Rp {item.price\/1000}K<\/div>\r\n <\/div>\r\n <div className=\"p-10 flex flex-col flex-grow\">\r\n <h3 className=\"font-zuume text-4xl text-[#0d3a16] mb-3\">{item.name}<\/h3>\r\n <p className=\"text-neutral-500 text-base md:text-lg mb-10 flex-grow leading-relaxed\">{item.desc}<\/p>\r\n <button onClick={() => addToCart(item)} className=\"w-full bg-[#0d3a16] hover:bg-[#1b5e20] text-white font-zuume text-3xl py-5 rounded-[2rem] flex items-center justify-center gap-4 shadow-2xl border-b-8 border-black active:translate-y-1 transition-all\">\r\n <i data-lucide=\"plus-circle\" className=\"w-8 h-8\"><\/i> TAMBAHKAN\r\n <\/button>\r\n <\/div>\r\n <\/motion.div>\r\n ))}\r\n <\/div>\r\n <\/nav>\r\n\r\n {\/* Topping Carousel (Paling Bawah) *\/}\r\n <section className=\"bg-white py-24 border-t border-neutral-100 shadow-inner\">\r\n <div className=\"text-center mb-16 px-6\">\r\n <h2 className=\"font-zuume text-5xl md:text-7xl text-[#0d3a16] italic uppercase\">Pilihan Topping Juara<\/h2>\r\n <div className=\"h-2.5 w-32 bg-[#c52416] mx-auto mt-4 rounded-full shadow-sm\"><\/div>\r\n <\/div>\r\n <div className=\"marquee-container\">\r\n <div className=\"marquee-content flex gap-12 px-6\">\r\n {[...TOPPINGS, ...TOPPINGS].map((top, i) => (\r\n <div key={i} className=\"min-w-[170px] md:min-w-[210px] bg-neutral-50 p-8 rounded-[3.5rem] flex flex-col items-center border border-neutral-100 shadow-xl\">\r\n <div className=\"w-24 h-24 md:w-28 md:h-28 bg-gradient-to-br from-[#0d3a16] to-[#1b5e20] rounded-[2rem] p-2 shadow-2xl mb-5\">\r\n <img src={top.img} className=\"w-full h-full object-contain\" \/>\r\n <\/div>\r\n <span className=\"font-zuume text-base md:text-xl text-neutral-800 text-center font-bold mb-4 uppercase leading-tight h-10 flex items-center\">{top.name}<\/span>\r\n <div className={`px-6 py-2 rounded-full font-bold text-xs shadow-md ${top.price === 0 ? 'bg-emerald-500 text-white' : 'bg-[#c52416] text-white'}`}>\r\n {top.price === 0 ? 'GRATIS' : `+Rp${top.price\/1000}K`}\r\n <\/div>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* Tombol Keranjang Melayang *\/}\r\n <AnimatePresence>\r\n {cart.length > 0 && (\r\n <motion.button initial={{ scale: 0, y: 100 }} animate={{ scale: 1, y: 0 }} exit={{ scale: 0, y: 100 }} onClick={() => setIsCartOpen(true)} className=\"fixed right-6 bottom-6 z-[1000001] bg-[#fec021] text-[#0d3a16] p-7 rounded-full shadow-[0_25px_50px_rgba(254,192,33,0.6)] border-4 border-[#0d3a16] group active:scale-90 transition-all\">\r\n <div className=\"absolute -top-3 -right-1 bg-[#c52416] text-white w-10 h-10 rounded-full flex items-center justify-center font-bold border-2 border-[#0d3a16] text-base animate-bounce shadow-xl\">{cart.length}<\/div>\r\n <i data-lucide=\"shopping-cart\" className=\"w-10 h-10 group-hover:rotate-12 transition-transform\"><\/i>\r\n <\/motion.button>\r\n )}\r\n <\/AnimatePresence>\r\n\r\n {\/* MODAL PILIH TOPPING *\/}\r\n <AnimatePresence>\r\n {toppingModal && (\r\n <div className=\"modal-overlay fixed inset-0 flex items-center justify-center p-6\">\r\n <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className=\"absolute inset-0 bg-[#0d3a16]\/95 backdrop-blur-2xl\" onClick={() => setToppingModal(null)} \/>\r\n <motion.div initial={{ scale: 0.95, y: 50 }} animate={{ scale: 1, y: 0 }} className=\"modal-content relative bg-white rounded-[4rem] shadow-[0_50px_100px_rgba(0,0,0,0.6)] border-8 border-[#fec021] flex flex-col overflow-hidden\">\r\n <div className=\"p-10 md:p-14 bg-[#fec021] text-[#0d3a16] flex justify-between items-start shrink-0\">\r\n <div className=\"max-w-[85%]\">\r\n <h2 className=\"text-5xl md:text-7xl font-zuume leading-[0.7] uppercase italic mb-3\">Pilihan Topping<\/h2>\r\n <p className=\"font-marker text-xl md:text-2xl opacity-80\">Bikin pesananmu makin ramai!<\/p>\r\n <\/div>\r\n <button onClick={() => setToppingModal(null)} className=\"p-5 bg-black\/5 rounded-full hover:bg-black\/10 transition-colors shadow-inner\"><i data-lucide=\"x\" className=\"w-10 h-10\"><\/i><\/button>\r\n <\/div>\r\n <div className=\"p-10 md:p-14 overflow-y-auto custom-scrollbar flex-grow bg-white\">\r\n <div className=\"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8\">\r\n {TOPPINGS.map(top => {\r\n const selected = selectedToppings.find(t => t.id === top.id);\r\n return (\r\n <button key={top.id} onClick={() => {\r\n setSelectedToppings(prev => selected ? prev.filter(t => t.id !== top.id) : [...prev, top]);\r\n }} className={`relative p-6 rounded-[3rem] border-4 transition-all flex flex-col items-center ${selected ? 'border-[#c52416] bg-red-50 scale-105 shadow-2xl' : 'border-neutral-100 hover:border-[#fec021] bg-neutral-50'}`}>\r\n <div className=\"w-24 h-24 bg-gradient-to-br from-[#0d3a16] to-[#1b5e20] rounded-[2rem] p-2 mb-4 shadow-xl\"><img src={top.img} className=\"w-full h-full object-contain\" \/><\/div>\r\n <span className=\"font-zuume text-lg uppercase text-center font-bold px-1 leading-tight h-10 flex items-center\">{top.name}<\/span>\r\n <div className={`mt-3 font-bold px-5 py-1.5 rounded-full text-xs ${top.price === 0 ? 'bg-emerald-100 text-emerald-800' : 'bg-red-100 text-red-800'}`}>{top.price === 0 ? 'FREE' : `+Rp${top.price\/1000}K`}<\/div>\r\n {selected && <div className=\"absolute top-3 right-3 bg-[#c52416] text-white p-2 rounded-full shadow-2xl\"><i data-lucide=\"check\" className=\"w-4 h-4 stroke-[5px]\"><\/i><\/div>}\r\n <\/button>\r\n );\r\n })}\r\n <\/div>\r\n <\/div>\r\n <div className=\"p-10 md:p-14 bg-neutral-100 border-t-4 border-[#fec021]\/20 flex flex-col md:flex-row items-center justify-between gap-10 shrink-0\">\r\n <div className=\"text-center md:text-left\">\r\n <p className=\"text-neutral-400 text-sm uppercase font-bold tracking-[0.3em] mb-2\">Estimasi Mie + Topping<\/p>\r\n <p className=\"text-6xl md:text-7xl font-zuume text-[#0d3a16] leading-none\">Rp {(toppingModal.price + selectedToppings.reduce((a, b) => a + b.price, 0)).toLocaleString()}<\/p>\r\n <\/div>\r\n <button onClick={finalizeMieOrder} className=\"w-full md:w-auto bg-[#0d3a16] text-white font-zuume text-4xl px-20 py-6 rounded-[2.5rem] shadow-2xl hover:bg-[#1b5e20] border-b-[10px] border-black active:translate-y-2 transition-all\">YUK, PESAN! \ud83c\udf5c<\/button>\r\n <\/div>\r\n <\/motion.div>\r\n <\/div>\r\n )}\r\n\r\n {\/* SIDEBAR KERANJANG *\/}\r\n {isCartOpen && (\r\n <div className=\"cart-drawer-container fixed inset-0 z-[2000000]\">\r\n <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className=\"absolute inset-0 bg-[#0d3a16]\/80 backdrop-blur-xl\" onClick={() => setIsCartOpen(false)} \/>\r\n <motion.div initial={{ x: '100%' }} animate={{ x: 0 }} exit={{ x: '100%' }} transition={{ type: 'spring', damping: 25 }} className=\"cart-drawer absolute right-0 top-0 bg-white h-full shadow-[0_0_100px_rgba(0,0,0,0.5)] flex flex-col\">\r\n <div className=\"p-10 bg-[#0d3a16] text-white flex justify-between items-center border-b-[10px] border-[#fec021]\">\r\n <div className=\"flex items-center gap-5 text-[#fec021]\"><i data-lucide=\"shopping-bag\" className=\"w-10 h-10\"><\/i><h2 className=\"text-4xl md:text-5xl font-zuume italic uppercase tracking-tighter leading-none\">Checkout<\/h2><\/div>\r\n <button onClick={() => setIsCartOpen(false)} className=\"p-3 border-2 border-white\/20 rounded-full hover:bg-white\/10\"><i data-lucide=\"x\" className=\"w-7 h-7\"><\/i><\/button>\r\n <\/div>\r\n <div className=\"flex-grow overflow-y-auto p-10 space-y-12 custom-scrollbar\">\r\n {cart.length === 0 ? <div className=\"text-center py-24 opacity-10\"><i data-lucide=\"shopping-cart\" className=\"w-32 h-32 mx-auto mb-8\"><\/i><p className=\"font-zuume text-4xl uppercase tracking-[0.2em]\">KOSONG<\/p><\/div> : \r\n cart.map(item => (\r\n <div key={item.cartId} className=\"flex gap-8 group border-b border-neutral-100 pb-8\">\r\n <div className=\"w-28 h-28 rounded-[2rem] bg-gradient-to-tr from-[#0d3a16] to-[#1b5e20] p-2 shadow-xl flex-shrink-0\"><img src={item.img} className=\"w-full h-full object-contain\" \/><\/div>\r\n <div className=\"flex-grow\">\r\n <div className=\"flex justify-between items-start mb-2\"><h4 className=\"font-zuume text-3xl text-[#0d3a16] leading-none\">{item.name}<\/h4><button onClick={() => setCart(cart.filter(i => i.cartId !== item.cartId))} className=\"text-neutral-300 hover:text-red-600 transition-colors\"><i data-lucide=\"trash-2\" className=\"w-6 h-6\"><\/i><\/button><\/div>\r\n {item.selectedToppings?.length > 0 && <div className=\"bg-emerald-50 px-4 py-2 rounded-2xl border border-emerald-100 mt-3 mb-3 shadow-inner\"><p className=\"text-xs text-[#0d3a16] font-bold uppercase italic tracking-tight opacity-80\">+ {item.selectedToppings.map(t => t.name).join(', ')}<\/p><\/div>}\r\n <p className=\"font-zuume text-[#c52416] text-3xl\">Rp {item.totalPrice.toLocaleString()}<\/p>\r\n <\/div>\r\n <\/div>\r\n ))\r\n }\r\n <\/div>\r\n <div className=\"p-10 bg-neutral-50 border-t-4 border-[#0d3a16]\/5\">\r\n <div className=\"flex justify-between items-end mb-12\"><span className=\"font-zuume text-neutral-400 text-4xl italic leading-none\">TOTAL<\/span><span className=\"text-6xl md:text-7xl font-zuume text-[#0d3a16] border-b-[12px] border-[#fec021] leading-none pb-2\">Rp {cart.reduce((a, b) => a + b.totalPrice, 0).toLocaleString()}<\/span><\/div>\r\n <button onClick={sendToWA} className=\"w-full bg-[#25D366] text-white py-7 rounded-[2.5rem] flex items-center justify-center gap-6 font-zuume text-4xl md:text-5xl shadow-2xl border-b-[10px] border-[#15803d] hover:bg-[#1da851] active:translate-y-2 transition-all\">\r\n <i data-lucide=\"message-circle\" className=\"w-12 h-12\"><\/i> PESAN VIA WA\r\n <\/button>\r\n <\/div>\r\n <\/motion.div>\r\n <\/div>\r\n )}\r\n <\/AnimatePresence>\r\n\r\n {\/* Footer - Branding Terakhir (Revisi Ukuran Logo & Frame) *\/}\r\n <footer className=\"bg-[#0d3a16] text-white pt-24 pb-12 px-8 text-center border-t-[10px] border-[#fec021]\">\r\n <div className=\"flex justify-center mb-16\">\r\n <img src={LOGO_URL} className=\"main-logo h-24 md:h-36 object-contain opacity-95\" \/>\r\n <\/div>\r\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-10 font-zuume text-2xl tracking-[0.3em] max-w-6xl mx-auto mb-20 uppercase italic\">\r\n <div className=\"p-10 border-2 border-white\/10 rounded-[4rem] bg-white\/5 shadow-2xl backdrop-blur-sm\">KAMPUS UNG<\/div>\r\n <div className=\"p-10 border-2 border-white\/10 rounded-[4rem] bg-white\/5 shadow-2xl text-yellow-400\">10:00 - 22:00 WITA<\/div>\r\n <div className=\"p-10 border-2 border-white\/10 rounded-[4rem] bg-white\/5 shadow-2xl\">@TISHA NOMS<\/div>\r\n <\/div>\r\n <div className=\"h-1.5 w-48 bg-[#fec021] mx-auto mb-10 rounded-full opacity-30\"><\/div>\r\n <p className=\"opacity-40 text-xs md:text-sm uppercase tracking-[0.8em] font-bold\">\u00a9 2026 TISHA-NOM'S GORONTALO. PREMIUM SNACKS & NOODLES.<\/p>\r\n <\/footer>\r\n <\/div>\r\n );\r\n }\r\n\r\n const root = ReactDOM.createRoot(document.getElementById('tishanoms-root'));\r\n root.render(<App \/>);\r\n\r\n \/\/ Inisialisasi ikon Lucide\r\n setTimeout(() => { if (window.lucide) lucide.createIcons(); }, 1000);\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Tisha-Nom’s E-Commerce<\/p>\n","protected":false},"author":1,"featured_media":41,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/tishanoms.gtlo.web.id\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tishanoms.gtlo.web.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tishanoms.gtlo.web.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tishanoms.gtlo.web.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tishanoms.gtlo.web.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":11,"href":"https:\/\/tishanoms.gtlo.web.id\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":52,"href":"https:\/\/tishanoms.gtlo.web.id\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/52"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tishanoms.gtlo.web.id\/index.php?rest_route=\/wp\/v2\/media\/41"}],"wp:attachment":[{"href":"https:\/\/tishanoms.gtlo.web.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Tisha-Nom's E-Commerce<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Permanent+Marker&family=Quicksand:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n \r\n <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/framer-motion@10.16.4\/dist\/framer-motion.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n \r\n <style>\r\n \/* Isolasi style agar tidak merusak Elementor *\/\r\n #tishanoms-root { \r\n display: block; \r\n font-family: 'Quicksand', sans-serif; \r\n background: #f9fafb;\r\n color: #111827;\r\n width: 100%;\r\n overflow-x: hidden;\r\n }\r\n .font-zuume { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.05em; }\r\n .font-marker { font-family: 'Permanent Marker', cursive; }\r\n \r\n \/* Scrollbar kustom *\/\r\n .custom-scrollbar::-webkit-scrollbar { width: 5px; }\r\n .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }\r\n .custom-scrollbar::-webkit-scrollbar-thumb { background: #fec021; border-radius: 10px; }\r\n\r\n \/* Animasi Marquee *\/\r\n .marquee-container { overflow: hidden; white-space: nowrap; position: relative; }\r\n .marquee-content { display: inline-flex; animation: marquee 35s linear infinite; }\r\n @keyframes marquee {\r\n 0% { transform: translateX(0); }\r\n 100% { transform: translateX(-50%); }\r\n }\r\n\r\n \/* Perbaikan Modal & Z-Index *\/\r\n .modal-overlay { z-index: 999999 !important; }\r\n .modal-content { max-width: 850px; width: 95%; max-height: 85vh; z-index: 1000000 !important; }\r\n .cart-drawer { z-index: 2000000 !important; width: 100%; max-width: 420px; }\r\n\r\n \/* Memastikan logo terlihat proporsional *\/\r\n .main-logo {\r\n filter: drop-shadow(0 15px 25px rgba(0,0,0,0.4));\r\n max-width: 90%;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"tishanoms-root\"><\/div>\r\n\r\n <script type=\"text\/babel\">\r\n const { useState, useEffect, useRef } = React;\r\n const { motion, AnimatePresence } = window.Motion;\r\n\r\n const LOGO_URL = \"https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/STANDING-BENNER.png\";\r\n\r\n const MENU_ITEMS = [\r\n { id: 'dimsum-mentai', name: 'Dimsum Mentai', price: 15000, desc: '3pcs\/porsi - Saus Mentai Gurih', img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/DIMSU.png', category: 'snack' },\r\n { id: 'kebab', name: 'Kebab Special', price: 12000, desc: 'Isian daging melimpah', img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/KEBAB.png', category: 'snack' },\r\n { id: 'mix-platter', name: 'Mix Platter', price: 15000, desc: 'Kombinasi cemilan favorit', img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/MIX-PLATTER.png', category: 'snack' },\r\n { id: 'kentang-mentai', name: 'Kentang Sans Mentai', price: 10000, desc: 'Saus mentai premium', img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/KENTANG-GORENG-SAUS-MENTAI.png', category: 'snack' },\r\n { id: 'kentang-original', name: 'Kentang Original', price: 10000, desc: 'Kentang goreng renyah', img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/KENTANG-GORENG-ORIGINAL.png', category: 'snack' },\r\n { id: 'roti-bakar', name: 'Roti Bakar Coklat\/Keju', price: 10000, desc: 'Manis & Gurih menggoda', img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/ROTI-BAKAR-COKLAT.png', category: 'snack' },\r\n { id: 'pisang-goroho', name: 'Pisang Goroho Goreng', price: 10000, desc: 'Khas Gorontalo', img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/PISANG-GOROHO-GORENG.png', category: 'snack' },\r\n { id: 'pisang-goreng', name: 'Pisang Goreng', price: 10000, desc: 'Manis alami pilihan', img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/PISANG-GORENG.png', category: 'snack' },\r\n { id: 'cireng-isi', name: 'Cireng Isi Ayam Keju', price: 10000, desc: '3pcs\/porsi - Lumer', img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/CIRENG-ISI.png', category: 'snack' },\r\n { id: 'dimsum-bakar', name: 'Dimsum Bakar Mentai', price: 15000, desc: 'Aroma smokey mantap', img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/DIMSUM-BAKAR.png', category: 'snack' },\r\n { id: 'bakso-bakar', name: 'Bakso Bakar Pedas\/Manis', price: 10000, desc: '3 tusuk per porsi', img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/BAKSO-BAKAR.png', category: 'snack' },\r\n { id: 'mie-instan', name: 'Mie Indomie\/Sedap', price: 8000, desc: 'Goreng atau Kuah', img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/MIE-INSTAN.png', category: 'mie', hasTopping: true },\r\n ];\r\n\r\n const TOPPINGS = [\r\n { id: 'bakso-ikan', name: 'Bakso Ikan Tuna', price: 3000, img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/BAKSO-IKAN.png' },\r\n { id: 'bakso-sapi', name: 'Bakso Daging Sapi', price: 3000, img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/BAKSO-DAGING-SAPI.png' },\r\n { id: 'chikuwa', name: 'Chikuwa Mini', price: 3000, img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/CHIKUWA-MINI.png' },\r\n { id: 'sosis', name: 'Sosis Ayam', price: 3000, img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/SOSIS-AYAM.png' },\r\n { id: 'dumpling', name: 'Dumpling Keju', price: 3000, img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/DUMPLING-KEJU.png' },\r\n { id: 'crabstick', name: 'Crab Stick', price: 4000, img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/CRAB-STICK.png' },\r\n { id: 'nugget', name: 'Nugget', price: 3000, img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/NUGGET.png' },\r\n { id: 'dimsum-top', name: 'Dimsum Extra', price: 3000, img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/DIMSUM.png' },\r\n { id: 'telur', name: 'Telur', price: 3000, img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/STANDING-BENNER-1.png' },\r\n { id: 'pangsit', name: 'Kerupuk Pangsit', price: 0, img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/STANDINKERUPU-PANGSIT.png' },\r\n { id: 'sawi', name: 'Sayur Sawi', price: 0, img: 'https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/sayur-sawi.png' },\r\n ];\r\n\r\n function App() {\r\n const [cart, setCart] = useState([]);\r\n const [isCartOpen, setIsCartOpen] = useState(false);\r\n const [toppingModal, setToppingModal] = useState(null);\r\n const [selectedToppings, setSelectedToppings] = useState([]);\r\n const [activeCategory, setActiveCategory] = useState('all');\r\n const [isMusicPlaying, setIsMusicPlaying] = useState(false);\r\n const audioRef = useRef(null);\r\n\r\n \/\/ Re-render ikon saat komponen muncul\r\n useEffect(() => {\r\n if (window.lucide) window.lucide.createIcons();\r\n }, [isCartOpen, toppingModal, cart, activeCategory]);\r\n\r\n useEffect(() => {\r\n if (isMusicPlaying) audioRef.current?.play().catch(() => setIsMusicPlaying(false));\r\n else audioRef.current?.pause();\r\n }, [isMusicPlaying]);\r\n\r\n const addToCart = (item) => {\r\n if (item.hasTopping) setToppingModal(item);\r\n else setCart([...cart, { ...item, cartId: Date.now(), totalPrice: item.price }]);\r\n };\r\n\r\n const finalizeMieOrder = () => {\r\n const total = toppingModal.price + selectedToppings.reduce((acc, t) => acc + t.price, 0);\r\n setCart([...cart, { ...toppingModal, cartId: Date.now(), selectedToppings, totalPrice: total }]);\r\n setToppingModal(null);\r\n setSelectedToppings([]);\r\n };\r\n\r\n const sendToWA = () => {\r\n const phone = \"6282245988969\";\r\n let msg = \"Halo Tisha-Nom's! Saya mau pesan:\\n\\n\";\r\n cart.forEach((i, idx) => {\r\n msg += `${idx + 1}. *${i.name}* (Rp${i.totalPrice.toLocaleString()})\\n`;\r\n if (i.selectedToppings?.length) msg += ` _Topping: ${i.selectedToppings.map(t => t.name).join(', ')}_\\n`;\r\n });\r\n msg += `\\n*Total: Rp${cart.reduce((a, b) => a + b.totalPrice, 0).toLocaleString()}*`;\r\n window.open(`https:\/\/wa.me\/${phone}?text=${encodeURIComponent(msg)}`, '_blank');\r\n };\r\n\r\n return (\r\n <div className=\"tishanoms-app min-h-screen bg-neutral-50 pb-10\">\r\n <audio ref={audioRef} src=\"https:\/\/tishanoms.gtlo.web.id\/wp-content\/uploads\/2026\/04\/Jingle-Tisha-Noms-.mp3\" loop \/>\r\n \r\n {\/* Kontrol Musik *\/}\r\n <button onClick={() => setIsMusicPlaying(!isMusicPlaying)} className=\"fixed left-4 bottom-6 z-[2000001] bg-[#0d3a16] text-white p-3 rounded-full shadow-2xl flex items-center gap-2 hover:scale-110 transition-all border-2 border-[#fec021]\">\r\n {isMusicPlaying ? <i data-lucide=\"volume-2\" className=\"w-5 h-5 text-yellow-400\"><\/i> : <i data-lucide=\"volume-x\" className=\"w-5 h-5\"><\/i>}\r\n <span className=\"font-zuume hidden md:inline text-sm tracking-widest\">JINGLE<\/span>\r\n <\/button>\r\n\r\n {\/* Header - Logo & Branding (Revisi Ukuran Logo) *\/}\r\n <header className=\"bg-[#0d3a16] h-[280px] md:h-[350px] flex flex-col items-center justify-center relative border-b-[10px] border-[#fec021] overflow-hidden\">\r\n <div className=\"absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-white via-transparent to-transparent\"><\/div>\r\n \r\n <div className=\"relative z-[20] flex flex-col items-center px-4\">\r\n <motion.img \r\n animate={{ y: [0, -10, 0] }} \r\n transition={{ repeat: Infinity, duration: 4, ease: \"easeInOut\" }}\r\n src={LOGO_URL} \r\n alt=\"Logo Tisha-Nom's\" \r\n className=\"main-logo h-24 md:h-40 object-contain\"\r\n \/>\r\n \r\n <motion.div \r\n initial={{ opacity: 0, y: 15 }}\r\n animate={{ opacity: 1, y: 0 }}\r\n transition={{ delay: 0.5 }}\r\n className=\"mt-6 bg-[#fec021] px-10 py-2 rounded-full shadow-[0_10px_20px_rgba(0,0,0,0.3)] border-2 border-white\/20\"\r\n >\r\n <h2 className=\"text-[#0d3a16] font-zuume text-xl md:text-3xl tracking-widest uppercase\">ANEKA CEMILAN<\/h2>\r\n <\/motion.div>\r\n <\/div>\r\n <\/header>\r\n\r\n {\/* Menu Navigasi *\/}\r\n <nav className=\"max-w-7xl mx-auto px-6 py-12\">\r\n <div className=\"flex flex-col lg:flex-row justify-between items-center gap-10 mb-16\">\r\n <div className=\"flex bg-white p-1.5 rounded-full border-2 border-[#0d3a16]\/5 shadow-sm overflow-x-auto max-w-full no-scrollbar\">\r\n {['all', 'snack', 'mie'].map(cat => (\r\n <button key={cat} onClick={() => setActiveCategory(cat)} className={`whitespace-nowrap px-8 py-3 md:px-12 md:py-3.5 rounded-full font-zuume text-2xl transition-all duration-300 ${activeCategory === cat ? 'bg-[#0d3a16] text-white shadow-xl' : 'text-[#0d3a16] hover:bg-black\/5'}`}>\r\n {cat.toUpperCase()}\r\n <\/button>\r\n ))}\r\n <\/div>\r\n <div className=\"flex items-center gap-3 bg-[#fec021] px-10 py-4 rounded-3xl font-zuume text-[#0d3a16] border-2 border-[#0d3a16] shadow-xl\">\r\n <i data-lucide=\"shield-check\" className=\"w-7 h-7 stroke-[3px]\"><\/i> <span className=\"text-2xl\">100% HALAL & HIGIENIS<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Menu Grid *\/}\r\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-12\">\r\n {MENU_ITEMS.filter(i => activeCategory === 'all' || i.category === activeCategory).map(item => (\r\n <motion.div layout key={item.id} className=\"bg-white rounded-[3rem] overflow-hidden shadow-2xl border border-neutral-100 flex flex-col group hover:-translate-y-2 transition-all duration-500\">\r\n <div className=\"h-80 bg-gradient-to-tr from-[#0d3a16] via-[#1b5e20] to-[#2e7d32] p-8 relative overflow-hidden\">\r\n <img src={item.img} className=\"w-full h-full object-contain group-hover:scale-110 transition-transform duration-700 drop-shadow-2xl\" \/>\r\n <div className=\"absolute top-6 right-6 bg-[#c52416] text-white font-zuume px-6 py-2 rounded-2xl text-2xl shadow-2xl border-2 border-white\/20\">Rp {item.price\/1000}K<\/div>\r\n <\/div>\r\n <div className=\"p-10 flex flex-col flex-grow\">\r\n <h3 className=\"font-zuume text-4xl text-[#0d3a16] mb-3\">{item.name}<\/h3>\r\n <p className=\"text-neutral-500 text-base md:text-lg mb-10 flex-grow leading-relaxed\">{item.desc}<\/p>\r\n <button onClick={() => addToCart(item)} className=\"w-full bg-[#0d3a16] hover:bg-[#1b5e20] text-white font-zuume text-3xl py-5 rounded-[2rem] flex items-center justify-center gap-4 shadow-2xl border-b-8 border-black active:translate-y-1 transition-all\">\r\n <i data-lucide=\"plus-circle\" className=\"w-8 h-8\"><\/i> TAMBAHKAN\r\n <\/button>\r\n <\/div>\r\n <\/motion.div>\r\n ))}\r\n <\/div>\r\n <\/nav>\r\n\r\n {\/* Topping Carousel (Paling Bawah) *\/}\r\n <section className=\"bg-white py-24 border-t border-neutral-100 shadow-inner\">\r\n <div className=\"text-center mb-16 px-6\">\r\n <h2 className=\"font-zuume text-5xl md:text-7xl text-[#0d3a16] italic uppercase\">Pilihan Topping Juara<\/h2>\r\n <div className=\"h-2.5 w-32 bg-[#c52416] mx-auto mt-4 rounded-full shadow-sm\"><\/div>\r\n <\/div>\r\n <div className=\"marquee-container\">\r\n <div className=\"marquee-content flex gap-12 px-6\">\r\n {[...TOPPINGS, ...TOPPINGS].map((top, i) => (\r\n <div key={i} className=\"min-w-[170px] md:min-w-[210px] bg-neutral-50 p-8 rounded-[3.5rem] flex flex-col items-center border border-neutral-100 shadow-xl\">\r\n <div className=\"w-24 h-24 md:w-28 md:h-28 bg-gradient-to-br from-[#0d3a16] to-[#1b5e20] rounded-[2rem] p-2 shadow-2xl mb-5\">\r\n <img src={top.img} className=\"w-full h-full object-contain\" \/>\r\n <\/div>\r\n <span className=\"font-zuume text-base md:text-xl text-neutral-800 text-center font-bold mb-4 uppercase leading-tight h-10 flex items-center\">{top.name}<\/span>\r\n <div className={`px-6 py-2 rounded-full font-bold text-xs shadow-md ${top.price === 0 ? 'bg-emerald-500 text-white' : 'bg-[#c52416] text-white'}`}>\r\n {top.price === 0 ? 'GRATIS' : `+Rp${top.price\/1000}K`}\r\n <\/div>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* Tombol Keranjang Melayang *\/}\r\n <AnimatePresence>\r\n {cart.length > 0 && (\r\n <motion.button initial={{ scale: 0, y: 100 }} animate={{ scale: 1, y: 0 }} exit={{ scale: 0, y: 100 }} onClick={() => setIsCartOpen(true)} className=\"fixed right-6 bottom-6 z-[1000001] bg-[#fec021] text-[#0d3a16] p-7 rounded-full shadow-[0_25px_50px_rgba(254,192,33,0.6)] border-4 border-[#0d3a16] group active:scale-90 transition-all\">\r\n <div className=\"absolute -top-3 -right-1 bg-[#c52416] text-white w-10 h-10 rounded-full flex items-center justify-center font-bold border-2 border-[#0d3a16] text-base animate-bounce shadow-xl\">{cart.length}<\/div>\r\n <i data-lucide=\"shopping-cart\" className=\"w-10 h-10 group-hover:rotate-12 transition-transform\"><\/i>\r\n <\/motion.button>\r\n )}\r\n <\/AnimatePresence>\r\n\r\n {\/* MODAL PILIH TOPPING *\/}\r\n <AnimatePresence>\r\n {toppingModal && (\r\n <div className=\"modal-overlay fixed inset-0 flex items-center justify-center p-6\">\r\n <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className=\"absolute inset-0 bg-[#0d3a16]\/95 backdrop-blur-2xl\" onClick={() => setToppingModal(null)} \/>\r\n <motion.div initial={{ scale: 0.95, y: 50 }} animate={{ scale: 1, y: 0 }} className=\"modal-content relative bg-white rounded-[4rem] shadow-[0_50px_100px_rgba(0,0,0,0.6)] border-8 border-[#fec021] flex flex-col overflow-hidden\">\r\n <div className=\"p-10 md:p-14 bg-[#fec021] text-[#0d3a16] flex justify-between items-start shrink-0\">\r\n <div className=\"max-w-[85%]\">\r\n <h2 className=\"text-5xl md:text-7xl font-zuume leading-[0.7] uppercase italic mb-3\">Pilihan Topping<\/h2>\r\n <p className=\"font-marker text-xl md:text-2xl opacity-80\">Bikin pesananmu makin ramai!<\/p>\r\n <\/div>\r\n <button onClick={() => setToppingModal(null)} className=\"p-5 bg-black\/5 rounded-full hover:bg-black\/10 transition-colors shadow-inner\"><i data-lucide=\"x\" className=\"w-10 h-10\"><\/i><\/button>\r\n <\/div>\r\n <div className=\"p-10 md:p-14 overflow-y-auto custom-scrollbar flex-grow bg-white\">\r\n <div className=\"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8\">\r\n {TOPPINGS.map(top => {\r\n const selected = selectedToppings.find(t => t.id === top.id);\r\n return (\r\n <button key={top.id} onClick={() => {\r\n setSelectedToppings(prev => selected ? prev.filter(t => t.id !== top.id) : [...prev, top]);\r\n }} className={`relative p-6 rounded-[3rem] border-4 transition-all flex flex-col items-center ${selected ? 'border-[#c52416] bg-red-50 scale-105 shadow-2xl' : 'border-neutral-100 hover:border-[#fec021] bg-neutral-50'}`}>\r\n <div className=\"w-24 h-24 bg-gradient-to-br from-[#0d3a16] to-[#1b5e20] rounded-[2rem] p-2 mb-4 shadow-xl\"><img src={top.img} className=\"w-full h-full object-contain\" \/><\/div>\r\n <span className=\"font-zuume text-lg uppercase text-center font-bold px-1 leading-tight h-10 flex items-center\">{top.name}<\/span>\r\n <div className={`mt-3 font-bold px-5 py-1.5 rounded-full text-xs ${top.price === 0 ? 'bg-emerald-100 text-emerald-800' : 'bg-red-100 text-red-800'}`}>{top.price === 0 ? 'FREE' : `+Rp${top.price\/1000}K`}<\/div>\r\n {selected && <div className=\"absolute top-3 right-3 bg-[#c52416] text-white p-2 rounded-full shadow-2xl\"><i data-lucide=\"check\" className=\"w-4 h-4 stroke-[5px]\"><\/i><\/div>}\r\n <\/button>\r\n );\r\n })}\r\n <\/div>\r\n <\/div>\r\n <div className=\"p-10 md:p-14 bg-neutral-100 border-t-4 border-[#fec021]\/20 flex flex-col md:flex-row items-center justify-between gap-10 shrink-0\">\r\n <div className=\"text-center md:text-left\">\r\n <p className=\"text-neutral-400 text-sm uppercase font-bold tracking-[0.3em] mb-2\">Estimasi Mie + Topping<\/p>\r\n <p className=\"text-6xl md:text-7xl font-zuume text-[#0d3a16] leading-none\">Rp {(toppingModal.price + selectedToppings.reduce((a, b) => a + b.price, 0)).toLocaleString()}<\/p>\r\n <\/div>\r\n <button onClick={finalizeMieOrder} className=\"w-full md:w-auto bg-[#0d3a16] text-white font-zuume text-4xl px-20 py-6 rounded-[2.5rem] shadow-2xl hover:bg-[#1b5e20] border-b-[10px] border-black active:translate-y-2 transition-all\">YUK, PESAN! \ud83c\udf5c<\/button>\r\n <\/div>\r\n <\/motion.div>\r\n <\/div>\r\n )}\r\n\r\n {\/* SIDEBAR KERANJANG *\/}\r\n {isCartOpen && (\r\n <div className=\"cart-drawer-container fixed inset-0 z-[2000000]\">\r\n <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className=\"absolute inset-0 bg-[#0d3a16]\/80 backdrop-blur-xl\" onClick={() => setIsCartOpen(false)} \/>\r\n <motion.div initial={{ x: '100%' }} animate={{ x: 0 }} exit={{ x: '100%' }} transition={{ type: 'spring', damping: 25 }} className=\"cart-drawer absolute right-0 top-0 bg-white h-full shadow-[0_0_100px_rgba(0,0,0,0.5)] flex flex-col\">\r\n <div className=\"p-10 bg-[#0d3a16] text-white flex justify-between items-center border-b-[10px] border-[#fec021]\">\r\n <div className=\"flex items-center gap-5 text-[#fec021]\"><i data-lucide=\"shopping-bag\" className=\"w-10 h-10\"><\/i><h2 className=\"text-4xl md:text-5xl font-zuume italic uppercase tracking-tighter leading-none\">Checkout<\/h2><\/div>\r\n <button onClick={() => setIsCartOpen(false)} className=\"p-3 border-2 border-white\/20 rounded-full hover:bg-white\/10\"><i data-lucide=\"x\" className=\"w-7 h-7\"><\/i><\/button>\r\n <\/div>\r\n <div className=\"flex-grow overflow-y-auto p-10 space-y-12 custom-scrollbar\">\r\n {cart.length === 0 ? <div className=\"text-center py-24 opacity-10\"><i data-lucide=\"shopping-cart\" className=\"w-32 h-32 mx-auto mb-8\"><\/i><p className=\"font-zuume text-4xl uppercase tracking-[0.2em]\">KOSONG<\/p><\/div> : \r\n cart.map(item => (\r\n <div key={item.cartId} className=\"flex gap-8 group border-b border-neutral-100 pb-8\">\r\n <div className=\"w-28 h-28 rounded-[2rem] bg-gradient-to-tr from-[#0d3a16] to-[#1b5e20] p-2 shadow-xl flex-shrink-0\"><img src={item.img} className=\"w-full h-full object-contain\" \/><\/div>\r\n <div className=\"flex-grow\">\r\n <div className=\"flex justify-between items-start mb-2\"><h4 className=\"font-zuume text-3xl text-[#0d3a16] leading-none\">{item.name}<\/h4><button onClick={() => setCart(cart.filter(i => i.cartId !== item.cartId))} className=\"text-neutral-300 hover:text-red-600 transition-colors\"><i data-lucide=\"trash-2\" className=\"w-6 h-6\"><\/i><\/button><\/div>\r\n {item.selectedToppings?.length > 0 && <div className=\"bg-emerald-50 px-4 py-2 rounded-2xl border border-emerald-100 mt-3 mb-3 shadow-inner\"><p className=\"text-xs text-[#0d3a16] font-bold uppercase italic tracking-tight opacity-80\">+ {item.selectedToppings.map(t => t.name).join(', ')}<\/p><\/div>}\r\n <p className=\"font-zuume text-[#c52416] text-3xl\">Rp {item.totalPrice.toLocaleString()}<\/p>\r\n <\/div>\r\n <\/div>\r\n ))\r\n }\r\n <\/div>\r\n <div className=\"p-10 bg-neutral-50 border-t-4 border-[#0d3a16]\/5\">\r\n <div className=\"flex justify-between items-end mb-12\"><span className=\"font-zuume text-neutral-400 text-4xl italic leading-none\">TOTAL<\/span><span className=\"text-6xl md:text-7xl font-zuume text-[#0d3a16] border-b-[12px] border-[#fec021] leading-none pb-2\">Rp {cart.reduce((a, b) => a + b.totalPrice, 0).toLocaleString()}<\/span><\/div>\r\n <button onClick={sendToWA} className=\"w-full bg-[#25D366] text-white py-7 rounded-[2.5rem] flex items-center justify-center gap-6 font-zuume text-4xl md:text-5xl shadow-2xl border-b-[10px] border-[#15803d] hover:bg-[#1da851] active:translate-y-2 transition-all\">\r\n <i data-lucide=\"message-circle\" className=\"w-12 h-12\"><\/i> PESAN VIA WA\r\n <\/button>\r\n <\/div>\r\n <\/motion.div>\r\n <\/div>\r\n )}\r\n <\/AnimatePresence>\r\n\r\n {\/* Footer - Branding Terakhir (Revisi Ukuran Logo & Frame) *\/}\r\n <footer className=\"bg-[#0d3a16] text-white pt-24 pb-12 px-8 text-center border-t-[10px] border-[#fec021]\">\r\n <div className=\"flex justify-center mb-16\">\r\n <img src={LOGO_URL} className=\"main-logo h-24 md:h-36 object-contain opacity-95\" \/>\r\n <\/div>\r\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-10 font-zuume text-2xl tracking-[0.3em] max-w-6xl mx-auto mb-20 uppercase italic\">\r\n <div className=\"p-10 border-2 border-white\/10 rounded-[4rem] bg-white\/5 shadow-2xl backdrop-blur-sm\">KAMPUS UNG<\/div>\r\n <div className=\"p-10 border-2 border-white\/10 rounded-[4rem] bg-white\/5 shadow-2xl text-yellow-400\">10:00 - 22:00 WITA<\/div>\r\n <div className=\"p-10 border-2 border-white\/10 rounded-[4rem] bg-white\/5 shadow-2xl\">@TISHA NOMS<\/div>\r\n <\/div>\r\n <div className=\"h-1.5 w-48 bg-[#fec021] mx-auto mb-10 rounded-full opacity-30\"><\/div>\r\n <p className=\"opacity-40 text-xs md:text-sm uppercase tracking-[0.8em] font-bold\">\u00a9 2026 TISHA-NOM'S GORONTALO. PREMIUM SNACKS & NOODLES.<\/p>\r\n <\/footer>\r\n <\/div>\r\n );\r\n }\r\n\r\n const root = ReactDOM.createRoot(document.getElementById('tishanoms-root'));\r\n root.render(<App \/>);\r\n\r\n \/\/ Inisialisasi ikon Lucide\r\n setTimeout(() => { if (window.lucide) lucide.createIcons(); }, 1000);\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Tisha-Nom’s E-Commerce<\/p>\n","protected":false},"author":1,"featured_media":41,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/tishanoms.gtlo.web.id\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tishanoms.gtlo.web.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tishanoms.gtlo.web.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tishanoms.gtlo.web.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tishanoms.gtlo.web.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":11,"href":"https:\/\/tishanoms.gtlo.web.id\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":52,"href":"https:\/\/tishanoms.gtlo.web.id\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/52"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tishanoms.gtlo.web.id\/index.php?rest_route=\/wp\/v2\/media\/41"}],"wp:attachment":[{"href":"https:\/\/tishanoms.gtlo.web.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}