{"id":30,"date":"2026-09-17T02:24:39","date_gmt":"2026-09-17T02:24:39","guid":{"rendered":"https:\/\/bonitabucks.com\/?page_id=30"},"modified":"2026-09-17T02:34:04","modified_gmt":"2026-09-17T02:34:04","slug":"30-2","status":"publish","type":"page","link":"https:\/\/bonitabucks.com\/?page_id=30","title":{"rendered":""},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* Hide default header, footer, and page title *\/\nheader.wp-block-template-part, \nfooter.wp-block-template-part, \nh1.entry-title, \n.wp-block-post-title {\n    display: none !important;\n}\n<\/style>\n\n<meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Business Brand &#8211; BonitaBucks<\/title>\n    \n    <!-- Google Fonts -->\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Lato:ital,wght@0,400;0,700;1,400&amp;family=Playfair+Display:ital,wght@0,600;0,700;1,600&amp;display=swap\" rel=\"stylesheet\">\n    \n    <!-- Font Awesome for Icons -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n    <!-- Tailwind CSS -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    colors: {\n                        cream: '#FAF6F0',\n                        brown: '#4A3B32',\n                        blue: '#3170A7',\n                        tan: '#F4E8DC', \/\/ Lighter tan for buttons\/table headers\n                        tanHover: '#E6D5C3'\n                    },\n                    fontFamily: {\n                        serif: ['\"Playfair Display\"', 'serif'],\n                        sans: ['Lato', 'sans-serif'],\n                    },\n                    boxShadow: {\n                        \/\/ Custom offset shadow to mimic the blue tape from the wireframe\n                        'tape': '6px 6px 0px 0px #3170A7',\n                        'tape-sm': '4px 4px 0px 0px #3170A7',\n                    }\n                }\n            }\n        }\n    <\/script>\n    <style>\n        \/* Base styles to ensure consistency *\/\n        body {\n            background-color: #FAF6F0; \/* cream *\/\n            color: #4A3B32; \/* brown *\/\n            -webkit-font-smoothing: antialiased;\n        }\n        \n        \/* Custom scrollbar for data tables on mobile *\/\n        .custom-scrollbar::-webkit-scrollbar {\n            height: 8px;\n        }\n        .custom-scrollbar::-webkit-scrollbar-track {\n            background: #FAF6F0; \n        }\n        .custom-scrollbar::-webkit-scrollbar-thumb {\n            background: #4A3B32; \n            border-radius: 4px;\n        }\n    <\/style>\n\n\n\n    <div class=\"w-full max-w-5xl bg-cream shadow-2xl min-h-screen\">\n        \n        <!-- Header -->\n        <header class=\"flex items-center justify-between px-6 py-4 border-b-2 border-brown bg-white sticky top-0 z-50\">\n            <div class=\"flex items-center gap-2\">\n                <i class=\"fa-solid fa-tree-city text-blue text-2xl\"><\/i>\n                <span class=\"font-serif font-bold text-2xl tracking-wide\">\n                    <span class=\"text-blue\">Bonita<\/span><span class=\"text-brown\">Bucks<\/span>\n                <\/span>\n            <\/div>\n            \n            <div class=\"hidden md:flex flex-1 max-w-md mx-8 relative\">\n                <i class=\"fa-solid fa-magnifying-glass absolute left-4 top-1\/2 transform -translate-y-1\/2 text-gray-400\"><\/i>\n                <input type=\"text\" placeholder=\"Search deals near you\" class=\"w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:border-blue focus:ring-1 focus:ring-blue transition-all bg-cream\/50\">\n            <\/div>\n\n            <div class=\"flex items-center gap-4\">\n                <button class=\"md:hidden text-brown text-xl\"><i class=\"fa-solid fa-magnifying-glass\"><\/i><\/button>\n                <button class=\"text-brown text-xl\"><i class=\"fa-solid fa-cart-shopping\"><\/i><\/button>\n                <button class=\"text-brown text-xl\"><i class=\"fa-regular fa-circle-user\"><\/i><\/button>\n                <button class=\"text-brown text-2xl ml-2\"><i class=\"fa-solid fa-bars\"><\/i><\/button>\n            <\/div>\n        <\/header>\n\n        <main class=\"p-4 md:p-8 space-y-12\">\n            \n            <!-- Hero Section -->\n            <section class=\"relative w-full h-72 md:h-96 rounded-2xl overflow-hidden border-2 border-brown shadow-tape\">\n                <!-- Background Image Placeholder -->\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1554118811-1e0d58224f24?ixlib=rb-4.0.3&amp;auto=format&amp;fit=crop&amp;w=1200&amp;q=80\" alt=\"Cafe Interior\" class=\"absolute inset-0 w-full h-full object-cover\">\n                <!-- Dark Overlay -->\n                <div class=\"absolute inset-0 bg-black\/50\"><\/div>\n                \n                <!-- Inner Content -->\n                <div class=\"absolute inset-0 p-6 md:p-8 flex flex-col justify-between\">\n                    <!-- Brand Logo Square -->\n                    <div class=\"w-24 h-24 md:w-32 md:h-32 bg-white rounded-lg border-2 border-brown flex items-center justify-center p-2 text-center shadow-md\">\n                        <span class=\"font-serif font-bold text-sm md:text-base leading-tight\">Business<br>Brand Logo<\/span>\n                    <\/div>\n                    \n                    <!-- Banner Text -->\n                    <h1 class=\"font-serif text-white text-3xl md:text-5xl lg:text-6xl font-bold tracking-wide drop-shadow-md max-w-2xl\">\n                        BANNER IMAGE <br>\n                        <span class=\"italic font-medium text-2xl md:text-4xl text-cream\">for business Brand<\/span>\n                    <\/h1>\n                <\/div>\n            <\/section>\n\n            <!-- Hot Deals Section -->\n            <section>\n                <div class=\"flex items-center justify-center gap-4 mb-8\">\n                    <div class=\"h-px bg-brown flex-1 max-w-[100px] md:max-w-[200px]\"><\/div>\n                    <h2 class=\"font-serif text-3xl md:text-4xl font-bold uppercase tracking-widest text-center text-brown\">Hot Deals<\/h2>\n                    <div class=\"h-px bg-brown flex-1 max-w-[100px] md:max-w-[200px]\"><\/div>\n                <\/div>\n\n                <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8 px-2\">\n                    <!-- Deal Card 1 -->\n                    <div class=\"bg-white border-2 border-brown rounded-xl p-6 flex flex-col items-center text-center shadow-tape transition-transform hover:-translate-y-1 duration-300\">\n                        <div class=\"w-16 h-16 bg-tan rounded-full flex items-center justify-center border border-brown mb-4\">\n                            <i class=\"fa-solid fa-percent text-2xl text-brown\"><\/i>\n                        <\/div>\n                        <h3 class=\"font-bold text-2xl mb-2\">Deal 1<\/h3>\n                        <p class=\"text-sm text-gray-700 mb-6 flex-grow\">Claim this exclusive offer for your next visit.<\/p>\n                        <button class=\"bg-tan hover:bg-tanHover text-brown font-bold py-2 px-6 rounded-lg border-2 border-brown shadow-[2px_2px_0px_0px_#4A3B32] transition-colors w-full\">\n                            Claim Deal\n                        <\/button>\n                    <\/div>\n\n                    <!-- Deal Card 2 -->\n                    <div class=\"bg-white border-2 border-brown rounded-xl p-6 flex flex-col items-center text-center shadow-tape transition-transform hover:-translate-y-1 duration-300\">\n                        <div class=\"w-16 h-16 bg-tan rounded-full flex items-center justify-center border border-brown mb-4\">\n                            <i class=\"fa-solid fa-tag text-2xl text-brown\"><\/i>\n                        <\/div>\n                        <h3 class=\"font-bold text-2xl mb-2\">Deal 2<\/h3>\n                        <p class=\"text-sm text-gray-700 mb-6 flex-grow\">Enjoy our premium services at a discounted rate.<\/p>\n                        <button class=\"bg-tan hover:bg-tanHover text-brown font-bold py-2 px-6 rounded-lg border-2 border-brown shadow-[2px_2px_0px_0px_#4A3B32] transition-colors w-full\">\n                            Claim Deal\n                        <\/button>\n                    <\/div>\n\n                    <!-- Deal Card 3 -->\n                    <div class=\"bg-white border-2 border-brown rounded-xl p-6 flex flex-col items-center text-center shadow-tape transition-transform hover:-translate-y-1 duration-300\">\n                        <div class=\"w-16 h-16 bg-tan rounded-full flex items-center justify-center border border-brown mb-4\">\n                            <i class=\"fa-solid fa-tags text-2xl text-brown\"><\/i>\n                        <\/div>\n                        <h3 class=\"font-bold text-2xl mb-2\">Deal 3<\/h3>\n                        <p class=\"text-sm text-gray-700 mb-6 flex-grow\">Bring a friend and get a two-for-one special today.<\/p>\n                        <button class=\"bg-tan hover:bg-tanHover text-brown font-bold py-2 px-6 rounded-lg border-2 border-brown shadow-[2px_2px_0px_0px_#4A3B32] transition-colors w-full\">\n                            Claim Deal\n                        <\/button>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- Info Section (About Us & Map) -->\n            <section class=\"grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 mt-12 border-t-2 border-brown pt-12\">\n                \n                <!-- About Us -->\n                <div>\n                    <h2 class=\"font-serif text-3xl md:text-4xl font-bold italic mb-6\">About Us<\/h2>\n                    <div class=\"bg-white border-2 border-brown rounded-xl p-6 shadow-tape h-full\">\n                        <p class=\"mb-4 leading-relaxed\">\n                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                        <\/p>\n                        <p class=\"leading-relaxed\">\n                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.\n                        <\/p>\n                    <\/div>\n                <\/div>\n\n                <!-- Map -->\n                <div class=\"flex flex-col\">\n                    <h2 class=\"font-serif text-3xl md:text-4xl font-bold italic mb-6\">Map<\/h2>\n                    <div class=\"bg-white border-2 border-brown rounded-xl p-4 shadow-tape flex-grow flex flex-col\">\n                        <div class=\"w-full bg-gray-200 rounded-lg border border-brown overflow-hidden relative flex-grow min-h-[200px]\">\n                            <!-- Mock Map Image -->\n                            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1524661135-423995f22d0b?ixlib=rb-4.0.3&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80\" alt=\"Map View\" class=\"absolute inset-0 w-full h-full object-cover opacity-80\">\n                            <!-- Map Pin -->\n                            <div class=\"absolute inset-0 flex items-center justify-center\">\n                                <div class=\"w-12 h-12 bg-brown rounded-full border-2 border-white flex items-center justify-center shadow-lg\">\n                                    <i class=\"fa-solid fa-star text-white text-xl\"><\/i>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"mt-4 text-center font-bold text-lg bg-cream border border-brown rounded-lg py-2\">\n                            123 Bonita Lane, FL 34134\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- Menu Section -->\n            <section class=\"pt-8\">\n                <h2 class=\"font-serif text-4xl md:text-5xl font-bold mb-6 tracking-wide\">MENU<\/h2>\n                \n                <div class=\"w-full overflow-x-auto custom-scrollbar pb-4\">\n                    <table class=\"w-full text-left border-collapse min-w-[700px] bg-white border-2 border-brown shadow-tape-sm\">\n                        <thead>\n                            <tr class=\"bg-tan border-b-2 border-brown text-lg\">\n                                <th class=\"p-4 border-r-2 border-brown font-bold w-1\/4\">Item<\/th>\n                                <th class=\"p-4 border-r-2 border-brown font-bold w-2\/4\">Description<\/th>\n                                <th class=\"p-4 border-r-2 border-brown font-bold text-center\">Price<\/th>\n                                <th class=\"p-4 border-r-2 border-brown font-bold text-center\" title=\"Vegan\"><i class=\"fa-solid fa-leaf text-green-700\"><\/i><\/th>\n                                <th class=\"p-4 border-r-2 border-brown font-bold text-center\" title=\"Gluten Free\"><i class=\"fa-solid fa-wheat-awn-circle-exclamation text-orange-700\"><\/i><\/th>\n                                <th class=\"p-4 border-r-2 border-brown font-bold text-center\" title=\"Spicy\"><i class=\"fa-solid fa-pepper-hot text-red-600\"><\/i><\/th>\n                                <th class=\"p-4 font-bold text-center\">Value<\/th>\n                            <\/tr>\n                        <\/thead>\n                        <tbody>\n                            <tr class=\"border-b border-brown\/50 hover:bg-cream\/50 transition-colors\">\n                                <td class=\"p-4 border-r-2 border-brown font-bold\">Item any 1<\/td>\n                                <td class=\"p-4 border-r-2 border-brown text-sm\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/td>\n                                <td class=\"p-4 border-r-2 border-brown font-bold text-center\">$20<\/td>\n                                <td class=\"p-4 border-r-2 border-brown text-center\"><i class=\"fa-solid fa-check text-green-600\"><\/i><\/td>\n                                <td class=\"p-4 border-r-2 border-brown text-center\"><i class=\"fa-solid fa-check text-green-600\"><\/i><\/td>\n                                <td class=\"p-4 border-r-2 border-brown text-center\"><i class=\"fa-solid fa-check text-green-600\"><\/i><\/td>\n                                <td class=\"p-4 text-center font-bold\">$0<\/td>\n                            <\/tr>\n                            <tr class=\"border-b border-brown\/50 hover:bg-cream\/50 transition-colors bg-tan\/20\">\n                                <td class=\"p-4 border-r-2 border-brown font-bold\">Item any 2<\/td>\n                                <td class=\"p-4 border-r-2 border-brown text-sm\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/td>\n                                <td class=\"p-4 border-r-2 border-brown font-bold text-center\">$40<\/td>\n                                <td class=\"p-4 border-r-2 border-brown text-center\"><i class=\"fa-solid fa-check text-green-600\"><\/i><\/td>\n                                <td class=\"p-4 border-r-2 border-brown text-center\"><i class=\"fa-solid fa-check text-green-600\"><\/i><\/td>\n                                <td class=\"p-4 border-r-2 border-brown text-center\"><i class=\"fa-solid fa-check text-green-600\"><\/i><\/td>\n                                <td class=\"p-4 text-center font-bold\">$0<\/td>\n                            <\/tr>\n                            <tr class=\"border-b border-brown\/50 hover:bg-cream\/50 transition-colors\">\n                                <td class=\"p-4 border-r-2 border-brown font-bold\">Item any 3<\/td>\n                                <td class=\"p-4 border-r-2 border-brown text-sm\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/td>\n                                <td class=\"p-4 border-r-2 border-brown font-bold text-center\">$30<\/td>\n                                <td class=\"p-4 border-r-2 border-brown text-center\"><i class=\"fa-solid fa-check text-green-600\"><\/i><\/td>\n                                <td class=\"p-4 border-r-2 border-brown text-center\"><i class=\"fa-solid fa-check text-green-600\"><\/i><\/td>\n                                <td class=\"p-4 border-r-2 border-brown text-center\"><\/td>\n                                <td class=\"p-4 text-center font-bold\">$0<\/td>\n                            <\/tr>\n                             <tr class=\"hover:bg-cream\/50 transition-colors bg-tan\/20\">\n                                <td class=\"p-4 border-r-2 border-brown font-bold\">Item any 4<\/td>\n                                <td class=\"p-4 border-r-2 border-brown text-sm\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/td>\n                                <td class=\"p-4 border-r-2 border-brown font-bold text-center\">$25<\/td>\n                                <td class=\"p-4 border-r-2 border-brown text-center\"><i class=\"fa-solid fa-check text-green-600\"><\/i><\/td>\n                                <td class=\"p-4 border-r-2 border-brown text-center\"><\/td>\n                                <td class=\"p-4 border-r-2 border-brown text-center\"><\/td>\n                                <td class=\"p-4 text-center font-bold\">$0<\/td>\n                            <\/tr>\n                        <\/tbody>\n                    <\/table>\n                <\/div>\n            <\/section>\n\n        <\/main>\n        \n        <!-- Footer \/ Bottom Blue Bar -->\n        <footer class=\"bg-blue text-white text-center py-4 border-t-4 border-brown mt-12 rounded-b-lg shadow-[0px_-4px_10px_rgba(0,0,0,0.1)]\">\n            <p class=\"font-bold tracking-wider\">bonitabucks.com<\/p>\n        <\/footer>\n\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Business Brand &#8211; BonitaBucks BonitaBucks BusinessBrand Logo BANNER IMAGE for business Brand Hot Deals Deal 1 Claim this exclusive offer for your next visit. Claim Deal Deal 2 Enjoy our premium services at a discounted rate. Claim Deal Deal 3 Bring a friend and get a two-for-one special today. Claim Deal About Us Lorem ipsum [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-30","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bonitabucks.com\/index.php?rest_route=\/wp\/v2\/pages\/30","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bonitabucks.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bonitabucks.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bonitabucks.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bonitabucks.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=30"}],"version-history":[{"count":2,"href":"https:\/\/bonitabucks.com\/index.php?rest_route=\/wp\/v2\/pages\/30\/revisions"}],"predecessor-version":[{"id":34,"href":"https:\/\/bonitabucks.com\/index.php?rest_route=\/wp\/v2\/pages\/30\/revisions\/34"}],"wp:attachment":[{"href":"https:\/\/bonitabucks.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}