BizBlueprint - Strategic Finance Playbook<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=League+Spartan:wght@400;700;900&family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\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@6\/babel.min.js\"><\/script>\r\n \r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n primary: '#ff6002',\r\n brandBg: '#032a60',\r\n menuItem: '#26334e',\r\n },\r\n fontFamily: {\r\n heading: ['League Spartan', 'sans-serif'],\r\n body: ['Poppins', 'sans-serif'],\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n body, html {\r\n margin: 0;\r\n padding: 0;\r\n background-color: #032a60;\r\n overflow-x: hidden;\r\n }\r\n #bizblueprint-wrapper {\r\n font-family: 'Poppins', sans-serif;\r\n background-color: #032a60;\r\n color: #ffffff;\r\n line-height: 1.5;\r\n }\r\n #bizblueprint-wrapper .font-heading {\r\n font-family: 'League Spartan', sans-serif;\r\n }\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n .animate-fade-in {\r\n animation: fadeIn 0.8s ease-out forwards;\r\n }\r\n .selection-primary::selection {\r\n background-color: #ff6002;\r\n color: #ffffff;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"bizblueprint-root\"><\/div>\r\n\r\n <script type=\"text\/babel\">\r\n const { useState } = React;\r\n\r\n const Icons = {\r\n ChevronRight: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"m9 18 6-6-6-6\"\/><\/svg>,\r\n TrendingDown: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><polyline points=\"22 17 13.5 8.5 8.5 13.5 2 7\"\/><path d=\"M16 17h6v-6\"\/><\/svg>,\r\n Search: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.3-4.3\"\/><\/svg>,\r\n Users: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>,\r\n Zap: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M4 14.71 12 2v7.29h8L12 22v-7.29H4z\"\/><\/svg>,\r\n Target: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><circle cx=\"12\" cy=\"12\" r=\"6\"\/><circle cx=\"12\" cy=\"12\" r=\"2\"\/><\/svg>,\r\n CheckCircle2: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>,\r\n XCircle: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m15 9-6 6\"\/><path d=\"m9 9 6 6\"\/><\/svg>,\r\n PieChart: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M21.21 15.89A10 10 0 1 1 8 2.83\"\/><path d=\"M22 12A10 10 0 0 0 12 2v10z\"\/><\/svg>,\r\n LineChart: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M3 3v18h18\"\/><path d=\"m19 9-5 5-4-4-3 3\"\/><\/svg>,\r\n Lock: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" ry=\"2\"\/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/><\/svg>,\r\n ShieldCheck: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.5 3.8 17 5 19 5a1 1 0 0 1 1 1z\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>,\r\n Quote: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"opacity-20\"><path d=\"M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017C11.4647 12 11.017 11.5523 11.017 11V6C11.017 4.89543 11.9124 4 13.017 4H19.017C21.2261 4 23.017 5.79086 23.017 8V15C23.017 18.3137 20.3307 21 17.017 21H14.017ZM3.0166 21L3.0166 18C3.0166 16.8954 3.91203 16 5.0166 16H8.0166C8.56889 16 9.0166 15.5523 9.0166 15V9C9.0166 8.44772 8.56889 8 8.0166 8H4.0166C3.46432 8 3.0166 8.44772 3.0166 9V11C3.0166 11.5523 2.56889 12 2.0166 12H1.0166C0.464315 12 -0.0166016 11.5523 -0.0166016 11V6C-0.0166016 4.89543 0.878829 4 1.9834 4H8.0166C10.2257 4 12.0166 5.79086 12.0166 8V15C12.0166 18.3137 9.3303 21 6.0166 21H3.0166Z\"\/><\/svg>,\r\n ArrowRight: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>,\r\n X: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M18 6 6 18\"\/><path d=\"m6 6 12 12\"\/><\/svg>,\r\n MessageSquare: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\/><\/svg>,\r\n Activity: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M22 12h-4l-3 9L9 3l-3 9H2\"\/><\/svg>\r\n };\r\n\r\n const CONTENT = {\r\n hero: {\r\n title: \"From Financial Chaos to Strategic Control\",\r\n subtitle: \"Master your financial navigation with the Strategic Finance Playbook\",\r\n body: \"BizBlueprint helps Founders and CEOs transform finance from a 'recorder' of history into a strategic operating system for market dominance\"\r\n },\r\n attention: {\r\n title: \"WARNING\",\r\n subtitle: \"Most companies fail not due to a lack of sales, but due to 'Financial Blindness' in strategic decision-making\",\r\n painPoints: [\r\n \"Revenue sky-rockets, yet cash flow is always tight\",\r\n \"Reports exist, but lack direction for business strategy\",\r\n \"Big decisions are driven by urgency, not numbers\",\r\n \"Finance team acts as recorders, not advisors\"\r\n ],\r\n footer: \"If this sounds like your business, you need more than just traditional bookkeeping\"\r\n },\r\n interest: {\r\n title: \"What is the Strategic Finance Playbook?\",\r\n body1: \"A consulting framework by BizBlueprint designed to align Business Strategy, Finance, and Execution into one measurable system\",\r\n body2: \"This isn't just accounting It is a leadership tool for CEOs to command profitability and ROI with absolute certainty\",\r\n questions: [\r\n \"Where does your true profit come from?\",\r\n \"Which areas are silently draining your cash?\",\r\n \"How safe is your business to scale up?\",\r\n \"What decisions must be made right now?\"\r\n ]\r\n },\r\n importance: {\r\n title: \"Control Before Scale\",\r\n subtitle: \"Why intuitive, instinct-based management is no longer enough to survive in today's complexity\",\r\n points: [\r\n { title: \"Resilient Growth\", desc: \"Ensure your financial foundation is rock-solid before pushing for aggressive expansion\" },\r\n { title: \"Cash Protection\", desc: \"Prevent hidden leakages and ensure every investment has a measurable ROI\" },\r\n { title: \"Stakeholder Trust\", desc: \"Build world-class credibility with investors and banks through transparent systems\" },\r\n { title: \"Decision Velocity\", desc: \"Eliminate opinion-based debates and replace them with data-driven facts\" }\r\n ]\r\n },\r\n comparison: {\r\n title: \"Transform Your Business Command\",\r\n before: {\r\n label: \"Traditional Finance (The Recorder)\",\r\n items: [\r\n \"Decisions driven by urgency and gut feeling\",\r\n \"Bookkeeping focused on historical reports\",\r\n \"Growing revenue but no clear cash visibility\",\r\n \"Finance team acts as a recorder not an advisor\"\r\n ]\r\n },\r\n after: {\r\n label: \"Strategic Finance (The Advisor)\",\r\n items: [\r\n \"Forward-looking insight for strategic navigation\",\r\n \"Scenario simulation to project decision impacts\",\r\n \"Financial guardrails to ensure safe business growth\",\r\n \"Intentional growth funding and cash protection\"\r\n ]\r\n }\r\n },\r\n build: {\r\n title: \"WHAT WE BUILD\",\r\n items: [\r\n { title: \"1. Financial Clarity & Visibility\", points: [\"Architecting a comprehensive Management P&L and Cash Flow\", \"structure that provides 360-degree visibility into your real business health\"] },\r\n { title: \"2. Strategic Insight\", points: [\"Margin & cost driver analysis\", \"Break-even & scenario modeling\"] },\r\n { title: \"3. Control & Guardrails\", points: [\"Budgeting & rolling forecast\", \"KPI dashboard for the Board\"] },\r\n { title: \"4. CFO-Level Thinking\", points: [\"Finance as a CEO's strategic partner\", \"Data-driven decision framework\"] }\r\n ]\r\n },\r\n testimonial: {\r\n sectionName: \"Voices of Transformation\",\r\n image: \"https:\/\/bizblueprint.id\/fotobuanika.jpeg\",\r\n name: \"Anika Ratu\",\r\n title: \"Head of Accounting | Wong Hang Bersaudara\",\r\n quote: \"After receiving guidance from BizBlueprint, we have developed a completely different mindset, especially regarding financial reports The financial reports we create must be able to tell a story\u2014not just data and numbers Finance people must be able to generate insights for the owner, providing solutions, assistance, and recommendations to help the owner in decision-making\"\r\n },\r\n desire: {\r\n title: \"Imagine Your Business with Full Financial Mastery\",\r\n points: [\"Decisions based on facts, not ego\", \"Expansion without hidden cash risks\", \"No more financial surprises\", \"Numbers trusted by all stakeholders\"],\r\n footer: \"This is the gold standard for scalable businesses\"\r\n },\r\n action: {\r\n title: \"TAKE YOUR FIRST STEP\",\r\n consult: { label: \"STRATEGIC CONSULTATION\", cta: \"Book a Consultation\", desc: \"Discuss your specific business challenges directly with our senior consultants\" },\r\n diagnostic: { label: \"FINANCE HEALTH CHECK DIAGNOSTIC\", cta: \"Start Health Check\", desc: \"A quick assessment to uncover your financial health and scale-up readiness\", points: [\"Financial Health Score\", \"Cash & Margin Leakage\", \"Scale-up Readiness\"] }\r\n }\r\n };\r\n\r\n const App = () => {\r\n const [isModalOpen, setIsModalOpen] = useState(false);\r\n const [formData, setFormData] = useState({ name: '', businessName: '' });\r\n\r\n const handleConsultSubmit = (e) => {\r\n e.preventDefault();\r\n const phone = \"6285559339377\";\r\n const text = `Hello BizBlueprint, I am interested in the *Strategic Finance Playbook*\\n\\n*Name:* ${formData.name}\\n*Company:* ${formData.businessName}`;\r\n window.open(`https:\/\/wa.me\/${phone}?text=${encodeURIComponent(text)}`, '_blank');\r\n setIsModalOpen(false);\r\n setFormData({ name: '', businessName: '' });\r\n };\r\n\r\n return (\r\n <div id=\"bizblueprint-wrapper\" className=\"selection-primary font-body overflow-x-hidden min-h-screen\">\r\n {\/* HERO *\/}\r\n <section className=\"relative pt-20 pb-16 md:pt-40 md:pb-32 px-6 overflow-hidden\">\r\n <div className=\"absolute top-0 right-0 w-[300px] h-[300px] md:w-[500px] md:h-[500px] bg-primary\/10 rounded-full blur-[80px] md:blur-[120px] opacity-50\"><\/div>\r\n <div className=\"max-w-5xl mx-auto text-center relative z-10\">\r\n <div className=\"inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white\/5 border border-white\/10 mb-8 animate-fade-in\">\r\n <span className=\"w-2 h-2 rounded-full bg-primary animate-pulse\"><\/span>\r\n <span className=\"text-xs font-bold tracking-[0.2em] uppercase opacity-80\">BizBlueprint Strategic Finance<\/span>\r\n <\/div>\r\n <h1 className=\"font-heading text-3xl md:text-8xl font-bold leading-tight mb-8 tracking-tighter\">\r\n Stop Running Your Business <span className=\"text-primary italic block md:inline\">on Instinct<\/span>\r\n <\/h1>\r\n <p className=\"text-lg md:text-3xl text-gray-200 font-light mb-12 max-w-4xl mx-auto leading-relaxed\">\r\n {CONTENT.hero.subtitle}\r\n <\/p>\r\n <button \r\n onClick={() => setIsModalOpen(true)}\r\n className=\"w-full max-w-[280px] md:max-w-md bg-primary hover:bg-primary\/90 text-white px-4 py-4 md:px-10 md:py-6 rounded-xl font-bold text-base md:text-xl shadow-[0_15px_40px_rgba(255,96,2,0.3)] transition-all active:scale-95 flex items-center justify-center gap-3 mx-auto\"\r\n >\r\n Get Control Now <Icons.ChevronRight \/>\r\n <\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* ATTENTION *\/}\r\n <section className=\"py-20 md:py-24 bg-[#021d42] px-6 border-y border-white\/5\">\r\n <div className=\"max-w-5xl mx-auto grid lg:grid-cols-12 gap-12 items-center\">\r\n <div className=\"lg:col-span-5 text-center lg:text-left\">\r\n <h2 className=\"font-heading text-3xl md:text-6xl font-bold mb-6 leading-tight text-white\">Growth Without Control is a Trap<\/h2>\r\n <p className=\"text-base md:text-lg text-gray-400 mb-8\">{CONTENT.attention.subtitle}<\/p>\r\n <div className=\"p-6 bg-red-500\/5 border-l-4 border-red-500 rounded-r-xl\">\r\n <p className=\"text-lg md:text-xl font-medium text-red-200 italic\">\"\ud83d\udc49 {CONTENT.attention.footer}\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <div className=\"lg:col-span-7 grid md:grid-cols-2 gap-4\">\r\n {CONTENT.attention.painPoints.map((p, i) => (\r\n <div key={i} className=\"bg-brandBg border border-white\/10 p-6 rounded-2xl group hover:border-red-500\/30 transition-all\">\r\n <div className=\"w-10 h-10 md:w-12 md:h-12 bg-red-500\/10 rounded-lg flex items-center justify-center mb-4 text-red-400\">\r\n {i === 0 && <Icons.TrendingDown \/>}\r\n {i === 1 && <Icons.Search \/>}\r\n {i === 2 && <Icons.Users \/>}\r\n {i === 3 && <Icons.Zap \/>}\r\n <\/div>\r\n <p className=\"text-base md:text-lg font-semibold leading-snug\">{p}<\/p>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* INTEREST *\/}\r\n <section className=\"py-20 md:py-32 px-6 relative overflow-hidden\">\r\n <div className=\"max-w-6xl mx-auto\">\r\n <div className=\"text-center mb-16 md:mb-20\">\r\n <h2 className=\"font-heading text-3xl md:text-6xl font-bold mb-6 leading-tight\">{CONTENT.interest.title}<\/h2>\r\n <p className=\"text-lg md:text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed\">{CONTENT.interest.body1}<\/p>\r\n <\/div>\r\n <div className=\"grid lg:grid-cols-3 gap-8\">\r\n <div className=\"lg:col-span-2 space-y-4\">\r\n <div className=\"grid md:grid-cols-2 gap-4\">\r\n {CONTENT.interest.questions.map((q, i) => (\r\n <div key={i} className=\"bg-menuItem\/40 backdrop-blur-sm p-6 md:p-8 rounded-3xl border border-white\/5 flex flex-col gap-4\">\r\n <div className=\"w-10 h-10 bg-primary\/20 rounded-full flex items-center justify-center text-primary font-bold\">0{i+1}<\/div>\r\n <p className=\"text-lg md:text-xl font-bold leading-tight\">{q}<\/p>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <div className=\"bg-primary p-8 md:p-10 rounded-3xl text-white\">\r\n <h3 className=\"font-heading text-2xl md:text-3xl font-bold mb-4\">More Than Just Accounting<\/h3>\r\n <p className=\"text-lg md:text-xl opacity-90 leading-relaxed\">{CONTENT.interest.body2}<\/p>\r\n <\/div>\r\n <\/div>\r\n <div className=\"bg-white text-brandBg p-8 md:p-10 rounded-3xl flex flex-col justify-between shadow-2xl\">\r\n <div>\r\n <div className=\"text-primary mb-8 w-12 h-12\"><Icons.Target \/><\/div>\r\n <h3 className=\"font-heading text-3xl md:text-4xl font-bold mb-6\">The CEO's Operating System<\/h3>\r\n <p className=\"text-base md:text-lg opacity-80 mb-8\">We don't just tidy up your numbers; we build the framework for market dominance and cash sustainability<\/p>\r\n <\/div>\r\n <ul className=\"space-y-4\">\r\n {['Strategic Alignment', 'Execution Focus', 'Measurable Results'].map((item, i) => (\r\n <li key={i} className=\"flex items-center gap-3 font-bold uppercase tracking-wider text-xs\">\r\n <span className=\"text-primary w-5 h-5\"><Icons.CheckCircle2 \/><\/span> {item}\r\n <\/li>\r\n ))}\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* IMPORTANCE *\/}\r\n <section className=\"py-20 md:py-32 px-6 bg-brandBg relative overflow-hidden\">\r\n <div className=\"max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 md:gap-20 items-center\">\r\n <div className=\"order-2 lg:order-1 relative group\">\r\n <div className=\"absolute inset-0 bg-primary\/20 rounded-[3rem] blur-2xl transition-all duration-700\"><\/div>\r\n <div className=\"relative rounded-[3rem] overflow-hidden border border-white\/10 shadow-2xl\">\r\n <img decoding=\"async\" src=\"https:\/\/bizblueprint.id\/Screenshot%202026-01-22%20165805.png\" alt=\"BizBlueprint Consulting\" className=\"w-full h-auto object-cover\" \/>\r\n <\/div>\r\n <\/div>\r\n <div className=\"order-1 lg:order-2\">\r\n <h2 className=\"font-heading text-3xl md:text-7xl font-bold mb-6 tracking-tighter\">{CONTENT.importance.title}<\/h2>\r\n <div className=\"w-20 h-1.5 bg-primary mb-8\"><\/div>\r\n <p className=\"text-xl md:text-2xl text-gray-300 font-light mb-10 leading-relaxed\">{CONTENT.importance.subtitle}<\/p>\r\n <div className=\"grid gap-8\">\r\n {CONTENT.importance.points.map((p, i) => (\r\n <div key={i} className=\"flex gap-6 group\">\r\n <div className=\"shrink-0 w-12 h-12 md:w-14 md:h-14 rounded-2xl bg-white\/5 border border-white\/10 flex items-center justify-center text-primary font-heading font-black text-xl group-hover:bg-primary group-hover:text-white transition-all\">0{i+1}<\/div>\r\n <div>\r\n <h3 className=\"text-xl md:text-2xl font-bold mb-2 group-hover:text-primary transition-colors\">{p.title}<\/h3>\r\n <p className=\"text-base md:text-lg text-gray-400 leading-relaxed\">{p.desc}<\/p>\r\n <\/div>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* COMPARISON *\/}\r\n <section className=\"py-20 md:py-32 px-6 bg-[#021d42]\/50 relative\">\r\n <div className=\"max-w-6xl mx-auto\">\r\n <div className=\"text-center mb-16\">\r\n <h2 className=\"font-heading text-3xl md:text-6xl font-bold mb-6\">Transform Your Business Command<\/h2>\r\n <div className=\"w-24 h-1 bg-primary mx-auto rounded-full\"><\/div>\r\n <\/div>\r\n <div className=\"grid md:grid-cols-2 gap-4 md:gap-0 relative\">\r\n <div className=\"bg-white\/5 border border-white\/10 p-8 md:p-16 rounded-3xl md:rounded-l-[3rem] md:rounded-r-none relative overflow-hidden\">\r\n <div className=\"absolute top-0 left-0 w-1 h-full bg-red-500\/30\"><\/div>\r\n <div className=\"flex items-center gap-3 mb-8 text-red-500\"><div className=\"w-8 h-8\"><Icons.XCircle \/><\/div> <h3 className=\"text-xl md:text-2xl font-bold uppercase\">{CONTENT.comparison.before.label}<\/h3><\/div>\r\n <ul className=\"space-y-6\">\r\n {CONTENT.comparison.before.items.map((item, i) => (\r\n <li key={i} className=\"flex gap-4 text-gray-400 text-sm md:text-base leading-tight\"><div className=\"w-1.5 h-1.5 rounded-full bg-red-500\/50 mt-2 shrink-0\"><\/div> {item}<\/li>\r\n ))}\r\n <\/ul>\r\n <\/div>\r\n <div className=\"bg-white\/5 border border-white\/10 p-8 md:p-16 rounded-3xl md:rounded-r-[3rem] md:rounded-l-none relative overflow-hidden shadow-2xl\">\r\n <div className=\"absolute top-0 right-0 w-1 h-full bg-primary\/30\"><\/div>\r\n <div className=\"flex items-center gap-3 mb-8 text-primary\"><div className=\"w-8 h-8\"><Icons.CheckCircle2 \/><\/div> <h3 className=\"text-xl md:text-2xl font-bold uppercase\">{CONTENT.comparison.after.label}<\/h3><\/div>\r\n <ul className=\"space-y-6\">\r\n {CONTENT.comparison.after.items.map((item, i) => (\r\n <li key={i} className=\"flex gap-4 text-white font-bold text-sm md:text-base leading-tight\"><div className=\"w-1.5 h-1.5 rounded-full bg-primary mt-2 shrink-0\"><\/div> {item}<\/li>\r\n ))}\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* WHAT WE BUILD *\/}\r\n <section className=\"py-20 md:py-32 bg-white text-brandBg px-6\">\r\n <div className=\"max-w-6xl mx-auto\">\r\n <h2 className=\"font-heading text-4xl md:text-7xl font-bold mb-16 leading-tight\">WHAT WE BUILD<\/h2>\r\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6\">\r\n {CONTENT.build.items.map((item, i) => (\r\n <div key={i} className=\"bg-brandBg\/5 border border-brandBg\/10 p-6 md:p-8 rounded-[2.5rem] flex flex-col hover:bg-brandBg hover:text-white transition-all duration-500 group\">\r\n <div className=\"w-12 h-12 md:w-14 md:h-14 bg-brandBg text-white rounded-2xl flex items-center justify-center mb-8 group-hover:bg-primary\">\r\n {i === 0 && <Icons.PieChart \/>}\r\n {i === 1 && <Icons.LineChart \/>}\r\n {i === 2 && <Icons.Lock \/>}\r\n {i === 3 && <Icons.ShieldCheck \/>}\r\n <\/div>\r\n <h3 className=\"font-heading text-xl md:text-2xl font-bold mb-6 leading-tight\">{item.title}<\/h3>\r\n <ul className=\"space-y-3 mt-auto\">\r\n {item.points.map((p, pi) => (\r\n <li key={pi} className=\"flex gap-2 text-xs md:text-sm font-medium opacity-80\"><div className=\"w-1.5 h-1.5 rounded-full bg-primary mt-1.5 shrink-0\"><\/div> {p}<\/li>\r\n ))}\r\n <\/ul>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* TESTIMONIAL SECTION *\/}\r\n <section className=\"py-20 md:py-24 bg-[#021d42] px-6 relative overflow-hidden border-y border-white\/5\">\r\n <div className=\"max-w-5xl mx-auto\">\r\n <div className=\"text-center mb-16\">\r\n <h2 className=\"font-heading text-3xl md:text-6xl font-bold mb-4 tracking-tight text-white uppercase\">{CONTENT.testimonial.sectionName}<\/h2>\r\n <div className=\"w-24 h-1.5 bg-primary mx-auto\"><\/div>\r\n <\/div>\r\n <div className=\"bg-white\/5 border border-white\/10 rounded-[2rem] md:rounded-[3rem] p-8 md:p-16 relative shadow-2xl backdrop-blur-sm mx-auto max-w-4xl\">\r\n <div className=\"absolute top-6 right-6 md:top-10 md:right-10 text-primary\">\r\n <Icons.Quote \/>\r\n <\/div>\r\n <div className=\"flex flex-col md:flex-row items-center gap-10 md:gap-16\">\r\n <div className=\"shrink-0 relative\">\r\n <div className=\"absolute inset-0 bg-primary\/30 rounded-full blur-xl scale-110\"><\/div>\r\n <img \r\n src={CONTENT.testimonial.image} \r\n alt={CONTENT.testimonial.name}\r\n className=\"w-40 h-40 md:w-64 md:h-64 rounded-full object-cover border-4 border-primary relative z-10\"\r\n \/>\r\n <\/div>\r\n <div className=\"relative z-10 text-center md:text-left\">\r\n <p className=\"text-base md:text-xl text-gray-200 italic leading-relaxed mb-8\">\r\n \"{CONTENT.testimonial.quote}\"\r\n <\/p>\r\n <div>\r\n <h4 className=\"font-heading text-xl md:text-2xl font-bold text-white uppercase tracking-tight\">{CONTENT.testimonial.name}<\/h4>\r\n <p className=\"text-primary font-medium text-xs md:text-base tracking-widest uppercase\">{CONTENT.testimonial.title}<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* DESIRE *\/}\r\n <section className=\"py-20 md:py-32 px-6 relative overflow-hidden bg-brandBg\">\r\n <div className=\"max-w-4xl mx-auto text-center\">\r\n <h2 className=\"font-heading text-3xl md:text-6xl font-bold mb-16 leading-tight\">{CONTENT.desire.title}<\/h2>\r\n <div className=\"p-1 bg-gradient-to-r from-primary\/50 to-blue-500\/50 rounded-[2rem] md:rounded-[3rem] shadow-2xl\">\r\n <div className=\"bg-[#021a3a] rounded-[1.9rem] md:rounded-[2.8rem] p-8 md:p-16\">\r\n <div className=\"grid md:grid-cols-2 gap-8 text-left\">\r\n {CONTENT.desire.points.map((p, i) => (\r\n <div key={i} className=\"flex gap-4 items-start\">\r\n <span className=\"text-green-400 shrink-0 w-6 h-6\"><Icons.CheckCircle2 \/><\/span>\r\n <p className=\"text-lg md:text-xl font-bold leading-tight\">{p}<\/p>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <div className=\"mt-16 pt-12 border-t border-white\/10\">\r\n <p className=\"text-xl md:text-3xl font-heading font-bold text-primary italic mb-2 leading-tight\">\"{CONTENT.desire.footer}\"<\/p>\r\n <p className=\"text-gray-400 uppercase tracking-widest text-[10px] md:text-xs font-bold\">The BizBlueprint Standard<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* FOOTER ACTION *\/}\r\n <footer id=\"action\" className=\"py-20 md:py-32 px-6 bg-gradient-to-b from-[#021a3a] to-brandBg border-t border-white\/5\">\r\n <div className=\"max-w-6xl mx-auto\">\r\n <div className=\"text-center mb-20\">\r\n <h2 className=\"font-heading text-3xl md:text-7xl font-bold mb-6 leading-tight tracking-tighter text-white uppercase\">{CONTENT.action.title}<\/h2>\r\n <p className=\"text-lg md:text-xl text-gray-400 max-w-2xl mx-auto leading-relaxed\">Don't let your business run without navigation Choose your path to control now<\/p>\r\n <\/div>\r\n <div className=\"grid lg:grid-cols-2 gap-8\">\r\n <div className=\"bg-white\/5 border border-white\/10 p-8 md:p-12 rounded-[2rem] md:rounded-[3rem] flex flex-col hover:border-primary transition-all group\">\r\n <div className=\"w-14 h-14 md:w-16 md:h-16 bg-primary rounded-2xl flex items-center justify-center mb-8\"><Icons.Activity \/><\/div>\r\n <h3 className=\"text-2xl md:text-3xl font-bold mb-4 leading-tight\">{CONTENT.action.consult.label}<\/h3>\r\n <p className=\"text-base md:text-lg text-gray-300 mb-10 leading-relaxed\">{CONTENT.action.consult.desc}<\/p>\r\n <button onClick={() => setIsModalOpen(true)} className=\"w-full bg-primary hover:bg-primary\/90 py-5 md:py-6 rounded-2xl text-lg md:text-xl font-bold uppercase tracking-wide flex items-center justify-center gap-3 mt-auto transition-transform active:scale-95\">{CONTENT.action.consult.cta} <Icons.ArrowRight \/><\/button>\r\n <\/div>\r\n <div className=\"bg-menuItem\/40 border border-white\/10 p-8 md:p-12 rounded-[2rem] md:rounded-[3rem] flex flex-col hover:border-blue-400 transition-all group\">\r\n <div className=\"w-14 h-14 md:w-16 md:h-16 bg-blue-600 rounded-2xl flex items-center justify-center mb-8 text-white\"><Icons.Search \/><\/div>\r\n <h3 className=\"text-2xl md:text-3xl font-bold mb-4 text-blue-400 leading-tight\">{CONTENT.action.diagnostic.label}<\/h3>\r\n <p className=\"text-base md:text-lg text-gray-300 mb-8 leading-relaxed\">{CONTENT.action.diagnostic.desc}<\/p>\r\n <div className=\"space-y-3 mb-10\">\r\n {CONTENT.action.diagnostic.points.map((p, i) => (\r\n <div key={i} className=\"flex gap-3 items-center text-sm md:text-base text-gray-200 font-semibold\"><div className=\"w-5 h-5 text-blue-400\"><Icons.CheckCircle2 \/><\/div> <span>{p}<\/span><\/div>\r\n ))}\r\n <\/div>\r\n <a href=\"https:\/\/bizblueprint.id\/financediagnostic\/\" target=\"_blank\" className=\"w-full bg-blue-600 hover:bg-blue-500 py-5 md:py-6 rounded-2xl text-lg md:text-xl font-bold uppercase tracking-wide flex items-center justify-center gap-3 mt-auto transition-transform active:scale-95\">{CONTENT.action.diagnostic.cta} <Icons.ArrowRight \/><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n {\/* MODAL *\/}\r\n {isModalOpen && (\r\n <div className=\"fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-brandBg\/90 backdrop-blur-md\">\r\n <div className=\"bg-[#021d42] border border-white\/10 w-full max-w-lg rounded-[2rem] p-8 md:p-10 relative overflow-hidden shadow-2xl\">\r\n <button onClick={() => setIsModalOpen(false)} className=\"absolute top-6 right-6 text-gray-400 hover:text-white transition-colors\"><Icons.X \/><\/button>\r\n <div className=\"flex items-center gap-3 mb-6\">\r\n <div className=\"w-10 h-10 bg-primary\/20 rounded-xl flex items-center justify-center text-primary\"><Icons.MessageSquare \/><\/div>\r\n <h3 className=\"font-heading text-xl md:text-2xl font-bold uppercase tracking-tight leading-tight\">Strategic Finance Playbook<\/h3>\r\n <\/div>\r\n <p className=\"text-gray-400 text-sm mb-8\">Please provide your details below so our team can better understand your business challenges<\/p>\r\n <form onSubmit={handleConsultSubmit} className=\"space-y-5\">\r\n <div>\r\n <label className=\"block text-[10px] uppercase font-bold text-primary mb-2 tracking-widest\">Full Name<\/label>\r\n <input required type=\"text\" value={formData.name} onChange={e => setFormData({...formData, name: e.target.value})} placeholder=\"Your Full Name\" className=\"w-full bg-white\/5 border border-white\/10 rounded-xl px-4 py-3 focus:border-primary\/50 text-white outline-none transition-all\" \/>\r\n <\/div>\r\n <div>\r\n <label className=\"block text-[10px] uppercase font-bold text-primary mb-2 tracking-widest\">Company Name<\/label>\r\n <input required type=\"text\" value={formData.businessName} onChange={e => setFormData({...formData, businessName: e.target.value})} placeholder=\"Your Company Name\" className=\"w-full bg-white\/5 border border-white\/10 rounded-xl px-4 py-3 focus:border-primary\/50 text-white outline-none transition-all\" \/>\r\n <\/div>\r\n <button type=\"submit\" className=\"w-full bg-primary hover:bg-primary\/90 py-4 rounded-xl font-bold text-lg shadow-lg flex items-center justify-center gap-3 mt-4 active:scale-95 transition-all\">Connect on WhatsApp <Icons.ArrowRight \/><\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n )}\r\n <\/div>\r\n );\r\n };\r\n\r\n const root = ReactDOM.createRoot(document.getElementById('bizblueprint-root'));\r\n root.render(<App \/>);\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>BizBlueprint – Strategic Finance Playbook<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1117","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bizblueprint.id\/id\/wp-json\/wp\/v2\/pages\/1117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bizblueprint.id\/id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bizblueprint.id\/id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bizblueprint.id\/id\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/bizblueprint.id\/id\/wp-json\/wp\/v2\/comments?post=1117"}],"version-history":[{"count":90,"href":"https:\/\/bizblueprint.id\/id\/wp-json\/wp\/v2\/pages\/1117\/revisions"}],"predecessor-version":[{"id":1311,"href":"https:\/\/bizblueprint.id\/id\/wp-json\/wp\/v2\/pages\/1117\/revisions\/1311"}],"wp:attachment":[{"href":"https:\/\/bizblueprint.id\/id\/wp-json\/wp\/v2\/media?parent=1117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n BizBlueprint - Strategic Finance Playbook<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=League+Spartan:wght@400;700;900&family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\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@6\/babel.min.js\"><\/script>\r\n \r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n primary: '#ff6002',\r\n brandBg: '#032a60',\r\n menuItem: '#26334e',\r\n },\r\n fontFamily: {\r\n heading: ['League Spartan', 'sans-serif'],\r\n body: ['Poppins', 'sans-serif'],\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n body, html {\r\n margin: 0;\r\n padding: 0;\r\n background-color: #032a60;\r\n overflow-x: hidden;\r\n }\r\n #bizblueprint-wrapper {\r\n font-family: 'Poppins', sans-serif;\r\n background-color: #032a60;\r\n color: #ffffff;\r\n line-height: 1.5;\r\n }\r\n #bizblueprint-wrapper .font-heading {\r\n font-family: 'League Spartan', sans-serif;\r\n }\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n .animate-fade-in {\r\n animation: fadeIn 0.8s ease-out forwards;\r\n }\r\n .selection-primary::selection {\r\n background-color: #ff6002;\r\n color: #ffffff;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div id=\"bizblueprint-root\"><\/div>\r\n\r\n <script type=\"text\/babel\">\r\n const { useState } = React;\r\n\r\n const Icons = {\r\n ChevronRight: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"m9 18 6-6-6-6\"\/><\/svg>,\r\n TrendingDown: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><polyline points=\"22 17 13.5 8.5 8.5 13.5 2 7\"\/><path d=\"M16 17h6v-6\"\/><\/svg>,\r\n Search: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.3-4.3\"\/><\/svg>,\r\n Users: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>,\r\n Zap: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M4 14.71 12 2v7.29h8L12 22v-7.29H4z\"\/><\/svg>,\r\n Target: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><circle cx=\"12\" cy=\"12\" r=\"6\"\/><circle cx=\"12\" cy=\"12\" r=\"2\"\/><\/svg>,\r\n CheckCircle2: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>,\r\n XCircle: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m15 9-6 6\"\/><path d=\"m9 9 6 6\"\/><\/svg>,\r\n PieChart: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M21.21 15.89A10 10 0 1 1 8 2.83\"\/><path d=\"M22 12A10 10 0 0 0 12 2v10z\"\/><\/svg>,\r\n LineChart: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M3 3v18h18\"\/><path d=\"m19 9-5 5-4-4-3 3\"\/><\/svg>,\r\n Lock: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" ry=\"2\"\/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/><\/svg>,\r\n ShieldCheck: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.5 3.8 17 5 19 5a1 1 0 0 1 1 1z\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>,\r\n Quote: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"opacity-20\"><path d=\"M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017C11.4647 12 11.017 11.5523 11.017 11V6C11.017 4.89543 11.9124 4 13.017 4H19.017C21.2261 4 23.017 5.79086 23.017 8V15C23.017 18.3137 20.3307 21 17.017 21H14.017ZM3.0166 21L3.0166 18C3.0166 16.8954 3.91203 16 5.0166 16H8.0166C8.56889 16 9.0166 15.5523 9.0166 15V9C9.0166 8.44772 8.56889 8 8.0166 8H4.0166C3.46432 8 3.0166 8.44772 3.0166 9V11C3.0166 11.5523 2.56889 12 2.0166 12H1.0166C0.464315 12 -0.0166016 11.5523 -0.0166016 11V6C-0.0166016 4.89543 0.878829 4 1.9834 4H8.0166C10.2257 4 12.0166 5.79086 12.0166 8V15C12.0166 18.3137 9.3303 21 6.0166 21H3.0166Z\"\/><\/svg>,\r\n ArrowRight: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>,\r\n X: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M18 6 6 18\"\/><path d=\"m6 6 12 12\"\/><\/svg>,\r\n MessageSquare: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\/><\/svg>,\r\n Activity: () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M22 12h-4l-3 9L9 3l-3 9H2\"\/><\/svg>\r\n };\r\n\r\n const CONTENT = {\r\n hero: {\r\n title: \"From Financial Chaos to Strategic Control\",\r\n subtitle: \"Master your financial navigation with the Strategic Finance Playbook\",\r\n body: \"BizBlueprint helps Founders and CEOs transform finance from a 'recorder' of history into a strategic operating system for market dominance\"\r\n },\r\n attention: {\r\n title: \"WARNING\",\r\n subtitle: \"Most companies fail not due to a lack of sales, but due to 'Financial Blindness' in strategic decision-making\",\r\n painPoints: [\r\n \"Revenue sky-rockets, yet cash flow is always tight\",\r\n \"Reports exist, but lack direction for business strategy\",\r\n \"Big decisions are driven by urgency, not numbers\",\r\n \"Finance team acts as recorders, not advisors\"\r\n ],\r\n footer: \"If this sounds like your business, you need more than just traditional bookkeeping\"\r\n },\r\n interest: {\r\n title: \"What is the Strategic Finance Playbook?\",\r\n body1: \"A consulting framework by BizBlueprint designed to align Business Strategy, Finance, and Execution into one measurable system\",\r\n body2: \"This isn't just accounting It is a leadership tool for CEOs to command profitability and ROI with absolute certainty\",\r\n questions: [\r\n \"Where does your true profit come from?\",\r\n \"Which areas are silently draining your cash?\",\r\n \"How safe is your business to scale up?\",\r\n \"What decisions must be made right now?\"\r\n ]\r\n },\r\n importance: {\r\n title: \"Control Before Scale\",\r\n subtitle: \"Why intuitive, instinct-based management is no longer enough to survive in today's complexity\",\r\n points: [\r\n { title: \"Resilient Growth\", desc: \"Ensure your financial foundation is rock-solid before pushing for aggressive expansion\" },\r\n { title: \"Cash Protection\", desc: \"Prevent hidden leakages and ensure every investment has a measurable ROI\" },\r\n { title: \"Stakeholder Trust\", desc: \"Build world-class credibility with investors and banks through transparent systems\" },\r\n { title: \"Decision Velocity\", desc: \"Eliminate opinion-based debates and replace them with data-driven facts\" }\r\n ]\r\n },\r\n comparison: {\r\n title: \"Transform Your Business Command\",\r\n before: {\r\n label: \"Traditional Finance (The Recorder)\",\r\n items: [\r\n \"Decisions driven by urgency and gut feeling\",\r\n \"Bookkeeping focused on historical reports\",\r\n \"Growing revenue but no clear cash visibility\",\r\n \"Finance team acts as a recorder not an advisor\"\r\n ]\r\n },\r\n after: {\r\n label: \"Strategic Finance (The Advisor)\",\r\n items: [\r\n \"Forward-looking insight for strategic navigation\",\r\n \"Scenario simulation to project decision impacts\",\r\n \"Financial guardrails to ensure safe business growth\",\r\n \"Intentional growth funding and cash protection\"\r\n ]\r\n }\r\n },\r\n build: {\r\n title: \"WHAT WE BUILD\",\r\n items: [\r\n { title: \"1. Financial Clarity & Visibility\", points: [\"Architecting a comprehensive Management P&L and Cash Flow\", \"structure that provides 360-degree visibility into your real business health\"] },\r\n { title: \"2. Strategic Insight\", points: [\"Margin & cost driver analysis\", \"Break-even & scenario modeling\"] },\r\n { title: \"3. Control & Guardrails\", points: [\"Budgeting & rolling forecast\", \"KPI dashboard for the Board\"] },\r\n { title: \"4. CFO-Level Thinking\", points: [\"Finance as a CEO's strategic partner\", \"Data-driven decision framework\"] }\r\n ]\r\n },\r\n testimonial: {\r\n sectionName: \"Voices of Transformation\",\r\n image: \"https:\/\/bizblueprint.id\/fotobuanika.jpeg\",\r\n name: \"Anika Ratu\",\r\n title: \"Head of Accounting | Wong Hang Bersaudara\",\r\n quote: \"After receiving guidance from BizBlueprint, we have developed a completely different mindset, especially regarding financial reports The financial reports we create must be able to tell a story\u2014not just data and numbers Finance people must be able to generate insights for the owner, providing solutions, assistance, and recommendations to help the owner in decision-making\"\r\n },\r\n desire: {\r\n title: \"Imagine Your Business with Full Financial Mastery\",\r\n points: [\"Decisions based on facts, not ego\", \"Expansion without hidden cash risks\", \"No more financial surprises\", \"Numbers trusted by all stakeholders\"],\r\n footer: \"This is the gold standard for scalable businesses\"\r\n },\r\n action: {\r\n title: \"TAKE YOUR FIRST STEP\",\r\n consult: { label: \"STRATEGIC CONSULTATION\", cta: \"Book a Consultation\", desc: \"Discuss your specific business challenges directly with our senior consultants\" },\r\n diagnostic: { label: \"FINANCE HEALTH CHECK DIAGNOSTIC\", cta: \"Start Health Check\", desc: \"A quick assessment to uncover your financial health and scale-up readiness\", points: [\"Financial Health Score\", \"Cash & Margin Leakage\", \"Scale-up Readiness\"] }\r\n }\r\n };\r\n\r\n const App = () => {\r\n const [isModalOpen, setIsModalOpen] = useState(false);\r\n const [formData, setFormData] = useState({ name: '', businessName: '' });\r\n\r\n const handleConsultSubmit = (e) => {\r\n e.preventDefault();\r\n const phone = \"6285559339377\";\r\n const text = `Hello BizBlueprint, I am interested in the *Strategic Finance Playbook*\\n\\n*Name:* ${formData.name}\\n*Company:* ${formData.businessName}`;\r\n window.open(`https:\/\/wa.me\/${phone}?text=${encodeURIComponent(text)}`, '_blank');\r\n setIsModalOpen(false);\r\n setFormData({ name: '', businessName: '' });\r\n };\r\n\r\n return (\r\n <div id=\"bizblueprint-wrapper\" className=\"selection-primary font-body overflow-x-hidden min-h-screen\">\r\n {\/* HERO *\/}\r\n <section className=\"relative pt-20 pb-16 md:pt-40 md:pb-32 px-6 overflow-hidden\">\r\n <div className=\"absolute top-0 right-0 w-[300px] h-[300px] md:w-[500px] md:h-[500px] bg-primary\/10 rounded-full blur-[80px] md:blur-[120px] opacity-50\"><\/div>\r\n <div className=\"max-w-5xl mx-auto text-center relative z-10\">\r\n <div className=\"inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white\/5 border border-white\/10 mb-8 animate-fade-in\">\r\n <span className=\"w-2 h-2 rounded-full bg-primary animate-pulse\"><\/span>\r\n <span className=\"text-xs font-bold tracking-[0.2em] uppercase opacity-80\">BizBlueprint Strategic Finance<\/span>\r\n <\/div>\r\n <h1 className=\"font-heading text-3xl md:text-8xl font-bold leading-tight mb-8 tracking-tighter\">\r\n Stop Running Your Business <span className=\"text-primary italic block md:inline\">on Instinct<\/span>\r\n <\/h1>\r\n <p className=\"text-lg md:text-3xl text-gray-200 font-light mb-12 max-w-4xl mx-auto leading-relaxed\">\r\n {CONTENT.hero.subtitle}\r\n <\/p>\r\n <button \r\n onClick={() => setIsModalOpen(true)}\r\n className=\"w-full max-w-[280px] md:max-w-md bg-primary hover:bg-primary\/90 text-white px-4 py-4 md:px-10 md:py-6 rounded-xl font-bold text-base md:text-xl shadow-[0_15px_40px_rgba(255,96,2,0.3)] transition-all active:scale-95 flex items-center justify-center gap-3 mx-auto\"\r\n >\r\n Get Control Now <Icons.ChevronRight \/>\r\n <\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* ATTENTION *\/}\r\n <section className=\"py-20 md:py-24 bg-[#021d42] px-6 border-y border-white\/5\">\r\n <div className=\"max-w-5xl mx-auto grid lg:grid-cols-12 gap-12 items-center\">\r\n <div className=\"lg:col-span-5 text-center lg:text-left\">\r\n <h2 className=\"font-heading text-3xl md:text-6xl font-bold mb-6 leading-tight text-white\">Growth Without Control is a Trap<\/h2>\r\n <p className=\"text-base md:text-lg text-gray-400 mb-8\">{CONTENT.attention.subtitle}<\/p>\r\n <div className=\"p-6 bg-red-500\/5 border-l-4 border-red-500 rounded-r-xl\">\r\n <p className=\"text-lg md:text-xl font-medium text-red-200 italic\">\"\ud83d\udc49 {CONTENT.attention.footer}\"<\/p>\r\n <\/div>\r\n <\/div>\r\n <div className=\"lg:col-span-7 grid md:grid-cols-2 gap-4\">\r\n {CONTENT.attention.painPoints.map((p, i) => (\r\n <div key={i} className=\"bg-brandBg border border-white\/10 p-6 rounded-2xl group hover:border-red-500\/30 transition-all\">\r\n <div className=\"w-10 h-10 md:w-12 md:h-12 bg-red-500\/10 rounded-lg flex items-center justify-center mb-4 text-red-400\">\r\n {i === 0 && <Icons.TrendingDown \/>}\r\n {i === 1 && <Icons.Search \/>}\r\n {i === 2 && <Icons.Users \/>}\r\n {i === 3 && <Icons.Zap \/>}\r\n <\/div>\r\n <p className=\"text-base md:text-lg font-semibold leading-snug\">{p}<\/p>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* INTEREST *\/}\r\n <section className=\"py-20 md:py-32 px-6 relative overflow-hidden\">\r\n <div className=\"max-w-6xl mx-auto\">\r\n <div className=\"text-center mb-16 md:mb-20\">\r\n <h2 className=\"font-heading text-3xl md:text-6xl font-bold mb-6 leading-tight\">{CONTENT.interest.title}<\/h2>\r\n <p className=\"text-lg md:text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed\">{CONTENT.interest.body1}<\/p>\r\n <\/div>\r\n <div className=\"grid lg:grid-cols-3 gap-8\">\r\n <div className=\"lg:col-span-2 space-y-4\">\r\n <div className=\"grid md:grid-cols-2 gap-4\">\r\n {CONTENT.interest.questions.map((q, i) => (\r\n <div key={i} className=\"bg-menuItem\/40 backdrop-blur-sm p-6 md:p-8 rounded-3xl border border-white\/5 flex flex-col gap-4\">\r\n <div className=\"w-10 h-10 bg-primary\/20 rounded-full flex items-center justify-center text-primary font-bold\">0{i+1}<\/div>\r\n <p className=\"text-lg md:text-xl font-bold leading-tight\">{q}<\/p>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <div className=\"bg-primary p-8 md:p-10 rounded-3xl text-white\">\r\n <h3 className=\"font-heading text-2xl md:text-3xl font-bold mb-4\">More Than Just Accounting<\/h3>\r\n <p className=\"text-lg md:text-xl opacity-90 leading-relaxed\">{CONTENT.interest.body2}<\/p>\r\n <\/div>\r\n <\/div>\r\n <div className=\"bg-white text-brandBg p-8 md:p-10 rounded-3xl flex flex-col justify-between shadow-2xl\">\r\n <div>\r\n <div className=\"text-primary mb-8 w-12 h-12\"><Icons.Target \/><\/div>\r\n <h3 className=\"font-heading text-3xl md:text-4xl font-bold mb-6\">The CEO's Operating System<\/h3>\r\n <p className=\"text-base md:text-lg opacity-80 mb-8\">We don't just tidy up your numbers; we build the framework for market dominance and cash sustainability<\/p>\r\n <\/div>\r\n <ul className=\"space-y-4\">\r\n {['Strategic Alignment', 'Execution Focus', 'Measurable Results'].map((item, i) => (\r\n <li key={i} className=\"flex items-center gap-3 font-bold uppercase tracking-wider text-xs\">\r\n <span className=\"text-primary w-5 h-5\"><Icons.CheckCircle2 \/><\/span> {item}\r\n <\/li>\r\n ))}\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* IMPORTANCE *\/}\r\n <section className=\"py-20 md:py-32 px-6 bg-brandBg relative overflow-hidden\">\r\n <div className=\"max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 md:gap-20 items-center\">\r\n <div className=\"order-2 lg:order-1 relative group\">\r\n <div className=\"absolute inset-0 bg-primary\/20 rounded-[3rem] blur-2xl transition-all duration-700\"><\/div>\r\n <div className=\"relative rounded-[3rem] overflow-hidden border border-white\/10 shadow-2xl\">\r\n <img decoding=\"async\" src=\"https:\/\/bizblueprint.id\/Screenshot%202026-01-22%20165805.png\" alt=\"BizBlueprint Consulting\" className=\"w-full h-auto object-cover\" \/>\r\n <\/div>\r\n <\/div>\r\n <div className=\"order-1 lg:order-2\">\r\n <h2 className=\"font-heading text-3xl md:text-7xl font-bold mb-6 tracking-tighter\">{CONTENT.importance.title}<\/h2>\r\n <div className=\"w-20 h-1.5 bg-primary mb-8\"><\/div>\r\n <p className=\"text-xl md:text-2xl text-gray-300 font-light mb-10 leading-relaxed\">{CONTENT.importance.subtitle}<\/p>\r\n <div className=\"grid gap-8\">\r\n {CONTENT.importance.points.map((p, i) => (\r\n <div key={i} className=\"flex gap-6 group\">\r\n <div className=\"shrink-0 w-12 h-12 md:w-14 md:h-14 rounded-2xl bg-white\/5 border border-white\/10 flex items-center justify-center text-primary font-heading font-black text-xl group-hover:bg-primary group-hover:text-white transition-all\">0{i+1}<\/div>\r\n <div>\r\n <h3 className=\"text-xl md:text-2xl font-bold mb-2 group-hover:text-primary transition-colors\">{p.title}<\/h3>\r\n <p className=\"text-base md:text-lg text-gray-400 leading-relaxed\">{p.desc}<\/p>\r\n <\/div>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* COMPARISON *\/}\r\n <section className=\"py-20 md:py-32 px-6 bg-[#021d42]\/50 relative\">\r\n <div className=\"max-w-6xl mx-auto\">\r\n <div className=\"text-center mb-16\">\r\n <h2 className=\"font-heading text-3xl md:text-6xl font-bold mb-6\">Transform Your Business Command<\/h2>\r\n <div className=\"w-24 h-1 bg-primary mx-auto rounded-full\"><\/div>\r\n <\/div>\r\n <div className=\"grid md:grid-cols-2 gap-4 md:gap-0 relative\">\r\n <div className=\"bg-white\/5 border border-white\/10 p-8 md:p-16 rounded-3xl md:rounded-l-[3rem] md:rounded-r-none relative overflow-hidden\">\r\n <div className=\"absolute top-0 left-0 w-1 h-full bg-red-500\/30\"><\/div>\r\n <div className=\"flex items-center gap-3 mb-8 text-red-500\"><div className=\"w-8 h-8\"><Icons.XCircle \/><\/div> <h3 className=\"text-xl md:text-2xl font-bold uppercase\">{CONTENT.comparison.before.label}<\/h3><\/div>\r\n <ul className=\"space-y-6\">\r\n {CONTENT.comparison.before.items.map((item, i) => (\r\n <li key={i} className=\"flex gap-4 text-gray-400 text-sm md:text-base leading-tight\"><div className=\"w-1.5 h-1.5 rounded-full bg-red-500\/50 mt-2 shrink-0\"><\/div> {item}<\/li>\r\n ))}\r\n <\/ul>\r\n <\/div>\r\n <div className=\"bg-white\/5 border border-white\/10 p-8 md:p-16 rounded-3xl md:rounded-r-[3rem] md:rounded-l-none relative overflow-hidden shadow-2xl\">\r\n <div className=\"absolute top-0 right-0 w-1 h-full bg-primary\/30\"><\/div>\r\n <div className=\"flex items-center gap-3 mb-8 text-primary\"><div className=\"w-8 h-8\"><Icons.CheckCircle2 \/><\/div> <h3 className=\"text-xl md:text-2xl font-bold uppercase\">{CONTENT.comparison.after.label}<\/h3><\/div>\r\n <ul className=\"space-y-6\">\r\n {CONTENT.comparison.after.items.map((item, i) => (\r\n <li key={i} className=\"flex gap-4 text-white font-bold text-sm md:text-base leading-tight\"><div className=\"w-1.5 h-1.5 rounded-full bg-primary mt-2 shrink-0\"><\/div> {item}<\/li>\r\n ))}\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* WHAT WE BUILD *\/}\r\n <section className=\"py-20 md:py-32 bg-white text-brandBg px-6\">\r\n <div className=\"max-w-6xl mx-auto\">\r\n <h2 className=\"font-heading text-4xl md:text-7xl font-bold mb-16 leading-tight\">WHAT WE BUILD<\/h2>\r\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6\">\r\n {CONTENT.build.items.map((item, i) => (\r\n <div key={i} className=\"bg-brandBg\/5 border border-brandBg\/10 p-6 md:p-8 rounded-[2.5rem] flex flex-col hover:bg-brandBg hover:text-white transition-all duration-500 group\">\r\n <div className=\"w-12 h-12 md:w-14 md:h-14 bg-brandBg text-white rounded-2xl flex items-center justify-center mb-8 group-hover:bg-primary\">\r\n {i === 0 && <Icons.PieChart \/>}\r\n {i === 1 && <Icons.LineChart \/>}\r\n {i === 2 && <Icons.Lock \/>}\r\n {i === 3 && <Icons.ShieldCheck \/>}\r\n <\/div>\r\n <h3 className=\"font-heading text-xl md:text-2xl font-bold mb-6 leading-tight\">{item.title}<\/h3>\r\n <ul className=\"space-y-3 mt-auto\">\r\n {item.points.map((p, pi) => (\r\n <li key={pi} className=\"flex gap-2 text-xs md:text-sm font-medium opacity-80\"><div className=\"w-1.5 h-1.5 rounded-full bg-primary mt-1.5 shrink-0\"><\/div> {p}<\/li>\r\n ))}\r\n <\/ul>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* TESTIMONIAL SECTION *\/}\r\n <section className=\"py-20 md:py-24 bg-[#021d42] px-6 relative overflow-hidden border-y border-white\/5\">\r\n <div className=\"max-w-5xl mx-auto\">\r\n <div className=\"text-center mb-16\">\r\n <h2 className=\"font-heading text-3xl md:text-6xl font-bold mb-4 tracking-tight text-white uppercase\">{CONTENT.testimonial.sectionName}<\/h2>\r\n <div className=\"w-24 h-1.5 bg-primary mx-auto\"><\/div>\r\n <\/div>\r\n <div className=\"bg-white\/5 border border-white\/10 rounded-[2rem] md:rounded-[3rem] p-8 md:p-16 relative shadow-2xl backdrop-blur-sm mx-auto max-w-4xl\">\r\n <div className=\"absolute top-6 right-6 md:top-10 md:right-10 text-primary\">\r\n <Icons.Quote \/>\r\n <\/div>\r\n <div className=\"flex flex-col md:flex-row items-center gap-10 md:gap-16\">\r\n <div className=\"shrink-0 relative\">\r\n <div className=\"absolute inset-0 bg-primary\/30 rounded-full blur-xl scale-110\"><\/div>\r\n <img \r\n src={CONTENT.testimonial.image} \r\n alt={CONTENT.testimonial.name}\r\n className=\"w-40 h-40 md:w-64 md:h-64 rounded-full object-cover border-4 border-primary relative z-10\"\r\n \/>\r\n <\/div>\r\n <div className=\"relative z-10 text-center md:text-left\">\r\n <p className=\"text-base md:text-xl text-gray-200 italic leading-relaxed mb-8\">\r\n \"{CONTENT.testimonial.quote}\"\r\n <\/p>\r\n <div>\r\n <h4 className=\"font-heading text-xl md:text-2xl font-bold text-white uppercase tracking-tight\">{CONTENT.testimonial.name}<\/h4>\r\n <p className=\"text-primary font-medium text-xs md:text-base tracking-widest uppercase\">{CONTENT.testimonial.title}<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* DESIRE *\/}\r\n <section className=\"py-20 md:py-32 px-6 relative overflow-hidden bg-brandBg\">\r\n <div className=\"max-w-4xl mx-auto text-center\">\r\n <h2 className=\"font-heading text-3xl md:text-6xl font-bold mb-16 leading-tight\">{CONTENT.desire.title}<\/h2>\r\n <div className=\"p-1 bg-gradient-to-r from-primary\/50 to-blue-500\/50 rounded-[2rem] md:rounded-[3rem] shadow-2xl\">\r\n <div className=\"bg-[#021a3a] rounded-[1.9rem] md:rounded-[2.8rem] p-8 md:p-16\">\r\n <div className=\"grid md:grid-cols-2 gap-8 text-left\">\r\n {CONTENT.desire.points.map((p, i) => (\r\n <div key={i} className=\"flex gap-4 items-start\">\r\n <span className=\"text-green-400 shrink-0 w-6 h-6\"><Icons.CheckCircle2 \/><\/span>\r\n <p className=\"text-lg md:text-xl font-bold leading-tight\">{p}<\/p>\r\n <\/div>\r\n ))}\r\n <\/div>\r\n <div className=\"mt-16 pt-12 border-t border-white\/10\">\r\n <p className=\"text-xl md:text-3xl font-heading font-bold text-primary italic mb-2 leading-tight\">\"{CONTENT.desire.footer}\"<\/p>\r\n <p className=\"text-gray-400 uppercase tracking-widest text-[10px] md:text-xs font-bold\">The BizBlueprint Standard<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n {\/* FOOTER ACTION *\/}\r\n <footer id=\"action\" className=\"py-20 md:py-32 px-6 bg-gradient-to-b from-[#021a3a] to-brandBg border-t border-white\/5\">\r\n <div className=\"max-w-6xl mx-auto\">\r\n <div className=\"text-center mb-20\">\r\n <h2 className=\"font-heading text-3xl md:text-7xl font-bold mb-6 leading-tight tracking-tighter text-white uppercase\">{CONTENT.action.title}<\/h2>\r\n <p className=\"text-lg md:text-xl text-gray-400 max-w-2xl mx-auto leading-relaxed\">Don't let your business run without navigation Choose your path to control now<\/p>\r\n <\/div>\r\n <div className=\"grid lg:grid-cols-2 gap-8\">\r\n <div className=\"bg-white\/5 border border-white\/10 p-8 md:p-12 rounded-[2rem] md:rounded-[3rem] flex flex-col hover:border-primary transition-all group\">\r\n <div className=\"w-14 h-14 md:w-16 md:h-16 bg-primary rounded-2xl flex items-center justify-center mb-8\"><Icons.Activity \/><\/div>\r\n <h3 className=\"text-2xl md:text-3xl font-bold mb-4 leading-tight\">{CONTENT.action.consult.label}<\/h3>\r\n <p className=\"text-base md:text-lg text-gray-300 mb-10 leading-relaxed\">{CONTENT.action.consult.desc}<\/p>\r\n <button onClick={() => setIsModalOpen(true)} className=\"w-full bg-primary hover:bg-primary\/90 py-5 md:py-6 rounded-2xl text-lg md:text-xl font-bold uppercase tracking-wide flex items-center justify-center gap-3 mt-auto transition-transform active:scale-95\">{CONTENT.action.consult.cta} <Icons.ArrowRight \/><\/button>\r\n <\/div>\r\n <div className=\"bg-menuItem\/40 border border-white\/10 p-8 md:p-12 rounded-[2rem] md:rounded-[3rem] flex flex-col hover:border-blue-400 transition-all group\">\r\n <div className=\"w-14 h-14 md:w-16 md:h-16 bg-blue-600 rounded-2xl flex items-center justify-center mb-8 text-white\"><Icons.Search \/><\/div>\r\n <h3 className=\"text-2xl md:text-3xl font-bold mb-4 text-blue-400 leading-tight\">{CONTENT.action.diagnostic.label}<\/h3>\r\n <p className=\"text-base md:text-lg text-gray-300 mb-8 leading-relaxed\">{CONTENT.action.diagnostic.desc}<\/p>\r\n <div className=\"space-y-3 mb-10\">\r\n {CONTENT.action.diagnostic.points.map((p, i) => (\r\n <div key={i} className=\"flex gap-3 items-center text-sm md:text-base text-gray-200 font-semibold\"><div className=\"w-5 h-5 text-blue-400\"><Icons.CheckCircle2 \/><\/div> <span>{p}<\/span><\/div>\r\n ))}\r\n <\/div>\r\n <a href=\"https:\/\/bizblueprint.id\/financediagnostic\/\" target=\"_blank\" className=\"w-full bg-blue-600 hover:bg-blue-500 py-5 md:py-6 rounded-2xl text-lg md:text-xl font-bold uppercase tracking-wide flex items-center justify-center gap-3 mt-auto transition-transform active:scale-95\">{CONTENT.action.diagnostic.cta} <Icons.ArrowRight \/><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n {\/* MODAL *\/}\r\n {isModalOpen && (\r\n <div className=\"fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-brandBg\/90 backdrop-blur-md\">\r\n <div className=\"bg-[#021d42] border border-white\/10 w-full max-w-lg rounded-[2rem] p-8 md:p-10 relative overflow-hidden shadow-2xl\">\r\n <button onClick={() => setIsModalOpen(false)} className=\"absolute top-6 right-6 text-gray-400 hover:text-white transition-colors\"><Icons.X \/><\/button>\r\n <div className=\"flex items-center gap-3 mb-6\">\r\n <div className=\"w-10 h-10 bg-primary\/20 rounded-xl flex items-center justify-center text-primary\"><Icons.MessageSquare \/><\/div>\r\n <h3 className=\"font-heading text-xl md:text-2xl font-bold uppercase tracking-tight leading-tight\">Strategic Finance Playbook<\/h3>\r\n <\/div>\r\n <p className=\"text-gray-400 text-sm mb-8\">Please provide your details below so our team can better understand your business challenges<\/p>\r\n <form onSubmit={handleConsultSubmit} className=\"space-y-5\">\r\n <div>\r\n <label className=\"block text-[10px] uppercase font-bold text-primary mb-2 tracking-widest\">Full Name<\/label>\r\n <input required type=\"text\" value={formData.name} onChange={e => setFormData({...formData, name: e.target.value})} placeholder=\"Your Full Name\" className=\"w-full bg-white\/5 border border-white\/10 rounded-xl px-4 py-3 focus:border-primary\/50 text-white outline-none transition-all\" \/>\r\n <\/div>\r\n <div>\r\n <label className=\"block text-[10px] uppercase font-bold text-primary mb-2 tracking-widest\">Company Name<\/label>\r\n <input required type=\"text\" value={formData.businessName} onChange={e => setFormData({...formData, businessName: e.target.value})} placeholder=\"Your Company Name\" className=\"w-full bg-white\/5 border border-white\/10 rounded-xl px-4 py-3 focus:border-primary\/50 text-white outline-none transition-all\" \/>\r\n <\/div>\r\n <button type=\"submit\" className=\"w-full bg-primary hover:bg-primary\/90 py-4 rounded-xl font-bold text-lg shadow-lg flex items-center justify-center gap-3 mt-4 active:scale-95 transition-all\">Connect on WhatsApp <Icons.ArrowRight \/><\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n )}\r\n <\/div>\r\n );\r\n };\r\n\r\n const root = ReactDOM.createRoot(document.getElementById('bizblueprint-root'));\r\n root.render(<App \/>);\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>BizBlueprint – Strategic Finance Playbook<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1117","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bizblueprint.id\/id\/wp-json\/wp\/v2\/pages\/1117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bizblueprint.id\/id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bizblueprint.id\/id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bizblueprint.id\/id\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/bizblueprint.id\/id\/wp-json\/wp\/v2\/comments?post=1117"}],"version-history":[{"count":90,"href":"https:\/\/bizblueprint.id\/id\/wp-json\/wp\/v2\/pages\/1117\/revisions"}],"predecessor-version":[{"id":1311,"href":"https:\/\/bizblueprint.id\/id\/wp-json\/wp\/v2\/pages\/1117\/revisions\/1311"}],"wp:attachment":[{"href":"https:\/\/bizblueprint.id\/id\/wp-json\/wp\/v2\/media?parent=1117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}